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>
<tr> <tr>
<td colspan="2"> <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> </td>
</tr> </tr>
</table> </table>

5
public/index.html
View file

@ -1,14 +1,15 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="/style.css" /> <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> <title>🧩 jigsaw.hyottoko.club</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module"> <script type="module">
import Index from "/views/Index.vue.js" import Index from "/views/Index.vue.js"
new Vue({ el: '#app', render: (h) => h(Index) }) const app = Vue.createApp(Index)
app.mount('#app')
</script> </script>
</body> </body>
</html> </html>

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

@ -9,15 +9,20 @@ export default {
GameTeaser, GameTeaser,
NewGameDialog, NewGameDialog,
}, },
// TODO: use vue router
template: ` template: `
<div id="app"> <div id="app">
<span class="btn" @click="showNewGameDialog = !showNewGameDialog">New game</span> <ul class="nav">
<new-game-dialog <li><span class="btn" @click="view = 'index'">Home</span></li>
v-if="showNewGameDialog" <li><span class="btn" @click="view = 'new-game'">New game</span></li>
</ul>
<new-game-dialog v-if="view === 'new-game'"
:images="images" :images="images"
@newGame="onNewGame" @newGame="onNewGame"
/> />
<div v-if="view === 'index'">
<h1>Running games</h1> <h1>Running games</h1>
<div class="game-teaser-wrap" v-for="g in gamesRunning"> <div class="game-teaser-wrap" v-for="g in gamesRunning">
<game-teaser :game="g" /> <game-teaser :game="g" />
@ -27,10 +32,11 @@ export default {
<div class="game-teaser-wrap" v-for="g in gamesFinished"> <div class="game-teaser-wrap" v-for="g in gamesFinished">
<game-teaser :game="g" /> <game-teaser :game="g" />
</div> </div>
</div>
</div>`, </div>`,
data() { data() {
return { return {
showNewGameDialog: false, view: 'index',
gamesRunning: [], gamesRunning: [],
gamesFinished: [], gamesFinished: [],

2
templates/game.html.twig
View file

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="/style.css" /> <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>
<style type="text/css"> <style type="text/css">
html, html,
body { body {

2
templates/replay.html.twig
View file

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="/style.css" /> <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>
<style type="text/css"> <style type="text/css">
html, html,
body { body {