split files

public/Game.js

@@ -1,32 +0,0 @@
-import GameCommon from './../common/GameCommon.js'
-
-export default {
-  setGame: GameCommon.setGame,
-  getRelevantPlayers: GameCommon.getRelevantPlayers,
-  getActivePlayers: GameCommon.getActivePlayers,
-  addPlayer: GameCommon.addPlayer,
-  handleInput: GameCommon.handleInput,
-  getPlayerIdByIndex: GameCommon.getPlayerIdByIndex,
-  getPlayerBgColor: GameCommon.getPlayerBgColor,
-  getPlayerColor: GameCommon.getPlayerColor,
-  getPlayerName: GameCommon.getPlayerName,
-  changePlayer: GameCommon.changePlayer,
-  setPlayer: GameCommon.setPlayer,
-  setTile: GameCommon.setTile,
-  getImageUrl: GameCommon.getImageUrl,
-  setPuzzleData: GameCommon.setPuzzleData,
-  getTableWidth: GameCommon.getTableWidth,
-  getTableHeight: GameCommon.getTableHeight,
-  getPuzzle: GameCommon.getPuzzle,
-  getRng: GameCommon.getRng,
-  getPuzzleWidth: GameCommon.getPuzzleWidth,
-  getPuzzleHeight: GameCommon.getPuzzleHeight,
-  getTilesSortedByZIndex: GameCommon.getTilesSortedByZIndex,
-  getFirstOwnedTile: GameCommon.getFirstOwnedTile,
-  getTileDrawOffset: GameCommon.getTileDrawOffset,
-  getTileDrawSize: GameCommon.getTileDrawSize,
-  getStartTs: GameCommon.getStartTs,
-  getFinishTs: GameCommon.getFinishTs,
-  getFinishedTileCount: GameCommon.getFinishedTileCount,
-  getTileCount: GameCommon.getTileCount,
-}

public/components/GameTeaser.vue.js

@@ -0,0 +1,40 @@
+import Time from './../../common/Time.js'
+
+const GameTeaser = {
+  name: 'game-teaser',
+  props: {
+    game: Object,
+  },
+  template: `
+  <div class="game-teaser" :style="style">
+    <a class="game-info" :href="'/g/' + game.id">
+      <span class="game-info-text">
+        🧩 {{game.tilesFinished}}/{{game.tilesTotal}}<br />
+        👥 {{game.players}}<br />
+        {{time(game.started, game.finished)}}<br />
+      </span>
+    </a>
+    <a v-if="false && game.hasReplay" class="game-replay" :href="'/replay/' + game.id">
+      ↪️ Watch replay
+    </a>
+  </div>`,
+  computed: {
+    style() {
+      const url = this.game.imageUrl.replace('uploads/', 'uploads/r/') + '-375x210.webp'
+      return {
+        'background-image': `url("${url}")`,
+      }
+    },
+  },
+  methods: {
+    time(start, end) {
+      const icon = end ? '🏁' : '⏳'
+      const from = start;
+      const to = end || Time.timestamp()
+      const timeDiffStr = Time.timeDiffStr(from, to)
+      return `${icon} ${timeDiffStr}`
+    },
+  },
+}
+
+export default GameTeaser

public/components/ImageTeaser.vue.js

@@ -0,0 +1,22 @@
+const ImageTeaser = {
+  name: 'image-teaser',
+  props: {
+    image: Object
+  },
+  template: `<div class="imageteaser" :style="style" @click="onClick"></div>`,
+  computed: {
+    style() {
+      const url = this.image.url.replace('uploads/', 'uploads/r/') + '-150x100.webp'
+      return {
+        'background-image': `url("${url}")`,
+      }
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click')
+    },
+  },
+}
+
+export default ImageTeaser

public/components/Upload.vue.js

