v1.0.0 — Hexagonal architecture rewrite
All checks were successful
CI / ci (push) Successful in 7m16s
All checks were successful
CI / ci (push) Successful in 7m16s
Restructure the monolithic 252-line main.rs into a 10-crate workspace with clean hexagonal architecture, swappable adapters, and a production- ready deployment pipeline. Backend architecture: - domain: Canvas, Color/Position/PixelUpdate value objects, port traits (CanvasStore, CanvasPersistence, EventBroadcaster), BroadcastEvent - application: use cases (place_pixel, get_state, save/restore snapshot, connect/disconnect), AppState with Arc snapshot cache - config: AppConfig structs + ConfigSource trait - api-types: shared DTOs, event name constants - adapters: config-env, canvas-file, http-axum (rust-embed), socketio, websocket — all behind port traits, swappable via feature flags - server: composition root with graceful shutdown (SIGTERM/SIGINT) Frontend: - Transport abstraction: Socket.IO and native WebSocket via VITE_TRANSPORT - Canvas zoom/pan with mouse wheel, pinch-to-zoom, and +/- buttons - ImageData rendering (~50x faster than fillRect loop) - Touch support, responsive CSS scaling, mobile-friendly layout - OG/Twitter Card meta tags for rich link previews Production: - Docker: musl static build on scratch — 2.73MB image - CI workflows for Gitea and GitHub Actions (fmt, clippy, test, Docker push) - deploy.sh for private registry - 39 unit tests across domain and application - Zero unwraps, zero unsafe, graceful error handling with tracing - Periodic canvas snapshots with rotation, restored on startup - All config via environment variables with typed defaults
This commit is contained in:
@@ -1,44 +1,126 @@
|
||||
<!DOCTYPE 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" />
|
||||
<title>Pixel War</title>
|
||||
<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">
|
||||
<div id="challenge" class="absolute z-10 w-full min-h-screen"></div>
|
||||
<div class="z-20 flex flex-wrap gap-2 p-2">
|
||||
<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" />
|
||||
<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">Your selected color <span id="current-color-span" class="text-white">COLOR</span></p>
|
||||
<div id="countdown" class="z-20">You can place a pixel now</div>
|
||||
<div class="z-20 flex items-center gap-2 mx-1 my-4">
|
||||
<label for="toggle-grid">Toggle Grid</label>
|
||||
<input id="toggle-grid" type="checkbox" />
|
||||
<button id="place-pixel" class="px-2 py-1 rounded-md shadow-lg bg-cyan-400 hover:bg-cyan-500 active:bg-cyan-600">Place Pixel</button>
|
||||
<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="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="z-20 flex gap-1">
|
||||
<p id="coords"></p>
|
||||
<div class="canvas-viewport" id="canvas-viewport">
|
||||
<canvas class="bg-white" id="canvas" width="500" height="500"></canvas>
|
||||
</div>
|
||||
<div class="relative z-20 p-1 rainbow-border">
|
||||
<canvas class="bg-white rounded-md" id="canvas" width="500" height="500"></canvas>
|
||||
</div>
|
||||
<div class="z-20 flex flex-col gap-2 p-2">
|
||||
<p>Current soldiers: <span id="current-soldiers" class="font-bold">0</span></p>
|
||||
<button id="save-canvas" class="px-2 py-1 bg-green-400 rounded-md shadow-lg hover:bg-green-500 active:bg-green-600">Save Canvas</button>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user