diff --git a/public/App.vue.js b/public/App.vue.js new file mode 100644 index 0000000..e8872f8 --- /dev/null +++ b/public/App.vue.js @@ -0,0 +1,18 @@ +export default { + name: 'app', + template: ` +
+ + + +
`, + computed: { + showNav () { + // TODO: add info wether to show nav to route props + return !['game', 'replay'].includes(this.$route.name) + }, + }, +} diff --git a/public/index.html b/public/index.html index f145b55..94a1ac3 100644 --- a/public/index.html +++ b/public/index.html @@ -2,13 +2,30 @@ + 🧩 jigsaw.hyottoko.club
diff --git a/public/views/Game.vue.js b/public/views/Game.vue.js new file mode 100644 index 0000000..555fb9d --- /dev/null +++ b/public/views/Game.vue.js @@ -0,0 +1,26 @@ +"use strict" + +export default { + name: 'game', + template: `
{{gameData}}
`, + data() { + return { + gameData: null, + } + }, + created() { + this.$watch( + () => this.$route.params, + () => { this.fetchData() }, + { immediate: true } + ) + }, + methods: { + async fetchData() { + this.gameData = null + const res = await fetch(`/api/game-data/${this.$route.params.id}`) + const json = await res.json() + this.gameData = json + }, + }, +} diff --git a/public/views/Index.vue.js b/public/views/Index.vue.js index cf7e7ac..b18675b 100644 --- a/public/views/Index.vue.js +++ b/public/views/Index.vue.js @@ -2,45 +2,27 @@ import Time from './../../common/Time.js' import GameTeaser from './../components/GameTeaser.vue.js' -import NewGameDialog from './../components/NewGameDialog.vue.js' export default { components: { GameTeaser, - NewGameDialog, }, - // TODO: use vue router template: ` -
- +
+

Running games

+
+ +
- - -
-

Running games

-
- -
- -

Finished games

-
- -
+

Finished games

+
+
`, data() { return { - view: 'index', - gamesRunning: [], gamesFinished: [], - images: [], } }, async created() { @@ -48,7 +30,6 @@ export default { const json = await res.json() this.gamesRunning = json.gamesRunning this.gamesFinished = json.gamesFinished - this.images = json.images }, methods: { time(start, end) { @@ -58,19 +39,5 @@ export default { const timeDiffStr = Time.timeDiffStr(from, to) return `${icon} ${timeDiffStr}` }, - async onNewGame(gameSettings) { - const res = await fetch('/newgame', { - method: 'post', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: JSON.stringify(gameSettings), - }) - if (res.status === 200) { - const game = await res.json() - location.assign(game.url) - } - } } } diff --git a/public/views/NewGame.vue.js b/public/views/NewGame.vue.js new file mode 100644 index 0000000..b4a50ca --- /dev/null +++ b/public/views/NewGame.vue.js @@ -0,0 +1,40 @@ +"use strict" + +import NewGameDialog from './../components/NewGameDialog.vue.js' + +export default { + components: { + NewGameDialog, + }, + // TODO: maybe move dialog back, now that this is a view on its own + template: ` +
+ +
`, + data() { + return { + images: [], + } + }, + async created() { + const res = await fetch('/api/newgame-data') + const json = await res.json() + this.images = json.images + }, + methods: { + async onNewGame(gameSettings) { + const res = await fetch('/newgame', { + method: 'post', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(gameSettings), + }) + if (res.status === 200) { + const game = await res.json() + location.assign(game.url) + } + } + } +} diff --git a/public/views/Replay.vue.js b/public/views/Replay.vue.js new file mode 100644 index 0000000..0c3c8bb --- /dev/null +++ b/public/views/Replay.vue.js @@ -0,0 +1,26 @@ +"use strict" + +export default { + name: 'replay', + template: `
{{replayData}}
`, + data() { + return { + replayData: null, + } + }, + created() { + this.$watch( + () => this.$route.params, + () => { this.fetchData() }, + { immediate: true } + ) + }, + methods: { + async fetchData() { + this.replayData = null + const res = await fetch(`/api/replay-data/${this.$route.params.id}`) + const json = await res.json() + this.replayData = json + }, + }, +} diff --git a/server/index.js b/server/index.js index 878f063..b1734c6 100644 --- a/server/index.js +++ b/server/index.js @@ -57,6 +57,26 @@ app.use('/replay/:gid', async (req, res, next) => { })) }) +app.get('/api/game-data/:gid', (req, res) => { + res.send({ + GAME_ID: req.params.gid, + WS_ADDRESS: config.ws.connectstring, + }) +}) + +app.get('/api/replay-data/:gid', (req, res) => { + res.send({ + GAME_ID: req.params.gid, + WS_ADDRESS: config.ws.connectstring, + }) +}) + +app.get('/api/newgame-data', (req, res) => { + res.send({ + images: Images.allImages(), + }) +}) + app.get('/api/index-data', (req, res) => { const ts = Time.timestamp() const games = [ @@ -75,7 +95,6 @@ app.get('/api/index-data', (req, res) => { res.send({ gamesRunning: games.filter(g => !g.finished), gamesFinished: games.filter(g => !!g.finished), - images: Images.allImages(), }) })