center on the screen

src/components/snake/canvas.ts

@@ -129,7 +129,7 @@ function createLabSnapshots(labs: SnakeGameTrainerLab[]): LabSnapshot[] {
 export default function runCanvas(canvas: HTMLCanvasElement, pipeRef: MutableRefObject<PipeRef>) {
     const ui = new UI(canvas);
     const keys = new Keys();
-    const engine = new Engine({ stepsBeforeDelay: 1, updateDelay: 0 });
+    const engine = new Engine({ stepsBeforeDelay: 5, updateDelay: 0 });
 
     // game logic --------------------------------------------------------------
 

src/components/snake/index.scss

@@ -1,12 +1,27 @@
 #snake {
-    svg#board {
+    height: 100vh;
-        background-color: #333333;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    flex-flow: row nowrap;
 
-        .apple {
+    .ui {
-            fill: #e01851;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        justify-content: flex-start;
+
+        canvas#board {
+            margin-right: 20px;
+        }
+
+        .table-container {
+            max-height: 600px;
+            overflow-y: auto;
+
+            table#snaps {
+                width: 450px;
             }
-        .snake-part {
-            fill: #277edb;
         }
     }
 }

src/components/snake/index.tsx

@@ -9,6 +9,15 @@ export interface PipeRef {
     addTrainerSnap: (snap: TrainerSnapshot) => void;
 }
 
+function tableHead(...cols: (string | number)[]) {
+    const elements = cols.map((col, idx) => <th key={idx}>{col}</th>);
+    return <tr>{elements}</tr>;
+}
+function tableRow(...cols: (string | number)[]) {
+    const elements = cols.map((col, idx) => <td key={idx}>{col}</td>);
+    return <tr>{elements}</tr>;
+}
+
 const SnakePage: FC = () => {
     const boardRef = useRef(null);
     const [snaps, setSnaps] = useState<TrainerSnapshot[]>([]);
@@ -29,6 +38,12 @@ const SnakePage: FC = () => {
         runCanvas(boardRef.current, pipeRef);
     }, []);
 
+    // future ideas:
+    // - center canvas & snap table
+    // - configure next iteration settings
+    // - save/load snakes
+    // - view single snake
+
     const labSnapsTRs = useMemo(
         () =>
             snaps.map(snap => {
@@ -44,43 +59,23 @@ const SnakePage: FC = () => {
                 const q95Len = labsRanked[Math.floor(labsRanked.length * 0.95)]!.snakeLength;
                 const maxLen = Math.max(...labsRanked.map(lab => lab.snakeLength));
 
-                return (
+                return tableRow(snap.iteration, avgLen, minLen, q20Len, q40Len, q60Len, q80Len, q90Len, q95Len, maxLen);
-                    <tr>
-                        <td>{snap.iteration}</td>
-                        <td>{avgLen}</td>
-                        <td>{minLen}</td>
-                        <td>{q20Len}</td>
-                        <td>{q40Len}</td>
-                        <td>{q60Len}</td>
-                        <td>{q80Len}</td>
-                        <td>{q90Len}</td>
-                        <td>{q95Len}</td>
-                        <td>{maxLen}</td>
-                    </tr>
-                );
             }),
         [snaps],
     );
 
     return (
         <div id="snake">
+            <div className="ui">
                 <canvas id="board" ref={boardRef} width={BOARD_SIZE} height={BOARD_SIZE} />
-            <table>
+                <div className="table-container">
-                <tr>
+                    <table id="snaps">
-                    <th>Itr</th>
+                        {tableHead('Itr', 'Avg', 'Min', '20%', '40%', '60%', '80%', '90%', '95%', 'Max')}
-                    <th>Avg</th>
-                    <th>Min</th>
-                    <th>20%</th>
-                    <th>40%</th>
-                    <th>60%</th>
-                    <th>80%</th>
-                    <th>90%</th>
-                    <th>95%</th>
-                    <th>Max</th>
-                </tr>
                         {labSnapsTRs}
                     </table>
                 </div>
+            </div>
+        </div>
     );
 };