138 lines
3.9 KiB
TypeScript
138 lines
3.9 KiB
TypeScript
'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}
|
|
}
|