Implement layout for logged user and cleanup styles

src/components/Card.astro

@@ -1,61 +0,0 @@
----
-interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 1px;
-		background-color: #23262d;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 7px;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-	}
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: calc(1.5rem - 1px);
-		border-radius: 8px;
-		color: white;
-		background-color: #23262d;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent-light));
-	}
-</style>

src/components/NavBar.astro

@@ -1,5 +1,6 @@
 ---
 import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
+
 interface Props {
     loggedIn: string;
     active: string;
@@ -133,7 +134,6 @@ const bottomRow = filteredList.filter(element => element.position === "bottom");
 
 const username = Astro.cookies.get('username')?.value ?? "";
 ---
-
 <nav>
     <div class="row">
         <ul>
@@ -166,7 +166,6 @@ const username = Astro.cookies.get('username')?.value ?? "";
         </ul>
     </div>
 </nav>
-
 <style>
 nav {
     background-color: rgb(56, 59, 99);
@@ -213,8 +212,6 @@ nav ul {
 }
 
 .avatar-icon {
-    /* object-fit: contain; */
-    /* width: 100%; */
     height: 50px;
     border-radius: 50%;
     border: 1px solid white;

src/components/ResourceBar.astro

@@ -4,6 +4,7 @@ import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/la
 import { getAllResources } from '../lib/db/resources';
 import locationManager from '../lib/classes/managers/LocationManager';
 import { Resource } from '../lib/classes/managers/abstract/ResourceManager';
+import SystemManager from '../lib/classes/managers/SystemManager';
 
 const resourceTypes = await getAllResources();
 
@@ -11,7 +12,7 @@ const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getH
 
 const planetId = new ObjectId(Astro.cookies.get('currentPlanet')?.value ?? '');
 
-const planet = locationManager.getPlanet(planetId);
+const planet = locationManager.findId(planetId);
 
 if(!planet) return;
 
@@ -27,7 +28,7 @@ for(const key of planet.resources.resources) {
         <div class="resourcebar-circle-id" data-type="solid"></div>
     </div>
     <div class="resourcebar-planetname">
-        {planet.name}
+        {planet instanceof SystemManager ? <span style="color: red;">{planet.data.name}</span> : planet.name}
     </div>
     <div id="resourcebar-elements" class="resourcebar-elements">
         {resourceArray.map(res =>
@@ -53,7 +54,6 @@ for(const key of planet.resources.resources) {
         )}
     </div>
 </div>
-
 <style>
 #resourcebar {
     color: white;
@@ -143,13 +143,12 @@ for(const key of planet.resources.resources) {
     opacity: 1;
 }
 </style>
-
 <script>
     function numWithPrefix(x: number) {
         x = Math.floor(x);
         if(x < 1_000) return x.toString();
-        if(x < 1_000_000) return (x / 1_000).toFixed(2) + "k";
-        if(x < 1_000_000_000) return (x / 1_000_000).toFixed(2) + "M";
+        if(x < 1_000_000) return (x / 1_000).toFixed(3) + "k";
+        if(x < 1_000_000_000) return (x / 1_000_000).toFixed(3) + "M";
         return x.toString();
     }
 

src/env.d.ts

@@ -1,2 +1,11 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+declare namespace App {
+    interface Locals {
+        token: string;
+        lang: { [key: string]: { id: string; name: string; description: string | null; }[]; };
+        user: User;
+        active: SystemManager | Planet;
+    }
+}

src/layouts/Layout.astro

@@ -19,7 +19,6 @@ if(!Astro.cookies.has('language')) {
 	});
 }
 ---
-
 <!doctype html>
 <html lang="en">
 	<head>
@@ -36,32 +35,3 @@ if(!Astro.cookies.has('language')) {
 		<!-- <PlanetView /> -->
 	</body>
 </html>
-<style is:global>
-	:root {
-		--accent: 136, 58, 234;
-		--accent-light: 224, 204, 250;
-		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(
-			45deg,
-			rgb(var(--accent)),
-			rgb(var(--accent-light)) 30%,
-			white 60%
-		);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background: #13151a;
-		background-size: 224px;
-	}
-	code {
-		font-family:
-			Menlo,
-			Monaco,
-			Lucida Console,
-			Liberation Mono,
-			DejaVu Sans Mono,
-			Bitstream Vera Sans Mono,
-			Courier New,
-			monospace;
-	}
-</style>

src/layouts/LoggedIn.astro

@@ -0,0 +1,34 @@
+---
+import NavBar from '../components/NavBar.astro';
+import ResourceBar from '../components/ResourceBar.astro';
+
+interface Props {
+	id: string;
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="stylesheet" href="/css/markdown.css" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+	    <NavBar loggedIn="true" active={Astro.props.id} />
+	    <ResourceBar />
+		<slot />
+	</body>
+</html>
+<style>
+    html {
+		font-family: system-ui, sans-serif;
+		background: #13151a;
+	}
+</style>

src/middleware.ts

@@ -0,0 +1,35 @@
+import { getUserByAccessToken } from "./lib/db/users";
+import { getHighestWeightedLanguage, getLocales } from "./lib/utils/langDriver";
+import locationManager from "./lib/classes/managers/LocationManager";
+import { defineMiddleware } from "astro/middleware";
+import { APIContext, MiddlewareNext } from "astro";
+import { ObjectId } from "mongodb";
+
+const frontend = async (context: APIContext, next: MiddlewareNext) => {
+    const loggedToken = context.cookies.get('sessionToken')?.value ?? null;
+    const username = context.cookies.get('username')?.value ?? "";
+    if(loggedToken === null || username === "") return context.redirect('/logout');
+
+    const checkUser = await getUserByAccessToken(loggedToken);
+    if(checkUser === null || checkUser.username !== username) return context.redirect('/logout');
+    const user = locationManager.getUser(checkUser._id);
+    if(user === null) return context.redirect('/logout');
+
+    const lang = await getLocales(context.cookies.get('language')?.value ?? await getHighestWeightedLanguage(context.request.headers.get('accept-language')));
+
+    const activeId = context.cookies.get('currentPlanet')?.value ?? "0";
+    const active = locationManager.findId(new ObjectId(activeId));
+
+    if(active === null) return context.redirect('/logout');
+
+    context.locals.token = loggedToken;
+    context.locals.lang = lang;
+    context.locals.user = user;
+    context.locals.active = active;
+
+    return next();
+}
+
+export const onRequest = defineMiddleware(async (context, next) => {
+    return context.url.pathname.startsWith('/game') ? frontend(context, next) : next();
+});

src/pages/game/buildings.astro

@@ -1,34 +1,21 @@
 ---
-import Layout from '../../layouts/Layout.astro';
-import NavBar from '../../components/NavBar.astro';
 import ItemCard from '../../components/ItemCard.astro';
-import { getUserByAccessToken } from '../../lib/db/users';
-import { getHighestWeightedLanguage, getLocales, getName, getObj } from '../../lib/utils/langDriver';
-import ResourceBar from '../../components/ResourceBar.astro';
+import LoggedIn from '../../layouts/LoggedIn.astro';
+import { Planet } from '../../lib/classes/managers/PlanetManager';
+import SystemManager from '../../lib/classes/managers/SystemManager';
 import { getAllBuildings } from '../../lib/db/buildings';
-import locationManager from '../../lib/classes/managers/LocationManager';
-import { ObjectId } from 'mongodb';
+import { getName, getObj } from '../../lib/utils/langDriver';
 import DBBuilding from '../../types/db/DBBuilding';
 
+const { token, lang } = Astro.locals;
+const active: SystemManager | Planet = Astro.locals.active;
+
+if(active instanceof SystemManager) {
+	return Astro.redirect('/game');
+}
+
 const buildingsList = await getAllBuildings();
 
-const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
-const username = Astro.cookies.get('username')?.value ?? "";
-if(loggedToken === null || username === "") return Astro.redirect('/logout');
-
-const checkUser = await getUserByAccessToken(loggedToken);
-if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
-
-const locale = Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language'));
-
-const lang = await getLocales(locale);
-
-const planetId = Astro.cookies.get('currentPlanet')?.value ?? "";
-if(planetId === "") return "No planet selected";
-
-const planet = locationManager.getPlanet(new ObjectId(planetId));
-if(!planet) return "Planet not found";
-
 if(Astro.request.method === "POST") {
     const selectedBuildingId = (await Astro.request.formData()).get('id') as string | null;
 
@@ -36,10 +23,10 @@ if(Astro.request.method === "POST") {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
-            'Authorization': 'Bearer ' + loggedToken
+            'Authorization': 'Bearer ' + token
         },
         body: JSON.stringify({
-            planet: planetId,
+            planet: active._id,
             building: selectedBuildingId
         })
     })).json();
@@ -54,7 +41,7 @@ for(const building of buildingsList) {
 		resources: building.requirements.resources.map(resource => {
 			return {
 				id: resource.id,
-				amount: Math.pow(building.multiplier, (planet.buildings.getBuildingById(building.id)?.level ?? 0) ) * resource.amount
+				amount: Math.pow(building.multiplier, (active.buildings.getBuildingById(building.id)?.level ?? 0) ) * resource.amount
 			};
 		}),
 		research: building.requirements.research,
@@ -65,15 +52,12 @@ for(const building of buildingsList) {
 
 const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: Array<DBBuilding & { level: number }> }, building) => {
 	if(!acc[building.category]) acc[building.category] = [];
-	acc[building.category].push({ ...building, level: planet.buildings.getBuildingById(building.id)?.level ?? 0 });
+	acc[building.category].push({ ...building, level: active.buildings.getBuildingById(building.id)?.level ?? 0 });
 	return acc;
 }, {});
 ---
 
-<Layout title="Buildings">
-	<NavBar loggedIn="true" active="buildings" />
-	<ResourceBar />
-
+<LoggedIn id="buildings" title="Buildings">
 	<div id="building-modal-background">
 		<div id="building-modal-details" data-building-id="">
 			<h3>Required resources</h3>
@@ -84,7 +68,6 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: Array<DB
 			<div class="building-modal-text" id="building-modal-req-research">None</div>
 		</div>
 	</div>
-
 	{Object.entries(buildingsByCategory).map(([category, buildings]) => <>
 		<h1>{getName(lang, 'buildings', `cat-${category}`)}</h1>
 		<div class="building-cat">
@@ -101,32 +84,17 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: Array<DB
 			))}
 		</div>
 	</>)}
