Cockatrice/webclient/architecture/detailed.mmd

123 lines
4.9 KiB
Text

---
config:
layout: elk
theme: base
themeVariables:
background: "#ffffff"
primaryColor: "#ffffff"
primaryBorderColor: "#1f2937"
primaryTextColor: "#0b1220"
lineColor: "#1f2937"
textColor: "#0b1220"
edgeLabelBackground: "#ffffff"
fontSize: "20px"
clusterBkg: "#fafafa"
clusterBorder: "#9ca3af"
flowchart:
htmlLabels: true
curve: basis
nodeSpacing: 60
rankSpacing: 90
---
flowchart LR
%% =========================================================
%% Left bookend — browser-side Application
%% =========================================================
subgraph LBE["<b>Application</b>"]
direction TB
UI["<b>UI</b><br/><span style='font-size:15px'>containers · components<br/>forms · dialogs</span>"]
Hooks["<b>hooks/</b><br/><span style='font-size:15px'>useWebClient · useAutoLogin<br/>useSettings · useKnownHosts</span>"]
Store[("<b>@app/store</b><br/><span style='font-size:15px'>server · rooms · game<br/>actions · common</span>")]
DTOs["<b>dexie DTOs</b><br/><span style='font-size:15px'>Card · Host · Set<br/>Setting · Token</span>"]
IDB[("<b>IndexedDB</b>")]
end
%% =========================================================
%% Racetrack — three lanes: outbound / transport / inbound
%% =========================================================
subgraph RACE[" "]
direction TB
subgraph TOP["<b>Outbound lane</b>"]
direction LR
Req["<b>src/api/request/</b><br/><span style='font-size:15px'>Authentication · Session · Rooms<br/>Game · Admin · Moderator</span>"]
Cmds["<b>commands/</b><br/><span style='font-size:15px'>session · room · game<br/>admin · moderator</span>"]
end
subgraph MID["<b>Transport</b>"]
direction LR
Provider["<b>WebClientProvider</b>"]
WC[["<b>WebClient</b><br/><span style='font-size:15px'>singleton · request · response</span>"]]
Svc["<b>services/</b><br/><span style='font-size:15px'>ProtobufService · WebSocketService<br/>KeepAliveService · command-options</span>"]
end
subgraph BOT["<b>Inbound lane</b>"]
direction LR
Evts["<b>events/</b><br/><span style='font-size:15px'>session · room · game</span>"]
Res["<b>src/api/response/</b><br/><span style='font-size:15px'>Session · Room · Game<br/>Admin · Moderator</span>"]
end
end
%% =========================================================
%% Right bookend — Servatrice
%% =========================================================
Srv[("<b>Servatrice</b>")]
%% =========================================================
%% Protocol satellite — cross-cutting types
%% =========================================================
subgraph PROTO["<b>Protocol (cross-cutting)</b>"]
direction LR
Types["<b>src/types/</b><br/><span style='font-size:15px'>Data · Enriched · App</span>"]
Gen["<b>src/generated/proto/</b><br/><span style='font-size:15px'>@bufbuild/protobuf</span>"]
end
%% =========================================================
%% UI-side wiring
%% =========================================================
UI --> Hooks
Hooks -- "useWebClient()" --> Provider
Provider --> WC
UI -- "selectors (read)" --> Store
Hooks --> DTOs
DTOs <--> IDB
%% =========================================================
%% Outbound — request goes up through the top lane to Srv
%% =========================================================
WC --> Req
Req --> Cmds
Cmds --> Svc
Svc -- "frames" --> Srv
%% =========================================================
%% Inbound — Srv comes back through services, splits to
%% cmdId response (direct) and event-registry dispatch
%% =========================================================
Srv -- "frames" --> Svc
Svc --> Evts
Svc -- "response by cmdId" --> Res
Evts --> Res
Res -- "dispatch" --> Store
%% =========================================================
%% Protocol edges — dashed, cross-cutting
%% =========================================================
Req -.-> Types
Res -.-> Types
Cmds -.-> Types
Evts -.-> Types
Types --> Gen
%% =========================================================
%% Palette — four roles
%% =========================================================
classDef app fill:#dbeafe,stroke:#1f2937,stroke-width:1.5px,color:#0b1220
classDef transport fill:#ede9fe,stroke:#1f2937,stroke-width:1.5px,color:#0b1220
classDef store fill:#fde68a,stroke:#1f2937,stroke-width:1.5px,color:#0b1220
classDef external fill:#e5e7eb,stroke:#1f2937,stroke-width:1.5px,color:#0b1220
class UI,Hooks,DTOs,Provider,WC app
class Req,Cmds,Svc,Evts,Res transport
class Store,Types,Gen store
class Srv,IDB external