Fix UI

Changes

2 changed files (+43/-10)

• front/pages/index.tsx
  • @@ -31,6 +31,7 @@
    4. If the previous player manages to flip over their claimed number of black cards, you must choose a card from your stack to give up. Otherwise, the previous player must choose one of their cards to give up. 5. If you give up all your cards, you lose! Last player remaining wins! + `; function useForceUpdate(){
  • @@ -87,9 +88,9 @@ if (!socket) return null;
    if (!loggedIn) { return ( <> - <pre> + <div> {rules} - </pre> + </div> <LoginForm socket={socket} finish={(s) => {
  • @@ -135,9 +136,16 @@ }
    if (gameState.phase === 0) { return ( <> - <pre> + <button + onClick={() => { + document.getElementById('Rules')!.style.display = (document.getElementById('Rules')!.style.display === 'none' ? 'block' : 'none'); + }} + > + Show/hide rules + </button> + <div id='Rules' style={{display: 'none'}}> {rules} - </pre> + </div> <ul> {gameState.players.map(p => ( <li key={p.username}>
  • @@ -184,9 +192,16 @@ }
    if (gameState.phase === 1) { return ( <> - <pre> + <button + onClick={() => { + document.getElementById('Rules')!.style.display = (document.getElementById('Rules')!.style.display === 'none' ? 'block' : 'none'); + }} + > + Show/hide rules + </button> + <div id='Rules' style={{display: 'none'}}> {rules} - </pre> + </div> <ul> {gameState.players.map(p => ( <li key={p.username}>
  • @@ -230,9 +245,16 @@ }
    if (gameState.phase === 2) { return ( <> - <pre> + <button + onClick={() => { + document.getElementById('Rules')!.style.display = (document.getElementById('Rules')!.style.display === 'none' ? 'block' : 'none'); + }} + > + Show/hide rules + </button> + <div id='Rules' style={{display: 'none'}}> {rules} - </pre> + </div> <ul> {gameState.players.map(p => ( <li key={p.username}>
  • @@ -270,9 +292,16 @@ }
    if (gameState.phase === 3) { return ( <> - <pre> + <button + onClick={() => { + document.getElementById('Rules')!.style.display = (document.getElementById('Rules')!.style.display === 'none' ? 'block' : 'none'); + }} + > + Show/hide rules + </button> + <div id='Rules' style={{display: 'none'}}> {rules} - </pre> + </div> <ul> {gameState.players.map(p => ( <li key={p.username}>
• front/styles/globals.css
  • @@ -14,3 +14,7 @@
    * { box-sizing: border-box; } + + div { + white-space: pre-line; + }