-</Layout>
-
+</LoggedIn>
 <style>
-	* {
-		color: white;
-	}
-	
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 800px;
-		max-width: calc(100% - 2rem);
-		color: white;
-		font-size: 20px;
-		line-height: 1.6;
-	}
-
-	.building-cat {
+.building-cat {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	row-gap: 40px;
 	column-gap: 2%;
-	}
+}
 
-	#building-modal-background {
+#building-modal-background {
 	display: none;
 	position: fixed;
 	top: 0;
@@ -135,9 +103,9 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: Array<DB
 	height: 100%;
 	background: rgba(0, 0, 0, 0.5);
 	z-index: 100;
-	}
+}
 
-	#building-modal-details {
+#building-modal-details {
 	display: none;
 	position: fixed;
 	top: 50%;
@@ -149,76 +117,22 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: Array<DB
 	border-radius: 8px;
 	padding: 1rem;
 	z-index: 101;
-	}
+}
 
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-
-	h3 {
+h1 {
 	font-size: 2rem;
 	font-weight: 700;
 	line-height: 1;
 	text-align: center;
 	margin-bottom: 1em;
-	}
+	color: white;
+}
 
-	.building-modal-text {
+.building-modal-text {
 	font-size: 1.5rem;
-	}
-
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
-	
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 2rem;
-		padding: 0;
-	}
-
-	.a-button {
-		text-decoration: none;
-    	color: green;
-	}
-
-	.a-button:hover {
-		color: lime;
-	}
+}
 </style>
-<script define:vars={{ modalSet, lang, planetId }}>
+<script define:vars={{ modalSet, lang }}>
 	const modalResources = document.getElementById("building-modal-req-resources");
 	const modalBuildings = document.getElementById("building-modal-req-buildings");
 	const modalResearch = document.getElementById("building-modal-req-research");

src/pages/game/fleet.astro

@@ -1,30 +1,14 @@
 ---
-import Layout from '../../layouts/Layout.astro';
-import NavBar from '../../components/NavBar.astro';
-import { getUserByAccessToken } from '../../lib/db/users';
-import { getHighestWeightedLanguage, getLocales, getName, getObj } from '../../lib/utils/langDriver';
-import ResourceBar from '../../components/ResourceBar.astro';
+import LoggedIn from '../../layouts/LoggedIn.astro';
 import locationManager from '../../lib/classes/managers/LocationManager';
+import { Planet } from '../../lib/classes/managers/PlanetManager';
+import SystemManager from '../../lib/classes/managers/SystemManager';
 import { getAllFleetByUser } from '../../lib/db/fleet';
 import { getAllShips } from '../../lib/db/ships';
