-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (146 loc) · 6.88 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<img src="img/DoodleBackground2.jpg" style="display: none">
<head>
<meta charset="utf-8">
<title>Scribble Doodle Doo</title>
<link href="style1.css" rel="stylesheet" type="text/css">
<script src="jquery-3.2.1.js" type="text/javascript"></script>
<script src="/socket.io/socket.io.js" type="text/javascript"></script>
<script src="client.js" type="text/javascript"></script>
</head>
<body>
<div id="loginOverlay"></div>
<div id="box">
<div id="content">
<div id="boxhead">Please enter a username to join!</div>
<div id="boxbody">
<input type="text" id="userName" placeholder="Enter username">
<p id="loginError"></p>
</div>
<div id="boxfoot">
<a href="vote.html"><button type="button" class="button-background button-height" id="goToWordVote">Vote On Words!</button></a>
<button type="button" class="button-background button-height" id="login">Login</button>
</div>
</div>
</div>
</div>
<div id="idleCheck">
<div id="areYouStillThere">
<div id="idleHead"><h2>Are you still there?</h2></div>
<div id="idleBody">
<button class="button-background" id="idleConfirm">Yes, I'm here!</button>
</div>
</div>
</div>
<div class="center">
<header>
<h1>Scribble Doodle Doo</h1>
</header>
<div class="screenContainer">
<div class="background" id="gameStatusBar">
<div class="timer">
<img src="img/icon-timer.png" height="55" width="55" class="timer-icon">
<div class="text numbers" id="timerText">90</div>
</div>
<div id="currentWord">
</div>
<div class="numbers" id="gameRound">
<p>Round 1 of 10</p>
</div>
</div>
<div class="gameContainer">
<div id="userSidebar">
<div id="userListBox" class="background">
<table class="no-selection" id="userList">
</table>
</div>
<div id="kickButton">
<button class="button-background button-click" id="voteKick">Vote to Kick</button>
</div>
</div>
<div class="drawingContainer">
<div class="canvasContainer">
<canvas class="background no-selection" id="canvas">
</canvas>
<div class="no-selection" id="sessionUpdateDisplay">
<div id="sessionUpdateText">
</div>
</div>
</div>
<div class="toolBar" id="toolBar">
<img src="img/black.png" alt="current color" height="40" width="40" class="border no-selection" id="current-color">
<table class="border">
<tr>
<td>
<img src="img/black.png" alt="color black" height="20" width="20" class="color no-selection" id="black">
</td>
<td>
<img src="img/dark-brown.png" alt="color dark brown" height="20" width="20" class="color no-selection" id="dark-brown">
</td>
<td>
<img src="img/light-brown.png" alt="color light brown" height="20" width="20" class="color no-selection" id="light-brown">
</td>
<td>
<img src="img/red.png" alt="color red" height="20" width="20" class="color no-selection" id="red">
</td>
<td>
<img src="img/pink.png" alt="color pink" height="20" width="20" class="color no-selection" id="pink">
</td>
<td>
<img src="img/dark-green.png" alt="color dark green" height="20" width="20" class="color no-selection" id="dark-green">
</td>
<td>
<img src="img/dark-blue.png" alt="color dark blue" height="20" width="20" class="color no-selection" id="dark-blue">
</td>
<td>
<img src="img/purple.png" alt="color purple" height="20" width="20" class="color no-selection" id="purple">
</td>
</tr>
<tr>
<td>
<img src="img/white.png" alt="color white" height="20" width="20" class="color no-selection" id="white">
</td>
<td>
<img src="img/grey.png" alt="color grey" height="20" width="20" class="color no-selection" id="grey">
</td>
<td>
<img src="img/beige.png" alt="color beige" height="20" width="20" class="color no-selection" id="beige">
</td>
<td>
<img src="img/orange.png" alt="color orange" height="20" width="20" class="color no-selection" id="orange">
</td>
<td>
<img src="img/yellow.png" alt="color yellow" height="20" width="20" class="color no-selection" id="yellow">
</td>
<td>
<img src="img/light-green.png" alt="color light green" height="20" width="20" class="color" id="light-green">
</td>
<td>
<img src="img/light-blue.png" alt="color light blue" height="20" width="20" class="color no-selection cbutton" id="light-blue">
</td>
<td>
<img src="img/lilac.png" alt="color lilac" height="20" width="20" class="color no-selection cbutton" id="lilac">
</td>
</tr>
</table>
<img src="img/icon-smallbrush.png" alt="brush tool" height="30" width="30" title="small brush" class="tool left-margin-neg top-margin neg-margin no-selection" id="small-brush">
<img src="img/icon-medbrush.png" alt="brush tool" height="30" width="30" title="medium brush" class="tool top-margin no-selection" id="med-brush">
<img src="img/icon-largebrush.png" alt="brush tool" height="30" width="30" title="large brush" class="tool top-margin no-selection" id="large-brush">
<img src="img/icon-draw.png" alt="brush tool" height="38" width="38" title="draw tool" class="tool left-margin button-background no-selection hvr-rotate button-on-click" id="brush-tool">
<img src="img/icon-rect.png" alt="rectangle tool" height="38" width="38" title="draw a rectangle" class="tool left-margin button-background no-selection hvr-rotate button-on-click" id="rect-tool">
<img src="img/icon-circle.png" alt="circle tool" height="38" width="38" title="draw a circle" class="tool left-margin button-background no-selection hvr-rotate button-on-click" id="circle-tool">
<img src="img/icon-eraser.png" alt="eraser tool" height="38" width="38" title="eraser tool" class="tool left-margin button-background no-selection hvr-rotate button-on-click" id="eraser-tool">
<img src="img/icon-clear.png" alt="clear drawing" height="38" width="38" title="clear your canvas" class="tool left-margin button-background no-selection hvr-rotate button-on-click" id="clear-canvas">
</div>
</div>
<div class="background" id="chatSidebar">
<textarea id="chatField" disabled="disabled"></textarea>
<input id="chatText" type="text" placeholder="Type your guess here...">
<button class="hvr-bubble-left button-background button-click" id="chatButton" type="button">Chat</button>
</div>
</div>
</div>
</div>
</body>
</html>