Hugging Face's logo

Spaces:
VISHAL18for4
/
DRAWABLE
Sleeping

App Files Community
VISHAL18for4 commited on
Commit
8a8312d
·
verified ·
1 Parent(s): 3d5e0e4

Upload index.html

Browse files
Files changed (1) hide show
  1. public/index.html +228 -0
public/index.html ADDED
@@ -0,0 +1,228 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
6
+ <title>Drawable – Draw & Guess</title>
7
+ <link rel="stylesheet" href="/css/game.css">
8
+ </head>
9
+ <body>
10
+
11
+ <!-- ══════ LOBBY ══════ -->
12
+ <div id="lobby-screen">
13
+ <div class="lobby-wrap">
14
+ <div class="lobby-card">
15
+ <div class="logo"><h1>Drawable</h1><p>The ultimate draw &amp; guess game 🎨</p></div>
16
+ <div class="avatar-section">
17
+ <div class="avatar-preview" id="avatarPreview">😀</div>
18
+ <div style="flex:1"><div class="form-group" style="margin:0"><label>Your Name</label>
19
+ <input type="text" id="playerName" placeholder="Enter your name" maxlength="20" autocomplete="off"></div></div>
20
+ </div>
21
+ <div id="emojiPicker" style="display:none" class="avatar-emoji-grid"></div>
22
+ <div id="msgBox" class="msg"></div>
23
+
24
+ <div id="homeView">
25
+ <div class="btn-group">
26
+ <button class="btn btn-primary" onclick="showCreate()">🏠 Create Room</button>
27
+ <button class="btn btn-secondary" onclick="showJoin()">🔗 Join with Code</button>
28
+ <button class="btn btn-outline" onclick="quickPlay()">⚡ Quick Play</button>
29
+ </div>
30
+ </div>
31
+
32
+ <div id="createView" style="display:none">
33
+ <button class="btn btn-outline btn-sm" onclick="showView('homeView')">← Back</button>
34
+ <button class="btn btn-outline btn-sm" onclick="toggleSettings()" style="margin-left:.5rem">⚙️ Settings</button>
35
+ <div class="settings-panel" id="settingsPanel">
36
+ <div class="settings-grid">
37
+ <div class="settings-item"><label>Max Players</label>
38
+ <select id="maxPlayers"><option>4</option><option>6</option><option>8</option><option selected>10</option><option>12</option></select></div>
39
+ <div class="settings-item"><label>Rounds</label>
40
+ <select id="rounds"><option>2</option><option selected>3</option><option>4</option><option>5</option></select></div>
41
+ <div class="settings-item"><label>Draw Time (s)</label>
42
+ <select id="drawTime"><option>30</option><option>60</option><option selected>80</option><option>120</option></select></div>
43
+ <div class="settings-item"><label>Word Choices</label>
44
+ <select id="wordChoices"><option>2</option><option selected>3</option><option>4</option></select></div>
45
+ <div class="settings-item"><label>Mode</label>
46
+ <select id="wordMode"><option value="normal">Normal</option><option value="mixed">Mixed+Custom</option><option value="custom">Custom Only</option></select></div>
47
+ <div class="settings-item"><label>Specials</label>
48
+ <div class="toggle-row"><input type="checkbox" id="teamMode"> Team Mode</div>
49
+ <div class="toggle-row"><input type="checkbox" id="quickDraw"> Quick Draw</div>
50
+ <div class="toggle-row"><input type="checkbox" id="suddenDeath"> Sudden Death</div>
51
+ <div class="toggle-row"><input type="checkbox" id="hintsEnabled" checked> Hints</div>
52
+ </div>
53
+ </div>
54
+ <div class="settings-item" style="margin-top:.75rem"><label>Custom Words (comma separated)</label>
55
+ <input type="text" id="customWords" placeholder="apple, rocket, banana..."></div>
56
+ <div class="settings-item" style="margin-top:.75rem"><label>Categories</label>
57
+ <div class="categories-grid" id="categoriesGrid"></div></div>
58
+ </div>
59
+ <button class="btn btn-primary" onclick="doCreateRoom()" style="margin-top:1rem">🎨 Create Room</button>
60
+ </div>
61
+
62
+ <div id="joinView" style="display:none">
63
+ <button class="btn btn-outline btn-sm" onclick="showView('homeView')" style="margin-bottom:1rem">← Back</button>
64
+ <div class="form-group"><label>Room Code</label>
65
+ <input type="text" id="roomCode" placeholder="e.g. AB12CD" maxlength="6"
66
+ style="text-transform:uppercase;letter-spacing:.15em;font-size:1.2rem;text-align:center"></div>
67
+ <button class="btn btn-secondary" onclick="doJoinRoom()">Join Room</button>
68
+ </div>
69
+
70
+ <div id="waitingView" style="display:none">
71
+ <div class="room-code-display">
72
+ <div><div style="font-size:.7rem;color:var(--text2);text-transform:uppercase;font-weight:700;margin-bottom:.25rem">Room Code</div>
73
+ <div class="code" id="displayCode"></div></div>
74
+ <button class="copy-btn" onclick="copyCode()">📋 Copy</button>
75
+ </div>
76
+ <div class="player-list">
77
+ <h3>Players (<span id="playerCount">0</span>/<span id="maxCount">10</span>)</h3>
78
+ <div class="player-chips" id="playerChips"></div>
79
+ </div>
80
+ <div id="hostControls" style="display:none">
81
+ <button class="btn btn-success" id="startBtn" onclick="doStartGame()" disabled>▶ Start Game</button>
82
+ <p style="color:var(--text2);font-size:.8rem;text-align:center;margin-top:.5rem">Need at least 2 players</p>
83
+ </div>
84
+ <div id="guestWait" style="display:none;text-align:center;padding:1rem;color:var(--text2)">
85
+ <div class="spinner" style="margin:0 auto .75rem"></div>Waiting for host to start...
86
+ </div>
87
+ <div id="matchmakingWait" style="display:none;text-align:center;padding:1rem">
88
+ <div class="spinner" style="margin:0 auto .75rem"></div>
89
+ <p style="color:var(--cyan);font-weight:700;font-size:1rem" id="mmStatus">🔍 Finding players...</p>
90
+ <p style="color:var(--text2);font-size:.85rem;margin-top:.4rem" id="mmCountdown"></p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- ══════ GAME ══════ -->
98
+ <div id="game-screen">
99
+ <!-- TOP BAR -->
100
+ <div class="g-topbar">
101
+ <div class="g-timer">
102
+ <span class="g-timer-icon">⏰</span>
103
+ <span class="g-timer-num" id="gTimerNum">—</span>
104
+ </div>
105
+ <span class="g-round" id="gRound">Round 1 of 3</span>
106
+ <div class="g-word-area">
107
+ <div class="g-word-label" id="gWordLabel">GUESS THIS</div>
108
+ <div class="g-hint" id="gHint">&nbsp;</div>
109
+ </div>
110
+ <span style="font-size:.75rem;color:var(--text2)" id="gRoomCode"></span>
111
+ </div>
112
+
113
+ <!-- MAIN 3-COLUMN -->
114
+ <div class="g-main">
115
+
116
+ <!-- LEFT: Players -->
117
+ <div class="g-players" id="gPlayers">
118
+ <div style="font-size:.65rem;text-transform:uppercase;color:var(--text2);font-weight:700;padding:5px 6px;border-bottom:1px solid var(--border)">Players</div>
119
+ </div>
120
+
121
+ <!-- CENTER: Canvas + toolbar -->
122
+ <div class="g-center">
123
+ <div class="g-canvas-wrap" id="gCanvasWrap">
124
+ <canvas id="game-canvas" width="800" height="550"></canvas>
125
+ <div class="g-wait" id="gWait">
126
+ <div class="g-wait-icon">✏️</div>
127
+ <div class="g-wait-title" id="gWaitTitle">Waiting…</div>
128
+ <div class="g-wait-sub" id="gWaitSub">Get ready!</div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Toolbar (drawer only) -->
133
+ <div class="g-toolbar" id="gToolbar" style="display:none">
134
+ <div class="g-tb-row">
135
+ <div class="g-colors" id="gColors"></div>
136
+ <div class="tsep"></div>
137
+ <button class="gtbtn active" id="tPen" onclick="setTool('pen')" title="Pen (B)">✏️</button>
138
+ <button class="gtbtn" id="tEraser" onclick="setTool('eraser')" title="Eraser (E)">⬜</button>
139
+ <button class="gtbtn" id="tFill" onclick="setTool('fill')" title="Fill (F)">🪣</button>
140
+ <button class="gtbtn" id="tLine" onclick="setTool('line')" title="Line">╱</button>
141
+ <button class="gtbtn" id="tRect" onclick="setTool('rect')" title="Rectangle">▭</button>
142
+ <button class="gtbtn" id="tCircle" onclick="setTool('circle')" title="Circle">◯</button>
143
+ <div class="tsep"></div>
144
+ <button class="gtbtn" onclick="undoLast()" title="Undo (U)">↩️</button>
145
+ <button class="gtbtn" onclick="clearAll()" title="Clear (C)">🗑️</button>
146
+ </div>
147
+ <div class="g-tb-row" style="margin-top:4px">
148
+ <span style="font-size:.65rem;color:var(--text2);font-weight:700">Size:</span>
149
+ <div class="g-sizes">
150
+ <div class="gsdot" style="width:5px;height:5px" data-s="3" onclick="setBrush(3)"></div>
151
+ <div class="gsdot" style="width:9px;height:9px" data-s="7" onclick="setBrush(7)"></div>
152
+ <div class="gsdot" style="width:14px;height:14px" data-s="14" onclick="setBrush(14)"></div>
153
+ <div class="gsdot" style="width:20px;height:20px" data-s="26" onclick="setBrush(26)"></div>
154
+ <div class="gsdot" style="width:26px;height:26px" data-s="48" onclick="setBrush(48)"></div>
155
+ </div>
156
+ <div class="tsep"></div>
157
+ <div id="gBrushPrev" class="g-brushprev" style="width:10px;height:10px"></div>
158
+ <div class="tsep"></div>
159
+ <button class="gpu-btn" id="pu-rl" onclick="usePU('revealLetter')">🔍<span class="puc" id="pc-rl">1</span></button>
160
+ <button class="gpu-btn" id="pu-tw" onclick="usePU('timeWarp')">⏰<span class="puc" id="pc-tw">1</span></button>
161
+ <button class="gpu-btn" id="pu-bm" onclick="usePU('bomb')">💣<span class="puc" id="pc-bm">1</span></button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- RIGHT: Chat -->
167
+ <div class="g-chat">
168
+ <div class="g-chat-msgs" id="gChatMsgs"></div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- BOTTOM: Reactions + Input -->
173
+ <div class="g-bottom">
174
+ <div class="g-reacts">
175
+ <button class="grbtn" onclick="react('🔥')">🔥</button>
176
+ <button class="grbtn" onclick="react('😂')">😂</button>
177
+ <button class="grbtn" onclick="react('👏')">👏</button>
178
+ <button class="grbtn" onclick="react('😱')">😱</button>
179
+ <button class="grbtn" onclick="react('💯')">💯</button>
180
+ <button class="grbtn" onclick="react('🤔')">🤔</button>
181
+ <button class="grbtn" onclick="react('❤️')">❤️</button>
182
+ <button class="grbtn" onclick="react('😤')">😤</button>
183
+ </div>
184
+ <div class="g-input-row">
185
+ <input class="g-inp" id="gChatInp" placeholder="Type your guess here..."
186
+ autocomplete="off" onkeydown="if(event.key==='Enter')sendGuess()">
187
+ <button class="g-send" onclick="sendGuess()">➤</button>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Game Overlays -->
192
+ <div class="overlay" id="ovChoose" style="display:none">
193
+ <div class="ov-card"><h2>Pick a Word</h2><p class="sub">You are drawing! 🎨</p>
194
+ <div class="word-choices" id="wcList"></div>
195
+ <p class="sub">Auto in <span id="cdChoose">15</span>s</p></div>
196
+ </div>
197
+ <div class="overlay" id="ovRoundEnd" style="display:none">
198
+ <div class="ov-card wide"><h2>Round Over!</h2><p class="sub">The word was</p>
199
+ <div class="rew" id="revWord"></div>
200
+ <div class="rscores" id="rscoreList"></div>
201
+ <div id="graphWrap" style="display:none;margin-top:10px">
202
+ <canvas id="scoreGraph" height="65" style="width:100%;border-radius:6px"></canvas></div>
203
+ <div style="margin-top:10px"><p class="sub" style="margin-bottom:5px">🎬 Replay</p>
204
+ <canvas id="replayCanvas" width="380" height="240" style="border-radius:6px;max-width:100%;background:#fff;border:1px solid var(--border)"></canvas></div>
205
+ <p class="sub" style="margin-top:10px">Next in <span id="cdNext">7</span>s…</p></div>
206
+ </div>
207
+ <div class="overlay" id="ovGameEnd" style="display:none">
208
+ <div class="ov-card wide"><h2>🎉 Game Over!</h2>
209
+ <div class="podium" id="podiumEl"></div>
210
+ <div id="lbFull" style="max-height:150px;overflow-y:auto;margin:8px 0"></div>
211
+ <canvas id="finalGraph" height="75" style="width:100%;border-radius:6px"></canvas>
212
+ <div class="ach-list" id="achList"></div>
213
+ <div style="display:flex;gap:8px;margin-top:14px;justify-content:center">
214
+ <button class="btn-p" onclick="goHome()">🏠 Home</button>
215
+ <button class="btn-s" onclick="playAgain()">🔄 Again</button>
216
+ </div></div>
217
+ </div>
218
+ <div class="overlay" id="ovAbort" style="display:none">
219
+ <div class="ov-card"><h2>⚠️ Game Ended</h2>
220
+ <p id="abortMsg" class="sub" style="margin:14px 0">Not enough players.</p>
221
+ <button class="btn-p" onclick="goHome()">🏠 Home</button></div>
222
+ </div>
223
+ </div>
224
+
225
+ <script src="/socket.io/socket.io.js"></script>
226
+ <script src="/js/app.js"></script>
227
+ </body>
228
+ </html>