@@ -0,0 +1,29 @@
+const Upload = {
+  name: 'upload',
+  props: {
+    accept: String,
+    label: String,
+  },
+  template: `
+<label>
+    <input type="file" style="display: none" @change="upload" :accept="accept" />
+    <span class="btn">{{label || 'Upload File'}}</span>
+</label>
+`,
+  methods: {
+    async upload(evt) {
+      const file = evt.target.files[0]
+      if (!file) return;
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      const res = await fetch('/upload', {
+        method: 'post',
+        body: formData,
+      })
+      const j = await res.json()
+      this.$emit('uploaded', j)
+    },
+  }
+}
+
+export default Upload

public/game.js

@@ -6,7 +6,7 @@ import Debug from './Debug.js'
 import Communication from './Communication.js'
 import Util from './../common/Util.js'
 import PuzzleGraphics from './PuzzleGraphics.js'
-import Game from './Game.js'
+import Game from './../common/GameCommon.js'
 import fireworksController from './Fireworks.js'
 import Protocol from '../common/Protocol.js'
 import Time from '../common/Time.js'

public/views/Index.vue.js

@@ -1,91 +1,8 @@
-import GameCommon from '../common/GameCommon.js';
+import GameCommon from './../../common/GameCommon.js'
-import Time from '../common/Time.js'
+import Time from './../../common/Time.js'
-
+import Upload from './../components/Upload.vue.js'
-const Upload = {
+import GameTeaser from './../components/GameTeaser.vue.js'
-  name: 'upload',
+import ImageTeaser from './../components/ImageTeaser.vue.js'
-  props: {
-    accept: String,
-    label: String,
-  },
-  template: `
-<label>
-    <input type="file" style="display: none" @change="upload" :accept="accept" />
-    <span class="btn">{{label || 'Upload File'}}</span>
-</label>
-`,
-  methods: {
-    async upload(evt) {
-      const file = evt.target.files[0]
-      if (!file) return;
-      const formData = new FormData();
-      formData.append('file', file, file.name);
-      const res = await fetch('/upload', {
-        method: 'post',
-        body: formData,
-      })
-      const j = await res.json()
-      this.$emit('uploaded', j)
-    },
-  }
-}
-
-const GameTeaser = {
-  name: 'game-teaser',
-  props: {
-    game: Object,
-  },
-  template: `
-  <div class="game-teaser" :style="style">
-    <a class="game-info" :href="'/g/' + game.id">
-      <span class="game-info-text">
-        🧩 {{game.tilesFinished}}/{{game.tilesTotal}}<br />
-        👥 {{game.players}}<br />
-        {{time(game.started, game.finished)}}<br />
-      </span>
-    </a>
-    <a v-if="false && game.hasReplay" class="game-replay" :href="'/replay/' + game.id">
-      ↪️ Watch replay
-    </a>
-  </div>`,
-  computed: {
-    style() {
-      const url = this.game.imageUrl.replace('uploads/', 'uploads/r/') + '-375x210.webp'
-      return {
-        'background-image': `url("${url}")`,
-      }
-    },
-  },
-  methods: {
-    time(start, end) {
-      const icon = end ? '🏁' : '⏳'
-      const from = start;
-      const to = end || Time.timestamp()
-      const timeDiffStr = Time.timeDiffStr(from, to)
-      return `${icon} ${timeDiffStr}`
-    },
-  },
-}
-
-const ImageTeaser = {
-  name: 'image-teaser',
-  props: {
-    image: Object
-  },
-  template: `<div class="imageteaser" :style="style" @click="onClick"></div>`,
-  computed: {
-    style() {
-      const url = this.image.url.replace('uploads/', 'uploads/r/') + '-150x100.webp'
-      return {
-        'background-image': `url("${url}")`,
-      }
-    },
-  },
-  methods: {
-    onClick() {
-      this.$emit('click')
-    },
-  },
-}
 
 export default {
   components: {

templates/index.html.twig

@@ -7,10 +7,10 @@
 <body>
   <div id="app"></div>
   <script type="module">
-  import Page from "/index.js"
+  import Index from "/views/Index.vue.js"
   new Vue({
     el: '#app',
-    render: (h) => h(Page, {
+    render: (h) => h(Index, {
       props: {
         gamesRunning: {{ gamesRunning|json_encode|raw }},
         gamesFinished: {{ gamesFinished|json_encode|raw }},