diff --git a/packages/client/debug.html b/packages/client/debug.html
new file mode 100644
index 0000000..d2008ae
--- /dev/null
+++ b/packages/client/debug.html
@@ -0,0 +1,13 @@
+
+
+
+ RTS - Debug view
+
+
+
+
+
+
diff --git a/packages/client/src/DebugApp.tsx b/packages/client/src/DebugApp.tsx
deleted file mode 100644
index 5932605..0000000
--- a/packages/client/src/DebugApp.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-
-import { Game, CommandPacket, IdentificationPacket, UpdatePacket, UnitId, Position } from 'server/types'
-import { Multiplayer } from './Multiplayer';
-const multiplayer = new Multiplayer("bananu7");
-
-export function DebugApp() {
- const [lastUpdatePacket, setLastUpdatePacket] = useState(null);
- return (
-
-
Debug view
- {lastUpdatePacket ? JSON.stringify(lastUpdatePacket) : ""}
-
- );
-}
\ No newline at end of file
diff --git a/packages/client/src/debug/DebugApp.tsx b/packages/client/src/debug/DebugApp.tsx
new file mode 100644
index 0000000..c039f41
--- /dev/null
+++ b/packages/client/src/debug/DebugApp.tsx
@@ -0,0 +1,100 @@
+import { useState, useEffect, useCallback, CSSProperties } from 'react'
+
+import { Game, CommandPacket, IdentificationPacket, UpdatePacket, UnitId, Position } from 'server/types'
+import { Multiplayer } from '../Multiplayer';
+import { Board, UnitState } from 'server/types'
+import { MatchList } from '../components/MatchList';
+
+const multiplayer = new Multiplayer("debug_user");
+
+type Props = {
+ board: Board,
+ units: UnitState[],
+}
+export function DebugMap(props: Props) {
+ const style : CSSProperties = {
+ position: 'absolute',
+ left: 0,
+ bottom: 0,
+ width: '100%',
+ height: '100%',
+ backgroundColor: '#114411',
+ boxSizing: 'border-box',
+ overflow: 'hidden',
+ };
+
+ const unitStyle = {
+ fill:'blue',
+ strokeWidth: 1,
+ stroke: 'black'
+ };
+
+ const contents = props.units.map(u => {
+ const ownerToColor = (owner: number) => {
+ switch(owner) {
+ case 0: return "#dddddd";
+ case 1: return "#3333ff";
+ case 2: return "#ee1111";
+ }
+ };
+ const color = ownerToColor(u.owner);
+
+ const size = u.kind === 'Base' ? '8' : '3';
+ return (
+
+ {contents}
+
+
+ );
+}
+
+export default function DebugApp() {
+ const [lastUpdatePacket, setLastUpdatePacket] = useState(null);
+
+ const [serverState, setServerState] = useState(null);
+ const refresh = () => {
+ multiplayer.getMatchState()
+ .then(s => setServerState(s));
+ };
+
+ useEffect(() => {
+ multiplayer.setup({
+ onUpdatePacket: (p:UpdatePacket) => {
+ setLastUpdatePacket(p);
+ },
+ onMatchConnected: (matchId: string) => {
+ console.log(`[App] Connected to a match ${matchId}`);
+ refresh();
+ }
+ });
+ });
+
+ return (
+
+
Debug view
+ Refresh
+ multiplayer.joinMatch(matchId)}
+ spectateMatch={matchId => multiplayer.spectateMatch(matchId)}
+ />
+ {lastUpdatePacket ? JSON.stringify(lastUpdatePacket) : ""}
+ {
+ serverState &&
+ lastUpdatePacket &&
+
+ );
+}
\ No newline at end of file
diff --git a/packages/client/src/debug/debug.tsx b/packages/client/src/debug/debug.tsx
new file mode 100644
index 0000000..e88c15a
--- /dev/null
+++ b/packages/client/src/debug/debug.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import DebugApp from './DebugApp'
+import '../index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+)
\ No newline at end of file