mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-10 13:04:36 +00:00
Evan Pelle
a7f992e9b0
Restructure the single src/ tree into an npm-workspaces monorepo under
packages/, rename core -> engine, extract a types-only core-public layer,
and break the pre-existing engine -> client dependency cycle.
Structure (packages/):
core-public public API/wire schemas + shared enums (clean leaf)
shared framework-agnostic helpers (clean leaf)
engine deterministic simulation (was src/core)
client rendering/UI (was src/client)
server coordination (was src/server)
Dependency DAG: engine -> {core-public, shared}; client -> {core-public,
shared, engine}; server -> {core-public, engine}.
- npm workspaces: root package.json workspaces + per-package package.json;
tsconfig.base.json holds shared options + path aliases
(core-public/* shared/* engine/* client/* server/*) resolved uniformly by
tsc, Vite (resolve.tsconfigPaths), Vitest, and tsx. Lockfile regenerated.
- core-public: moved Schemas/ApiSchemas/CosmeticSchemas/StatsSchemas/
ClanApiSchemas/WorkerSchemas/Base64/PatternDecoder; extracted the enums
(GameTypes), GameEvent type, emoji table, and GraphicsOverrides schema.
Engine re-exports the moved enums/types so existing imports keep working.
- Broke engine -> client cycle:
- renderNumber/renderTroops -> shared/format
- NameBoxCalculator moved into engine
- username validation returns translation key + params; client translates
- applyStateUpdate moved to client (operates on the render-only PlayerState)
- Config/UnitGrid/execution-Util/GameImpl now use structural read
interfaces (engine/game/ReadViews: PlayerLike/UnitLike/GameLike) instead
of importing client view classes; client imports view classes from a new
client/view barrel; deleted the engine/game/GameView re-export shim.
- Build/deploy updated: vite.config, index.html, eslint, Dockerfile
(copies packages/ + tsconfig.base.json before npm ci), .vscode, tests.
Verified: tsc --noEmit clean; 1364 + 65 tests pass; production vite build
succeeds; engine has zero client/server imports; core-public and shared are
dependency leaves.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
282 lines
12 KiB
TypeScript
282 lines
12 KiB
TypeScript
import { LitElement, html } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
import {
|
|
PlayerStats,
|
|
boatUnits,
|
|
bombUnits,
|
|
otherUnits,
|
|
} from "core-public/StatsSchemas";
|
|
import { renderNumber, translateText } from "../../../Utils";
|
|
|
|
@customElement("player-stats-table")
|
|
export class PlayerStatsTable extends LitElement {
|
|
createRenderRoot() {
|
|
return this;
|
|
}
|
|
|
|
@property({ type: Object }) stats: PlayerStats;
|
|
|
|
render() {
|
|
return html`
|
|
<div class="grid grid-cols-1 gap-6 w-full">
|
|
<div class="w-full">
|
|
<div
|
|
class="text-gray-400 text-sm font-bold uppercase tracking-wider mb-2"
|
|
>
|
|
${translateText("player_stats_table.building_stats")}
|
|
</div>
|
|
<div
|
|
class="overflow-x-auto rounded-lg border border-white/5 bg-black/20"
|
|
>
|
|
<table class="w-full text-sm text-gray-300">
|
|
<thead>
|
|
<tr class="bg-white/5">
|
|
<th class="px-4 py-2 font-semibold text-left text-gray-400">
|
|
${translateText("player_stats_table.building")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.built")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.destroyed")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.captured")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.lost")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/5">
|
|
${otherUnits.map((key) => {
|
|
const built = this.stats?.units?.[key]?.[0] ?? 0n;
|
|
const destroyed = this.stats?.units?.[key]?.[1] ?? 0n;
|
|
const captured = this.stats?.units?.[key]?.[2] ?? 0n;
|
|
const lost = this.stats?.units?.[key]?.[3] ?? 0n;
|
|
return html`
|
|
<tr class="hover:bg-white/5 transition-colors">
|
|
<td class="px-4 py-2 text-left font-medium text-white/80">
|
|
${translateText(`player_stats_table.unit.${key}`)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(built)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(destroyed)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(captured)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(lost)}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<div
|
|
class="text-gray-400 text-sm font-bold uppercase tracking-wider mb-2"
|
|
>
|
|
${translateText("player_stats_table.ship_arrivals")}
|
|
</div>
|
|
<div
|
|
class="overflow-x-auto rounded-lg border border-white/5 bg-black/20"
|
|
>
|
|
<table class="w-full text-sm text-gray-300">
|
|
<thead>
|
|
<tr class="bg-white/5">
|
|
<th class="px-4 py-2 font-semibold text-left text-gray-400">
|
|
${translateText("player_stats_table.ship_type")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.sent")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.destroyed")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.arrived")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/5">
|
|
${boatUnits.map((key) => {
|
|
const sent = this.stats?.boats?.[key]?.[0] ?? 0n;
|
|
const arrived = this.stats?.boats?.[key]?.[1] ?? 0n;
|
|
const destroyed = this.stats?.boats?.[key]?.[3] ?? 0n;
|
|
return html`
|
|
<tr class="hover:bg-white/5 transition-colors">
|
|
<td class="px-4 py-2 text-left font-medium text-white/80">
|
|
${translateText(`player_stats_table.unit.${key}`)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(sent)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(destroyed)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(arrived)}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<div
|
|
class="text-gray-400 text-sm font-bold uppercase tracking-wider mb-2"
|
|
>
|
|
${translateText("player_stats_table.nuke_stats")}
|
|
</div>
|
|
<div
|
|
class="overflow-x-auto rounded-lg border border-white/5 bg-black/20"
|
|
>
|
|
<table class="w-full text-sm text-gray-300">
|
|
<thead>
|
|
<tr class="bg-white/5">
|
|
<th class="px-4 py-2 font-semibold text-left text-gray-400">
|
|
${translateText("player_stats_table.weapon")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.launched")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.landed")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.hits")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/5">
|
|
${bombUnits.map((bomb) => {
|
|
const launched = this.stats?.bombs?.[bomb]?.[0] ?? 0n;
|
|
const landed = this.stats?.bombs?.[bomb]?.[1] ?? 0n;
|
|
const intercepted = this.stats?.bombs?.[bomb]?.[2] ?? 0n;
|
|
return html`
|
|
<tr class="hover:bg-white/5 transition-colors">
|
|
<td class="px-4 py-2 text-left font-medium text-white/80">
|
|
${translateText(`player_stats_table.unit.${bomb}`)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(launched)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(landed)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(intercepted)}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<div
|
|
class="text-gray-400 text-sm font-bold uppercase tracking-wider mb-2"
|
|
>
|
|
${translateText("player_stats_table.player_metrics")}
|
|
</div>
|
|
<div
|
|
class="overflow-x-auto rounded-lg border border-white/5 bg-black/20 mb-4"
|
|
>
|
|
<table class="w-full text-sm text-gray-300">
|
|
<thead>
|
|
<tr class="bg-white/5">
|
|
<th class="px-4 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.attack")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.sent")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.received")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.cancelled")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/5">
|
|
<tr class="hover:bg-white/5 transition-colors">
|
|
<td class="px-4 py-2 text-center text-white/60">
|
|
${translateText("player_stats_table.count")}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(this.stats?.attacks?.[0] ?? 0n)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(this.stats?.attacks?.[1] ?? 0n)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(this.stats?.attacks?.[2] ?? 0n)}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div
|
|
class="overflow-x-auto rounded-lg border border-white/5 bg-black/20"
|
|
>
|
|
<table class="w-full text-sm text-gray-300">
|
|
<thead>
|
|
<tr class="bg-white/5">
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.gold")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.workers")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.war")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.trade")}
|
|
</th>
|
|
<th class="px-3 py-2 text-center font-semibold text-gray-400">
|
|
${translateText("player_stats_table.steal")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/5">
|
|
<tr class="hover:bg-white/5 transition-colors">
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(this.stats?.gold?.[0] ?? 0n)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(this.stats?.gold?.[1] ?? 0n)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(this.stats?.gold?.[2] ?? 0n)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(this.stats?.gold?.[3] ?? 0n)}
|
|
</td>
|
|
<td class="px-3 py-2 text-center text-white/60">
|
|
${renderNumber(this.stats?.gold?.[4] ?? 0n)}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|