Start of data filling

components/gui/client/game-info-tabs.tsx

@@ -0,0 +1,137 @@
+'use client';
+import { Ethic, Game, GameData, GameGroup } from "@/types/stellaris";
+import { Dispatch, Key, SetStateAction, Suspense, useEffect, useState } from 'react';
+import { Empire } from '../../../types/stellaris';
+import { generateUrl } from "@/components/server/fetchers";
+
+type SelectionType = "all" | Set<Key>;
+
+export const GameInfoTabs = (
+  props: {
+    game: Game,
+    groups: GameGroup[]
+  }) => {
+
+  const [currentTab, setCurrentTab] = useState(1);
+
+  // won't work with a class, needs to be a type
+  const [gameData, setGameData] = useState({info: props.game, groups: props.groups, empires: new Array<Empire>});
+
+  useEffect(() => {
+    const getEmpires = async () => {
+      const tmpEmpires = await fetch(
+        generateUrl('/empires', [
+          //{ key: "group_id", val: this.gr }, // TODO: wait for firq to implement multi calls, for now return all empires in game and manual parse
+          { key: "group_game_id", val: gameData.info.id },]
+        )).then((res) => res.json());
+    
+      let empires: Empire[] = []
+    
+      tmpEmpires.forEach((empire: Empire) => {
+        if (gameData.groups.map(group => group.id).includes(empire.group_id)) {
+          empires.push(empire)
+        }
+      });
+      return empires;
+    }
+    
+    const fetchData = async () => {
+      let tmpData = gameData
+      tmpData.groups = props.groups;
+      tmpData.empires = await getEmpires();
+      setGameData((prevGameData) => ({
+        ...prevGameData,
+        groups: tmpData.groups,
+        empires: tmpData.empires
+      }));
+    }
+
+    if (gameData.groups != props.groups) {
+      fetchData()
+    }
+  }, [gameData, props.groups])
+
+  let currentTabView;
+  switch (currentTab) {
+    case (1):
+    case (2): {
+      currentTabView = <p>{currentTab}</p>
+      break;
+    }
+    case (3): {
+      const gestaltSums = getGestaltCount(gameData.empires, 13);
+      currentTabView =
+        <div className="col">
+          <p>Legacy View for {props.groups.length > 1 ? "Groups" : "Group"} {props.groups.map(elem => elem.name).join(", ")}</p>
+          <p>Empires: {gameData.empires.length}</p>
+          <div className="row">
+            <p>Ethics</p>
+            <div className="col">
+              <p>Total Gestalts: {gestaltSums.total}</p>
+              Hive Minds: {gestaltSums.total - gestaltSums.machines}
+              <br></br>
+              Machines: {gestaltSums.machines}
+              <br></br>
+              <p>Machine Ethics</p>
+            </div>
+          </div>
+          <div className="col">
+            <div className="row">
+              <p>Portrait 1</p>
+              <p>Portrait 2</p>
+              <p>Portrait 3</p>
+            </div>
+            <div className="row">
+              <p>Portrait 1</p>
+              <p>Portrait 2</p>
+              <p>Portrait 3</p>
+            </div>
+          </div>
+        </div>;
+      break;
+    }
+    default:
+      currentTabView = <p>Oops, something went wrong</p>
+  }
+
+  return (
+    <>
+      <div className="row">
+        <button key={1} onClick={() => setCurrentTab(_currentTab => 1)}>
+          Tab 1
+        </button>
+        <button key={2} onClick={() => setCurrentTab(_currentTab => 2)}>
+          Tab 2
+        </button>
+        <button key={3} onClick={() => setCurrentTab(_currentTab => 3)}>
+          Legacy Visuals
+        </button>
+      </div>
+      {currentTabView}
+    </>
+  )
+}
+
+function getEthicSum(ethic: Ethic, empires: Empire[]) {
+  let sum = 0;
+  empires.forEach(empire => { empire.ethic_ids.includes(ethic.id) ? sum = sum + 1 : sum });
+  return sum;
+}
+
+function getGestaltCount(empires: Empire[], machineId: number) {
+  let sum = 0;
+  let sumMachines = 0;
+
+  empires.forEach(empire => { 
+    if(empire.gestalt) {
+      if(empire.empire_portrait_group_id == machineId) {
+        sumMachines = sumMachines + 1;
+        sum = sum + 1;
+      }
+      else {
+        sum = sum + 1
+      }
+      
+    }});
+  return {total: sum, machines: sumMachines}
+}

components/gui/client/game-view.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { Game } from "@/types/stellaris";
+import { GameSelect } from "../server/game-select";
+import { useState } from 'react';
+import { GameGroupSelect } from "../server/game-group-select";
+import { SSRProvider } from "react-bootstrap";
+import { GameInfoTabs } from "./game-info-tabs";
+
+export const GameView = (props: { games: Game[] }) => {
+  const [currentGame, setCurrentGame] = useState(props.games[0]);
+
+  const [gameGroups, setGameGroups] = useState([{ id: 0, name: "", game_id: 0 }]);
+  const [currentGameGroups, setCurrentGameGroups] = useState(gameGroups);
+
+  return (
+    <>
+      <SSRProvider>
+        <div className="row">
+          <GameSelect games={props.games} currentGame={currentGame} setCurrentGame={setCurrentGame} />
+          <GameGroupSelect game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} />
+        </div>
+        <GameInfoTabs game={currentGame} groups={currentGameGroups} />
+      </SSRProvider>
+    </>
+  )
+}