-import { ObjectId } from 'mongodb';
-import SystemManager from '../../lib/classes/managers/SystemManager';
+import { getName } from '../../lib/utils/langDriver';
 
-const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
-const username = Astro.cookies.get('username')?.value ?? "";
-if(loggedToken === null || username === "") return Astro.redirect('/logout');
-
-const checkUser = await getUserByAccessToken(loggedToken);
-if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
-
-const user = locationManager.getUser(checkUser._id);
-if(!user) return Astro.redirect('/logout');
-
-const planetId = Astro.cookies.get('currentPlanet')?.value ?? "";
-if(planetId === "") return "No planet selected";
-
-const planet = locationManager.getPlanet(new ObjectId(planetId));
-if(!planet) return "Planet not found";
+const { token, user, lang } = Astro.locals;
+const active: SystemManager | Planet = Astro.locals.active;
 
 const ships = await getAllShips();
 
@@ -47,7 +31,7 @@ if(Astro.request.method === "POST") {
 	});
 
 	const fleetData = {
-		source: planet._id,
+		source: active instanceof SystemManager ? active.data._id : active._id,
 		destination: form.get('toSystem') ? form.get('destination-system')?.toString() : form.get('destination-planet')?.toString(),
 		mission: form.get('mission')?.toString() ?? "NULL",
 		ships: ships.map(ship => {
@@ -64,7 +48,7 @@ if(Astro.request.method === "POST") {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json',
-			'Authorization': `Bearer ${loggedToken}`
+			'Authorization': `Bearer ${token}`
 		},
 		body: JSON.stringify(fleetData)
 	});
@@ -79,31 +63,21 @@ await locationManager.updateFleet();
 const fleet = (await getAllFleetByUser(user.id)).filter(f => new Date().getTime() - f.arrivalTime.getTime() < 0);
 fleet.sort((a, b) => a.departureTime.getTime() - b.departureTime.getTime());
 
-const userSystems = locationManager.getSystemsOwnedBy(user.id);
 const galaxies = locationManager.galaxies;
 
 let own = 0;
 let friendly = 0;
 let enemy = 0;
 
-for(const system of userSystems) {
-	for(const planet of system.planets) {
-		for(const f of fleet) {
-			if(f.source.equals(planet._id) || f.source.equals(system.data._id)) own++;
-			else if(f.destination.equals(planet._id) || f.destination.equals(system.data._id)) {
-				if(f.mission === 'ATTACK') enemy++;
-				else {
-					const sourceObj = locationManager.findId(f.source);
-					const destinationObj = locationManager.findId(f.destination);
-
-					if(!sourceObj || !destinationObj) continue;
-
-					const source = sourceObj instanceof SystemManager ? sourceObj.data.ownedBy.id : sourceObj.system.data.ownedBy.id;
-					const destination = destinationObj instanceof SystemManager ? destinationObj.data.ownedBy.id : destinationObj.system.data.ownedBy.id;
-
-					if(!source?.equals(destination)) friendly++;
-				}
-			}
+for(const f of fleet) {
+	const source = locationManager.findId(f.source);
+	if(source !== null) {
+		if(source instanceof SystemManager) {
+			if(source.data.ownedBy.id.equals(user.id)) own++;
+			else enemy++;
+		} else {
+			if(source.system.data.ownedBy.id.equals(user.id)) own++;
+			else enemy++;
 		}
 	}
 }
@@ -132,13 +106,8 @@ const sectorsList = galaxies.map(galaxy => {
 		})
 	}
 });
-
-const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
 ---
-
-<Layout title="Fleet">
-	<NavBar loggedIn="true" active="fleet" />
-	<ResourceBar />
+<LoggedIn id="fleet" title="Fleet">
 	<label for="fleet-toggle">
 		<input type="checkbox" id="fleet-toggle">
 		<div class="fleet-status">
@@ -166,11 +135,11 @@ const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getH
 	</label>
 	<div class="fleet-send-container">
 		<form method="post">
-			<h1>Sending fleet from {planet.name}</h1>
+			<h1>Sending fleet from {active instanceof SystemManager ? active.data.name : active.name}</h1>
 			<hr />
 			<h2>Ships</h2>
 			<div class="fleet-send-ships">
-				{planet.ships.ships.map(ship => <div class="fleet-ship-card">
+				{active.ships.ships.map(ship => <div class="fleet-ship-card">
 					<h3>{getName(lang, 'ships', ship.data.id)} - {ship.amount}</h3>
 					<input type="number" value="0" min="0" max={ship.amount} id={ship.data.id} name={`ship-amount-${ship.data.id}`} />
 				</div>)}
@@ -220,96 +189,22 @@ const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getH
 			<button type="submit">Send fleet</button>
 		</form>
 	</div>
-</Layout>
+</LoggedIn>
 
 <style>
-	* {
+* {
 	color: white;
-	}
+}
 
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 800px;
-		max-width: calc(100% - 2rem);
-		color: white;
-		font-size: 20px;
-		line-height: 1.6;
-	}
-
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-
-	h3 {
-		font-size: 2rem;
-		font-weight: 700;
-		line-height: 1;
-		text-align: center;
-		margin-bottom: 1em;
-	}
-
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
-	
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 2rem;
-		padding: 0;
-	}
-
-	.a-button {
-		text-decoration: none;
-    	color: green;
-		height: fit-content;
-	}
-
-	.a-button:hover {
-		color: lime;
-	}
-
-	.ship-cards {
+.ship-cards {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	row-gap: 40px;
 	column-gap: 2%;
-	}
+}
 
-	#ship-modal-background {
+#ship-modal-background {
 	display: none;
 	position: fixed;
 	top: 0;
@@ -318,9 +213,9 @@ const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getH
 	height: 100%;
 	background: rgba(0, 0, 0, 0.5);
 	z-index: 100;
-	}
+}
 
-	#ship-modal-details {
+#ship-modal-details {
 	display: none;
 	position: fixed;
 	top: 50%;
@@ -332,95 +227,94 @@ const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getH
 	border-radius: 8px;
 	padding: 1rem;
 	z-index: 101;
-	}
+}
 
-	.fleet-status {
+.fleet-status {
 	margin-top: 40px;
 	background-color: gray;
 	border-radius: 10px;
 	padding: 2px;
-	}
+}
 
-	.fleet-status ul {
+.fleet-status ul {
 	list-style-type: none;
 	padding: 0;
 	opacity: 0;
 	max-height: 0;
 	overflow: hidden;
-
 	transition-property: max-height;
 	transition-duration: 0.5s;
 	transition-timing-function: ease;
-	}
+}
 
