Initial

client/src/App.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+</style>

client/src/main.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App.vue'
+import './registerServiceWorker'
+import router from './router'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')

client/src/registerServiceWorker.js

@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    registered () {
+      console.log('Service worker has been registered.')
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
+    updated () {
+      console.log('New content is available; please refresh.')
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error) {
+      console.error('Error during service worker registration:', error)
+    }
+  })
+}

client/src/router/index.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router

client/src/views/Home.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="home">
+    <canvas
+      class="game-canvas"
+      ref="canvas">
+    </canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home',
+  data () {
+    return {
+      player: {
+        x: 0,
+        y: 0,
+        direction: 0,
+        walls: []
+      },
+      mouse: {
+        x: 0,
+        y: 0
+      }
+    }
+  },
+  computed: {
+    canvas () {
+      return this.$refs.canvas
+    },
+    context () {
+      return this.canvas.getContext('2d')
+    }
+  },
+  mounted () {
+    this.canvas.width = window.innerWidth
+    this.canvas.height = window.innerHeight
+    this.context.fillStyle = 'rgb(200, 0, 0)'
+    this.context.fillRect(10, 10, 50, 50)
+
+    this.context.fillStyle = 'rgba(0, 0, 200, 0.5)'
+    this.context.fillRect(30, 30, 50, 50)
+    setInterval(this.render, 1000 / 60)
+  },
+  methods: {
+    render () {
+      this.renderBorders(this.player.x, this.player.y)
+      this.renderPlayer()
+    },
+    renderBorders (x, y) {
+      this.context.strokeStyle = 'black'
+      this.context.lineWidth = 1
+      this.context.strokeRect(this.canvas.width / 2 - x, this.canvas.height / 2 - y, 3000, 3000)
+    },
+    renderPlayer () {
+      this.context.strokeStyle = 'black'
+      this.context.lineWidth = 3
+      this.context.strokeRect(this.player.x - 50, this.player.y - 50, this.player.x + 50, this.player.y + 50)
+    },
+    mouseEvent (event) {
+
+    }
+  }
+}
+</script>