Turn timer + auto-play, disconnect/reconnect, cosmetics, queue & paid plan

- Turn timer (20s) for play/trump; system auto-plays a smart move on timeout
- Disconnect handling (mock): wait-for-return countdown, system covers turns
- Cosmetics: titles, card-back styles, custom profile-image upload, badges;
  pickers in Profile; shop sells card styles; reward modal shows new titles
- Paid plan (pro): free players queue when server busy, pro skips; upgrade flow
- OnlineService extended (upgradePlan, richer profile patch); mock implements
  queue + plans; gamification adds TITLES + CARD_STYLES

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-04 10:49:54 +03:30
parent 5776036d78
commit 13ec0d4300
16 changed files with 682 additions and 61 deletions
+80 -10
View File
@@ -11,7 +11,7 @@ import {
selectHakem,
startNextRound,
} from "./hokm/engine";
import { Card, GameState, RoundResult, Suit } from "./hokm/types";
import { Card, GameState, RoundResult, Seat, Suit } from "./hokm/types";
import { avatarEmoji } from "./online/types";
const KOT_POINTS = 2;
@@ -25,6 +25,13 @@ export const TIMING = {
roundPause: 2600,
} as const;
/** How long a player has to act before the system plays for them. */
export const TURN_MS = 20000;
/** Grace period to wait for a disconnected player to return. */
export const RECONNECT_MS = 15000;
/** Per-turn chance an online opponent briefly drops (mock). */
const DISCONNECT_CHANCE = 0.07;
export type GameMode = "ai" | "online";
export interface SeatPlayer {
@@ -59,6 +66,12 @@ interface GameStore {
matchMeta: { ranked: boolean; stake: number };
tally: MatchTally;
/** epoch ms by which the current actor must act (for the turn-timer UI). */
turnDeadline: number | null;
/** a seat that has dropped and we're waiting on (online). */
disconnectedSeat: Seat | null;
reconnectDeadline: number | null;
newMatch: (settings: GameSettings) => void;
newOnlineMatch: (cfg: OnlineMatchConfig) => void;
chooseTrump: (suit: Suit) => void;
@@ -93,12 +106,21 @@ export const useGameStore = create<GameStore>((set, get) => {
});
}
function playSeatAI(seat: Seat) {
const cur = get().game;
if (cur.phase !== "playing" || cur.turn !== seat) return;
const card = chooseCardAI(cur, seat);
set({ game: playCard(cur, seat, card) });
scheduleAuto();
}
function scheduleAuto() {
clearPending();
const g = get().game;
switch (g.phase) {
case "selecting-hakem":
set({ turnDeadline: null, disconnectedSeat: null, reconnectDeadline: null });
pending = setTimeout(() => {
set({ game: dealForTrump(get().game) });
scheduleAuto();
@@ -107,7 +129,18 @@ export const useGameStore = create<GameStore>((set, get) => {
case "choosing-trump": {
const hakem = g.hakem!;
if (!g.players[hakem].isHuman) {
if (g.players[hakem].isHuman) {
// human hakem: timed choice, system auto-picks on timeout
set({ turnDeadline: Date.now() + TURN_MS, disconnectedSeat: null, reconnectDeadline: null });
pending = setTimeout(() => {
const cur = get().game;
if (cur.phase !== "choosing-trump") return;
const suit = chooseTrumpAI(cur.players[cur.hakem!].hand);
set({ game: engineChooseTrump(cur, suit), turnDeadline: null });
scheduleAuto();
}, TURN_MS);
} else {
set({ turnDeadline: null });
pending = setTimeout(() => {
const cur = get().game;
const suit = chooseTrumpAI(cur.players[cur.hakem!].hand);
@@ -120,29 +153,53 @@ export const useGameStore = create<GameStore>((set, get) => {
case "playing": {
const seat = g.turn!;
if (!g.players[seat].isHuman) {
if (g.players[seat].isHuman) {
// human turn: timed; system plays a smart legal move on timeout
set({ turnDeadline: Date.now() + TURN_MS, disconnectedSeat: null, reconnectDeadline: null });
pending = setTimeout(() => {
const cur = get().game;
const s = cur.turn!;
const card = chooseCardAI(cur, s);
set({ game: playCard(cur, s, card) });
if (cur.phase !== "playing" || cur.turn !== seat) return;
set({ game: playCard(cur, seat, chooseCardAI(cur, seat)), turnDeadline: null });
scheduleAuto();
}, TIMING.aiPlay);
}, TURN_MS);
} else {
const st = get();
if (
st.mode === "online" &&
st.disconnectedSeat == null &&
Math.random() < DISCONNECT_CHANCE
) {
// simulate this opponent dropping; wait for them, then they return
set({
turnDeadline: null,
disconnectedSeat: seat,
reconnectDeadline: Date.now() + RECONNECT_MS,
});
const back = Math.floor(RECONNECT_MS * (0.4 + Math.random() * 0.45));
pending = setTimeout(() => {
set({ disconnectedSeat: null, reconnectDeadline: null });
playSeatAI(seat);
}, back);
} else {
set({ turnDeadline: null });
pending = setTimeout(() => playSeatAI(seat), TIMING.aiPlay);
}
}
break;
}
case "trick-complete":
set({ turnDeadline: null, disconnectedSeat: null, reconnectDeadline: null });
pending = setTimeout(() => {
const next = advanceAfterTrick(get().game, KOT_POINTS);
set({ game: next });
// record the round once when it finalizes into match-over
if (next.phase === "match-over") recordRound(next.lastRoundResult);
scheduleAuto();
}, TIMING.trickPause);
break;
case "round-over":
set({ turnDeadline: null, disconnectedSeat: null, reconnectDeadline: null });
pending = setTimeout(() => {
recordRound(get().game.lastRoundResult);
set({ game: startNextRound(get().game) });
@@ -151,6 +208,7 @@ export const useGameStore = create<GameStore>((set, get) => {
break;
default:
set({ turnDeadline: null });
break;
}
}
@@ -162,6 +220,9 @@ export const useGameStore = create<GameStore>((set, get) => {
seatPlayers: [],
matchMeta: { ranked: false, stake: 0 },
tally: freshTally(),
turnDeadline: null,
disconnectedSeat: null,
reconnectDeadline: null,
newMatch: (settings) => {
clearPending();
@@ -172,6 +233,9 @@ export const useGameStore = create<GameStore>((set, get) => {
mode: "ai",
matchMeta: { ranked: false, stake: 0 },
tally: freshTally(),
turnDeadline: null,
disconnectedSeat: null,
reconnectDeadline: null,
seatPlayers: settings.names.map((name, i) => ({
name,
avatar: AI_AVATARS[i],
@@ -191,6 +255,9 @@ export const useGameStore = create<GameStore>((set, get) => {
mode: "online",
matchMeta: { ranked: cfg.ranked, stake: cfg.stake },
tally: freshTally(),
turnDeadline: null,
disconnectedSeat: null,
reconnectDeadline: null,
seatPlayers: cfg.players.map((p) => ({
name: p.displayName,
avatar: avatarEmoji(p.avatar),
@@ -203,14 +270,14 @@ export const useGameStore = create<GameStore>((set, get) => {
chooseTrump: (suit) => {
const g = get().game;
if (g.phase !== "choosing-trump") return;
set({ game: engineChooseTrump(g, suit) });
set({ game: engineChooseTrump(g, suit), turnDeadline: null });
scheduleAuto();
},
playHuman: (card) => {
const g = get().game;
if (g.phase !== "playing" || g.turn !== 0) return;
set({ game: playCard(g, 0, card) });
set({ game: playCard(g, 0, card), turnDeadline: null });
scheduleAuto();
},
@@ -222,6 +289,9 @@ export const useGameStore = create<GameStore>((set, get) => {
mode: "ai",
seatPlayers: [],
tally: freshTally(),
turnDeadline: null,
disconnectedSeat: null,
reconnectDeadline: null,
});
},
};