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

use vue 3, prepare split new game and index view

Browse source
This commit is contained in:
Zutatensuppe 2021-05-13 16:23:05 +02:00
parent 4d8012dc33
commit be79935bca
5 changed files with 23 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/components/NewGameDialog.vue.js
View file

@ -42,7 +42,7 @@ export default {
</tr>
<tr>
<td colspan="2">
<button class="btn" :disabled="!canStartNewGame" :class="" @click="onNewGameClick">Start new game</button>
<button class="btn" :disabled="!canStartNewGame" @click="onNewGameClick">Start new game</button>
</td>
</tr>
</table>

5
public/index.html
View file

@ -1,14 +1,15 @@
<html>
<head>
<link rel="stylesheet" href="/style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/vue@3.0.11"></script>
<title>🧩 jigsaw.hyottoko.club</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import Index from "/views/Index.vue.js"
new Vue({ el: '#app', render: (h) => h(Index) })
const app = Vue.createApp(Index)
app.mount('#app')
</script>
</body>
</html>

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

@ -9,28 +9,34 @@ export default {
GameTeaser,
NewGameDialog,
},
// TODO: use vue router
template: `
<div id="app">
<span class="btn" @click="showNewGameDialog = !showNewGameDialog">New game</span>
<new-game-dialog
v-if="showNewGameDialog"
<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>
<new-game-dialog v-if="view === 'new-game'"
:images="images"
@newGame="onNewGame"
/>
<h1>Running games</h1>
<div class="game-teaser-wrap" v-for="g in gamesRunning">
<game-teaser :game="g" />
</div>
<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" />
<h1>Finished games</h1>
<div class="game-teaser-wrap" v-for="g in gamesFinished">
<game-teaser :game="g" />
</div>
</div>
</div>`,
data() {
return {
showNewGameDialog: false,
view: 'index',
gamesRunning: [],
gamesFinished: [],