Gabriel Kaszewski
f652785acb
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
73 lines
2.0 KiB
JavaScript
73 lines
2.0 KiB
JavaScript
import io from "socket.io-client";
|
|
|
|
const isDebug = import.meta.env.VITE_IS_DEBUG === "true";
|
|
const transport = import.meta.env.VITE_TRANSPORT || "socketio";
|
|
|
|
const createSocketIoTransport = () => {
|
|
const url = isDebug ? "ws://localhost:3000" : undefined;
|
|
const socket = url ? io(url) : io({ transports: ["websocket"] });
|
|
|
|
return {
|
|
on: (event, handler) => socket.on(event, handler),
|
|
emit: (event, data) => socket.emit(event, data),
|
|
};
|
|
};
|
|
|
|
const createWebSocketTransport = () => {
|
|
const handlers = {};
|
|
const wsUrl = isDebug
|
|
? "ws://localhost:3000/ws"
|
|
: `${window.location.protocol === "https:" ? "wss:" : "ws:"}//${window.location.host}/ws`;
|
|
|
|
const ws = new WebSocket(wsUrl);
|
|
ws.binaryType = "arraybuffer";
|
|
|
|
const on = (event, handler) => {
|
|
if (!handlers[event]) handlers[event] = [];
|
|
handlers[event].push(handler);
|
|
};
|
|
|
|
const emit = (event, data) => {
|
|
if (ws.readyState !== WebSocket.OPEN) return;
|
|
ws.send(JSON.stringify({ type: event, ...data }));
|
|
};
|
|
|
|
const dispatch = (event, ...args) => {
|
|
(handlers[event] || []).forEach((handler) => handler(...args));
|
|
};
|
|
|
|
ws.addEventListener("open", () => dispatch("connect"));
|
|
|
|
ws.addEventListener("message", (event) => {
|
|
if (event.data instanceof ArrayBuffer) {
|
|
const pixels = new Uint32Array(event.data);
|
|
dispatch("canvas_state", Array.from(pixels));
|
|
return;
|
|
}
|
|
|
|
const message = JSON.parse(event.data);
|
|
switch (message.type) {
|
|
case "pixel-updated":
|
|
dispatch("pixel-updated", message);
|
|
break;
|
|
case "current_soldiers":
|
|
dispatch("current_soldiers", message.count);
|
|
break;
|
|
case "error":
|
|
dispatch("error", message.message);
|
|
break;
|
|
}
|
|
});
|
|
|
|
ws.addEventListener("close", () => dispatch("disconnect"));
|
|
|
|
return { on, emit };
|
|
};
|
|
|
|
export const createSocketConnection = () => {
|
|
if (transport === "websocket") {
|
|
return createWebSocketTransport();
|
|
}
|
|
return createSocketIoTransport();
|
|
};
|