feat(gameplay): Adding % bonus for planet type

2026-03-30 15:43:43 +02:00
parent c0f66d8cc0
commit 3b229755f8
10 changed files with 548 additions and 81 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -89,17 +89,35 @@

        <!-- Team score display -->
        <div class="scoreBoard" id="scoreBoard">
-          <span class="scoreTeam scoreTeam--blue">
-            <img src="./graphism/logo_resistance.svg" alt="Resistance" class="team-logo" />
-            <span class="scoreTeamName">Resistance</span>
-            <span class="scoreValue" id="scoreBlue">0</span>
-          </span>
+          <img src="./graphism/logo_resistance.svg" alt="Resistance" class="team-logo" />
+          <div class="scoreTeam scoreTeam--blue">
+            <span class="scoreTeamName">Résistance</span>
+            <div class="scoreStats">
+              <div class="scoreStat">
+                <span class="scoreStatVal scoreValue" id="scoreBlue">0</span>
+                <span class="scoreStatLabel">planètes</span>
+              </div>
+              <div class="scoreStat">
+                <span class="scoreStatVal scoreVP" id="vpBlue">0</span>
+                <span class="scoreStatLabel">pts victoire</span>
+              </div>
+            </div>
+          </div>
          <span class="scoreSep">—</span>
-          <span class="scoreTeam scoreTeam--red">
-            <span class="scoreValue" id="scoreRed">0</span>
-            <span class="scoreTeamName">First Order</span>
-            <img src="./graphism/logo_first_order.svg" alt="First Order" class="team-logo" />
-          </span>
+          <div class="scoreTeam scoreTeam--red">
+            <span class="scoreTeamName">Premier Ordre</span>
+            <div class="scoreStats">
+              <div class="scoreStat">
+                <span class="scoreStatVal scoreVP" id="vpRed">0</span>
+                <span class="scoreStatLabel">pts victoire</span>
+              </div>
+              <div class="scoreStat">
+                <span class="scoreStatVal scoreValue" id="scoreRed">0</span>
+                <span class="scoreStatLabel">planètes</span>
+              </div>
+            </div>
+          </div>
+          <img src="./graphism/logo_first_order.svg" alt="First Order" class="team-logo" />
        </div>

        <!-- Info rows -->
@@ -134,6 +152,10 @@
            <span class="infoKey muted">Prochaine graine dans</span>
            <code class="infoVal" id="refreshCountdown">--:--:--</code>
          </div>
+          <div class="infoRow">
+            <span class="infoKey muted">Base de données depuis</span>
+            <code class="infoVal" id="dbCreatedAt">—</code>
+          </div>
        </div>

        <!-- Planet stats (collapsible) -->
@@ -178,6 +200,28 @@
          </div>
        </details>

+        <!-- Element bonus section -->
+        <div class="elemBonusSection">
+          <div class="elemBonusSectionTitle">⚡ Bonus de recharge planétaire</div>
+          <div class="elemBonusRow">
+            <span class="elemBonusTeam elemBonusTeam--blue">
+              <span class="elemBonusLabel">Résistance</span>
+              <span class="elemBonusVal" id="elemBonusBlue">0.00</span>
+              <span class="elemBonusUnit">%</span>
+            </span>
+            <span class="elemBonusSep">—</span>
+            <span class="elemBonusTeam elemBonusTeam--red">
+              <span class="elemBonusVal" id="elemBonusRed">0.00</span>
+              <span class="elemBonusUnit">%</span>
+              <span class="elemBonusLabel">Premier Ordre</span>
+            </span>
+          </div>
+          <div class="elemBonusDetail">
+            <span class="elemBonusDetailLabel">Recharge effective (votre équipe) :</span>
+            <span class="elemBonusDetailVal" id="effectiveCooldown">—</span>
+          </div>
+        </div>
+
        <!-- Admin / options section -->
        <div class="infoSection infoSection--options">
          <details class="optionsDetails">
--- a/public/src/api.js
+++ b/public/src/api.js
@@ -65,3 +65,31 @@ export async function apiTickEconScores(seed, blue, red) {
  if (!res.ok) throw new Error("econ_tick_failed");
  return res.json();
 }
