-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
82 lines (73 loc) · 3.46 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
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Flickshot</title>
<script src="js/vue.js"></script>
<script src="js/math.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<section id="menu" v-show="show" transition="slide">
<h1>Flickshot</h1>
<b><button @click="select">Instructions</button></b>
<b><button @click="select">Change Mode</button></b>
<b><button @click="select">Settings</button></b>
<b><button @click="select">Start</button></b>
</section>
<section id="instructions" v-show="show" @click="back" transition="slide">
<p>Click the targets as fast as you can, but don't miss!
<p>More points awarded for increased accuracy.
<p>Targets shrink as you progress.
</section>
<section id="modes" v-show="show" @click="back" transition="slide">
<b><button @click="select">Original</button></b>
<b><button @click="select">Flick</button></b>
<b><button @click="select">Accuracy</button></b>
<b><button @click="select">Practice</button></b>
<b><button @click.stop="select">Custom</button></b>
</section>
<section id="custom" v-show="show" transition="slide-pairs">
<label for="radius-min">Minimum Radius: {{ mode.rMin }}</label>
<input id="radius-min" type="range" min="0.05" :max="mode.rMax" step="0.05" v-model="mode.rMin">
<label for="radius-max">Maximum Radius: {{ mode.rMax }}</label>
<input id="radius-max" type="range" :min="mode.rMin" max="0.7" step="0.05" v-model="mode.rMax">
<label for="target-count">Number of targets: {{ mode.targetCount }}</label>
<input id="target-count" type="range" min="1" max="10" v-model="mode.targetCount">
<label for="growth">Shrink Factor: {{ mode.growth }}</label>
<input id="growth" type="range" min="0.1" max="1" step="0.01" v-model="mode.growth">
<input id="show-cursor" type="checkbox" v-model="mode.showCursor">
<label for="show-cursor">Show cursor</label>
<label for="time">Time: {{ mode.time / 1000 }}s</label>
<input id="time" type="range" min="0" max="10000" step="100" v-model="mode.time" number>
<button @click="select">Save</button>
</section>
<section id="settings" v-show="show" @click="back" transition="slide">
<b><button @click.stop="toggle('fullscreen')">{{ fullscreen ? 'Exit' : 'Enter' }} Fullscreen</button></b>
<b><button @click.stop="toggle('animations')">{{ animations ? 'Enable' : 'Disable }} Animations</button></b>
</section>
<section id="end" v-show="show" transition="slide">
<h2>Your score: {{ stats.targets + Math.round(stats.bonus) }}</h2>
<h3>Targets hit: {{ stats.targets }}</h3>
<h3>Accuracy: {{ Math.round10(stats.bonus / stats.targets * 100, -2) }}%</h3>
<h3>Time elapsed: {{ Math.round10(stats.time, -1) }} seconds</h3>
<h3>Targets per second: {{ Math.round10(stats.targets / stats.time, -2) }}</h3>
<button @click="restart">Restart</button>
<button @click="showMenu">Main Menu</button>
</section>
<section id="countdown" v-show="show">
<ol v-show="!animate" transition="countdown">
<li>3
<li>2
<li>1
</ol>
</section>
<svg id="svg" :style="styles" xmlns="http://www.w3.org/2000/svg" @click="click">
<rect x="0" y="0" :width="length" height="10" fill="white"></rect>
<!--<text x="0" y="100%" fill="white" stroke="white">{{ score }}</text>-->
<g id="targets">
<circle v-for="target in targets" transition="target" @click.stop="click($event, $index)"
:cx="target.x" :cy="target.y" :r="target.r"></circle>
</g>
<g id="clicks">
<circle v-for="click in clicks" transition="click"
:cx="click.x" :cy="click.y" r="5"></circle>
</g>
</svg>