Fix UI
This commit is contained in:
parent
02964186a8
commit
013018ecae
2 changed files with 43 additions and 10 deletions
|
@ -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.
|
||||
|
||||
5. If you give up all your cards, you lose! Last player remaining wins!
|
||||
|
||||
`;
|
||||
|
||||
function useForceUpdate(){
|
||||
|
@ -87,9 +88,9 @@ export default function Game() {
|
|||
if (!loggedIn) {
|
||||
return (
|
||||
<>
|
||||
<pre>
|
||||
<div>
|
||||
{rules}
|
||||
</pre>
|
||||
</div>
|
||||
<LoginForm
|
||||
socket={socket}
|
||||
finish={(s) => {
|
||||
|
@ -135,9 +136,16 @@ export default function Game() {
|
|||
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 @@ export default function Game() {
|
|||
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 @@ export default function Game() {
|
|||
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 @@ export default function Game() {
|
|||
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}>
|
||||
|
|
|
@ -14,3 +14,7 @@ a {
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue