Add ship display

src/lib/data/ships.json

@@ -0,0 +1,57 @@
+[
+    {
+        "id": "transporter",
+        "capacity": {
+            "solid": 10000,
+            "liquid": 10000,
+            "gas": 10000
+        },
+        "requirements": {
+            "buildings": [
+                {
+                    "id": "shipyard",
+                    "level": 1
+                }
+            ],
+            "research": [],
+            "resources": {
+                "iron": 1000,
+                "gold": 500
+            }
+        },
+        "time": 40,
+        "structure": {
+            "hitpoints": 1000,
+            "defense": 10,
+            "attack": 0
+        },
+        "speed": 10
+    }, {
+        "id": "fighter",
+        "capacity": {
+            "solid": 100,
+            "liquid": 100,
+            "gas": 100
+        },
+        "requirements": {
+            "buildings": [
+                {
+                    "id": "shipyard",
+                    "level": 1
+                }
+            ],
+            "research": [],
+            "resources": {
+                "iron": 500,
+                "gold": 200
+            }
+        },
+        "time": 15,
+        "structure": {
+            "hitpoints": 800,
+            "defense": 20,
+            "attack": 20
+        },
+        "speed": 12
+    }
+]

src/lib/db/users.ts

@@ -7,6 +7,7 @@ import { ObjectId } from 'mongodb';
 import { hash } from 'argon2'
 import { createInitialResources } from '../utils/resourceManager';
 import type Research from '../../types/Research';
+import type Ship from '../../types/Ship';
 
 export const getAllUsers = async () => {
     const users = await Users();
@@ -117,4 +118,31 @@ export const createOrUpgradeResearch = async (username: string, research: Resear
             { $push: { research } }
         );
     }
+}
+
+export const getUserShips = async (user: User): Promise<Array<Ship>> => {
+    const ships: Array<Ship> = [];
+
+    if (user?.ships !== undefined) {
+        user?.ships.forEach((ship: Ship) => {
+            ships.push(ship);
+        });
+    }
+
+    return ships;
+}
+
+export const createOrUpgradeShip = async (user: User, ship: Ship) => {
+    const users = await Users();
+
+    const result = await users.updateOne(
+        { username: user.username, "ships.id": ship.id },
+        { $set: { "ships.$.amount": ship.amount } }
+    );
+
+    if (result.modifiedCount === 0) {
+        await users.updateOne({ username: user.username },
+            { $push: { ships: ship } }
+        );
+    }
 }

src/lib/lang/en/ships.json

@@ -0,0 +1,12 @@
+{
+    "Label": {
+        "transporter": {
+            "name": "Transporter",
+            "description": "Transporter can move resources between planets."
+        },
+        "fighter": {
+            "name": "Fighter",
+            "description": "Fighter can attack enemy ships and planets."
+        }
+    }
+}

src/pages/game/ships.astro

@@ -0,0 +1,136 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import NavBar from '../../components/NavBar.astro';
+import { getUserByAccessToken } from '../../lib/db/users';
+import { getHighestWeightedLanguage, getLocales } from '../../lib/lang/langDriver';
+import ResourceBar from '../../components/ResourceBar.astro';
+
+import ships from '../../lib/data/ships.json';
+
+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 = getHighestWeightedLanguage(Astro.request.headers.get('accept-language'));
+const langShips = await getLocales(locale, 'ships');
+
+const playerShips = checkUser.ships;
+console.log(playerShips)
+---
+
+<Layout title="Ships">
+	<NavBar loggedIn="true" active="ships" />
+	<ResourceBar />
+
+    {ships.map(ship => (
+        <div class="ship-card">
+            <div class="ship-title">
+                <b>({playerShips.find((s => s.id === ship.id))?.amount ?? 0})</b> <i>{ship.id}</i>
+            </div>
+        </div>
+    ))}
+</Layout>
+
+<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;
+	}
+</style>
+<script>
+	const allButtons = document.getElementsByClassName("a-button");
+
+	for(const researchButton of allButtons) {
+		researchButton.addEventListener("click", async () => {
+			const id = researchButton.id.split("_")[1];
+
+			console.log(id);
+
+			await fetch('/api/research/performResearch', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					research: id
+				})
+			});
+		});
+	}
+</script>

src/types/Ship.ts

@@ -0,0 +1,4 @@
+export default interface Ship {
+    id: string;
+    amount: number;
+}

src/types/User.ts

@@ -2,6 +2,7 @@ import type { ObjectId } from "mongodb";
 import type Building from "./Building";
 import type DBResource from "./DBResource";
 import type Research from "./Research";
+import type Ship from "./Ship";
 
 export default interface User {
     _id: ObjectId;
@@ -12,6 +13,7 @@ export default interface User {
     resources: Array<DBResource>;
     buildings: Array<Building>;
     research: Array<Research>;
+    ships: Array<Ship>
     createdAt: Date;
     updatedAt: Date;
 }