1  @title Data Structures
 2  @add_css lit.css
 3  @s Modes
 4  
 5  The game UI uses Alpinejs to
 6  
 7  * Show/hide sections of the page
 8  * Handle play logic
 9  
10  depending on the current mode.
11  
12  --- src/modes.ts
13  export const md = {
14      Landed: "landed",           // asking for nickname
15      Nickname: "nickname",       // got it
16      Connected: "connected",     // at least one other player has connected
17      Ready: "ready",             // I clicked Start
18      Drawing: "drawing",         // first round, each player draws tiles
19      Playing: "playing",         // actual play has begun
20      Penalty: "penalty",         // challenged someone and lost
21      MyTurn: "myturn"
22  };
23  ---
24  
25  @s State
26  Game state is initialized once the mode changes to *Drawing*:
27  
28  1) The host player (first one to connect to peerjs.com) creates a default *GameState* object,
29     then shuffles its *players* array. Broadcasts a 'TURN_TAKEN' message with the new *GameState* object.
30  
31  2) On the first turn by the first player (in *players*), there's a fetch to the [draw](draw.html) url with an empty
32     bag. The server code creates the bag with 100 tiles and picks 7 of them for that player. The remaining array of
33     tiles in the bag are encrypted.
34  
35  3) The first player takes the tiles and bag returned, sets the *GameState* bag value, sets the tiles, and switches
36     their mode to *Playing*. The tiles array should be written to a cookie or local storage, in order to rejoin the game if
37     disconnected. Broadcasts a 'TURN_TAKEN' message with the updated *GameState* object.
38  
39  4) After all players have drawn tiles from the server, all will be in *Playing* mode.
40     The last "TURN_TAKEN" broadcast will reach the first player, now in *Playing* mode, who will take
41     an actual turn.
42  
43  --- src/state.ts
44  export interface GameState {
45      bag: string;             // encrypted array of remaining tiles
46      players: PlayerState[];
47      turn: number;            // 0-n (# of players - 1)
48      history: Move[];         // past moves
49  }
50  
51  export interface PlayerState {
52      nickname: string;
53      status: string;        // is player connected, ready?
54  }
55  
56  export interface Move {
57      nickname: string;
58      words: string[];       // possible to complete multiple words
59      played: Play[];        // each tile placed on the board, last one subject to challenge
60      points: number;
61      type: 'play' | 'swap' | 'pass';
62  }
63  
64  export interface Play {
65      tile: Tile;
66      position: number;       // which square on the board
67      bonus: string | null;   // if it's a bonus square and player placed the tile
68  }
69  
70  export interface Tile {
71      id: string;      // used by Alpine to track in DOM
72      letter: string;  // if was blank, set score to 0 and set this to chosen letter
73      score: number;   // if this is 0, the tile is a blank!
74  }
75  ---
76  
77  --- src/challenge.ts
78  export type ChallengeStatus = '' | 'available' | 'active' | 'success' | 'failure';
79  ---