a/McCarthyism
1
1
Fork 0
Code Issues Pull requests Projects Releases 8 Packages Wiki Activity

Fix UI

Browse source
This commit is contained in:
Anthony Wang 2021-05-09 13:23:08 -05:00
parent 02964186a8
commit 013018ecae
Signed by: a
GPG key ID: 6FD3502572299774
2 changed files with 43 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
front/pages/index.tsx
View file

@ -31,6 +31,7 @@ There are only 5 simple rules!
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. 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! 5. If you give up all your cards, you lose! Last player remaining wins!
`; `;
function useForceUpdate(){ function useForceUpdate(){
@ -87,9 +88,9 @@ export default function Game() {
if (!loggedIn) { if (!loggedIn) {
return ( return (
<> <>
<pre> <div>
{rules} {rules}
</pre> </div>
<LoginForm <LoginForm
socket={socket} socket={socket}
finish={(s) => { finish={(s) => {
@ -135,9 +136,16 @@ export default function Game() {
if (gameState.phase === 0) { if (gameState.phase === 0) {
return ( 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} {rules}
</pre> </div>
<ul> <ul>
{gameState.players.map(p => ( {gameState.players.map(p => (
<li key={p.username}> <li key={p.username}>
@ -184,9 +192,16 @@ export default function Game() {
if (gameState.phase === 1) { if (gameState.phase === 1) {
return ( 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} {rules}
</pre> </div>
<ul> <ul>
{gameState.players.map(p => ( {gameState.players.map(p => (
<li key={p.username}> <li key={p.username}>
@ -230,9 +245,16 @@ export default function Game() {
if (gameState.phase === 2) { if (gameState.phase === 2) {
return ( 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} {rules}
</pre> </div>
<ul> <ul>
{gameState.players.map(p => ( {gameState.players.map(p => (
<li key={p.username}> <li key={p.username}>
@ -270,9 +292,16 @@ export default function Game() {
if (gameState.phase === 3) { if (gameState.phase === 3) {
return ( 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} {rules}
</pre> </div>
<ul> <ul>
{gameState.players.map(p => ( {gameState.players.map(p => (
<li key={p.username}> <li key={p.username}>

4
front/styles/globals.css
View file

@ -14,3 +14,7 @@ a {
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
div {
white-space: pre-line;
}