-	#fleet-toggle {
+#fleet-toggle {
 	position: absolute;
  	top: -9999px;
 	left: -9999px;
-	}
+}
 
-	label { 
+label { 
 	-webkit-appearance: push-button;
 	-moz-appearance: button; 
 	margin: 60px 0 10px 0;
 	cursor: pointer;
-	}
+}
 
-	#fleet-toggle:checked ~ .fleet-status ul {
+#fleet-toggle:checked ~ .fleet-status ul {
 	opacity: 1;
 	height: auto;
 	max-height: 1000px;
-	}
+}
 
-	.fleet-send-container {
+.fleet-send-container {
 	margin-top: 40px;
 	background-color: gray;
 	border-radius: 10px;
 	padding: 2px;
-	}
+}
 
-	.fleet-send-ships {
+.fleet-send-ships {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	row-gap: 40px;
 	column-gap: 2%;
 	margin-top: 40px;
-	}
+}
 
-	.fleet-ship-card {
+.fleet-ship-card {
 	background-color: gray;
 	border-radius: 10px;
 	padding: 2px;
-	}
+}
 
-	.fleet-ship-card h3 {
+.fleet-ship-card h3 {
 	margin: 0;
-	}
+}
 
-	.fleet-ship-card input {
+.fleet-ship-card input {
 	width: 10rem;
 	color: black;
-	}
+}
 
-	.fleet-destination select {
+.fleet-destination select {
 	width: 10rem;
 	height: 3rem;
 	color: black;
 	background-color: darkgray;
-	}
+}
 
-	.cargo-add-new {
+.cargo-add-new {
 	background-color: #aaaaaa;
 	border-radius: 10px;
 	padding: 2px;
 	width: fit-content;
 	color: black;
-	}
+}
 
-	.select, .input {
+.select, .input {
 	color: black;
-	}
+}
 </style>
 <script define:vars={{ sectorsList }}>
 	const destinationGalaxy = document.getElementById('destination-galaxy');
@@ -552,5 +446,4 @@ const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getH
 
 		cargoContainer.appendChild(cargoItem);
 	});
-				
 </script>

src/pages/game/galaxyView.astro

@@ -1,16 +1,6 @@
 ---
-import Layout from '../../layouts/Layout.astro';
-import NavBar from '../../components/NavBar.astro';
-import { getUserByAccessToken } from '../../lib/db/users';
+import LoggedIn from '../../layouts/LoggedIn.astro';
 import locationManager from '../../lib/classes/managers/LocationManager';
-import ResourceBar from '../../components/ResourceBar.astro';
-
-const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
-const username = Astro.cookies.get('username')?.value ?? "";
-if(loggedToken === null || username === "") return Astro.redirect('/logout');
-
-const checkUser = await getUserByAccessToken(loggedToken);
-if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
 
 const allGalaxies = locationManager.galaxies;
 
@@ -33,10 +23,7 @@ const galaxies = allGalaxies.map(galaxy => {
 	};
 })
 ---
