moar wip

src/components/Game.astro

@@ -9,18 +9,27 @@
     <div class="w-full flex flex-row justify-center gap-8">
       <div id="playerMoney"></div><div id="playerLocation"></div>
     </div>
-    <div id="drugsList" class="w-full flex flex-row justify-center gap-8"></div>
+    <div class="w-full max-w-3xl">
+      <h2 class="text-2xl text-center text-primary">Mercado</h2>
+      <div id="drugsList" class="flex flex-col justify-center gap-8"></div>
+    </div>
   </div>
-  <button id="btn-g-back" class="btn btn-outline w-96"
+</div>
+<div class="flex flex-row space-between gap-2 w-full max-w-5xl mx-auto mt-16">
+  <button id="btn-g-back" class="btn btn-outline flex-1"
     >Volver al menu principal</button
   >
+  <!-- <button id="btn-g-travel" class="btn btn-outline flex-1">Viajar</button> -->
 </div>
+
 <script>
   import { currentPlayer, loadCurrentPlayer } from "../services/players";
   import { getCity } from "../services/cities";
   import screen from "../services/screens";
   import type { Drug } from "../services/db";
   import type { City } from "../services/db";
+  import { getDrugs, calculateDrugPrice } from "../services/drugs";
+
   document.querySelector("#btn-g-back")!.addEventListener("click", () => {
     screen.goTo("start-menu");
   });
@@ -28,9 +37,17 @@
   function createDrugElement(drug: Drug, city: City) {
     const drugElement = document.createElement("div");
     drugElement.classList.add("drug");
+    drugElement.classList.add("flex");
+    drugElement.classList.add("flex-row");
+    drugElement.classList.add("justify-between");
+    drugElement.classList.add("border");
+    drugElement.classList.add("border-primary");
+    drugElement.classList.add("p-4");
     drugElement.innerHTML = `
       <h3>${drug.name}</h3>
-      <p>${drug.basePrice + (drug.basePrice * city.population) / 10000}€</p>
+      <p>Inventario: ${0}g</p>
+      <p>${calculateDrugPrice(drug, city)}€/g</p>
+      <button>Comprar</button>
     `;
     return drugElement;
   }
@@ -43,6 +60,12 @@
     const city = await getCity(player.cityId);
     document.querySelector("#playerLocation")!.textContent =
       `Ubicación: ${city!.name}`;
+    const drugsList = document.querySelector("#drugsList");
+    drugsList!.innerHTML = "";
+    for (const drug of await getDrugs()) {
+      const drugElement = createDrugElement(drug, city!);
+      drugsList!.appendChild(drugElement);
+    }
   });
   await loadCurrentPlayer();
 </script>

src/services/drugs.ts

@@ -0,0 +1,12 @@
+import { db, type City, type Drug } from './db';
+
+export async function getDrugs(): Promise<Drug[]> {
+    return await db.drugs.toArray();
+}
+
+export function calculateDrugPrice(drug: Drug, city: City): number {
+    const demand = city.population / (1000 * Math.random());
+    const supply = city.population / (1000 * Math.random());
+    const price = Number(drug.basePrice * (demand / supply));
+    return Number(price.toFixed(2));
+}

src/services/players.ts

@@ -27,3 +27,14 @@ export async function getCurrentPlayer(): Promise<Player | undefined> {
   if (!id) return;
   return db.players.get(Number(id.value));
 }
+
+
+export async function travel(player: Player, cityId: number) {
+  if (player.money < 10) {
+    throw new Error("Not enough money to travel");
+  }
+  player.money -= 10;
+  player.cityId = cityId;
+  await db.players.update(player.id, player);
+  currentPlayer.set(player);
+}