Move all lib-data to database

src/components/ResourceBar.astro

@@ -2,8 +2,9 @@
 import { ObjectId } from 'mongodb';
 import { calculateCurrentAvailableResources } from '../lib/utils/resourceManager';
 import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
+import { getAllResources } from '../lib/db/resources';
 
-import resourceTypes from '../lib/data/resources.json';
+const resourceTypes = await getAllResources();
 
 const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
 
@@ -22,13 +23,13 @@ for(const key in resources) {
     <div id="resourcebar-elements" class="resourcebar-elements">
         {resourceArray.map(res =>
             <div class="resourcebar-item"
-              data-res-type={resourceTypes.find(x => x.name === res.name)?.type ?? "solid"}
+              data-res-type={resourceTypes.find(x => x.id === res.name)?.type ?? "solid"}
               data-res-amount={res.amount}
               data-res-mining-rate={res.perHourMiningRate}
-              style={(resourceTypes.find(x => x.name === res.name)?.type ?? "solid") === "solid" ? "" : "display: none;"}
+              style={(resourceTypes.find(x => x.id === res.name)?.type ?? "solid") === "solid" ? "" : "display: none;"}
             >
                 <div class="resourcebar-item-icon">
-                    <img src={resourceTypes.find(x => x.name === res.name)?.icon ?? "#"} alt={res.name} />    
+                    <img src={resourceTypes.find(x => x.id === res.name)?.icon ?? "#"} alt={res.name} />    
                 </div>
                 <div class="resourcebar-item-text-wrapper" data-resname={res.name}>
                     <div class="resourcebar-item-text">{getName(lang, 'resources', res.name)}</div>

src/lib/data/research.json

@@ -1,144 +0,0 @@
-[
-    {
-        "id": "basic-engine",
-        "requirements": {
-            "buildings": [
-                {
-                    "id": "research-lab",
-                    "level": 1
-                }
-            ],
-            "research": [],
-            "resources": {
-                "iron": 1000,
-                "gold": 500
-            }
-        },
-        "time": 60,
-        "multiplier": 2
-    }, {
-        "id": "advanced-engine",
-        "requirements": {
-            "buildings": [
-                {
-                    "id": "research-lab",
-                    "level": 5
-                }
-            ],
-            "research": [
-                {
-                    "id": "basic-engine",
-                    "level": 1
-                }
-            ],
-            "resources": {
-                "iron": 2000,
-                "gold": 1000
-            }
-        },
-        "time": 120,
-        "multiplier": 3
-    }, {
-        "id": "combat-utilities",
-        "requirements": {
-            "buildings": [
-                {
-                    "id": "research-lab",
-                    "level": 1
-                }
-            ],
-            "research": [],
-            "resources": {
-                "iron": 1000,
-                "gold": 500
-            }
-        },
-        "time": 60,
-        "multiplier": 2
-    }, {
-        "id": "defensive-utilities",
-        "requirements": {
-            "buildings": [
-                {
-                    "id": "research-lab",
-                    "level": 1
-                }
-            ],
-            "research": [],
-            "resources": {
-                "iron": 1000,
-                "gold": 500
-            }
-        },
-        "time": 60,
-        "multiplier": 2
-    }, {
-        "id": "oxygen-production",
-        "requirements": {
-            "buildings": [
-                {
-                    "id": "research-lab",
-                    "level": 1
-                }
-            ],
-            "research": [],
-            "resources": {
-                "iron": 1000,
-                "gold": 500
-            }
-        },
-        "time": 200,
-        "multiplier": 2
-    }, {
-        "id": "terraforming",
-        "requirements": {
-            "buildings": [
-                {
-                    "id": "research-lab",
-                    "level": 1
-                }
-            ],
-            "research": [],
-            "resources": {
-                "iron": 1000,
-                "gold": 500
-            }
-        },
-        "time": 500,
-        "multiplier": 3
-    }, {
-        "id": "advanced-technologies",
-        "requirements": {
-            "buildings": [
-                {
-                    "id": "research-lab",
-                    "level": 6
-                }
-            ],
-            "research": [],
-            "resources": {
-                "iron": 1000,
-                "gold": 500
-            }
-        },
-        "time": 1500,
-        "multiplier": 4
-    }, {
-        "id": "nuclear-power",
-        "requirements": {
-            "buildings": [
-                {
-                    "id": "research-lab",
-                    "level": 10
-                }
-            ],
-            "research": [],
-            "resources": {
-                "iron": 1000,
-                "gold": 500
-            }
-        },
-        "time": 3000,
-        "multiplier": 5
-    }
-]

src/lib/data/resources.json

@@ -1,49 +0,0 @@
-[
-    {
-        "name": "coal",
-        "type": "solid",
-        "icon": "https://gamepedia.cursecdn.com/minecraft_gamepedia/5/58/Coal_JE4_BE3.png"
-    },
-    {
-        "name": "iron",
-        "type": "solid",
-        "icon": "https://vignette.wikia.nocookie.net/minecraft/images/e/e8/New_Iron_IngotB.png/revision/latest?cb=20190520101024"
-    },
-    {
-        "name": "gold",
-        "type": "solid",
-        "icon": "https://gamepedia.cursecdn.com/minecraft_gamepedia/5/57/Gold_Ingot_JE3_BE2.png"
-    },
-
-    {
-        "name": "water",
-        "type": "liquid",
-        "icon": "https://ael.ovh/uranium.png"
-    },
-    {
-        "name": "sulfuricAcid",
-        "type": "liquid",
-        "icon": "https://ael.ovh/uranium.png"
-    },
-    {
-        "name": "liquidNitrogen",
-        "type": "liquid",
-        "icon": "https://ael.ovh/uranium.png"
-    },
-    
-    {
-        "name": "hydrogen",
-        "type": "gas",
-        "icon": "https://ael.ovh/uranium.png"
-    },
-    {
-        "name": "oxygen",
-        "type": "gas",
-        "icon": "https://ael.ovh/uranium.png"
-    },
-    {
-        "name": "helium3",
-        "type": "gas",
-        "icon": "https://ael.ovh/uranium.png"
-    }
-]

src/lib/data/ships.json

@@ -1,57 +0,0 @@
-[
-    {
-        "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/mongodb.ts

@@ -45,6 +45,16 @@ export const Research = async() => {
     return db.collection('research');
 }
 
+export const Resources = async() => {
+    const db = await getDB();
+    return db.collection('resources');
+}
+
+export const Ships = async() => {
+    const db = await getDB();
+    return db.collection('ships');
+}
+
 export const Lang = async (language = "en") => {
     const db = await getDB(`${config.MONGODB_DB}_${language}`);
     return [

src/lib/db/planets.ts

@@ -5,7 +5,7 @@ import type Planet from '../../types/Planet';
 import { getUserById } from './users';
 import type Building from '../../types/Building';
 import type Ship from '../../types/Ship';
-import type DBResource from '../../types/DBResource';
+import type PlayerResource from '../../types/PlayerResource';
 
 export const getAllPlanets = async (options?: { fetchUserPlanets: boolean }) => {
     const planets = await Planets();
@@ -32,7 +32,7 @@ export const createPlanet = async (options: { name: string, owner?: User, ownerI
         owner: user,
         name: options.name,
         fields: options.fields,
-        resources: new Array<DBResource>,
+        resources: new Array<PlayerResource>,
         buildings: new Array<Building>,
         ships: new Array<Ship>
     }

src/lib/db/resources.ts

@@ -0,0 +1,12 @@
+import DBResource from '../../types/DBResource';
+import { Resources } from '../db/mongodb';
+
+export const getAllResources = async () => {
+    return (await Resources()).find({}).toArray() as unknown as Array<DBResource>;   
+}
+
+export const getResourceById = async (id: string) => {
+    return (await Resources()).findOne({
+        id
+    }) as unknown as DBResource;
+}

src/lib/db/ships.ts

@@ -0,0 +1,12 @@
+import DBShip from '../../types/DBShip';
+import { Ships } from '../db/mongodb';
+
+export const getAllShips = async () => {
+    return (await Ships()).find({}).toArray() as unknown as Array<DBShip>;   
+}
+
+export const getResourceById = async (id: string) => {
+    return (await Ships()).findOne({
+        id
+    }) as unknown as DBShip;
+}

src/lib/utils/resourceManager.ts

@@ -1,10 +1,10 @@
 import { ObjectId } from "mongodb"
 import { Planets } from "../db/mongodb";
-import type DBResource from "../../types/DBResource";
+import type PlayerResource from "../../types/PlayerResource";
 import { getPlanetById } from "../db/planets";
 
 export const createInitialResources = async (planetId: ObjectId) => {
-    const resources: Array<DBResource> = [
+    const resources: Array<PlayerResource> = [
         {
             name: "coal",
             amount: 11,
@@ -64,7 +64,7 @@ export const createInitialResources = async (planetId: ObjectId) => {
     updatePlanetResources(planetId, resources);
 }
 
-export const getResourcesFromPlanet = async (planetId: ObjectId): Promise<Array<DBResource> | null> => {
+export const getResourcesFromPlanet = async (planetId: ObjectId): Promise<Array<PlayerResource> | null> => {
     const planet = await getPlanetById(planetId);
 
     if(!planet) return null;
@@ -72,7 +72,7 @@ export const getResourcesFromPlanet = async (planetId: ObjectId): Promise<Array<
     return planet.resources;
 }
 
-export const updatePlanetResources = async (planetId: ObjectId, resources: Array<DBResource>) => {
+export const updatePlanetResources = async (planetId: ObjectId, resources: Array<PlayerResource>) => {
     const planets = await Planets();
     await planets.updateOne({ _id: planetId }, {
         $set: {
@@ -81,7 +81,7 @@ export const updatePlanetResources = async (planetId: ObjectId, resources: Array
     });
 }
 
-export const calculateCurrentAvailableResources = async (planetId: ObjectId): Promise<Array<DBResource>> => {
+export const calculateCurrentAvailableResources = async (planetId: ObjectId): Promise<Array<PlayerResource>> => {
     const resources = await getResourcesFromPlanet(planetId);
 
     if(resources === null) return [];

src/pages/api/build/createBuilding.ts

@@ -5,7 +5,7 @@ import { getUserByAccessToken, getUserResearch } from "../../../lib/db/users";
 import Planet from "../../../types/Planet";
 import { createOrUpgradeBuilding, getPlanetById } from "../../../lib/db/planets";
 import { ObjectId } from "mongodb";
-import DBResource from "../../../types/DBResource";
+import DBResource from "../../../types/PlayerResource";
 import { getAllBuildings } from "../../../lib/db/buildings";
 import DBBuilding from "../../../types/DBBuilding";
 

src/pages/api/research/performResearch.ts

@@ -1,13 +1,13 @@
 import { type APIRoute } from "astro";
 import validateAccessToken from "../../../lib/utils/validateAccessToken";
-import research from '../../../lib/data/research.json';
 import { createOrUpgradeResearch, getUserByAccessToken, getUserResearch } from "../../../lib/db/users";
 import { getPlanetById } from "../../../lib/db/planets";
 import Planet from "../../../types/Planet";
 import { ObjectId } from "mongodb";
 import { calculateCurrentAvailableResources, getResourcesFromPlanet, updatePlanetResources } from "../../../lib/utils/resourceManager";
-import DBResource from "../../../types/DBResource";
+import PlayerResource from "../../../types/PlayerResource";
 import calculateAvailableResources from "../../../lib/utils/calculateAvailableResources";
+import { getAllResearch, getResearchById } from "../../../lib/db/research";
 
 export const POST: APIRoute = async({ request }) => {
     const response = await validateAccessToken(request);
@@ -36,9 +36,11 @@ export const POST: APIRoute = async({ request }) => {
         )
     }
 
+    
     const researchId = body.research;
-    const researchData = research.filter((element: any) => element.id === researchId)[0];
+    const research = await getResearchById(researchId);
-    if(!researchId || !researchData) {
+
+    if(!research) {
         return new Response(
             JSON.stringify({
                 code: 400,
@@ -72,7 +74,7 @@ export const POST: APIRoute = async({ request }) => {
     // check requirements
     // buildings
     const buildings = userPlanet.buildings;
-    researchData.requirements.buildings.forEach((buildingReq) => {
+    research.requirements.buildings.forEach((buildingReq) => {
         if(buildings.filter((building) => building.id === buildingReq.id)[0]?.level ?? 0 < buildingReq.level) {
             return new Response(
                 JSON.stringify({
@@ -86,7 +88,7 @@ export const POST: APIRoute = async({ request }) => {
 
     // research
     const playerResearch = await getUserResearch(user);
-    researchData.requirements.research.forEach((researchReq) => {
+    research.requirements.research.forEach((researchReq) => {
         if(playerResearch.filter((research) => research.id === researchReq.id)[0].level < researchReq.level) {
             return new Response(
                 JSON.stringify({
@@ -113,19 +115,19 @@ export const POST: APIRoute = async({ request }) => {
     const level = playerCurrentResearch ? playerCurrentResearch.level : 0;
     const newResources = structuredClone(resources);
     const missingResources: Array<{}> = [];
-    Object.entries(researchData.requirements.resources).forEach(([key, value]) => {
+    research.requirements.resources.forEach(resource => {
-        const res = resources.filter((element: DBResource) => element.name === key)[0];
+        const res = resources.filter((element: PlayerResource) => element.name === resource.name)[0];
-        const cost = playerCurrentResearch ? value * Math.pow(researchData.multiplier, level) : value;
+        const cost = playerCurrentResearch ? resource.amount * Math.pow(research.multiplier, level) : resource.amount;
         
         if(res.amount < cost) {
             missingResources.push({
-                name: key,
+                name: resource.name,
                 required: cost,
                 available: res.amount
             });
             return;
         }
-        else newResources.filter((element: DBResource) => element.name === key)[0].amount -= cost;
+        else newResources.filter((element: PlayerResource) => element.name === resource.name)[0].amount -= cost;
     });
 
     if(missingResources.length > 0) {

src/pages/game/research.astro

@@ -8,7 +8,6 @@ import ItemCard from '../../components/ItemCard.astro';
 import DBResearch from '../../types/DBResearch';
 import { getAllResearch } from '../../lib/db/research';
 
-// const researchList = (await import('../../lib/data/research.json')).default;
 const researchList = await getAllResearch();
 
 const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;

src/pages/game/ships.astro

@@ -2,12 +2,10 @@
 import Layout from '../../layouts/Layout.astro';
 import NavBar from '../../components/NavBar.astro';
 import { getUserByAccessToken } from '../../lib/db/users';
-import { getHighestWeightedLanguage, getLocales } from '../../lib/utils/langDriver';
+import { getHighestWeightedLanguage, getLocales, getObj } from '../../lib/utils/langDriver';
 import ResourceBar from '../../components/ResourceBar.astro';
-
+import { getAllShips } from '../../lib/db/ships';
-import ships from '../../lib/data/ships.json';
+import ItemCard from '../../components/ItemCard.astro';
-import { getPlanetById } from '../../lib/db/planets';
-import { ObjectId } from 'mongodb';
 
 const loggedToken = Astro.cookies.get('sessionToken')?.value ?? null;
 const username = Astro.cookies.get('username')?.value ?? "";
@@ -16,24 +14,48 @@ if(loggedToken === null || username === "") return Astro.redirect('/logout');
 const checkUser = await getUserByAccessToken(loggedToken);
 if(checkUser === null || checkUser.username !== username) return Astro.redirect('/logout');
 
-const planet = await getPlanetById(new ObjectId(Astro.cookies.get('planetid')?.value));
+const ships = await getAllShips();
-
-if(!planet) return;
 
 const lang = await getLocales(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) {
+	modalSet[ship.id] = {
+		resources: ship.requirements.resources,
+		research: ship.requirements.research,
+		buildings: ship.requirements.buildings,
+		// energy: building.energy
+	};
+}
 ---
 
 <Layout title="Ships">
 	<NavBar loggedIn="true" active="ships" />
 	<ResourceBar />
 
-    {ships.map(ship => (
+    <div id="ship-modal-background">
-        <div class="ship-card">
+		<div id="ship-modal-details" data-building-id="">
-            <div class="ship-title">
+			<h3>Required resources</h3>
-                <b>({planet.ships.find((s => s.id === ship.id))?.amount ?? 0})</b> <i>{ship.id}</i>
+			<div class="ship-modal-text" id="ship-modal-req-resources">None</div>
+			<h3>Required buildings</h3>
+			<div class="ship-modal-text" id="ship-modal-req-buildings">None</div>
+			<h3>Required research</h3>
+			<div class="ship-modal-text" id="ship-modal-req-research">None</div>
 		</div>
 	</div>
-    ))}
+
+	<div class="ship-cards">
+		{ships.map(ship => <>
+			<ItemCard
+				id={ship.id}
+				name={getObj(lang, "ships", ship.id).name}
+				description={getObj(lang, "ships", ship.id).description ?? ""}
+				image={`/images/ships/${ship.id}.jpeg`}
+				button_type="general"
+				button_name="nav-build" />
+		</>)}
+	</div>
 </Layout>
 
 <style>
@@ -114,8 +136,93 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
 	.a-button:hover {
 		color: lime;
 	}
+
+	.ship-cards {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		row-gap: 40px;
+		column-gap: 2%;
+		margin-top: 40px;
+	}
+
+	#ship-modal-background {
+		display: none;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 100;
+	}
+
+	#ship-modal-details {
+		display: none;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 80%;
+		max-width: 800px;
+		background: rgba(0, 0, 0, 0.9);
+		border-radius: 8px;
+		padding: 1rem;
+		z-index: 101;
+	}
 </style>
-<script>
+<script define:vars={{ modalSet, lang }}>
+	const modalResources = document.getElementById("ship-modal-req-resources");
+	const modalBuildings = document.getElementById("ship-modal-req-buildings");
+	const modalResearch = document.getElementById("ship-modal-req-research");
+
+	document.querySelectorAll('.item-card-info-button').forEach((el) => {
+        el.addEventListener('click', () => {
+            // modal
+            const modalDiv = document.getElementById('ship-modal-details');
+            if(!modalDiv) return;
+            modalDiv.style.display = 'block';
+
+			console.log(modalSet)
+
+			const reqResources = modalSet[el.parentElement.parentElement.dataset.id]?.resources ?? [];
+			const reqBuildings = modalSet[el.parentElement.parentElement.dataset.id]?.buildings ?? [];
+			const reqResearch = modalSet[el.parentElement.parentElement.dataset.id]?.research ?? [];
+
+			console.log(modalSet)
+
+			modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
+				return `${lang['resources'].find(r => r.id === resource.id).name}: ${resource.amount}`;
+			}).join("<br />");
+
+			modalBuildings.innerHTML = reqBuildings.length === 0 ? "None" : reqBuildings.map(building => {
+				return `${lang['buildings'].find(b => b.id === building.id).name}: ${building.level}`;
+			}).join("<br />");
+
+			modalResearch.innerHTML = reqResearch.length === 0 ? "None" : reqResearch.map(research => {
+				return `${lang['research'].find(r => r.id === research.id).name}: ${research.level}`;
+			}).join("<br />");
+
+            // background
+            const backgroundDiv = document.getElementById('ship-modal-background');
+            if(!backgroundDiv) return;
+            backgroundDiv.style.display = 'block';
+        });
+    });
+
+    // close modal on background click
+    const bg = document.getElementById('ship-modal-background');
+    
+    bg?.addEventListener('click', () => {
+        const modalDiv = document.getElementById('ship-modal-details');
+        if(!modalDiv) return;
+        modalDiv.style.display = 'none';
+
+        const backgroundDiv = document.getElementById('ship-modal-background');
+        if(!backgroundDiv) return;
+        backgroundDiv.style.display = 'none';
+    });
+
 	const allButtons = document.getElementsByClassName("a-button");
 
 	for(const researchButton of allButtons) {

src/types/DBResource.ts

@@ -1,6 +1,5 @@
-import type Resource from "./Resource";
+export default interface DBResource {
-
+    id: string,
-export default interface DBResource extends Resource {
+    type: string,
-    lastUpdated: Date;
+    icon: string
-    perHourMiningRate: number;
 }

src/types/DBShip.ts

@@ -0,0 +1,20 @@
+export default interface DBShip {
+    id: string,
+    capacity: {
+        solid: number,
+        liquid: number,
+        gas: number,
+    },
+    requirements: {
+        buildings: Array<{ id: string, level: number }>,
+        research: Array<{ id: string, level: number }>,
+        resources: Array<{ name: string, amount: number }>,
+    },
+    time: number,
+    structure: {
+        hitpoints: number,
+        defense: number,
+        attack: number,
+    },
+    speed: number,
+}

src/types/Planet.ts

@@ -1,5 +1,5 @@
 import type { ObjectId } from "mongodb";
-import type DBResource from "./DBResource";
+import type PlayerResource from "./PlayerResource";
 import type Building from "./Building";
 import type Ship from "./Ship";
 import type User from "./User";
@@ -9,7 +9,7 @@ export default interface Planet {
     owner: User,
     name: string,
     fields: number,
-    resources: Array<DBResource>,
+    resources: Array<PlayerResource>,
     buildings: Array<Building>,
     ships: Array<Ship>,
 }

src/types/PlayerResource.ts

@@ -0,0 +1,6 @@
+import type Resource from "./Resource";
+
+export default interface DBResource extends Resource {
+    lastUpdated: Date;
+    perHourMiningRate: number;
+}