Add UI improvements + refactor frontend to event-driven architecture

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).

painter-js/index.html

@@ -85,6 +85,21 @@
     </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"