-
-<Layout title="Galaxy view">
-	<NavBar loggedIn="true" active="galaxyView" />
-	<ResourceBar />
+<LoggedIn id="galaxyView" title="Galaxy view">
 	<div class="container">
 		<div class="galaxy-container">
 			{galaxies.map(galaxy => <>
@@ -49,21 +36,18 @@ const galaxies = allGalaxies.map(galaxy => {
 		</div>
 		<div class="galaxy-details">
 			<h2></h2>
-			<div class="galaxy-sector-list">
-				
+			<div class="galaxy-sector-list"></div>
 		</div>
 	</div>
-	</div>
-</Layout>
-
+</LoggedIn>
 <style is:global>
-	.container {
+.container {
 	display: flex;
 	flex-direction: row;
 	color: white;
-	}
+}
 
-	.galaxy-container {
+.galaxy-container {
 	width: 70%;
 	height: 500px;
 	background-color: blue;
@@ -71,51 +55,51 @@ const galaxies = allGalaxies.map(galaxy => {
 	margin-right: auto;
 	margin-top: 50px;
 	position: relative;
-	}
+}
 
-	.galaxy-icon {
+.galaxy-icon {
 	position:absolute;
 	width: 40px;
 	height: 40px;
 	background-color: white;
 	border-radius: 20px;
-	}
+}
 
-	.galaxy-icon:hover {
+.galaxy-icon:hover {
 	background-color: yellow !important;
-	}
+}
 
-	.galaxy-name {
+.galaxy-name {
 	position: absolute;
 	top: 40px;
 	left: -5px;
 	color: white;
-	}
+}
 
-	.galaxy-details {
+.galaxy-details {
 	width: 23%;
 	height: 500px;
 	margin-top: 50px;
 	margin-right: 50px;
-	}
+}
 
-	.galaxy-details h2 {
+.galaxy-details h2 {
 	text-align: center;
-	}
+}
 
-	.galaxy-sector-list {
+.galaxy-sector-list {
 	display: flex;
 	flex-direction: column;
-	}
+}
 
-	.galaxy-sector-list div {
+.galaxy-sector-list div {
 	text-align: center;
 	background-color: gray;
 	margin-top: 10px;
 	border-radius: 10px;
 	padding-top: 10px;
 	padding-bottom: 10px;
-	}
+}
 </style>
 <script>
 	function gvinit() {

src/pages/game/index.astro

@@ -1,100 +1,15 @@
 ---
-import Layout from '../../layouts/Layout.astro';
-import NavBar from '../../components/NavBar.astro';
-import ResourceBar from '../../components/ResourceBar.astro';
-import { getUserByAccessToken } from '../../lib/db/users';
-import locationManager from '../../lib/classes/managers/LocationManager';
-import { ObjectId } from 'mongodb';
+import LoggedIn from '../../layouts/LoggedIn.astro';
+import { Planet } from '../../lib/classes/managers/PlanetManager';
+import SystemManager from '../../lib/classes/managers/SystemManager';
 
-const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
-const username = Astro.cookies.get('username')?.value ?? "";
-if(loggedToken === null || username === "") return Astro.redirect('/logout');
-
-const checkUser = await getUserByAccessToken(loggedToken);
-if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
-
-const currentPlanetId = Astro.cookies.get('currentPlanet')?.value ?? null;
-if(currentPlanetId === null) return Astro.redirect('/logout');
-const currentPlanet = locationManager.getPlanet(new ObjectId(currentPlanetId));
-if(currentPlanet === undefined) {
-	Astro.cookies.delete('planetid');
-	return Astro.redirect('/logout');
-}
+const active: SystemManager | Planet = Astro.locals.active;
 ---
-
-<Layout title="Overview">
-	<NavBar loggedIn="true" active="overview" />
-	<ResourceBar />
-
-	<h1>{currentPlanet.name} in {currentPlanet.system.data.name}</h1>
-</Layout>
-
+<LoggedIn id="overview" title="Overview">
+	<h1>{active instanceof SystemManager ? `${active.data.name} system` : `${active.name} in ${active.system.data.name}`}</h1>
+</LoggedIn>
 <style>
-	* {
+h1 {
 	color: white;
-	}
-	
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 800px;
-		max-width: calc(100% - 2rem);
-		color: white;
-		font-size: 20px;
-		line-height: 1.6;
-	}
-
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-	
-	h3 {
-		font-size: 2rem;
-		font-weight: 700;
-		line-height: 1;
-		text-align: center;
-		margin-bottom: 1em;
-	}
-	
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
-	
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 2rem;
-		padding: 0;
-	}
+}
 </style>

src/pages/game/profile.astro

@@ -1,10 +1,11 @@
 ---
-import Layout from '../../layouts/Layout.astro';
-import NavBar from '../../components/NavBar.astro';
-import { getUserByAccessToken, getUserByNickOrEmail } from '../../lib/db/users';
-import { getHighestWeightedLanguage, getLocales, getName, getSupportedLanguages } from '../../lib/utils/langDriver';
-import ResourceBar from '../../components/ResourceBar.astro';
+import LoggedIn from '../../layouts/LoggedIn.astro';
+import User from '../../lib/classes/User';
 import format from '../../lib/utils/format';
+import { getName, getSupportedLanguages } from '../../lib/utils/langDriver';
+
+const { token, lang } = Astro.locals;
+const user: User = Astro.locals.user;
 
 const availableLanguages = await getSupportedLanguages();
 
@@ -23,28 +24,10 @@ if(Astro.request.method === "POST") {
         secure: true
     });
 }
-
-const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
-const username = Astro.cookies.get('username')?.value ?? "";
-if(loggedToken === null || username === "") return Astro.redirect('/logout');
-
-const checkUser = await getUserByAccessToken(loggedToken);
-if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
-
-const locale = Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language') ?? "en");
-
-const user = await getUserByNickOrEmail(username);
-
-const lang = await getLocales(locale);
-
 const currentLanguage = Astro.cookies.get('language')?.value ?? "en";
-
 ---
-
-<Layout title="Profile">
-	<NavBar loggedIn="true" active="profile" />
-	<ResourceBar loggedIn="true" />
-    {loggedToken}
+<LoggedIn id="profile" title="Profile">
+    {token}
     <div class="wrapper">
         <h3>{format(getName(lang, 'general', 'user-creation-date'), user?.createdAt.toISOString().slice(0, 19).replace(/-/g, "/").replace("T", " ").toString() ?? "")}</h3>
         <a href="/logout" class="a-button">{getName(lang, 'general', 'nav-logout')}</a>
@@ -66,7 +49,7 @@ const currentLanguage = Astro.cookies.get('language')?.value ?? "en";
         <input class="data-form-button" type="button" value={getName(lang, 'general', 'change-password')} />
     </form>
     <form id="changeLanguageForm" class="data-form" method="post">
-        <h4>{getName(lang, 'general', 'current-language')}: {availableLanguages.find(l => l.id === currentLanguage)?.name ?? "N/A"}</h4>
+        <h3>{getName(lang, 'general', 'current-language')}: {availableLanguages.find(l => l.id === currentLanguage)?.name ?? "N/A"}</h3>
         <select class="data-form-input" name="language">
             {availableLanguages.map((lang) => (
                 <option value={lang.id}>{lang.name}</option>
@@ -74,111 +57,46 @@ const currentLanguage = Astro.cookies.get('language')?.value ?? "en";
         </select>
         <input type="submit" class="data-form-button" value={getName(lang, 'general', 'change-language')} />
     </form>
-</Layout>
-
+</LoggedIn>
 <style>
-	* {
+h3 {
     color: white;
-	}
+}
 
-    .data-form {
+.data-form {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-top: 2rem;
-    }
+}
 
-    .data-form-input {
+.data-form-input {
     color: black;
-    }
+}
 
-    .data-form-button {
+.data-form-button {
     color: red;
     font-weight: 700;
-    }
+}
 
-    .wrapper {
+.wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-top: 2rem;
     color: white;
-    }
+}
 
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 800px;
-		max-width: calc(100% - 2rem);
-		color: white;
-		font-size: 20px;
-		line-height: 1.6;
-	}
-
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-	
-	h3 {
-		font-size: 2rem;
-		font-weight: 700;
-		line-height: 1;
-		text-align: center;
-		margin-bottom: 1em;
-	}
-	
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
-	
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 2rem;
-		padding: 0;
-	}
-
-    .a-button {
+.a-button {
 	text-decoration: none;
 	color: green;
-	}
+}
 
-	.a-button:hover {
+.a-button:hover {
 	color: lime;
-	}
+}
 </style>
 <script>
     const changeUsernameForm = document.getElementById('changeUsernameForm');

src/pages/game/research.astro

@@ -1,24 +1,18 @@
 ---
-import Layout from '../../layouts/Layout.astro';
-import NavBar from '../../components/NavBar.astro';
-import { getUserByAccessToken } from '../../lib/db/users';
-import { getHighestWeightedLanguage, getLocales, getName, getObj } from '../../lib/utils/langDriver';
-import ResourceBar from '../../components/ResourceBar.astro';
 import ItemCard from '../../components/ItemCard.astro';
+import LoggedIn from '../../layouts/LoggedIn.astro';
+import User from '../../lib/classes/User';
+import { Planet } from '../../lib/classes/managers/PlanetManager';
+import SystemManager from '../../lib/classes/managers/SystemManager';
 import { getAllResearch } from '../../lib/db/research';
+import { getObj } from '../../lib/utils/langDriver';
+
+const { token, lang } = Astro.locals;
+const active: SystemManager | Planet = Astro.locals.active;
+const user: User = Astro.locals.user;
 
 const researchList = await getAllResearch();
 
-const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
-const username = Astro.cookies.get('username')?.value ?? "";
-if(loggedToken === null || username === "") return Astro.redirect('/logout');
-
-const checkUser = await getUserByAccessToken(loggedToken);
-if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
-
-const planetId = Astro.cookies.get('currentPlanet')?.value ?? "";
-if(planetId === "") return Astro.redirect('/logout');
-
 if(Astro.request.method === "POST") {
     const selectedResearchId = (await Astro.request.formData()).get('id') as string | null;
 
@@ -26,21 +20,17 @@ if(Astro.request.method === "POST") {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
-            'Authorization': 'Bearer ' + loggedToken
+            'Authorization': 'Bearer ' + token
         },
         body: JSON.stringify({
             research: selectedResearchId,
-			planetId
+			planetId: active instanceof SystemManager ? active.data._id : active._id
         })
     })).json();
 
     console.log(request);
 }
 
