Gabriel Kaszewski
dc6bff027a
Some checks failed
CI / ci (push) Failing after 1m9s
Features: disabled place button during cooldown, beep on cooldown end, hand/paint mode toggle with Space shortcut, soldier count pop animation. Architecture: centralized DOM refs, AppState store replacing localStorage polling, event bus decoupling socket from handlers, keyboard manager, tool manager with Strategy pattern (paint-tool, hand-tool).
143 lines
5.2 KiB
HTML
143 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/png" href="/pixel_war_icon.png" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
/>
|
|
<title>Painter</title>
|
|
<meta name="description" content="Place pixels on a shared canvas with other players in real-time. Inspired by r/place." />
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="Painter" />
|
|
<meta property="og:description" content="Place pixels on a shared canvas with other players in real-time." />
|
|
<meta property="og:image" content="/og-image.png" />
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Painter" />
|
|
<meta name="twitter:description" content="Place pixels on a shared canvas with other players in real-time." />
|
|
<meta name="twitter:image" content="/og-image.png" />
|
|
|
|
<meta name="theme-color" content="#f1f5f9" />
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
</head>
|
|
<body
|
|
class="relative flex flex-col items-center justify-center min-h-screen bg-slate-100 gap-1"
|
|
>
|
|
<div id="connection-status" class="text-sm"></div>
|
|
<div class="z-20 flex flex-wrap justify-center gap-2 p-1">
|
|
<button
|
|
id="red"
|
|
class="w-8 h-8 bg-red-500 border border-black shadow"
|
|
></button>
|
|
<button
|
|
id="green"
|
|
class="w-8 h-8 bg-green-500 border border-black shadow"
|
|
></button>
|
|
<button
|
|
id="blue"
|
|
class="w-8 h-8 bg-blue-500 border border-black shadow"
|
|
></button>
|
|
<button
|
|
id="cyan"
|
|
class="w-8 h-8 border border-black shadow bg-cyan-500"
|
|
></button>
|
|
<button
|
|
id="yellow"
|
|
class="w-8 h-8 bg-yellow-500 border border-black shadow"
|
|
></button>
|
|
<button
|
|
id="black"
|
|
class="w-8 h-8 bg-black border border-black shadow"
|
|
></button>
|
|
<button
|
|
id="white"
|
|
class="w-8 h-8 bg-white border border-black shadow"
|
|
></button>
|
|
<button
|
|
id="pink"
|
|
class="w-8 h-8 bg-pink-500 border border-black shadow"
|
|
></button>
|
|
<button
|
|
id="purple"
|
|
class="w-8 h-8 bg-purple-500 border border-black shadow"
|
|
></button>
|
|
<button
|
|
id="orange"
|
|
class="w-8 h-8 bg-orange-500 border border-black shadow"
|
|
></button>
|
|
<button
|
|
id="brown"
|
|
class="w-8 h-8 bg-orange-800 border border-black shadow"
|
|
></button>
|
|
<input
|
|
class="w-8 h-8 border border-black shadow"
|
|
type="color"
|
|
id="color-picker"
|
|
value="#000000"
|
|
/>
|
|
</div>
|
|
<p class="z-20 text-sm">
|
|
Your selected color
|
|
<span id="current-color-span" class="px-2 rounded text-white">COLOR</span>
|
|
</p>
|
|
<div id="countdown" class="z-20 text-xs">You can place a pixel now</div>
|
|
<div class="z-20 flex items-center gap-2 mx-1">
|
|
<button
|
|
id="mode-paint"
|
|
class="flex items-center justify-center w-8 h-8 rounded shadow bg-slate-200 hover:bg-slate-300 ring-2 ring-offset-2 ring-cyan-400"
|
|
title="Paint mode"
|
|
>
|
|
<svg viewBox="0 0 16 16" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="8" y1="1" x2="8" y2="6"/><line x1="8" y1="10" x2="8" y2="15"/><line x1="1" y1="8" x2="6" y2="8"/><line x1="10" y1="8" x2="15" y2="8"/></svg>
|
|
</button>
|
|
<button
|
|
id="mode-hand"
|
|
class="flex items-center justify-center w-8 h-8 rounded shadow bg-slate-200 hover:bg-slate-300"
|
|
title="Move mode (hold Space)"
|
|
>
|
|
<svg viewBox="0 0 16 16" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="8" y1="1" x2="8" y2="15"/><line x1="1" y1="8" x2="15" y2="8"/><polyline points="5,3 8,1 11,3"/><polyline points="5,13 8,15 11,13"/><polyline points="3,5 1,8 3,11"/><polyline points="13,5 15,8 13,11"/></svg>
|
|
</button>
|
|
<div class="w-px h-6 bg-slate-300"></div>
|
|
<button
|
|
id="zoom-out"
|
|
class="w-8 h-8 text-lg font-bold rounded shadow bg-slate-200 hover:bg-slate-300"
|
|
>
|
|
-
|
|
</button>
|
|
<span id="zoom-level" class="text-xs font-mono w-10 text-center"
|
|
>1.0x</span
|
|
>
|
|
<button
|
|
id="zoom-in"
|
|
class="w-8 h-8 text-lg font-bold rounded shadow bg-slate-200 hover:bg-slate-300"
|
|
>
|
|
+
|
|
</button>
|
|
<button
|
|
id="place-pixel"
|
|
class="px-3 py-1 text-sm rounded-md shadow-lg bg-cyan-400 hover:bg-cyan-500 active:bg-cyan-600"
|
|
>
|
|
Place Pixel
|
|
</button>
|
|
<p id="coords" class="text-xs font-mono"></p>
|
|
</div>
|
|
<div class="canvas-viewport" id="canvas-viewport">
|
|
<canvas class="bg-white" id="canvas" width="500" height="500"></canvas>
|
|
</div>
|
|
<div class="z-20 flex items-center gap-4 p-1">
|
|
<p class="text-sm">
|
|
Soldiers: <span id="current-soldiers" class="font-bold">0</span>
|
|
</p>
|
|
<button
|
|
id="save-canvas"
|
|
class="px-3 py-1 text-sm bg-green-400 rounded-md shadow-lg hover:bg-green-500 active:bg-green-600"
|
|
>
|
|
Save Canvas
|
|
</button>
|
|
</div>
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|