Renaming 'Tab 3' to 'Excel Style'

src/routes/graphs/SubNav.svelte

@@ -18,10 +18,11 @@
 			<li aria-current={$page.url.pathname === '/graphs/tab2' ? 'page' : undefined}>
 				<a href="/graphs/tab2">Tab 2</a>
 			</li>
-			<li aria-current={$page.url.pathname === '/graphs/tab3' ? 'page' : undefined}>
+			<li aria-current={$page.url.pathname === '/graphs/excel-style' ? 'page' : undefined}>
-				<a href="/graphs/tab3">Tab 3</a>
+				<a href="/graphs/excel-style">Excel Style</a>
 			</li>
 		</ul>
+		<separator />
 		<GameSelection />
 		<GameGroupSelection />
 		<svg viewBox="0 0 2 3" aria-hidden="true">
@@ -116,11 +117,6 @@
 		text-decoration: none;
 		transition: color 0.2s linear;
 	}
-
-	nav button {
-		height: var(--height-m);
-	}
-
 	a:hover {
 		color: var(--color-active-1);
 	}

src/routes/graphs/excel-style/+page.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import SelectedGameGroupsStore from '$lib/stores/GameGroupFilter';
+	import SelectedGameStore from '$lib/stores/GameFilter';
+	import type { ChellarisGameGroup, ChellarisInfo } from '$lib/types/chellaris';
+	import ChellarisDataStore from '$lib/stores/ChellarisData';
+	import GraphsTabStore from '$lib/stores/GraphsTab';
+
+	let selectedGameGroups: Array<number> = [];
+	let selectedGameGroupsMap: Map<number, Array<number>> = new Map();
+	let gameGroups: Map<number, ChellarisGameGroup> = new Map();
+	let chellarisData: ChellarisInfo = {
+		games: new Map(),
+		ethics: [],
+		portraits: []
+	};
+	let selectedGame: number;
+
+	// Save Tab to Store
+	GraphsTabStore.update(() => 'excel-style');
+
+	const updateGameGroups = () => {
+		let tmpData;
+		if (!selectedGame) {
+			tmpData = chellarisData.games.get(chellarisData.games.keys().next().value);
+		} else {
+			tmpData = chellarisData.games.get(selectedGame);
+		}
+
+		if (typeof tmpData !== 'undefined') {
+			gameGroups = tmpData.groups;
+		}
+	};
+
+	ChellarisDataStore.subscribe((data) => {
+		chellarisData = data;
+
+		updateGameGroups();
+		// TODO Update selection if Groups Differ? Does this value ever even update without a full page reload?
+	});
+
+	SelectedGameStore.subscribe((selection) => {
+		selectedGame = selection;
+
+		updateGameGroups();
+
+		if (selectedGameGroupsMap.size != 0) {
+			const tmp = selectedGameGroupsMap.get(selectedGame);
+			if (typeof tmp !== 'undefined') {
+				selectedGameGroups = [...tmp.values()];
+			}
+		}
+	});
+
+	SelectedGameGroupsStore.subscribe((selection) => {
+		selectedGameGroupsMap = selection;
+		const tmp = selection.get(selectedGame);
+		if (typeof tmp !== 'undefined') {
+			selectedGameGroups = [...tmp.values()];
+		}
+	});
+
+	const groupNoun = selectedGameGroups.length > 1 ? 'Groups' : 'Group';
+	const groupJoiner = selectedGameGroups.length > 2 ? ', ' : ' & ';
+</script>
+
+<svelte:head>
+	<title>Graphs</title>
+	<meta name="description" content="Chellaris Sign-Up Graphs" />
+</svelte:head>
+
+<h1>
+	Sign-Up Info for {groupNoun}
+	{selectedGameGroups.map((selection) => gameGroups.get(selection)?.name).join(groupJoiner)}
+</h1>
+
+<div class="text-column">
+	<p>
+		{groupNoun}
+		{selectedGameGroups.map((selection) => gameGroups.get(selection)?.name).join(groupJoiner)}
+		{selectedGameGroups.length > 1 ? 'are' : 'is'} selected
+	</p>
+	<div class="text-column">
+		<p>Legacy View for</p>
+		<p>Empires: gameData.empires.length</p>
+		<div class="row">
+			<div class="text-column">
+				<p>Ethics</p>
+			</div>
+			<div class="text-column">
+				<p>Total Gestalts: gestaltSums.total</p>
+				<p>Hive Minds: gestaltSums.total - gestaltSums.machines</p>
+				<p>Machines: gestaltSums.machines</p>
+				<br>
+				<p>Machine Ethics</p>
+			</div>
+		</div>
+		<div class="text-column">
+			<div class="row">
+				<p>Portrait 1</p>
+				<p>Portrait 2</p>
+				<p>Portrait 3</p>
+			</div>
+			<div class="row">
+				<p>Portrait 1</p>
+				<p>Portrait 2</p>
+				<p>Portrait 3</p>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.row {
+		display: flex;
+		flex-direction: row;
+	}
+</style>

src/routes/graphs/tab3/+page.svelte

@@ -1,16 +0,0 @@
-<script>
-	import { page } from '$app/stores';
-</script>
-
-<svelte:head>
-	<title>Graphs</title>
-	<meta name="description" content="Chellaris Sign-Up Graphs" />
-</svelte:head>
-
-<h1>WIP</h1>
-
-<style>
-	h1 {
-		width: 100%;
-	}
-</style>