-const locale = Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language'));
-
-const lang = await getLocales(locale);
-
 const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, buildings: Array<any> } } = {};
 
 for(const research of researchList) {
@@ -52,11 +42,7 @@ for(const research of researchList) {
 	};
 }
 ---
-
-<Layout title="Research">
-	<NavBar loggedIn="true" active="research" />
-	<ResourceBar />
-
+<LoggedIn id="research" title="Research">
 	<div id="research-modal-background">
 		<div id="research-modal-details" data-building-id="">
 			<h3>Required resources</h3>
@@ -67,111 +53,31 @@ for(const research of researchList) {
 			<div class="research-modal-text" id="research-modal-req-research">None</div>
 		</div>
 	</div>
-
 	<div class="research-cards">
 		{researchList.map(research => <>
 			<ItemCard
 				category="research"
 				id={research.id}
 				name={getObj(lang, "research", research.id).name}
-				level={checkUser.research.find(x => x.id === research.id)?.level.toString() ?? "0"}
+				level={user.research.getResearchById(research.id)?.level.toString() ?? "0"}
 				description={getObj(lang, "research", research.id).description ?? ""}
 				image={`/images/research/${research.id}.jpeg`}
 				button_type="general"
 				button_name="nav-research" />
 		</>)}
 	</div>
-</Layout>
-
+</LoggedIn>
 <style>
-	* {
-		color: white;
-	}
-	
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 800px;
-		max-width: calc(100% - 2rem);
-		color: white;
-		font-size: 20px;
-		line-height: 1.6;
-	}
-
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-
-	h3 {
-		font-size: 2rem;
-		font-weight: 700;
-		line-height: 1;
-		text-align: center;
-		margin-bottom: 1em;
-	}
-
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
-	
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 2rem;
-		padding: 0;
-	}
-
-	.a-button {
-		text-decoration: none;
-    	color: green;
-		height: fit-content;
-	}
-
-	.a-button:hover {
-		color: lime;
-	}
-
-	.research-cards {
+.research-cards {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	row-gap: 40px;
 	column-gap: 2%;
 	margin-top: 40px;
-	}
+}
 
-	#research-modal-background {
+#research-modal-background {
 	display: none;
 	position: fixed;
 	top: 0;
@@ -180,9 +86,9 @@ for(const research of researchList) {
 	height: 100%;
 	background: rgba(0, 0, 0, 0.5);
 	z-index: 100;
-	}
+}
 
-	#research-modal-details {
+#research-modal-details {
 	display: none;
 	position: fixed;
 	top: 50%;
@@ -194,9 +100,9 @@ for(const research of researchList) {
 	border-radius: 8px;
 	padding: 1rem;
 	z-index: 101;
-	}
+}
 </style>
-<script define:vars={{ modalSet, lang, planetId }}>
+<script define:vars={{ modalSet, lang }}>
 	const modalResources = document.getElementById("research-modal-req-resources");
 	const modalBuildings = document.getElementById("research-modal-req-buildings");
 	const modalResearch = document.getElementById("research-modal-req-research");

src/pages/game/ships.astro

@@ -1,37 +1,16 @@
 ---
-import Layout from '../../layouts/Layout.astro';
-import NavBar from '../../components/NavBar.astro';
-import { getUserByAccessToken } from '../../lib/db/users';
-import { getHighestWeightedLanguage, getLocales, getObj } from '../../lib/utils/langDriver';
-import ResourceBar from '../../components/ResourceBar.astro';
-import { getAllShips } from '../../lib/db/ships';
 import ItemCard from '../../components/ItemCard.astro';
-import locationManager from '../../lib/classes/managers/LocationManager';
-import { ObjectId } from 'mongodb';
+import LoggedIn from '../../layouts/LoggedIn.astro';
+import { Planet } from '../../lib/classes/managers/PlanetManager';
+import SystemManager from '../../lib/classes/managers/SystemManager';
+import { getAllShips } from '../../lib/db/ships';
+import { getObj } from '../../lib/utils/langDriver';
 
-const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
-const username = Astro.cookies.get('username')?.value ?? "";
-if(loggedToken === null || username === "") return Astro.redirect('/logout');
-
-const checkUser = await getUserByAccessToken(loggedToken);
-if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
+const { lang } = Astro.locals;
+const active: SystemManager | Planet = Astro.locals.active;
 
 const ships = await getAllShips();
 
-const planetId = Astro.cookies.get('currentPlanet')?.value ?? "";
-if(planetId === "") {
-	console.error("No planet selected");
-	return Astro.redirect('/logout');
-}
-
-const planet = locationManager.getPlanet(new ObjectId(planetId));
-if(!planet) {
-	console.error("Planet not found");
-	return Astro.redirect('/logout');
-}
-
-const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
-
 const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, buildings: Array<any> } } = {};
 
 for(const ship of ships) {
@@ -42,12 +21,10 @@ for(const ship of ships) {
 		// energy: building.energy
 	};
 }
+
+const planetId = active instanceof SystemManager ? active.data._id : active._id;
 ---
-
-<Layout title="Ships">
-	<NavBar loggedIn="true" active="ships" />
-	<ResourceBar />
-
+<LoggedIn id="ships" title="Ships">
     <div id="ship-modal-background">
 		<div id="ship-modal-details" data-building-id="">
 			<h3>Required resources</h3>
@@ -65,104 +42,26 @@ for(const ship of ships) {
 				category="ships"
 				id={ship.id}
 				name={getObj(lang, "ships", ship.id).name}
-				level={planet.ships.getShipById(ship.id)?.amount.toString() ?? "0"}
+				level={active.ships.getShipById(ship.id)?.amount.toString() ?? "0"}
 				description={getObj(lang, "ships", ship.id).description ?? ""}
 				image={`/images/ships/${ship.id}.jpeg`}
 				button_type="general"
 				button_name="nav-build" />
 		</>)}
 	</div>
-</Layout>
+</LoggedIn>
 
 <style>
