para/puzzle
1
1
Fork 0
Code Issues 8 Pull requests Releases Wiki Activity

prepare use of vue for game/replay

Browse source
This commit is contained in:
Zutatensuppe 2021-05-13 16:58:21 +02:00
parent 343263be6c
commit 8e7aa7d453
7 changed files with 156 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

49
public/views/Index.vue.js
View file

@ -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: `
<div id="app">
<ul class="nav">
<li><span class="btn" @click="view = 'index'">Home</span></li>
<li><span class="btn" @click="view = 'new-game'">New game</span></li>
</ul>
<div>
<h1>Running games</h1>
<div class="game-teaser-wrap" v-for="g in gamesRunning">
<game-teaser :game="g" />
</div>
<new-game-dialog v-if="view === 'new-game'"
:images="images"
@newGame="onNewGame"
/>
<div v-if="view === 'index'">
<h1>Running games</h1>
<div class="game-teaser-wrap" v-for="g in gamesRunning">
<game-teaser :game="g" />
</div>
<h1>Finished games</h1>
<div class="game-teaser-wrap" v-for="g in gamesFinished">
<game-teaser :game="g" />
</div>
<h1>Finished games</h1>
<div class="game-teaser-wrap" v-for="g in gamesFinished">
<game-teaser :game="g" />
</div>
</div>`,
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)
}
}
}
}