111 lines
4.9 KiB
HTML
111 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>skribble - free multiplayer drawing & guessing game</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✏️</text></svg>">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ==================== HOME SCREEN ==================== -->
|
||
<div id="screen-home" class="screen">
|
||
<div class="home-wrap">
|
||
<h1 class="logo logo-big">SKRIBBLE</h1>
|
||
<div class="home-columns">
|
||
<div class="panel home-card">
|
||
<div class="avatar-row">
|
||
<canvas id="avatar-preview" width="80" height="80"></canvas>
|
||
<button id="btn-avatar-shuffle" class="btn btn-blue btn-small" title="Randomize look">🔀</button>
|
||
</div>
|
||
<input id="name-input" maxlength="16" placeholder="Enter your name" autocomplete="off">
|
||
<button id="btn-play" class="btn btn-green btn-big">Play!</button>
|
||
<div class="home-sep"><span>or</span></div>
|
||
<div class="join-row">
|
||
<input id="code-input" maxlength="4" placeholder="CODE" autocomplete="off">
|
||
<button id="btn-join-code" class="btn btn-blue">Join</button>
|
||
</div>
|
||
<button id="btn-create-private" class="btn btn-orange">Create Private Room</button>
|
||
</div>
|
||
<div class="panel home-card" id="rooms-card">
|
||
<div class="rooms-head">
|
||
<h2>Public Rooms</h2>
|
||
<button id="btn-refresh-rooms" class="btn btn-blue btn-small" title="Refresh">⟳</button>
|
||
</div>
|
||
<div id="rooms-list"><div class="rooms-empty">Loading…</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel howto">
|
||
<b>How to play:</b> When it's your turn, draw the word. When others draw, type your guess into the chat.
|
||
The faster you guess, the more points you earn! 🎨
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== GAME SCREEN ==================== -->
|
||
<div id="screen-game" class="screen hidden">
|
||
<header id="topbar">
|
||
<div class="logo logo-small">SKRIBBLE</div>
|
||
<div id="room-code-chip" title="Click to copy invite code">#<span id="room-code">----</span></div>
|
||
<div id="round-display">Lobby</div>
|
||
<div id="word-display"></div>
|
||
<div id="clock" title="Time remaining">
|
||
<svg viewBox="0 0 40 40" id="clock-svg">
|
||
<circle cx="20" cy="20" r="17" class="clock-face"/>
|
||
<line id="clock-hand" x1="20" y1="20" x2="20" y2="7"/>
|
||
<circle cx="20" cy="20" r="2.2" class="clock-dot"/>
|
||
</svg>
|
||
<span id="clock-num">–</span>
|
||
</div>
|
||
<button id="btn-sound" class="icon-btn" title="Toggle sound">🔊</button>
|
||
<button id="btn-leave" class="icon-btn" title="Leave room">🚪</button>
|
||
</header>
|
||
|
||
<div id="main">
|
||
<aside id="players-panel" class="panel">
|
||
<ul id="players-list"></ul>
|
||
</aside>
|
||
|
||
<section id="center">
|
||
<div id="canvas-wrap" class="panel">
|
||
<canvas id="draw-canvas" width="1000" height="750"></canvas>
|
||
<div id="overlay" class="hidden"></div>
|
||
<div id="banner" class="hidden"></div>
|
||
</div>
|
||
<div id="tools" class="panel">
|
||
<div id="tool-buttons">
|
||
<button class="tool-btn" id="tool-brush" title="Brush (B)">
|
||
<svg viewBox="0 0 24 24"><path d="M3 21c1.5 0 3-.4 3.6-1.6L18 8l-3-3L3.6 16.4C3 17 2.6 19 3 21z" fill="currentColor"/><path d="M16 4l1.8-1.8a1.4 1.4 0 012 0l1 1a1.4 1.4 0 010 2L19 7z" fill="currentColor"/></svg>
|
||
</button>
|
||
<button class="tool-btn" id="tool-eraser" title="Eraser (E)">
|
||
<svg viewBox="0 0 24 24"><path d="M15.5 3l5.5 5.5a2 2 0 010 2.8l-8.2 8.2H8l-5.5-5.5a2 2 0 010-2.8l10.2-10.2a2 2 0 012.8 0zM8 17.5h4l7-7-4-4z" fill="currentColor"/></svg>
|
||
</button>
|
||
<button class="tool-btn" id="tool-fill" title="Fill bucket (F)">
|
||
<svg viewBox="0 0 24 24"><path d="M11 4l7 7-8.5 8.5a2.1 2.1 0 01-3 0L3 16a2.1 2.1 0 010-3zm1.4 2.8L6 13.2h12.8z" fill="currentColor"/><path d="M19.5 14s2 2.4 2 4a2 2 0 01-4 0c0-1.6 2-4 2-4z" fill="currentColor"/></svg>
|
||
</button>
|
||
<button class="tool-btn" id="tool-undo" title="Undo (Ctrl+Z)">
|
||
<svg viewBox="0 0 24 24"><path d="M9 5L3 11l6 6v-4c5 0 8.5 1.6 11 5-1-6-4-9-11-9z" fill="currentColor"/></svg>
|
||
</button>
|
||
<button class="tool-btn" id="tool-clear" title="Clear canvas">
|
||
<svg viewBox="0 0 24 24"><path d="M6 7h12l-1 14H7zm3-4h6l1 2h4v2H4V5h4z" fill="currentColor"/></svg>
|
||
</button>
|
||
</div>
|
||
<div id="brush-sizes"></div>
|
||
<div id="palette"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<aside id="chat-panel" class="panel">
|
||
<div id="chat-messages"></div>
|
||
<div id="typing-indicator"></div>
|
||
<input id="chat-input" maxlength="140" placeholder="Type your guess here…" autocomplete="off">
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toast-wrap"></div>
|
||
<script src="bundle.js"></script>
|
||
</body>
|
||
</html>
|