-	* {
-		color: white;
-	}
-	
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 800px;
-		max-width: calc(100% - 2rem);
-		color: white;
-		font-size: 20px;
-		line-height: 1.6;
-	}
-
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-
-	h3 {
-		font-size: 2rem;
-		font-weight: 700;
-		line-height: 1;
-		text-align: center;
-		margin-bottom: 1em;
-	}
-
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
-	
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 2rem;
-		padding: 0;
-	}
-
-	.a-button {
-		text-decoration: none;
-    	color: green;
-		height: fit-content;
-	}
-
-	.a-button:hover {
-		color: lime;
-	}
-
-	.ship-cards {
+.ship-cards {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	row-gap: 40px;
 	column-gap: 2%;
 	margin-top: 40px;
-	}
+}
 
-	#ship-modal-background {
+#ship-modal-background {
 	display: none;
 	position: fixed;
 	top: 0;
@@ -171,9 +70,9 @@ for(const ship of ships) {
 	height: 100%;
 	background: rgba(0, 0, 0, 0.5);
 	z-index: 100;
-	}
+}
 
-	#ship-modal-details {
+#ship-modal-details {
 	display: none;
 	position: fixed;
 	top: 50%;
@@ -185,7 +84,7 @@ for(const ship of ships) {
 	border-radius: 8px;
 	padding: 1rem;
 	z-index: 101;
-	}
+}
 </style>
 <script define:vars={{ modalSet, lang, planetId }}>
 	const modalResources = document.getElementById("ship-modal-req-resources");

src/pages/game/systemManager/index.astro

@@ -1,24 +1,12 @@
 ---
 import { ObjectId } from "mongodb";
-import NavBar from "../../../components/NavBar.astro";
-import ResourceBar from "../../../components/ResourceBar.astro";
-import Layout from "../../../layouts/Layout.astro";
+import LoggedIn from "../../../layouts/LoggedIn.astro";
 import locationManager from "../../../lib/classes/managers/LocationManager";
-import { getUserByAccessToken } from "../../../lib/db/users";
-
-const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
-const username = Astro.cookies.get('username')?.value ?? "";
-if(loggedToken === null || username === "") return Astro.redirect('/logout');
-
-const checkUser = await getUserByAccessToken(loggedToken);
-if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
 
 const currentSystemId = Astro.cookies.get('currentSystem')?.value ?? null;
-
 if(currentSystemId === null) return Astro.redirect('/game/systemManager/select');
 
 const currentSystem = locationManager.getSystem(new ObjectId(currentSystemId));
-
 if(currentSystem === undefined) {
     Astro.cookies.delete('currentSystem');
     return Astro.redirect('/game/systemManager/select');
@@ -35,12 +23,11 @@ if(Astro.request.method === "POST") {
             secure: true
         });
     }
+
+    return Astro.redirect('/game/systemManager');
 }
 ---
-<Layout title="System Manager">
-    <NavBar loggedIn="true" active="systemManager" />
-    <ResourceBar />
-
+<LoggedIn id="systemManager" title="System Manager">
     <h1>Selected system: {currentSystem.data.name} in {currentSystem.data.sector.name} in {currentSystem.data.sector.galaxy.name} <a href="/game/systemManager/select">(change)</a></h1>
     <div class="system-links">
         <a href="/game/systemManager">Overview</a>
