aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnthony Wang2021-05-09 13:23:08 -0500
committerAnthony Wang2021-05-09 13:23:08 -0500
commit013018ecaefe1814eb3fb3ed366bf062220822ab (patch)
tree5d6391e54a736f41bf18fe667c4f8236b6f77f1a
parent02964186a8886380fe95e1e8d328213534d4ad36 (diff)
Fix UIv0.4-beta
-rw-r--r--front/pages/index.tsx49
-rw-r--r--front/styles/globals.css4
2 files changed, 43 insertions, 10 deletions
diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 869d6ed..4c38f74 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -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}>
diff --git a/front/styles/globals.css b/front/styles/globals.css
index e5e2dcc..23e8664 100644
--- a/front/styles/globals.css
+++ b/front/styles/globals.css
@@ -14,3 +14,7 @@ a {
* {
box-sizing: border-box;
}
+
+div {
+ white-space: pre-line;
+}