add grid filling

main_controller.py

@@ -25,7 +25,6 @@ game_states = []
 
 @socketio.on("recieved")
 def handle_new_conn(data):
-    print("new connection")
     socketio.emit("states_update", game_states, room=request.sid)
 
 def update_loop():

simmadome/src/App.css

@@ -5,10 +5,16 @@
     grid-auto-flow: row;
 }
 
+.slot_container {
+    display: flex;
+    justify-content: space-around;
+}
+
 .emptyslot, .game {
     min-height: 18.75rem;
-    justify-self: center;
     max-width: 44rem;
+    min-width: 32rem;
+    width: 100%;
 }
 
 #filters {
@@ -58,8 +64,6 @@
 .emptyslot {
     border: 2px dashed white;
     border-radius: 15px;
-    align-self: stretch;
-    justify-self: stretch;
     text-align: center;
     color: white;
 }

simmadome/src/App.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useRef, useEffect} from 'react';
+import React, {useState, useRef, useEffect, useLayoutEffect} from 'react';
 import io from 'socket.io-client';
 import './App.css';
 import Game from './Game';
@@ -56,7 +56,7 @@ const useListener = (onUpdate: (update: [string, GameState][]) => void, url: str
     let socket = url ? io(url) : io();
     socket.on('connect', () => socket.emit('recieved', {}));
     socket.on('states_update', onUpdate);
-    return () => {socket.disconnect()}
+    return () => {socket.disconnect()};
   }, [url])
 }
 
@@ -111,13 +111,45 @@ function Filters (props: {filterList: string[], selectedFilter: string, onSelect
 }
 
 function Grid(props: { gameList: GameList }) {
-   return (
+  let self: React.RefObject<HTMLElement> = useRef(null);
-    <section className="container" id="container">
+  let [numcols, setNumcols] = useState(3);
-      {props.gameList.map((game) => {if (game) {
+  let newList = [...props.gameList];
-        return <Game gameId={game[0]} state={game[1]} key={game[0]}/>
+
-      } else {
+  while (newList.length === 0 || newList.length % numcols !== 0) {
-        return <div className="emptyslot"/>
+    newList.push(null);
-      }})}
+  }
+
+  function getCols() {
+    if (self.current !== null) {
+      //this is a hack, but there's weirdly no "real" way to get the number of columns
+      return window.getComputedStyle(self.current).getPropertyValue('grid-template-columns').split(' ').length;
+    } else {
+      return 3;
+    }
+  }
+
+  useLayoutEffect(() => {
+    setNumcols(getCols());
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('resize', (event) => {
+      setNumcols(getCols());
+    })
+  })
+
+
+  let slots = newList.map((game) => {
+    if (game) {
+      return <Game gameId={game[0]} state={game[1]} key={game[0]}/>
+    } else {
+      return <div className="emptyslot"/>
+    }
+  })
+
+  return (
+    <section className="container" id="container" ref={self}>
+      {slots.map((elem) => <div className="slot_container">{elem}</div>)}
     </section>
   );
 }