@@ -48,10 +35,22 @@ if(Astro.request.method === "POST") {
         <a href="/game/systemManager/spaceStations">Space stations</a>
         <a href="/game/systemManager/asteroids">Asteroids</a>
     </div>
-    <div class="resources">
-        <p>Resources: {currentSystem.resources.resources.map(r => `${r.id}: ${r.amount}`).join(", ")}</p>
-    </div>
     <div class="planet-list">
+        <div class="system-card">
+            <h2 style="color: red;">{currentSystem.data.name}<div><form method="post"><input type="hidden" name="planetId" value={currentSystem.data._id.toString()} /><input type="submit" value="Select" /></form></div></h2>
+                <h3>Resources:</h3>
+                <div>
+                    {currentSystem.resources.resources.length === 0 ? <span>None</span> : currentSystem.resources.resources.map(res => (
+                        <p>{res.data.id} - {res.amount}</p>
+                    ))}
+                </div>
+                <h3>Ships: </h3>
+                <div>
+                    {currentSystem.ships.ships.length === 0 ? <span>None</span> : currentSystem.ships.ships.map(ship => (
+                        <p>{ship.data.id} - {ship.amount}</p>
+                    ))}
+                </div>
+        </div>
         {currentSystem.planets.length === 0 ? <span>No planets in this sector</span> : currentSystem.planets.map(planet => (
             <div class="planet-card">
                 <h2>{planet.name}<div><form method="post"><input type="hidden" name="planetId" value={planet._id.toString()} /><input type="submit" value="Select" /></form></div></h2>
@@ -71,64 +70,71 @@ if(Astro.request.method === "POST") {
             </div>
         ))}
     </div>
-</Layout>
+</LoggedIn>
 <style>
-    * {
+* {
     color: white;
-    }
+}
 
-    h1 {
+h1 {
     text-align: center;
     color: white;
-    }
+}
 
-    h1 a {
+h1 a {
     color: lime;
-    }
+}
 
-    .system-links {
+.system-links {
     display: flex;
     flex-direction: row;
     justify-content: center;
     margin-bottom: 1rem;
-    }
+}
 
-    .system-links a {
+.system-links a {
     color: white;
     background-color: #555;
     padding: 0.5rem;
     margin: 0 1rem;
     border-radius: 5px;
     text-decoration: none;
-    }
+}
 
-    .resources {
+.resources {
     display: flex;
     flex-direction: row;
     justify-content: center;
     margin-bottom: 1rem;
-    }
+}
 
-    .planet-list {
+.ships {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-bottom: 1rem;
+}
+
+.planet-list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-evenly;
     color: white;
-    }
+}
 
-    .system-card input {
+.system-card input {
     background-color: #555;
     color: white;
     border: none;
     padding: 0.5rem;
     border-radius: 5px;
     cursor: pointer;
-    }
+}
 
-    .system-card div {
+.system-card div {
     margin-top: auto;
     margin-bottom: auto;
     margin-left: 2rem;
-    }
+}
 </style>

src/pages/game/systemManager/select.astro

@@ -1,16 +1,9 @@
 ---
-import NavBar from "../../../components/NavBar.astro";
-import ResourceBar from "../../../components/ResourceBar.astro";
-import Layout from "../../../layouts/Layout.astro";
+import LoggedIn from "../../../layouts/LoggedIn.astro";
+import User from "../../../lib/classes/User";
 import locationManager from "../../../lib/classes/managers/LocationManager";
-import { getUserByAccessToken } from "../../../lib/db/users";
 
-const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
-const username = Astro.cookies.get('username')?.value ?? "";
-if(loggedToken === null || username === "") return Astro.redirect('/logout');
-
-const checkUser = await getUserByAccessToken(loggedToken);
-if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
+const user: User = Astro.locals.user;
 
 if(Astro.request.method === "POST") {
     const selectedSystemId = (await Astro.request.formData()).get('systemId') as string | null;
@@ -27,12 +20,9 @@ if(Astro.request.method === "POST") {
     }
 }
 
-const systems = locationManager.getSystemsOwnedBy(checkUser._id);
+const systems = locationManager.getSystemsOwnedBy(user.id);
 ---
-<Layout title="System Manager">
-    <NavBar loggedIn="true" active="systemManager" />
-    <ResourceBar />
-
+<LoggedIn id="systemManager" title="System Manager">
     <div class="systems-list">
         {systems.map(system => (
             <div class="system-card">
@@ -41,16 +31,16 @@ const systems = locationManager.getSystemsOwnedBy(checkUser._id);
             </div>
         ))}
     </div>
-</Layout>
+</LoggedIn>
 <style>
-    .systems-list {
+.systems-list {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: center;
-    }
+}
 
-    .system-card {
+.system-card {
     background-color: #333;
     color: white;
     padding: 1rem;
@@ -58,20 +48,20 @@ const systems = locationManager.getSystemsOwnedBy(checkUser._id);
     border-radius: 5px;
     display: flex;
     flex-direction: row;
-    }
+}
 
-    .system-card input {
+.system-card input {
     background-color: #555;
     color: white;
     border: none;
     padding: 0.5rem;
     border-radius: 5px;
     cursor: pointer;
-    }
+}
 
-    .system-card div {
+.system-card div {
     margin-top: auto;
     margin-bottom: auto;
     margin-left: 2rem;
-    }
+}
 </style>

src/pages/game/systemManager/structures.astro

@@ -1,26 +1,16 @@
 ---
 import { ObjectId } from "mongodb";
-import NavBar from "../../../components/NavBar.astro";
-import ResourceBar from "../../../components/ResourceBar.astro";
-import Layout from "../../../layouts/Layout.astro";
-import locationManager from "../../../lib/classes/managers/LocationManager";
-import { getUserByAccessToken } from "../../../lib/db/users";
-import { getHighestWeightedLanguage, getLocales, getName, getObj } from "../../../lib/utils/langDriver";
 import ItemCard from "../../../components/ItemCard.astro";
+import LoggedIn from "../../../layouts/LoggedIn.astro";
+import locationManager from "../../../lib/classes/managers/LocationManager";
+import { getName, getObj } from "../../../lib/utils/langDriver";
 
-const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
-const username = Astro.cookies.get('username')?.value ?? "";
-if(loggedToken === null || username === "") return Astro.redirect('/logout');
-
-const checkUser = await getUserByAccessToken(loggedToken);
-if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
+const { token, lang } = Astro.locals;
 
 const currentSystemId = Astro.cookies.get('currentSystem')?.value ?? null;
-
 if(currentSystemId === null) return Astro.redirect('/game/systemManager/select');
 
 const currentSystem = locationManager.getSystem(new ObjectId(currentSystemId));
-
 if(currentSystem === undefined) {
     Astro.cookies.delete('currentSystem');
     return Astro.redirect('/game/systemManager/select');
@@ -33,7 +23,7 @@ if(Astro.request.method === "POST") {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
-            'Authorization': 'Bearer ' + loggedToken
+            'Authorization': 'Bearer ' + token
         },
         body: JSON.stringify({
             system: currentSystemId,
@@ -44,8 +34,6 @@ if(Astro.request.method === "POST") {
     console.log(request);
 }
 
-const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
-
 const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, structures: Array<any>, energy: number } } = {};
 
 const structureList = currentSystem.structures.structuresDB;
@@ -63,10 +51,7 @@ for(const structure of structureList) {
 	};
 }
 ---
-<Layout title="System Manager">
-    <NavBar loggedIn="true" active="systemManager" />
-    <ResourceBar />
-
+<LoggedIn id="systemManager" title="System Manager">
     <h1>Selected system: {currentSystem.data.name} <a href="/game/systemManager/select">(change)</a></h1>
     <div class="system-links">
         <a href="/game/systemManager">Overview</a>
@@ -98,22 +83,22 @@ for(const structure of structureList) {
             />
         ))}
     </div>    
-</Layout>
+</LoggedIn>
 <style>
-    * {
+* {
 	color: white;
-	}
+}
 
-    h1 {
+h1 {
     text-align: center;
     color: white;
-    }
+}
 
-    h1 a {
+h1 a {
     color: lime;
-    }
+}
 
-    #structure-modal-background {
+#structure-modal-background {
 	display: none;
 	position: fixed;
 	top: 0;
@@ -122,9 +107,9 @@ for(const structure of structureList) {
 	height: 100%;
 	background: rgba(0, 0, 0, 0.5);
 	z-index: 100;
-	}
+}
 
-	#structure-modal-details {
+#structure-modal-details {
 	display: none;
 	position: fixed;
 	top: 50%;
@@ -136,29 +121,29 @@ for(const structure of structureList) {
 	border-radius: 8px;
 	padding: 1rem;
 	z-index: 101;
-	}
+}
 
-	.structure-modal-text {
+.structure-modal-text {
 	font-size: 1.5rem;
-	}
+}
 
-    .system-links {
+.system-links {
     display: flex;
     flex-direction: row;
     justify-content: center;
     margin-bottom: 1rem;
-    }
+}
 
-    .system-links a {
+.system-links a {
     color: white;
     background-color: #555;
     padding: 0.5rem;
     margin: 0 1rem;
     border-radius: 5px;
     text-decoration: none;
-    }
+}
 
-    .structure-list {
+.structure-list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -166,13 +151,13 @@ for(const structure of structureList) {
     color: white;
 	row-gap: 40px;
 	column-gap: 2%;
-    }
+}
 
-    .structure-card div {
+.structure-card div {
     margin-top: auto;
     margin-bottom: auto;
     margin-left: 2rem;
-    }
+}
 </style>
 <script define:vars={{ modalSet, lang }}>
 	const modalResources = document.getElementById("structure-modal-req-resources");

tsconfig.json

@@ -4,5 +4,11 @@
     "verbatimModuleSyntax": false,
     "module": "ES2022",
     "moduleResolution": "node"
-  }
+  },
+  "include": [
+    "src/env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.astro"
+  ]
 }