PM
372 lines
21 KiB
HTML
372 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Drawing - DrawTogether</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--yellow: #FFD23F; --coral: #FF5C5C; --mint: #4ECDC4;
|
|
--lavender: #A593E0; --sky: #5BCEFA; --dark: #2D2D2D;
|
|
--cream: #FFF8E7; --white: #FFFFFF;
|
|
--shadow-card: 0 6px 0 rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
|
|
--shadow-btn: 0 5px 0 rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
|
|
}
|
|
html, body { font-family: 'Fredoka', system-ui, sans-serif; color: var(--dark); background: var(--cream); -webkit-font-smoothing: antialiased; }
|
|
body { min-height: 100vh; }
|
|
|
|
.game-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 14px 22px; max-width: 1500px; margin: 0 auto;
|
|
}
|
|
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; text-decoration: none; color: inherit; }
|
|
.logo-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--coral); display: grid; place-items: center; box-shadow: var(--shadow-card); transform: rotate(-6deg); }
|
|
.header-pills { display: flex; gap: 10px; align-items: center; }
|
|
.pill-info { padding: 8px 16px; background: var(--white); border: 2px solid var(--dark); border-radius: 999px; font-weight: 700; font-size: 13px; box-shadow: 0 3px 0 rgba(0,0,0,0.1); display: inline-flex; align-items: center; gap: 6px; }
|
|
.pill-info.round { background: var(--lavender); color: white; }
|
|
.leave-btn { padding: 8px 14px; background: var(--white); border: 2px solid var(--dark); border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,0.1); display: inline-flex; align-items: center; gap: 6px; }
|
|
|
|
main {
|
|
max-width: 1500px; margin: 0 auto; padding: 8px 22px 30px;
|
|
display: grid; grid-template-columns: 220px 1fr 280px; gap: 18px;
|
|
}
|
|
|
|
/* Sidebar (players/scoreboard) */
|
|
.panel { background: var(--white); border: 3px solid var(--dark); border-radius: 20px; padding: 16px; box-shadow: var(--shadow-card); }
|
|
.panel-title { font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(45,45,45,0.6); margin-bottom: 12px; padding-left: 4px; }
|
|
|
|
.scoreboard { display: flex; flex-direction: column; gap: 8px; }
|
|
.score-item {
|
|
display: flex; align-items: center; gap: 10px; padding: 8px 10px;
|
|
background: var(--cream); border-radius: 12px; border: 2px solid transparent;
|
|
}
|
|
.score-item.drawing { background: var(--yellow); border-color: var(--dark); position: relative; }
|
|
.score-item .rank { width: 22px; height: 22px; background: var(--white); border: 2px solid var(--dark); border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
|
|
.score-item.drawing .rank { background: var(--coral); color: white; }
|
|
.score-item .av { width: 32px; height: 32px; border-radius: 10px; border: 2px solid var(--dark); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
|
|
.score-item .info { flex: 1; min-width: 0; }
|
|
.score-item .name { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
|
|
.score-item .pts { font-size: 11px; color: rgba(45,45,45,0.6); font-weight: 600; }
|
|
.score-item .pts strong { color: var(--coral); }
|
|
.score-item .pencil-icon { color: var(--dark); flex-shrink: 0; }
|
|
.score-item .guessed { color: var(--mint); font-weight: 700; font-size: 11px; }
|
|
|
|
/* Center (canvas area) */
|
|
.canvas-area { display: flex; flex-direction: column; gap: 14px; }
|
|
.canvas-top {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
|
background: var(--white); border: 3px solid var(--dark); border-radius: 18px;
|
|
padding: 14px 18px; box-shadow: var(--shadow-card);
|
|
}
|
|
.timer-ring {
|
|
position: relative; width: 60px; height: 60px; flex-shrink: 0;
|
|
}
|
|
.timer-ring svg { width: 60px; height: 60px; transform: rotate(-90deg); }
|
|
.timer-ring .bg-track { fill: none; stroke: rgba(45,45,45,0.12); stroke-width: 6; }
|
|
.timer-ring .fg-track { fill: none; stroke: var(--coral); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 165; stroke-dashoffset: 35; transition: stroke-dashoffset 1s linear; }
|
|
.timer-ring .label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 16px; }
|
|
|
|
.word-hint { flex: 1; text-align: center; }
|
|
.word-hint .lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(45,45,45,0.55); margin-bottom: 4px; }
|
|
.word-letters { display: inline-flex; gap: 8px; justify-content: center; }
|
|
.letter {
|
|
width: 30px; height: 38px; background: var(--cream); border: 2px solid var(--dark);
|
|
border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 18px;
|
|
}
|
|
.letter.revealed { background: var(--yellow); }
|
|
.letter .underline { display: block; width: 18px; height: 3px; background: var(--dark); border-radius: 2px; }
|
|
.word-meta { font-size: 12px; font-weight: 600; color: rgba(45,45,45,0.6); margin-top: 4px; }
|
|
|
|
.drawing-canvas {
|
|
background: var(--white); border: 3px solid var(--dark); border-radius: 20px;
|
|
box-shadow: var(--shadow-card); padding: 16px;
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
aspect-ratio: 16/10; min-height: 380px; position: relative;
|
|
}
|
|
.canvas-stage { flex: 1; background: var(--cream); border: 2px dashed rgba(45,45,45,0.18); border-radius: 14px; overflow: hidden; position: relative; display: grid; place-items: center; }
|
|
.you-drawing-tag {
|
|
position: absolute; top: 14px; left: 14px;
|
|
padding: 6px 12px; background: var(--coral); color: white; border: 2px solid var(--dark); border-radius: 999px;
|
|
font-weight: 700; font-size: 12px; box-shadow: 0 3px 0 rgba(0,0,0,0.15); z-index: 2;
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
}
|
|
|
|
/* Tool palette */
|
|
.toolbar {
|
|
display: flex; align-items: center; gap: 14px; padding: 12px;
|
|
background: var(--cream); border-radius: 14px;
|
|
flex-wrap: wrap; justify-content: center;
|
|
}
|
|
.color-row { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.color-swatch {
|
|
width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--dark);
|
|
cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.15);
|
|
transition: transform 0.12s ease;
|
|
}
|
|
.color-swatch:hover { transform: translateY(-2px); }
|
|
.color-swatch.active { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--dark); transform: translateY(-2px); }
|
|
.divider { width: 2px; height: 28px; background: rgba(45,45,45,0.15); }
|
|
.tool-btn { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--dark); background: var(--white); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,0.15); transition: transform 0.12s ease; }
|
|
.tool-btn:hover { transform: translateY(-2px); }
|
|
.tool-btn.active { background: var(--yellow); }
|
|
.brush-sizes { display: flex; gap: 6px; align-items: center; }
|
|
.brush-size { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--dark); background: var(--white); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.15); }
|
|
.brush-size .dot { background: var(--dark); border-radius: 50%; }
|
|
.brush-size .dot.s1 { width: 4px; height: 4px; }
|
|
.brush-size .dot.s2 { width: 8px; height: 8px; }
|
|
.brush-size .dot.s3 { width: 14px; height: 14px; }
|
|
.brush-size.active { background: var(--mint); }
|
|
|
|
/* Right column — chat + guess */
|
|
.chat-panel { display: flex; flex-direction: column; height: 100%; min-height: 500px; }
|
|
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
|
|
.msg { padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; }
|
|
.msg.regular { background: var(--cream); }
|
|
.msg.regular .name { font-weight: 700; color: var(--coral); margin-right: 6px; }
|
|
.msg.guessed { background: rgba(78,205,196,0.18); border: 2px dashed var(--mint); font-weight: 600; }
|
|
.msg.guessed .name { font-weight: 700; color: var(--dark); margin-right: 6px; }
|
|
.msg.guessed .check { display: inline-flex; gap: 4px; align-items: center; color: var(--mint); font-weight: 700; }
|
|
.msg.close { background: rgba(255,210,63,0.3); font-weight: 600; font-style: italic; }
|
|
.msg.system { background: transparent; text-align: center; font-style: italic; color: rgba(45,45,45,0.6); font-size: 12px; }
|
|
|
|
.guess-input-row { display: flex; gap: 6px; padding-top: 10px; border-top: 2px dashed rgba(45,45,45,0.15); margin-top: 10px; }
|
|
.guess-input { flex: 1; font-family: inherit; font-weight: 600; font-size: 14px; padding: 10px 14px; border: 2px solid var(--dark); border-radius: 999px; background: var(--cream); outline: none; }
|
|
.guess-input:focus { background: var(--white); border-color: var(--coral); }
|
|
.send-btn { width: 40px; height: 40px; background: var(--mint); border: 2px solid var(--dark); border-radius: 50%; cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,0.15); flex-shrink: 0; }
|
|
|
|
@media (max-width: 1100px) {
|
|
main { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="game-header">
|
|
<a class="logo" href="01-landing.html">
|
|
<div class="logo-mark"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/></svg></div>
|
|
DrawTogether
|
|
</a>
|
|
<div class="header-pills">
|
|
<span class="pill-info round">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-9-9c2.5 0 4.8.97 6.5 2.5L21 8"/><polyline points="21 3 21 8 16 8"/></svg>
|
|
Round 3 / 5
|
|
</span>
|
|
<span class="pill-info">
|
|
<span style="width: 8px; height: 8px; background: var(--mint); border-radius: 50%;"></span>
|
|
MIA42K
|
|
</span>
|
|
<button class="leave-btn">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>
|
|
Leave
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Left: scoreboard -->
|
|
<aside class="panel" data-testid="panel-scoreboard">
|
|
<div class="panel-title">Scoreboard</div>
|
|
<div class="scoreboard">
|
|
<div class="score-item">
|
|
<div class="rank">1</div>
|
|
<div class="av" style="background: var(--yellow);">🦄</div>
|
|
<div class="info">
|
|
<div class="name">Mia</div>
|
|
<div class="pts"><strong>1240</strong> pts</div>
|
|
</div>
|
|
</div>
|
|
<div class="score-item">
|
|
<div class="rank">2</div>
|
|
<div class="av" style="background: var(--mint);">🦊</div>
|
|
<div class="info">
|
|
<div class="name">Suki</div>
|
|
<div class="pts guessed">+120 just now!</div>
|
|
</div>
|
|
</div>
|
|
<div class="score-item drawing">
|
|
<div class="rank">3</div>
|
|
<div class="av" style="background: var(--white);">🐼</div>
|
|
<div class="info">
|
|
<div class="name">Ravi</div>
|
|
<div class="pts"><strong>820</strong> pts · drawing</div>
|
|
</div>
|
|
<div class="pencil-icon">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/></svg>
|
|
</div>
|
|
</div>
|
|
<div class="score-item">
|
|
<div class="rank">4</div>
|
|
<div class="av" style="background: var(--sky);">🐸</div>
|
|
<div class="info">
|
|
<div class="name">Jules</div>
|
|
<div class="pts"><strong>740</strong> pts</div>
|
|
</div>
|
|
</div>
|
|
<div class="score-item">
|
|
<div class="rank">5</div>
|
|
<div class="av" style="background: var(--coral);">🐱</div>
|
|
<div class="info">
|
|
<div class="name">Pat</div>
|
|
<div class="pts">guessing...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Center: canvas -->
|
|
<section class="canvas-area">
|
|
<div class="canvas-top" data-testid="canvas-top">
|
|
<div class="timer-ring" data-testid="timer">
|
|
<svg viewBox="0 0 60 60">
|
|
<circle class="bg-track" cx="30" cy="30" r="26"/>
|
|
<circle class="fg-track" cx="30" cy="30" r="26"/>
|
|
</svg>
|
|
<div class="label">47s</div>
|
|
</div>
|
|
|
|
<div class="word-hint">
|
|
<div class="lbl">Word hint</div>
|
|
<div class="word-letters" data-testid="word-hint">
|
|
<div class="letter"><span class="underline"></span></div>
|
|
<div class="letter"><span class="underline"></span></div>
|
|
<div class="letter revealed">A</div>
|
|
<div class="letter"><span class="underline"></span></div>
|
|
<div class="letter"><span class="underline"></span></div>
|
|
<div class="letter"><span class="underline"></span></div>
|
|
</div>
|
|
<div class="word-meta">6 letters · animal</div>
|
|
</div>
|
|
|
|
<div class="pill-info" style="background: var(--mint);">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/></svg>
|
|
Ravi drawing
|
|
</div>
|
|
</div>
|
|
|
|
<div class="drawing-canvas" data-testid="canvas">
|
|
<div class="canvas-stage">
|
|
<!-- sample mid-drawing: cat -->
|
|
<svg viewBox="0 0 600 360" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style="max-width: 600px;">
|
|
<!-- body sketch -->
|
|
<ellipse cx="300" cy="240" rx="135" ry="75" fill="#FFD23F" stroke="#2D2D2D" stroke-width="5"/>
|
|
<!-- head -->
|
|
<circle cx="300" cy="155" r="92" fill="#FFD23F" stroke="#2D2D2D" stroke-width="5"/>
|
|
<!-- ears -->
|
|
<polygon points="225,90 215,30 280,80" fill="#FFD23F" stroke="#2D2D2D" stroke-width="5" stroke-linejoin="round"/>
|
|
<polygon points="375,90 385,30 320,80" fill="#FFD23F" stroke="#2D2D2D" stroke-width="5" stroke-linejoin="round"/>
|
|
<!-- inner ears -->
|
|
<polygon points="232,82 233,55 265,78" fill="#FF5C5C"/>
|
|
<polygon points="368,82 367,55 335,78" fill="#FF5C5C"/>
|
|
<!-- eyes -->
|
|
<circle cx="270" cy="150" r="11" fill="#2D2D2D"/>
|
|
<circle cx="330" cy="150" r="11" fill="#2D2D2D"/>
|
|
<circle cx="274" cy="146" r="4" fill="white"/>
|
|
<circle cx="334" cy="146" r="4" fill="white"/>
|
|
<!-- nose + mouth -->
|
|
<path d="M291 178 Q300 188 309 178" fill="#FF5C5C" stroke="#2D2D2D" stroke-width="3" stroke-linejoin="round"/>
|
|
<path d="M291 184 Q283 200 295 206" stroke="#2D2D2D" stroke-width="4" fill="none" stroke-linecap="round"/>
|
|
<path d="M309 184 Q317 200 305 206" stroke="#2D2D2D" stroke-width="4" fill="none" stroke-linecap="round"/>
|
|
<!-- whiskers -->
|
|
<line x1="225" y1="165" x2="180" y2="160" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="225" y1="173" x2="180" y2="178" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="375" y1="165" x2="420" y2="160" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="375" y1="173" x2="420" y2="178" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/>
|
|
<!-- belly -->
|
|
<ellipse cx="300" cy="265" rx="80" ry="40" fill="#FFF8E7" opacity="0.6"/>
|
|
<!-- tail -->
|
|
<path d="M430 220 Q500 200 480 145" stroke="#2D2D2D" stroke-width="5" fill="#FFD23F" stroke-linecap="round"/>
|
|
<!-- in-progress pencil cursor -->
|
|
<g transform="translate(450,290) rotate(40)">
|
|
<rect x="0" y="0" width="42" height="12" rx="3" fill="#FF5C5C" stroke="#2D2D2D" stroke-width="3"/>
|
|
<polygon points="42,0 52,6 42,12" fill="#FFD23F" stroke="#2D2D2D" stroke-width="3" stroke-linejoin="round"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Toolbar (drawer view) -->
|
|
<div class="toolbar" data-testid="toolbar">
|
|
<div class="color-row">
|
|
<div class="color-swatch" style="background: #2D2D2D;"></div>
|
|
<div class="color-swatch active" style="background: #FFD23F;"></div>
|
|
<div class="color-swatch" style="background: #FF5C5C;"></div>
|
|
<div class="color-swatch" style="background: #4ECDC4;"></div>
|
|
<div class="color-swatch" style="background: #5BCEFA;"></div>
|
|
<div class="color-swatch" style="background: #A593E0;"></div>
|
|
<div class="color-swatch" style="background: #ffffff;"></div>
|
|
<div class="color-swatch" style="background: #6BCB77;"></div>
|
|
<div class="color-swatch" style="background: #FF8C42;"></div>
|
|
<div class="color-swatch" style="background: #B5651D;"></div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="brush-sizes">
|
|
<div class="brush-size"><span class="dot s1"></span></div>
|
|
<div class="brush-size active"><span class="dot s2"></span></div>
|
|
<div class="brush-size"><span class="dot s3"></span></div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<button class="tool-btn active" title="Brush">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/></svg>
|
|
</button>
|
|
<button class="tool-btn" title="Eraser">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M20 20H7L3 16a2 2 0 0 1 0-3l9-9a2 2 0 0 1 3 0l6 6a2 2 0 0 1 0 3l-7 7"/></svg>
|
|
</button>
|
|
<button class="tool-btn" title="Bucket">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M19 11l-7-7-9 9 7 7 9-9z"/><path d="M5 13l4 4M19 11c1 0 2 1 2 3a3 3 0 1 1-6 0c0-1 1-3 1-3"/></svg>
|
|
</button>
|
|
<button class="tool-btn" title="Undo">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M3 7v6h6M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
|
|
</button>
|
|
<button class="tool-btn" title="Clear">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Right: chat / guesses -->
|
|
<aside class="panel chat-panel" data-testid="panel-chat">
|
|
<div class="panel-title">Guesses</div>
|
|
<div class="chat-messages">
|
|
<div class="msg system">— Round 3 started —</div>
|
|
<div class="msg regular">
|
|
<span class="name">Pat:</span> dog?
|
|
</div>
|
|
<div class="msg regular">
|
|
<span class="name">Jules:</span> hamster
|
|
</div>
|
|
<div class="msg close">
|
|
<span style="color: var(--coral); font-weight:700;">Suki:</span> kitten — close!
|
|
</div>
|
|
<div class="msg regular">
|
|
<span class="name">Pat:</span> lion?
|
|
</div>
|
|
<div class="msg guessed">
|
|
<span class="name">Mia</span> guessed it!
|
|
<span class="check"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg> +180</span>
|
|
</div>
|
|
<div class="msg regular">
|
|
<span class="name">Pat:</span> tiger
|
|
</div>
|
|
<div class="msg guessed">
|
|
<span class="name">Suki</span> guessed it!
|
|
<span class="check"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg> +120</span>
|
|
</div>
|
|
<div class="msg regular">
|
|
<span class="name">Jules:</span> kitty cat??
|
|
</div>
|
|
<div class="msg system">Pat is typing...</div>
|
|
</div>
|
|
<div class="guess-input-row">
|
|
<input class="guess-input" type="text" placeholder="Type your guess..." data-testid="guess-input">
|
|
<button class="send-btn" data-testid="btn-guess">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</body>
|
|
</html>
|