diff --git a/frontend/js/api.js b/frontend/js/api.js
index 5995c42..021c9fc 100644
--- a/frontend/js/api.js
+++ b/frontend/js/api.js
@@ -75,7 +75,7 @@ const API = {
}
},
- async syncTick(actions = []) {
+ async syncTick(actions = [], seq = null) {
const token = this.getToken();
if (!token) return null;
@@ -86,16 +86,16 @@ const API = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
- body: JSON.stringify({ actions })
+ body: JSON.stringify({ actions, seq })
});
if (!res.ok) {
if (res.status === 401) this.logout();
return null;
}
const data = await res.json();
- return data.save_data;
+ return data;
} catch (e) {
- console.warn('Network tick failed, queuing actions', e);
+ console.warn('Network sync failed, queuing actions', e);
return null;
}
},
diff --git a/frontend/js/game.js b/frontend/js/game.js
index 8829483..60f7576 100644
--- a/frontend/js/game.js
+++ b/frontend/js/game.js
@@ -39,8 +39,11 @@ SYNTHESIS_RECIPES.forEach(r => {
let G = JSON.parse(JSON.stringify(INITIAL_GAME_STATE));
let cashRateTracker = 0.0;
-let pendingActions = []; // Actions queued between 6-second authoritative server ticks
-let isSyncing = false;
+let pendingActions = []; // Actions queued waiting to be debounced & flushed
+let inFlightActions = []; // Actions currently travelling in an active HTTP request
+let actionSeq = 0; // Monotonic sequence ID
+let syncDebounceTimer = null; // 300ms debounce timer for rapid clicking
+let isSyncing = false; // Network in-flight flag
// --- NUMBER FORMATTING HELPER (Max 1 decimal, graceful fallback) ---
function fmtNum(val) {
@@ -70,8 +73,6 @@ const dom = {
raidModal: document.getElementById('raid-modal'),
raidBribeCost: document.getElementById('raid-bribe-cost'),
toastContainer: document.getElementById('toast-container'),
- syncTimer: document.getElementById('sync-timer-text'),
- syncBar: document.getElementById('sync-bar-fill'),
quickStash: document.getElementById('quick-stash-items')
};
@@ -486,9 +487,33 @@ function renderOffshoreView() {
dom.viewport.innerHTML = html;
}
-// --- OPTIMISTIC CLIENT ACTIONS (Queued for Server Authority) ---
+// --- OPTIMISTIC CLIENT ACTIONS (Debounced Aggregation & Server Reconciliation) ---
function queueAction(action) {
- pendingActions.push(action);
+ // Action aggregation: consolidate rapid repetitive clicks
+ if (['buy_raw', 'manufacture', 'sell_manual'].includes(action.type)) {
+ const existing = pendingActions.find(a => a.type === action.type && a.drug_id === action.drug_id);
+ if (existing) {
+ existing.amount = (existing.amount || 1) + (action.amount || 1);
+ scheduleSync(300);
+ return;
+ }
+ } else if (['hire_supplier', 'hire_worker', 'hire_dealer'].includes(action.type)) {
+ const existing = pendingActions.find(a => a.type === action.type && a.drug_id === action.drug_id);
+ if (existing) {
+ existing.count = (existing.count || 1) + (action.count || 1);
+ scheduleSync(300);
+ return;
+ }
+ }
+
+ pendingActions.push({ ...action });
+
+ // Major discrete events flush immediately, micro-actions debounce 300ms
+ if (['launder_prestige', 'bribe_police', 'flush_stash', 'unlock_drug', 'buy_skill', 'blend_recipe'].includes(action.type)) {
+ scheduleSync(0);
+ } else {
+ scheduleSync(300);
+ }
}
function buyRaw(drugId) {
@@ -541,7 +566,7 @@ function hireSupplier(drugId) {
G.cash -= cost;
if (!G.drugs[drugId].suppliers) G.drugs[drugId].suppliers = 0;
G.drugs[drugId].suppliers += 1;
- queueAction({ type: 'hire_supplier', drug_id: drugId });
+ queueAction({ type: 'hire_supplier', drug_id: drugId, count: 1 });
checkAchievements();
renderViewport();
updateLiveInventory();
@@ -553,7 +578,7 @@ function hireWorker(drugId) {
if (G.cash >= cost) {
G.cash -= cost;
G.drugs[drugId].workers += 1;
- queueAction({ type: 'hire_worker', drug_id: drugId });
+ queueAction({ type: 'hire_worker', drug_id: drugId, count: 1 });
checkAchievements();
renderViewport();
updateLiveInventory();
@@ -565,7 +590,7 @@ function hireDealer(drugId) {
if (G.cash >= cost) {
G.cash -= cost;
G.drugs[drugId].dealers += 1;
- queueAction({ type: 'hire_dealer', drug_id: drugId });
+ queueAction({ type: 'hire_dealer', drug_id: drugId, count: 1 });
renderViewport();
updateLiveInventory();
}
@@ -773,24 +798,6 @@ function clientTick(deltaSec) {
// Direct, surgical DOM text updates every tick (no lag, no re-rendering entire card HTML)
updateLiveInventory();
- updateSyncCountdown();
-}
-
-const TICK_INTERVAL_MS = 6000;
-let lastSyncTimestamp = Date.now();
-
-function updateSyncCountdown() {
- const elapsed = Date.now() - lastSyncTimestamp;
- const remainingMs = Math.max(0, TICK_INTERVAL_MS - elapsed);
- const remainingSec = (remainingMs / 1000).toFixed(1);
- const pct = Math.min(100, Math.max(0, (remainingMs / TICK_INTERVAL_MS) * 100));
-
- if (dom.syncTimer) {
- dom.syncTimer.textContent = `${remainingSec}s`;
- }
- if (dom.syncBar) {
- dom.syncBar.style.width = `${pct}%`;
- }
}
function updateLiveInventory() {
@@ -887,34 +894,146 @@ function updateLiveInventory() {
}
}
-// --- AUTHORITATIVE SERVER TICK (Every 6 seconds) ---
-async function authoritativeServerTick() {
- if (isSyncing) return;
- isSyncing = true;
- lastSyncTimestamp = Date.now();
+// --- AUTHORITATIVE SERVER SYNC & RECONCILIATION ---
+function scheduleSync(delayMs = 300) {
+ if (delayMs === 0) {
+ if (syncDebounceTimer) {
+ clearTimeout(syncDebounceTimer);
+ syncDebounceTimer = null;
+ }
+ triggerServerSync();
+ return;
+ }
+ if (syncDebounceTimer) clearTimeout(syncDebounceTimer);
+ syncDebounceTimer = setTimeout(() => {
+ syncDebounceTimer = null;
+ triggerServerSync();
+ }, delayMs);
+}
+
+function applyLocalActions(state, actions) {
+ const rawCostMulti = getRawCostMultiplier();
+ const sellPriceMulti = getSellPriceMultiplier();
+
+ actions.forEach(act => {
+ const dId = act.drug_id;
+ const dCfg = DRUG_CATALOG.find(x => x.id === dId);
+ if (!state.drugs || !state.drugs[dId]) return;
+
+ if (act.type === 'buy_raw' && dCfg) {
+ const amount = act.amount || 1;
+ const unitCost = Math.floor(dCfg.rawCost * rawCostMulti);
+ const total = unitCost * amount;
+ if (state.cash >= total) {
+ state.cash -= total;
+ state.drugs[dId].raw += amount;
+ }
+ } else if (act.type === 'manufacture') {
+ const amount = act.amount || 1;
+ const actual = Math.min(amount, Math.floor(state.drugs[dId].raw));
+ if (actual > 0) {
+ state.drugs[dId].raw -= actual;
+ state.drugs[dId].product += actual;
+ }
+ } else if (act.type === 'sell_manual' && dCfg) {
+ const amount = act.amount || 1;
+ const actual = Math.min(amount, Math.floor(state.drugs[dId].product));
+ if (actual > 0) {
+ state.drugs[dId].product -= actual;
+ const profit = actual * Math.floor(dCfg.sellPrice * sellPriceMulti);
+ state.cash += profit;
+ state.totalEarned += profit;
+ }
+ } else if (act.type === 'hire_supplier' && dCfg) {
+ const count = act.count || 1;
+ for (let i = 0; i < count; i++) {
+ const currentCount = state.drugs[dId].suppliers || 0;
+ const cost = Math.floor((dCfg.supplierCost || 75) * Math.pow(1.15, currentCount));
+ if (state.cash >= cost) {
+ state.cash -= cost;
+ state.drugs[dId].suppliers = currentCount + 1;
+ }
+ }
+ } else if (act.type === 'hire_worker' && dCfg) {
+ const count = act.count || 1;
+ for (let i = 0; i < count; i++) {
+ const currentCount = state.drugs[dId].workers || 0;
+ const cost = Math.floor(dCfg.workerCost * Math.pow(1.15, currentCount));
+ if (state.cash >= cost) {
+ state.cash -= cost;
+ state.drugs[dId].workers = currentCount + 1;
+ }
+ }
+ } else if (act.type === 'hire_dealer' && dCfg) {
+ const count = act.count || 1;
+ for (let i = 0; i < count; i++) {
+ const currentCount = state.drugs[dId].dealers || 0;
+ const cost = Math.floor(dCfg.dealerCost * Math.pow(1.15, currentCount));
+ if (state.cash >= cost) {
+ state.cash -= cost;
+ state.drugs[dId].dealers = currentCount + 1;
+ }
+ }
+ }
+ });
+}
+
+async function triggerServerSync() {
+ if (isSyncing) {
+ // Postpone flush while another network request is in flight
+ scheduleSync(200);
+ return;
+ }
- // Grab queued actions and reset local queue
const actionsToSend = [...pendingActions];
pendingActions = [];
+ inFlightActions = [...actionsToSend];
+
+ actionSeq += 1;
+ const currentSeq = actionSeq;
+ isSyncing = true;
if (API.getToken()) {
- const serverState = await API.syncTick(actionsToSend);
- if (serverState) {
- // Reconcile authoritative server state (protects against browser devtools tampering)
- G = {
+ const response = await API.syncTick(actionsToSend, currentSeq);
+ if (response && response.save_data) {
+ const serverState = response.save_data;
+
+ // Reconcile: Take authoritative server state as base
+ const reconciled = {
...INITIAL_GAME_STATE,
...serverState,
- activeTab: G.activeTab // Preserve UI view tab
+ activeTab: G.activeTab
};
+
+ // In-flight actions have been committed to the server!
+ inFlightActions = [];
+
+ // Apply any new actions that user clicked while the request was in flight!
+ // This guarantees zero dropped actions or rollbacks.
+ if (pendingActions.length > 0) {
+ applyLocalActions(reconciled, pendingActions);
+ }
+
+ G = reconciled;
checkAchievements();
updateLiveInventory();
+ } else {
+ // Network failure / offline: merge inFlight back to pending
+ pendingActions = [...inFlightActions, ...pendingActions];
+ inFlightActions = [];
}
} else {
// Guest mode / offline fallback: persist locally
+ inFlightActions = [];
localStorage.setItem('el_puro_local_save', JSON.stringify(G));
}
isSyncing = false;
+
+ // If new actions arrived during sync, flush them
+ if (pendingActions.length > 0) {
+ scheduleSync(300);
+ }
}
// Game loop with requestAnimationFrame
@@ -928,8 +1047,12 @@ function gameLoop(now) {
requestAnimationFrame(gameLoop);
}
-// Server tick: exactly every 6 seconds to prevent flooding server
-setInterval(authoritativeServerTick, TICK_INTERVAL_MS);
+// Background heartbeat (every 10 seconds): syncs idle accrual when player is not actively clicking
+setInterval(() => {
+ if (!syncDebounceTimer && !isSyncing) {
+ triggerServerSync();
+ }
+}, 10000);
// Clock updates
setInterval(() => {