This React component displays a menu of multiple games, and when one is
chosen its component is displayed with the possibility to exit back to the
menu.
Everything is rendered inside a div.game, this div gets the selector
class when on the menu and the active class when a game is shown. It also
gets the name of the game as a class, all whitespaces (matched by /\s/)
are replaced with - and all other non word characters (matched by /\W/)
are removed.
Games are started as soon as the user clicks their items in the menu.
Meaning the games are ready to be played immediately when seen, game can be
restarted from within.
The main ´div´ contains different things in the two states:
When in the selector state: If the Haskell model isn't initialized yet, a
p.uninitialized. Otherwise a p with a header, and a ul containing a
li > a for each game is displayed.
When in the active state: A div.controls containing a button for
exiting back to the menu, StartButton, and TurnDisplay. The
given React component corresponding to the selected game. And lastly a
GameOverStatus.
This React component displays a menu of multiple games, and when one is chosen its component is displayed with the possibility to exit back to the menu.
Everything is rendered inside a
div.game
, thisdiv
gets theselector
class when on the menu and theactive
class when a game is shown. It also gets the name of the game as a class, all whitespaces (matched by/\s/
) are replaced with-
and all other non word characters (matched by/\W/
) are removed.Games are started as soon as the user clicks their items in the menu. Meaning the games are ready to be played immediately when seen, game can be restarted from within.
The main ´div´ contains different things in the two states:
When in the
selector
state: If the Haskell model isn't initialized yet, ap.uninitialized
. Otherwise ap
with a header, and aul
containing ali > a
for each game is displayed.When in the
active
state: Adiv.controls
containing abutton
for exiting back to the menu, StartButton, and TurnDisplay. The given React component corresponding to the selected game. And lastly a GameOverStatus.