-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (92 loc) · 3.49 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
<html>
<head>
<title>Splittr</title>
<link rel="stylesheet" href="libraries/simplepaint.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/slider.css">
<link rel="stylesheet" href="css/guess.css">
<link rel="stylesheet" href="css/button.css">
<link rel="stylesheet" href="css/modal.css">
<link rel="stylesheet" href="css/help.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="splittr.initialise(this)">
<div class="slider ui-slider">
<div class="slide home">
<button class="ui-start" type="button">It's go time</button>
<h1>Splittr</h1>
<button class="secondary ui-help" type="button">How to Play</button>
</div>
<div class="slide splash">
<p class="splash-text">Drawing One</h2>
</div>
<div class="slide canvas ui-first-drawing">
<header>
<div class="word">
<h2>happy</h2>
</div>
<div class="action">
<span class="ui-finished-drawing">done</span>
<span class="timer ui-timer">01:23</span>
</div>
</header>
<section class="ui-canvas-container"></section>
</div>
<div class="slide splash">
<p class="splash-text">Drawing Two</h2>
</div>
<div class="slide canvas ui-second-drawing">
<header>
<div class="word">
<h2>sloth</h2>
</div>
<div class="action">
<span class="ui-finished-drawing">done</span>
<span class="timer ui-timer">01:23</span>
</div>
</header>
<section class="ui-canvas-container"></section>
</div>
<div class="slide splash">
<p class="splash-text">Guessing Time</h2>
</div>
<div class="slide guess ui-guess">
<div class="images">
<div class="image first ui-guess-image"></div>
<div class="image second ui-guess-image"></div>
</div>
<div class="attempt">
<p class="ui-guess-text"></p>
<input class="ui-txt-guess" type="text" placeholder="HAVE A GUESS..." />
<button class="primary ui-reset hidden" type="button">Play Again</button>
<button class="secondary ui-submit-guess" type="button">Check</button>
</div>
</div>
</div>
<div class="modal ui-modal">
<span class="title ui-title"></span>
<span class="text ui-text"></span>
</div>
<div class="help ui-help-popup">
<span class="close ui-close-help-popup">close</span>
<p>HOW TO PLAY:</p>
<br/>
<p>Number of players: 2 - 3</p>
<br/>
<p>After clicking "It's Go Time" a word will be presented to you which player 1 will need to draw using the canvas tools (brush size, colour, fill). Once satisfied, or the timer runs out, the picture will be saved and the game will move to the next picture to draw.</p>
<br/>
<p>It is now either player 1 (again) or player 2 (if 3 players) to draw the second image just like the first one. Once done it will be time for the final player to make their guess</p>
<br/>
<p>The two wonderfully drawn images will be displayed (which can be expanded) to the guessing player. This player must use the two images to guess the combined (compound) word that the images make up.</p>
<br/>
<p>Whether the guess was correct or not will be displayed after making the guess. At this point it's time to play again!</p>
<br/>
<p>HAVE FUN!</p>
</div>
</body>
<script src="libraries/jquery-3.1.1.min.js"></script>
<script src="libraries/easeljs-0.8.2.min.js"></script>
<script src="libraries/simplepaint.js"></script>
<script src="javascript/init.js"></script>
<script src="javascript/timer.js"></script>
</html>