+
+export async function apiFetchElementBonus() {
+  const res = await fetch("/api/element-bonus");
+  if (!res.ok) throw new Error("element_bonus_fetch_failed");
+  return res.json();
+}
+
+export async function apiTickElementBonus(seed, blue, red) {
+  const res = await fetch("/api/element-bonus/tick", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ seed, blue, red }),
+  });
+  if (!res.ok) throw new Error("element_bonus_tick_failed");
+  return res.json();
+}
+
+export async function apiFetchDbInfo() {
+  const res = await fetch("/api/db-info");
+  if (!res.ok) throw new Error("db_info_fetch_failed");
+  return res.json();
+}
+
+export async function apiFetchVictoryPoints() {
+  const res = await fetch("/api/victory-points");
+  if (!res.ok) throw new Error("vp_fetch_failed");
+  return res.json();
+}
--- a/public/src/economy.js
+++ b/public/src/economy.js
@@ -1,4 +1,4 @@
-import { resources } from "./planetEconomy.js";
+import { resources, elements } from "./planetEconomy.js";

 // ── Sort state ────────────────────────────────────────────────────────────────

@@ -64,6 +64,46 @@ export function computeTeamIncome(team, cells, resourceWorth) {
  return { total, byResource };
 }

+// ── Element bonus calculation ─────────────────────────────────────────────────
+
+/**
+ * Reverse map: French element label → config key
+ * e.g. "Matières premières" → "common", "Hydrocarbures" → "petrol"
+ */
+const ELEMENT_LABEL_TO_KEY = Object.fromEntries(
+  Object.entries(elements).map(([key, label]) => [label, key])
+);
+
+/**
+ * Compute cumulative element bonus for a team based on their planets' production.
+ * planet.production stores French label strings as keys (values from elements const).
+ * bonus = sum_over_planets( sum_over_elements( elementShare% / 100 * elementWorth[key] ) )
+ *
+ * @param {string} team
+ * @param {Map<string, { discoveredBy: string, hasPlanet: boolean, planet: object|null }>} cells
+ * @param {object} elementWorth - { common: 1, petrol: 3, ... }
+ * @returns {number} bonus value (use as %)
+ */
+export function computeTeamElementBonus(team, cells, elementWorth) {
+  let bonus = 0;
+  for (const [, meta] of cells) {
+    if (meta.discoveredBy !== team) continue;
+    if (!meta.hasPlanet || !meta.planet) continue;
+    const { production } = meta.planet;
+    if (!production) continue;
+    for (const [elementLabel, pct] of Object.entries(production)) {
+      // production keys are French labels; map back to config key
+      const elementKey = ELEMENT_LABEL_TO_KEY[elementLabel] ?? elementLabel;
+      const worth = elementWorth?.[elementKey] ?? 0;
+      if (worth === 0) continue;
+      bonus += (pct / 100) * worth;
+    }
+  }
+  return bonus;
+}
+
+export { elements };
+
 // ── Resource table for the sidebar ───────────────────────────────────────────

 /**
--- a/public/src/game.js
+++ b/public/src/game.js
@@ -1,7 +1,7 @@
 import { fnv1a32, hash2u32, mulberry32 } from "./rng.js";
 import { formatPlanet, generatePlanet } from "./planetGeneration.js";
-import { apiFetchConfig, apiFetchScores, apiFetchGrid, apiRevealCell, apiFetchEconScores, apiTickEconScores } from "./api.js";
-import { computeTeamIncome, renderResourceTable, setEconSort, getEconSort } from "./economy.js";
+import { apiFetchConfig, apiFetchScores, apiFetchGrid, apiRevealCell, apiFetchEconScores, apiTickEconScores, apiFetchElementBonus, apiTickElementBonus, apiFetchDbInfo, apiFetchVictoryPoints } from "./api.js";
+import { computeTeamIncome, computeTeamElementBonus, renderResourceTable, setEconSort, getEconSort } from "./economy.js";

 // ── Constants ─────────────────────────────────────────────────────────────────

@@ -27,6 +27,7 @@ export const GAME_CONFIG = {
  configReloadIntervalSeconds: 30,
  worldSeed: "",
  seedPeriodEndsAtUtc: "",
+  elementWorth: {},
  resourceWorth: { common: {}, rare: {} },
 };
 window.GAME_CONFIG = GAME_CONFIG;
@@ -149,6 +150,12 @@ const nextPeriodEl  = document.getElementById("nextPeriodUtc");
 const resetCountEl  = document.getElementById("refreshCountdown");
 const scoreBlueEl      = document.getElementById("scoreBlue");
 const scoreRedEl       = document.getElementById("scoreRed");
+const vpBlueEl           = document.getElementById("vpBlue");
+const vpRedEl            = document.getElementById("vpRed");
+const dbCreatedAtEl      = document.getElementById("dbCreatedAt");
+const elemBonusBlueEl    = document.getElementById("elemBonusBlue");
+const elemBonusRedEl     = document.getElementById("elemBonusRed");
+const effectiveCooldownEl = document.getElementById("effectiveCooldown");
 const incomeBlueEl     = document.getElementById("incomeBlue");
 const incomeRedEl      = document.getElementById("incomeRed");
 const resourceTableEl  = document.getElementById("resourceTableBody");
@@ -188,6 +195,9 @@ export function applyConfigPayload(data) {
  GAME_CONFIG.configReloadIntervalSeconds   = Math.max(5, Number(data.configReloadIntervalSeconds) || 30);
  GAME_CONFIG.worldSeed                     = String(data.worldSeed ?? "");
  GAME_CONFIG.seedPeriodEndsAtUtc           = String(data.seedPeriodEndsAtUtc ?? "");
+  if (data.elementWorth && typeof data.elementWorth === "object") {
+    GAME_CONFIG.elementWorth = data.elementWorth;
+  }
  if (data.resourceWorth && typeof data.resourceWorth === "object") {
    GAME_CONFIG.resourceWorth = data.resourceWorth;
  }
@@ -232,8 +242,77 @@ export function lockTeamSwitcher() {
 export async function fetchAndApplyScores() {
  try {
    const { blue, red } = await apiFetchScores();
-    scoreBlueEl.textContent = String(blue ?? 0);
-    scoreRedEl.textContent  = String(red ?? 0);
+    if (scoreBlueEl) scoreBlueEl.textContent = String(blue ?? 0);
+    if (scoreRedEl)  scoreRedEl.textContent  = String(red ?? 0);
+  } catch { /* ignore */ }
+}
+
+export async function loadVictoryPoints() {
+  try {
+    const { blue, red } = await apiFetchVictoryPoints();
+    if (vpBlueEl) vpBlueEl.textContent = String(blue ?? 0);
+    if (vpRedEl)  vpRedEl.textContent  = String(red ?? 0);
+  } catch { /* ignore */ }
+}
+
+// ── Element bonus ─────────────────────────────────────────────────────────────
+
+let elemBonusBlue = 0;
+let elemBonusRed  = 0;
+
+function updateEffectiveCooldownDisplay() {
+  const base = GAME_CONFIG.clickCooldownSeconds;
+  const bonus = currentTeam === "blue" ? elemBonusBlue : elemBonusRed;
+  const effective = base / (1 + bonus / 100);
+  if (elemBonusBlueEl) elemBonusBlueEl.textContent = elemBonusBlue.toFixed(2);
+  if (elemBonusRedEl)  elemBonusRedEl.textContent  = elemBonusRed.toFixed(2);
+  if (effectiveCooldownEl) {
+    effectiveCooldownEl.textContent = effective < 1
+      ? `${(effective * 1000).toFixed(0)}ms`
+      : `${effective.toFixed(2)}s`;
+  }
+}
+
+export async function loadElementBonus() {
+  try {
+    const { blue, red } = await apiFetchElementBonus();
+    elemBonusBlue = blue ?? 0;
+    elemBonusRed  = red  ?? 0;
+    updateEffectiveCooldownDisplay();
+  } catch { /* ignore */ }
+}
+
+export async function tickElementBonus() {
+  const worth = GAME_CONFIG.elementWorth;
+  const blueBonus = computeTeamElementBonus("blue", cells, worth);
+  const redBonus  = computeTeamElementBonus("red",  cells, worth);
+  try {
+    const result = await apiTickElementBonus(seedStr, blueBonus, redBonus);
+    elemBonusBlue = result.blue ?? blueBonus;
+    elemBonusRed  = result.red  ?? redBonus;
+  } catch {
+    elemBonusBlue = blueBonus;
+    elemBonusRed  = redBonus;
+  }
+  updateEffectiveCooldownDisplay();
+}
+
+export function getEffectiveCooldown() {
+  const base  = GAME_CONFIG.clickCooldownSeconds;
+  const bonus = currentTeam === "blue" ? elemBonusBlue : elemBonusRed;
+  return base / (1 + bonus / 100);
+}
+
+export async function loadDbInfo() {
+  try {
+    const { createdAt } = await apiFetchDbInfo();
+    if (dbCreatedAtEl && createdAt) {
+      const d = new Date(createdAt);
+      dbCreatedAtEl.textContent =
+        d.toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "numeric" }) +
+        " " +
+        d.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" });
+    }
  } catch { /* ignore */ }
 }

