-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (136 loc) · 4.25 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<link
rel="shortcut icon"
type="image/png"
href="https://i.imgur.com/3p80YDX.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<head>
<link rel="stylesheet" href="style.css" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]"
rel="stylesheet"
type="text/css"
/>
<!-- nes.css -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<!-- production vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-136836752-5"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-136836752-5");
</script>
</head>
<body>
<div id="app" style="padding-left: 1em; padding-right: 1em">
<div
class="flex-with-space bg-mik"
style="padding-left: 1em; padding-right: 1em"
name="title bar"
>
<h1 class="colourmod smol">whack a key</h1>
<h1 class="right smol" name="score">score {{ score }}</h1>
</div>
<br />
<transition
name="custom-classes-transition"
enter-active-class="animated flash"
>
<div
v-if="gameState == 'inPlay'"
class="vertical-center"
name="game body"
>
<p class="colourmod bigbig" id="hack" @click="checkKeyPress('click')">
{{ message }}
</p>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
</transition>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
>
<div
v-if="!gameState"
class="colourmod bg-mik vertical-center"
name="start game"
>
<p class="big">Whack the Keys</p>
<p class="big">Spare the Numbers</p>
<button class="btn btn-primary btn-lg" @click="startGame()">
PLAY !
</button>
</div>
</transition>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
>
<div
v-if="gameState == 'over'"
class="colourmod bg-mik vertical-center"
name="game over"
>
<p class="big">Your final score is a solid big phat</p>
<p class="big" v-if="isMobile()">>> {{ score }} <<</p>
<p class="big" v-else>>> {{ score }} <<</p>
<p class="big" v-if="!isNaN(message)">
spare the number, not whack it X.X
</p>
<p class="big" v-else-if="lastKey === 'take forver'">
whack "{{ message }}", not {{ lastKey }} >~<
</p>
<!-- <p class="big" v-else-if="goodScore()">
Enter Name for Hall of Fame
</p>
-->
<p class="big" v-else>You whacked the wrong key ~.~</p>
<!--
<span v-if="goodScore()">
<button class="btn btn-primary btn-lg" @click="enterScore()">
<input v-model="name" />
</button>
</span>
-->
<span class="flex-with-space" v-else>
<button class="btn btn-primary btn-lg" @click="startGame()">
TRY AGAIN !
</button>
<a id="tweet" target="_blank" style="color: white">
<button
style="padding-left: 1em"
class="btn btn-primary btn-lg"
@click="tweetScore()"
>
Tweet
</button>
</a>
</span>
</div>
</transition>
</div>
<div class="flex-with-space" style="padding-top: 2.5em">
<a target="_blank" href="https://twitter.com/AvocadoMik"> @mik </a>
<a href="/leaderboard.html" style="right: 0">Leader Board</a>
<a href="/about.html" style="right: 0">[about]</a>
</div>
<!-- load custom js at end of page for speeeeeed -->
<script src="./assests/lb.js"></script>
<script src="index.js"></script>
</body>
</html>