Spaces:

VISHAL18for4
/

DRAWABLE

Sleeping

App Files Files Community

VISHAL18for4 commited on May 16

Commit

3d5e0e4

verified ·

1 Parent(s): f9dc27f

Delete public/index.html

Browse files

Files changed (1) hide show

public/index.html +0 -228

public/index.html DELETED Viewed

@@ -1,228 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
-<title>Drawable – Draw & Guess</title>
-<link rel="stylesheet" href="/css/game.css">
-</head>
-<body>
-<!-- ══════ LOBBY ══════ -->
-<div id="lobby-screen">
-<div class="lobby-wrap">
-<div class="lobby-card">
-  <div class="logo"><h1>Drawable</h1><p>The ultimate draw &amp; guess game 🎨</p></div>
-  <div class="avatar-section">
-    <div class="avatar-preview" id="avatarPreview">😀</div>
-    <div style="flex:1"><div class="form-group" style="margin:0"><label>Your Name</label>
-      <input type="text" id="playerName" placeholder="Enter your name" maxlength="20" autocomplete="off"></div></div>
-  </div>
-  <div id="emojiPicker" style="display:none" class="avatar-emoji-grid"></div>
-  <div id="msgBox" class="msg"></div>
-  <div id="homeView">
-    <div class="btn-group">
-      <button class="btn btn-primary" onclick="showCreate()">🏠 Create Room</button>
-      <button class="btn btn-secondary" onclick="showJoin()">🔗 Join with Code</button>
-      <button class="btn btn-outline" onclick="quickPlay()">⚡ Quick Play</button>
-    </div>
-  </div>
-  <div id="createView" style="display:none">
-    <button class="btn btn-outline btn-sm" onclick="showView('homeView')">← Back</button>
-    <button class="btn btn-outline btn-sm" onclick="toggleSettings()" style="margin-left:.5rem">⚙️ Settings</button>
-    <div class="settings-panel" id="settingsPanel">
-      <div class="settings-grid">
-        <div class="settings-item"><label>Max Players</label>
-          <select id="maxPlayers"><option>4</option><option>6</option><option>8</option><option selected>10</option><option>12</option></select></div>
-        <div class="settings-item"><label>Rounds</label>
-          <select id="rounds"><option>2</option><option selected>3</option><option>4</option><option>5</option></select></div>
-        <div class="settings-item"><label>Draw Time (s)</label>
-          <select id="drawTime"><option>30</option><option>60</option><option selected>80</option><option>120</option></select></div>
-        <div class="settings-item"><label>Word Choices</label>
-          <select id="wordChoices"><option>2</option><option selected>3</option><option>4</option></select></div>
-        <div class="settings-item"><label>Mode</label>
-          <select id="wordMode"><option value="normal">Normal</option><option value="mixed">Mixed+Custom</option><option value="custom">Custom Only</option></select></div>
-        <div class="settings-item"><label>Specials</label>
-          <div class="toggle-row"><input type="checkbox" id="teamMode"> Team Mode</div>
-          <div class="toggle-row"><input type="checkbox" id="quickDraw"> Quick Draw</div>
-          <div class="toggle-row"><input type="checkbox" id="suddenDeath"> Sudden Death</div>
-          <div class="toggle-row"><input type="checkbox" id="hintsEnabled" checked> Hints</div>
-        </div>
-      </div>
-      <div class="settings-item" style="margin-top:.75rem"><label>Custom Words (comma separated)</label>
-        <input type="text" id="customWords" placeholder="apple, rocket, banana..."></div>
-      <div class="settings-item" style="margin-top:.75rem"><label>Categories</label>
-        <div class="categories-grid" id="categoriesGrid"></div></div>
-    </div>
-    <button class="btn btn-primary" onclick="doCreateRoom()" style="margin-top:1rem">🎨 Create Room</button>
-  </div>
-  <div id="joinView" style="display:none">
-    <button class="btn btn-outline btn-sm" onclick="showView('homeView')" style="margin-bottom:1rem">← Back</button>
-    <div class="form-group"><label>Room Code</label>
-      <input type="text" id="roomCode" placeholder="e.g. AB12CD" maxlength="6"
-        style="text-transform:uppercase;letter-spacing:.15em;font-size:1.2rem;text-align:center"></div>
-    <button class="btn btn-secondary" onclick="doJoinRoom()">Join Room</button>
-  </div>
-  <div id="waitingView" style="display:none">
-    <div class="room-code-display">
-      <div><div style="font-size:.7rem;color:var(--text2);text-transform:uppercase;font-weight:700;margin-bottom:.25rem">Room Code</div>
-        <div class="code" id="displayCode"></div></div>
-      <button class="copy-btn" onclick="copyCode()">📋 Copy</button>
-    </div>
-    <div class="player-list">
-      <h3>Players (<span id="playerCount">0</span>/<span id="maxCount">10</span>)</h3>
-      <div class="player-chips" id="playerChips"></div>
-    </div>
-    <div id="hostControls" style="display:none">
-      <button class="btn btn-success" id="startBtn" onclick="doStartGame()" disabled>▶ Start Game</button>
-      <p style="color:var(--text2);font-size:.8rem;text-align:center;margin-top:.5rem">Need at least 2 players</p>
-    </div>
-    <div id="guestWait" style="display:none;text-align:center;padding:1rem;color:var(--text2)">
-      <div class="spinner" style="margin:0 auto .75rem"></div>Waiting for host to start...
-    </div>
-    <div id="matchmakingWait" style="display:none;text-align:center;padding:1rem">
-      <div class="spinner" style="margin:0 auto .75rem"></div>
-      <p style="color:var(--cyan);font-weight:700;font-size:1rem" id="mmStatus">🔍 Finding players...</p>
-      <p style="color:var(--text2);font-size:.85rem;margin-top:.4rem" id="mmCountdown"></p>
-    </div>
-  </div>
-</div>
-</div>
-</div>
-<!-- ══════ GAME ══════ -->
-<div id="game-screen">
-  <!-- TOP BAR -->
-  <div class="g-topbar">
-    <div class="g-timer">
-      <span class="g-timer-icon">⏰</span>
-      <span class="g-timer-num" id="gTimerNum">—</span>
-    </div>
-    <span class="g-round" id="gRound">Round 1 of 3</span>
-    <div class="g-word-area">
-      <div class="g-word-label" id="gWordLabel">GUESS THIS</div>
-      <div class="g-hint" id="gHint">&nbsp;</div>
-    </div>
-    <span style="font-size:.75rem;color:var(--text2)" id="gRoomCode"></span>
-  </div>
-  <!-- MAIN 3-COLUMN -->
-  <div class="g-main">
-    <!-- LEFT: Players -->
-    <div class="g-players" id="gPlayers">
-      <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>
-    </div>
-    <!-- CENTER: Canvas + toolbar -->
-    <div class="g-center">
-      <div class="g-canvas-wrap" id="gCanvasWrap">
-        <canvas id="game-canvas" width="800" height="550"></canvas>
-        <div class="g-wait" id="gWait">
-          <div class="g-wait-icon">✏️</div>
-          <div class="g-wait-title" id="gWaitTitle">Waiting…</div>
-          <div class="g-wait-sub" id="gWaitSub">Get ready!</div>
-        </div>
-      </div>
-      <!-- Toolbar (drawer only) -->
-      <div class="g-toolbar" id="gToolbar" style="display:none">
-        <div class="g-tb-row">
-          <div class="g-colors" id="gColors"></div>
-          <div class="tsep"></div>
-          <button class="gtbtn active" id="tPen" onclick="setTool('pen')" title="Pen (B)">✏️</button>
-          <button class="gtbtn" id="tEraser" onclick="setTool('eraser')" title="Eraser (E)">⬜</button>
-          <button class="gtbtn" id="tFill" onclick="setTool('fill')" title="Fill (F)">🪣</button>
-          <button class="gtbtn" id="tLine" onclick="setTool('line')" title="Line">╱</button>
-          <button class="gtbtn" id="tRect" onclick="setTool('rect')" title="Rectangle">▭</button>
-          <button class="gtbtn" id="tCircle" onclick="setTool('circle')" title="Circle">◯</button>
-          <div class="tsep"></div>
-          <button class="gtbtn" onclick="undoLast()" title="Undo (U)">↩️</button>
-          <button class="gtbtn" onclick="clearAll()" title="Clear (C)">🗑️</button>
-        </div>
-        <div class="g-tb-row" style="margin-top:4px">
-          <span style="font-size:.65rem;color:var(--text2);font-weight:700">Size:</span>
-          <div class="g-sizes">
-            <div class="gsdot" style="width:5px;height:5px" data-s="3" onclick="setBrush(3)"></div>
-            <div class="gsdot" style="width:9px;height:9px" data-s="7" onclick="setBrush(7)"></div>
-            <div class="gsdot" style="width:14px;height:14px" data-s="14" onclick="setBrush(14)"></div>
-            <div class="gsdot" style="width:20px;height:20px" data-s="26" onclick="setBrush(26)"></div>
-            <div class="gsdot" style="width:26px;height:26px" data-s="48" onclick="setBrush(48)"></div>
-          </div>
-          <div class="tsep"></div>
-          <div id="gBrushPrev" class="g-brushprev" style="width:10px;height:10px"></div>
-          <div class="tsep"></div>
-          <button class="gpu-btn" id="pu-rl" onclick="usePU('revealLetter')">🔍<span class="puc" id="pc-rl">1</span></button>
-          <button class="gpu-btn" id="pu-tw" onclick="usePU('timeWarp')">⏰<span class="puc" id="pc-tw">1</span></button>
-          <button class="gpu-btn" id="pu-bm" onclick="usePU('bomb')">💣<span class="puc" id="pc-bm">1</span></button>
-        </div>
-      </div>
-    </div>
-    <!-- RIGHT: Chat -->
-    <div class="g-chat">
-      <div class="g-chat-msgs" id="gChatMsgs"></div>
-    </div>
-  </div>
-  <!-- BOTTOM: Reactions + Input -->
-  <div class="g-bottom">
-    <div class="g-reacts">
-      <button class="grbtn" onclick="react('🔥')">🔥</button>
-      <button class="grbtn" onclick="react('😂')">😂</button>
-      <button class="grbtn" onclick="react('👏')">👏</button>
-      <button class="grbtn" onclick="react('😱')">😱</button>
-      <button class="grbtn" onclick="react('💯')">💯</button>
-      <button class="grbtn" onclick="react('🤔')">🤔</button>
-      <button class="grbtn" onclick="react('❤️')">❤️</button>
-      <button class="grbtn" onclick="react('😤')">😤</button>
-    </div>
-    <div class="g-input-row">
-      <input class="g-inp" id="gChatInp" placeholder="Type your guess here..."
-        autocomplete="off" onkeydown="if(event.key==='Enter')sendGuess()">
-      <button class="g-send" onclick="sendGuess()">➤</button>
-    </div>
-  </div>
-  <!-- Game Overlays -->
-  <div class="overlay" id="ovChoose" style="display:none">
-    <div class="ov-card"><h2>Pick a Word</h2><p class="sub">You are drawing! 🎨</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-p" onclick="goHome()">🏠 Home</button>
-        <button class="btn-s" onclick="playAgain()">🔄 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-p" onclick="goHome()">🏠 Home</button></div>
-  </div>
-</div>
-<script src="/socket.io/socket.io.js"></script>
-<script src="/js/app.js"></script>
-</body>
-</html>