-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (115 loc) · 5.34 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
<head>
<meta charset="utf-8">
<title>game</title>
<!-- <link rel="stylesheet" href="static/css/normalize.css" type="text/css"> -->
<!-- <link rel="stylesheet" href="static/css/sakura.css" type="text/css"> -->
<link rel="stylesheet" href="static/css/master.css" type="text/css">
</head>
<body>
<div id="app">
<div>
<template v-if="canPlayGame">
<game
:player-id="Number(playerID)"
:game-state="gameState"
:game-to-import="gameToImport"
/>
</template>
<section
v-else
class="ml-8"
>
<div class="cubeContainer" >
<svg class="neckerCube neckerCube--1" height="140px" width="140px" viewBox="0 0 140 140">
<rect x="0" y="40" width="100" height="100" fill="none" stroke="#000000" />
<rect x="40" y="0" width="100" height="100" fill="none" stroke="#000000" />
<path d="M 0 40 l 40 -40" fill="none" stroke="#000000" />
<path d="M 100 40 l 40 -40" fill="none" stroke="#000000" />
<path d="M 100 140 l 40 -40" fill="none" stroke="#000000" />
<path d="M 0 140 l 40 -40" fill="none" stroke="#000000" />
</svg>
<svg class="neckerCube neckerCube--2" height="140px" width="140px" viewBox="0 0 140 140">
<rect x="40" y="40" width="100" height="100" fill="none" stroke="#000000"/>
<rect x="0" y="0" width="100" height="100" fill="none" stroke="#000000"/>
<path d="M 40 40 l -40 -40" fill="none" stroke="#000000"/>
<path d="M 140 40 l -40 -40" fill="none" stroke="#000000" />
<path d="M 140 140 l -40 -40" fill="none" stroke="#000000" />
<path d="M 40 140 l -40 -40" fill="none" stroke="#000000" />
</svg>
</div>
<p>loading..</p>
</section>
<div class="flex flex-col m-8">
<div class="h-1 w-full border-t border-grey-light my-2"></div>
<div class="flex flex-col w-1/3">
<div>
<input
class="inline w-1/3 border border-r-0 border-grey-dark my-2 p-2"
type="text"
value="game ID: "
disabled="disabled"
><input
class="inline w-1/3 border border-grey-dark my-2 p-2"
type="text"
v-model="gameID"
>
<input
class="inline w-1/3 border border-r-0 border-grey-dark my-2 p-2"
type="text"
value="player ID: "
disabled="disabled"
><input
class="inline w-1/3 border border-grey-dark my-2 p-2"
type="text"
v-model="playerID"
>
</div>
<button
class="bg-red hover:bg-red-dark text-white font-bold my-2 py-2 px-4 rounded"
type="submit"
@click="saveGameToFirebase"
:disabled="gameID === ''"
:class="{
'opacity-50': gameID === '',
'cursor-not-allowed': gameID === ''
}"
>
Save game
</button>
<button
class="bg-red hover:bg-red-dark text-white font-bold py-2 px-4 rounded"
type="submit"
@click="loadGameFromFirebase"
:disabled="gameID === ''"
:class="{
'opacity-50': gameID === '',
'cursor-not-allowed': gameID === ''
}"
>
Load game
</button>
</div>
<div class="w-2/3 mt-4">
<div class="mb-2">
<span class="text-sm text-grey-light">Game log</span>
<p class="text-transparent text-xs hover:text-grey-light">
{{ gameToImport }}
</p>
</div>
<div class="flex flex-col w-1/2">
<span class="text-sm text-grey-light">Import game</span>
<input
type="text"
class="border border-transparent hover:border-grey-light text-transparent hover:text-grey p-1"
placeholder="game JSON"
@keyup.enter.prevent="importGame"
>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="static/js/game.js"></script>
</body>
</html>