@@ -385,7 +464,7 @@ function tickCooldown() {
 }

 export function startCooldown() {
-  const secs = GAME_CONFIG.clickCooldownSeconds;
+  const secs = getEffectiveCooldown();
  if (secs <= 0) {
    teamCooldownEndMs[currentTeam] = 0;
    countdownWrap.classList.add("hidden");
--- a/public/src/main.js
+++ b/public/src/main.js
@@ -9,6 +9,10 @@ import {
  updateEconomyDisplay,
  tickEconScore,
  loadEconScores,
+  loadVictoryPoints,
+  loadDbInfo,
+  loadElementBonus,
+  tickElementBonus,
  refreshFromServer,
  refreshGridDisplay,
  loadPlayfieldMask,
@@ -58,6 +62,7 @@ function scheduleScorePoll() {
  scorePollTimer = window.setTimeout(async () => {
    await fetchAndApplyScores();
    tickEconScore(ECON_TICK_SECONDS);
+    tickElementBonus();
    scheduleScorePoll();
  }, ECON_TICK_SECONDS * 1_000);
 }
@@ -144,6 +149,9 @@ async function boot() {
    await fetchGridForSeed(seedStr);
    await fetchAndApplyScores();
    await loadEconScores();
+    await loadVictoryPoints();
+    await loadDbInfo();
+    await loadElementBonus();
    updateEconomyDisplay();
  } catch {
    hint.textContent = "API unavailable — start the Node server (docker-compose up --build).";
@@ -159,6 +167,9 @@ async function boot() {
  scheduleConfigPoll();
  scheduleScorePoll();

+  // Refresh VP every 30 s so new awards are reflected promptly
+  setInterval(loadVictoryPoints, 30_000);
+
  // Refresh grid every second so all clients see new tiles promptly
  setInterval(refreshGridDisplay, 1_000);
 }
--- a/public/style.css
+++ b/public/style.css
@@ -276,61 +276,94 @@ body {
 .scoreBoard {
  display: flex;
  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  padding: 10px 16px;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
-  font-size: 22px;
-  font-weight: 800;
  font-family: "Courier New", Courier, monospace;
  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.5px;
+}
+
+.team-logo {
+  width: 54px;
+  height: 54px;
+  display: block;
+  flex-shrink: 0;
 }

 .scoreTeam {
  display: flex;
+  flex-direction: column;
  align-items: center;
-  justify-content: center;
-  gap: 10px;
-}
-
-.team-logo {
-  width: 64px;
-  height: 64px;
-  display: block;
+  gap: 4px;
+  flex: 1;
 }

 .scoreTeamName {
-  font-size: 12px;
+  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
-  opacity: 0.8;
+  opacity: 0.75;
 }

-.scoreTeam--blue .scoreTeamName {
-  color: rgba(90, 200, 255, 0.9);
+.scoreTeam--blue .scoreTeamName { color: rgba(90, 200, 255, 0.9); }
+.scoreTeam--red  .scoreTeamName { color: rgba(220, 75, 85, 0.9); }
+
+.scoreStats {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.scoreStat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+}
+
+.scoreStatVal {
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.scoreStatLabel {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.55;
 }

 .scoreTeam--blue .scoreValue {
  color: rgba(90, 200, 255, 1);
-  text-shadow: 0 0 20px rgba(90, 200, 255, 0.4);
+  text-shadow: 0 0 16px rgba(90, 200, 255, 0.4);
 }

-.scoreTeam--red .scoreTeamName {
-  color: rgba(220, 75, 85, 0.9);
+.scoreTeam--blue .scoreVP {
+  color: rgba(130, 230, 130, 1);
+  text-shadow: 0 0 16px rgba(90, 200, 130, 0.35);
 }

 .scoreTeam--red .scoreValue {
  color: rgba(220, 75, 85, 1);
-  text-shadow: 0 0 20px rgba(220, 75, 85, 0.4);
+  text-shadow: 0 0 16px rgba(220, 75, 85, 0.4);
+}
+
+.scoreTeam--red .scoreVP {
+  color: rgba(230, 150, 80, 1);
+  text-shadow: 0 0 16px rgba(220, 130, 60, 0.35);
 }

 .scoreSep {
-  opacity: 0.4;
+  opacity: 0.35;
  font-size: 18px;
+  font-weight: 800;
+  flex-shrink: 0;
 }

 /* ── Main app layout ──────────────────────────────────────────────────────── */
@@ -402,33 +435,36 @@ body {
 .infoTable {
  display: flex;
  flex-direction: column;
-  gap: 6px;
+  gap: 4px;
  font-family: "Courier New", Courier, monospace;
 }

 .infoRow {
  display: flex;
  align-items: baseline;
-  gap: 8px;
+  gap: 0;
  min-height: 22px;
 }

 .infoKey {
-  flex: 0 0 auto;
+  flex: 0 0 55%;
  font-size: 11px;
  opacity: 0.65;
  white-space: nowrap;
-  min-width: 130px;
  text-align: right;
+  padding-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .infoVal {
-  flex: 1;
+  flex: 0 0 45%;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Courier New", Courier, monospace;
+  text-align: left;
 }

 .infoVal code {
@@ -801,6 +837,75 @@ button:hover {
  font-weight: 700;
 }

+/* ── Element bonus section ────────────────────────────────────────────────── */
+
+.elemBonusSection {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 220, 100, 0.15);
+  background: rgba(255, 200, 50, 0.04);
+  font-family: "Courier New", Courier, monospace;
+  font-size: 12px;
+}
+
+.elemBonusSectionTitle {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.7;
+  margin-bottom: 2px;
+}
+
+.elemBonusRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.elemBonusTeam {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.elemBonusTeam--blue .elemBonusLabel { color: rgba(90, 200, 255, 0.75); font-size: 10px; }
+.elemBonusTeam--blue .elemBonusVal   { color: rgba(90, 200, 255, 1); font-weight: 800; font-size: 13px; }
+.elemBonusTeam--red  .elemBonusLabel { color: rgba(220, 75, 85, 0.75); font-size: 10px; }
+.elemBonusTeam--red  .elemBonusVal   { color: rgba(220, 75, 85, 1); font-weight: 800; font-size: 13px; }
+
+.elemBonusUnit {
+  font-size: 10px;
+  opacity: 0.6;
+}
+
+.elemBonusSep {
+  opacity: 0.3;
+}
+
+.elemBonusDetail {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding-top: 6px;
+  margin-top: 2px;
+  font-size: 11px;
+}
+
+.elemBonusDetailLabel {
+  opacity: 0.55;
+}
+
+.elemBonusDetailVal {
+  font-weight: 700;
+  color: rgba(255, 220, 100, 0.9);
+}
+
 /* ── Options / admin section ──────────────────────────────────────────────── */

 .infoSection--options {
@@ -984,11 +1089,14 @@ canvas {
  /* Scoreboard wraps nicely on narrow screens */
  .scoreBoard {
    flex-wrap: wrap;
-    font-size: 18px;
  }

  .team-logo {
-    width: 44px;
-    height: 44px;
+    width: 40px;
+    height: 40px;
+  }
+
+  .scoreStatVal {
+    font-size: 16px;
  }
 }