diff --git a/public/Game.js b/public/Game.js
deleted file mode 100644
index eaaf0eb..0000000
--- a/public/Game.js
+++ /dev/null
@@ -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,
-}
diff --git a/public/components/GameTeaser.vue.js b/public/components/GameTeaser.vue.js
new file mode 100644
index 0000000..13369b4
--- /dev/null
+++ b/public/components/GameTeaser.vue.js
@@ -0,0 +1,40 @@
+import Time from './../../common/Time.js'
+
+const GameTeaser = {
+ name: 'game-teaser',
+ props: {
+ game: Object,
+ },
+ template: `
+ `,
+ 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
diff --git a/public/components/ImageTeaser.vue.js b/public/components/ImageTeaser.vue.js
new file mode 100644
index 0000000..90904ee
--- /dev/null
+++ b/public/components/ImageTeaser.vue.js
@@ -0,0 +1,22 @@
+const ImageTeaser = {
+ name: 'image-teaser',
+ props: {
+ image: Object
+ },
+ template: ``,
+ 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
diff --git a/public/components/Upload.vue.js b/public/components/Upload.vue.js
new file mode 100644
index 0000000..8088f2e
--- /dev/null
+++ b/public/components/Upload.vue.js
@@ -0,0 +1,29 @@
+const Upload = {
+ name: 'upload',
+ props: {
+ accept: String,
+ label: String,
+ },
+ template: `
+
+`,
+ 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
diff --git a/public/game.js b/public/game.js
index e486ecf..8809dc2 100644
--- a/public/game.js
+++ b/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'
diff --git a/public/index.js b/public/views/Index.vue.js
similarity index 55%
rename from public/index.js
rename to public/views/Index.vue.js
index 5f3ef8c..888ca96 100644
--- a/public/index.js
+++ b/public/views/Index.vue.js
@@ -1,91 +1,8 @@
-import GameCommon from '../common/GameCommon.js';
-import Time from '../common/Time.js'
-
-const Upload = {
- name: 'upload',
- props: {
- accept: String,
- label: String,
- },
- template: `
-
-`,
- 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: `
- `,
- 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: ``,
- computed: {
- style() {
- const url = this.image.url.replace('uploads/', 'uploads/r/') + '-150x100.webp'
- return {
- 'background-image': `url("${url}")`,
- }
- },
- },
- methods: {
- onClick() {
- this.$emit('click')
- },
- },
-}
+import GameCommon from './../../common/GameCommon.js'
+import Time from './../../common/Time.js'
+import Upload from './../components/Upload.vue.js'
+import GameTeaser from './../components/GameTeaser.vue.js'
+import ImageTeaser from './../components/ImageTeaser.vue.js'
export default {
components: {
diff --git a/templates/index.html.twig b/templates/index.html.twig
index 7043d13..85e4a6d 100644
--- a/templates/index.html.twig
+++ b/templates/index.html.twig
@@ -7,10 +7,10 @@