-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
124 lines (122 loc) · 6.55 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
<!DOCTYPE html>
<html>
<head>
<title>Twitchionary</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/pencil.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
</head>
<body>
<header>Twitchionary</header>
<div class="main-center">
<div id="main-container">
<div id="drawing-parent">
<div id="drawing-container">
<div id="timer-container"></div>
<canvas id="canvas"></canvas>
</div>
<div id="tools-container">
<div id="colors-container">
<div>
<button class="color-button" id="color1-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color2-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color3-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color4-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color5-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color6-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color7-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color8-button" onclick="changeColor(this.id)" type=button></button>
</div>
<div>
<button class="color-button" id="color9-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color10-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color11-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color12-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color13-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color14-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color15-button" onclick="changeColor(this.id)" type=button></button>
<button class="color-button" id="color16-button" onclick="changeColor(this.id)" type=button></button>
</div>
</div>
<div id="drawing-tool-container">
<input type="image" id="pencil-tool" class="drawing-tool" onclick="changeTool(this.id)" src="./assets/pencil.png">
<input type="image" id="eraser-tool" class="drawing-tool" onclick="changeTool(this.id)" src="./assets/eraser.png">
<input type="image" id="bucket-tool" class="drawing-tool" onclick="changeTool(this.id)" src="./assets/bucket.png">
<input type="image" id="garbage-tool" onclick="clearCanvas()" src="./assets/garbage.png">
</div>
<div id="tool-size-container">
<input type="image" class="drawing-tool tool-size" id="size0" onclick="changeStrokeWidth(this.id)" src="./assets/size1.png">
<input type="image" class="drawing-tool tool-size" id="size1" onclick="changeStrokeWidth(this.id)" src="./assets/size2.png">
<input type="image" class="drawing-tool tool-size" id="size2" onclick="changeStrokeWidth(this.id)" src="./assets/size3.png">
<input type="image" class="drawing-tool tool-size" id="size3" onclick="changeStrokeWidth(this.id)" src="./assets/size4.png">
</div>
</div>
</div>
<div id="side-panel">
<div id="message-container">
<p id="user-name"></p>
<p id="user-message">Enter The Channel Name Below To Start Tracking Chat</p>
</div>
<div id="options-container">
<h1>Prompts</h1>
<div id="options-grid">
<div class="grid-item">
<label><input type="checkbox" id="twitch-emotes" onclick="updatePromptPool(this.id)" checked>Twitch Emotes</label>
</div>
<div class="grid-item">
<label><input type="checkbox" id="bttv-ffz-emotes" onclick="updatePromptPool(this.id)" checked>BTTV/FFZ Emotes</label>
</div>
<div class="grid-item">
<label><input type="checkbox" id="streamers" onclick="updatePromptPool(this.id)" checked>Streamers</label>
</div>
<div class="grid-item">
<label><input type="checkbox" id="video-games" onclick="updatePromptPool(this.id)" checked>Video Games</label>
</div>
<div class="grid-item">
<label><input type="checkbox" id="twitch-memes" onclick="updatePromptPool(this.id)">Twitch Memes</label>
</div>
</div>
<div id="time-container">
<h1>Time Allotted</h1>
<input type="range" min="10" max="300" value="120" class="slider" id="time-slider" onchange="updateInitialTime()">
</div>
<input type="text" id="channel-textfield" name="channelname" placeholder="Channel Name">
<div id="options-button-container">
<button class="options-button" id="new-prompt-button" onclick="promptPopup()" type="button">New Prompt</button>
<button class="options-button" id="reset-button" onclick="resetGame()" type="button">Reset</button>
</div>
</div>
</div>
</div>
</div>
<footer>
<button id="htp-button">How To Play</button>
<p><a href="https://github.com/YJunZheng/Twitchionary" target="_blank">Github</a></p>
</footer>
<!-- HOW TO PLAY MODAL -->
<div id="htpModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<header>How To Play</header>
<div id="modal-instructions">
<p><b>1.</b> Enter your twitch channel in the side panel.</p>
<p><b>2.</b> Choose your prompts and the time alloted. The time left is shown on the top left of the canvas.</p>
<p><b>3.</b> Press the new prompt button to get a prompt.</p>
<p><b>4.</b> Draw while chat tries to guess!</p>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/tmi.js"></script>
<script type="text/javascript" src="js/browser-adjustments.js"></script>
<script type="text/javascript" src="assets/keywords/keywords.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<script type="text/javascript" src="js/timer.js"></script>
<script type="text/javascript" src="js/prompt.js"></script>
<script type="text/javascript" src="js/confetti.js"></script>
<script type="text/javascript" src="js/how-to-play.js"></script>
<script type="text/javascript" src="js/draw.js"></script>
</html>