Adding initial word-selector support.

js-src/components/game.tsx

@@ -5,10 +5,12 @@ import type { Location } from '@lastres/location'
 import type { LogLine } from '@lastres/log-line'
 import type { ActionHash } from '@lastres/action'
 import type { TalkNPCs, TalkNPC } from '@lastres/talk-npc'
+import type { Words } from '@lastres/word'
 
 import UpperPanel from '@lastres/components/upper-panel'
 import BottomPanel from '@lastres/components/bottom-panel'
 import PJSelectionMenu from '@lastres/components/pj-selection-menu'
+import WordSelector from '@lastres/components/word-selector'
 import OutputPacketInit from '@lastres/output-packet/init'
 import OutputPacketPing from '@lastres/output-packet/ping'
 import InputPackets from '@lastres/input-packets'
@@ -60,6 +62,7 @@ export default function Game (props: GameProps): JSX.Element {
     const [talkNPCs, setTalkNPCs] = React.useState<TalkNPCs | null>(null)
     const [onWordSelect, setOnWordSelect] = React.useState<OnWordSelectCallback | null>(null)
     const [stateGame, setStateGame] = React.useState<StateGame>(StateGame.MainScreen)
+    const [words, setWords] = React.useState<Words | null>(null)
     const logPresentationRef = React.useRef<HTMLDivElement>(null)
     const websocket = props.websocket
     const setWebsocket = props.setWebsocket
@@ -93,7 +96,7 @@ export default function Game (props: GameProps): JSX.Element {
                     logLines, setLogLines, setError,
                     setScrollLog, logPresentationRef,
                     setMovingTo, setRemainingFrames,
-                    setActionHash, setTalkNPCs)
+                    setActionHash, setTalkNPCs, setWords)
                 webSocket.onmessage = (event) => {
                     const packet = JSON.parse(event.data)
                     inputPackets.handle(packet)
@@ -111,7 +114,9 @@ export default function Game (props: GameProps): JSX.Element {
         })
     }, 300)
     if (stateGame === StateGame.SelectingWord) {
-        return <></>
+        return (
+            <WordSelector words={words} setStateGame={setStateGame}/>
+        )
     }
     if (stateGame === StateGame.MainScreen) {
         return (

js-src/components/word-selector.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import type { Words } from '@lastres/word'
+import { StateGame } from '@lastres/components/game'
+
+export interface WordSelectorProps {
+    words: Words | null
+    setStateGame: (set: StateGame) => void
+}
+
+export default function WordSelector (props: WordSelectorProps): JSX.Element {
+    const words = props.words
+
+    return (
+        <div className="word-selector">
+            <a href="#" className="close-button"
+                onClick={() => {
+                    props.setStateGame(StateGame.MainScreen)
+                }}>x</a>
+            <h2>Selecciona una palabra.</h2>
+        </div>
+    )
+}

js-src/input-packets.ts

@@ -4,6 +4,8 @@ import type InputPacket from '@lastres/input-packet'
 import type { LogLine } from '@lastres/log-line'
 import type { ActionHash } from '@lastres/action'
 import type { TalkNPCs } from '@lastres/talk-npc'
+import type { Words } from '@lastres/word'
+
 import InputPacketInfo from '@lastres/input-packet/info'
 import InputPacketPong from '@lastres/input-packet/pong'
 
@@ -23,6 +25,7 @@ type SetMovingTo = (set: Location | null) => void
 type SetRemainingFrames = (set: number | null) => void
 type SetActionHash = (set: ActionHash | null) => void
 type SetTalkNPCs = (set: TalkNPCs | null) => void
+type SetWords = (set: Words | null) => void
 
 interface Packet {
     command: string
@@ -47,6 +50,7 @@ export default class InputPackets {
     setRemainingFrames: SetRemainingFrames
     setActionHash: SetActionHash
     setTalkNPCs: SetTalkNPCs
+    setWords: SetWords
     constructor (setTeamPJs: SetTeamPJs,
         setEnemyTeamPJs: SetEnemyTeamPJs,
         setIsBattling: SetIsBattling,
@@ -60,7 +64,8 @@ export default class InputPackets {
         setMovingTo: SetMovingTo,
         setRemainingFrames: SetRemainingFrames,
         setActionHash: SetActionHash,
-        setTalkNPCs: SetTalkNPCs) {
+        setTalkNPCs: SetTalkNPCs,
+        setWords: SetWords) {
         this.setTeamPJs = setTeamPJs
         this.setEnemyTeamPJs = setEnemyTeamPJs
         this.setCurrentLocation = setCurrentLocation
@@ -75,6 +80,7 @@ export default class InputPackets {
         this.setIsBattling = setIsBattling
         this.setActionHash = setActionHash
         this.setTalkNPCs = setTalkNPCs
+        this.setWords = setWords
     }
 
     handle (packet: Packet): void {
@@ -161,6 +167,9 @@ export default class InputPackets {
                         applyScroll()
                     }, 10)
                 }
+                if (data.known_words !== undefined) {
+                    this.setWords(data.known_words)
+                }
                 if (data.append_log !== undefined) {
                     const logHash: LogHash = {}
                     saveScroll()

js-src/word.ts

@@ -0,0 +1,6 @@
+export interface Word {
+    name: string
+    identifier: string
+}
+
+export type Words = Record<string, Word>

public/css/styles.css

@@ -231,3 +231,26 @@ body {
         body div.login-container div.login-contained a.close-button:hover {
           background: lightgray;
           color: black; }
+  body div.word-selector {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 10px;
+    width: calc(100% - calc(2 * 10px));
+    height: calc(100% - calc(2 * 10px)); }
+    body div.word-selector a.close-button {
+      width: 3rem;
+      aspect-ratio: 1/1;
+      border-radius: 50%;
+      background: gray;
+      color: white;
+      align-self: end;
+      display: flex;
+      text-align: center;
+      justify-content: center;
+      align-items: center;
+      font-size: 1.5rem;
+      text-decoration: none; }
+      body div.word-selector a.close-button:hover {
+        background: lightgray;
+        color: black; }

public/css/styles.scss

@@ -1,3 +1,4 @@
+$padding_select_word: 10px;
 @keyframes move-avatar {
     0% {
         padding-bottom: 0rem;
@@ -284,4 +285,30 @@ body {
         }
     }
 
+    div.word-selector {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        padding: $padding_select_word;
+        width: calc(100% - calc(2 * #{$padding_select_word}));
+        height: calc(100% - calc(2 * #{$padding_select_word}));
+        a.close-button {
+            width: 3rem;
+            aspect-ratio: 1/1;
+            border-radius: 50%;
+            background: gray;
+            color: white;
+            align-self: end;
+            display: flex;
+            text-align: center;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.5rem;
+            text-decoration: none;
+            &:hover {
+                background: lightgray;
+                color: black;
+            }
+        }
+    }
 }