Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> | |
| <title>Drawable</title> | |
| <link rel="stylesheet" href="/css/game.css"> | |
| </head> | |
| <body> | |
| <!-- TOP BAR --> | |
| <div class="topbar"> | |
| <span class="logo-sm">🎨</span> | |
| <span class="tb-code" id="tbRoom">—</span> | |
| <span class="tb-round" id="tbRound">R 1/3</span> | |
| <div class="tb-center"> | |
| <div class="word-label" id="wordLabel">GUESS THIS</div> | |
| <div class="hint-display" id="hintDisplay"> </div> | |
| </div> | |
| <div class="timer-wrap"> | |
| <svg width="42" height="42" viewBox="0 0 42 42"> | |
| <circle cx="21" cy="21" r="17" fill="none" stroke="#2a2a4a" stroke-width="3.5"/> | |
| <circle id="timerCircle" cx="21" cy="21" r="17" fill="none" stroke="#00f5ff" stroke-width="3.5" | |
| stroke-dasharray="107" stroke-dashoffset="0" stroke-linecap="round" | |
| style="transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .9s linear,stroke .4s"/> | |
| </svg> | |
| <div class="timer-num" id="timerNum">—</div> | |
| </div> | |
| </div> | |
| <!-- MAIN --> | |
| <div class="game-layout"> | |
| <div class="top-section"> | |
| <!-- Players --> | |
| <div class="players-panel" id="playersPanel"> | |
| <div style="text-align:center;color:var(--text2);font-size:.7rem;padding:4px">Players</div> | |
| </div> | |
| <!-- Canvas --> | |
| <div class="canvas-area" id="canvasArea"> | |
| <canvas id="game-canvas" width="800" height="550"></canvas> | |
| <div class="waiting-overlay" id="waitOverlay"> | |
| <div class="wait-icon">✏️</div> | |
| <div class="wait-title" id="waitTitle">Waiting…</div> | |
| <div class="wait-sub" id="waitSub">Get ready!</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toolbar (shown only when drawing) --> | |
| <div class="toolbar" id="toolbar"> | |
| <div class="tb-row"> | |
| <div class="color-palette" id="colorPalette"></div> | |
| <div class="tsep"></div> | |
| <button class="tool-btn active" id="tPen" onclick="setTool('pen')" title="Pen (B)">✏️</button> | |
| <button class="tool-btn" id="tEraser" onclick="setTool('eraser')" title="Eraser (E)">⬜</button> | |
| <button class="tool-btn" id="tFill" onclick="setTool('fill')" title="Fill (F)">🪣</button> | |
| <button class="tool-btn" id="tLine" onclick="setTool('line')" title="Line">╱</button> | |
| <button class="tool-btn" id="tRect" onclick="setTool('rect')" title="Rectangle">▭</button> | |
| <button class="tool-btn" id="tCircle" onclick="setTool('circle')" title="Circle">◯</button> | |
| <div class="tsep"></div> | |
| <button class="tool-btn" onclick="undoLast()" title="Undo (U)">↩️</button> | |
| <button class="tool-btn" onclick="clearAll()" title="Clear (C)">🗑️</button> | |
| </div> | |
| <div class="tb-row size-row" style="margin-top:4px"> | |
| <span class="slabel">Size:</span> | |
| <div class="size-dots"> | |
| <div class="sdot" style="width:5px;height:5px" data-s="3" onclick="setBrush(3)"></div> | |
| <div class="sdot" style="width:9px;height:9px" data-s="7" onclick="setBrush(7)"></div> | |
| <div class="sdot" style="width:14px;height:14px" data-s="14" onclick="setBrush(14)"></div> | |
| <div class="sdot" style="width:20px;height:20px" data-s="26" onclick="setBrush(26)"></div> | |
| <div class="sdot" style="width:26px;height:26px" data-s="48" onclick="setBrush(48)"></div> | |
| </div> | |
| <div class="tsep"></div> | |
| <div id="brushPrev" class="brush-prev"></div> | |
| <div class="tsep"></div> | |
| <button class="pu-btn" id="pu-rl" onclick="usePU('revealLetter')" title="Reveal Letter">🔍 <span class="pc" id="pc-rl">1</span></button> | |
| <button class="pu-btn" id="pu-tw" onclick="usePU('timeWarp')" title="+15s">⏰ <span class="pc" id="pc-tw">1</span></button> | |
| <button class="pu-btn" id="pu-bm" onclick="usePU('bomb')" title="Bomb canvas">💣 <span class="pc" id="pc-bm">1</span></button> | |
| </div> | |
| </div> | |
| <!-- Chat --> | |
| <div class="bottom-section"> | |
| <div class="chat-msgs" id="chatMsgs"></div> | |
| <div class="chat-bottom"> | |
| <div class="react-row"> | |
| <button class="rbtn" onclick="react('🔥')">🔥</button> | |
| <button class="rbtn" onclick="react('😂')">😂</button> | |
| <button class="rbtn" onclick="react('👏')">👏</button> | |
| <button class="rbtn" onclick="react('😱')">😱</button> | |
| <button class="rbtn" onclick="react('💯')">💯</button> | |
| <button class="rbtn" onclick="react('🤔')">🤔</button> | |
| <button class="rbtn" onclick="react('❤️')">❤️</button> | |
| <button class="rbtn" onclick="react('😤')">😤</button> | |
| </div> | |
| <div class="chat-input-row"> | |
| <input class="chat-inp" id="chatInp" placeholder="Type your guess here..." | |
| autocomplete="off" onkeydown="if(event.key==='Enter')send()"> | |
| <button class="send-btn" onclick="send()">➤</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- OVERLAYS --> | |
| <div class="overlay" id="ovChoose" style="display:none"> | |
| <div class="ov-card"> | |
| <h2>Pick a Word</h2> | |
| <p class="sub">You are drawing! Choose wisely 🎨</p> | |
| <div class="word-choices" id="wcList"></div> | |
| <p class="sub">Auto in <span id="cdChoose">15</span>s</p> | |
| </div> | |
| </div> | |
| <div class="overlay" id="ovRoundEnd" style="display:none"> | |
| <div class="ov-card wide"> | |
| <h2>Round Over!</h2> | |
| <p class="sub">The word was</p> | |
| <div class="rew" id="revWord"></div> | |
| <div class="rscores" id="rscoreList"></div> | |
| <div id="graphWrap" style="display:none;margin-top:10px"> | |
| <canvas id="scoreGraph" height="65" style="width:100%;border-radius:6px"></canvas> | |
| </div> | |
| <div style="margin-top:10px"> | |
| <p class="sub" style="margin-bottom:5px">🎬 Replay</p> | |
| <canvas id="replayCanvas" width="380" height="240" | |
| style="border-radius:6px;max-width:100%;background:#fff;border:1px solid var(--border)"></canvas> | |
| </div> | |
| <p class="sub" style="margin-top:10px">Next in <span id="cdNext">7</span>s…</p> | |
| </div> | |
| </div> | |
| <div class="overlay" id="ovGameEnd" style="display:none"> | |
| <div class="ov-card wide"> | |
| <h2>🎉 Game Over!</h2> | |
| <div class="podium" id="podiumEl"></div> | |
| <div id="lbFull" style="max-height:150px;overflow-y:auto;margin:8px 0"></div> | |
| <canvas id="finalGraph" height="75" style="width:100%;border-radius:6px"></canvas> | |
| <div class="ach-list" id="achList"></div> | |
| <div style="display:flex;gap:8px;margin-top:14px;justify-content:center"> | |
| <button class="btn btn-p" onclick="location.href='/'">🏠 Home</button> | |
| <button class="btn btn-s" onclick="again()">🔄 Again</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overlay" id="ovAbort" style="display:none"> | |
| <div class="ov-card"> | |
| <h2>⚠️ Game Ended</h2> | |
| <p id="abortMsg" class="sub" style="margin:14px 0">Not enough players.</p> | |
| <button class="btn btn-p" onclick="location.href='/'">🏠 Home</button> | |
| </div> | |
| </div> | |
| <script src="/socket.io/socket.io.js"></script> | |
| <script src="/js/game.js"></script> | |
| </body> | |
| </html> | |