Loading..
-
- // for (const [key, value] of Object.entries(data.games))
- // console.log(key, value);
-
- const waitForYou = data.games
- .filter(game => game.status === Status.WaitForYou)
- .map(game => {
- return
- {waitForYou}
- {WaitForOpponent.length > 0 &&
-
- waiting for opponent ({WaitForOpponent.length})
-
- }
- {WaitForOpponent}
+ return
+
};
-
-
-
-const Status = {
- WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
- WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU",
-}
-
-function Stone(color) {
- if (color === "WHITE")
- return
⛀
-
- if (color === "BLACK")
- return
⛂
-
- return
{color}
-}
-
-function oppositeColor(color) {
- if (color === "WHITE")
- return "BLACK"
-
- if (color === "BLACK")
- return "WHITE"
-
- return color
-}
diff --git a/webapp/src/components/GameHeader/index.css b/webapp/src/components/GameHeader/index.css
new file mode 100644
index 0000000..aa4107d
--- /dev/null
+++ b/webapp/src/components/GameHeader/index.css
@@ -0,0 +1,31 @@
+.game-header {
+ margin-bottom: 10px;
+ background-color: lightgrey;
+ width: 100%;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ color: black;
+}
+
+.game-header a {
+ color:darkgrey;
+ text-decoration: none;
+ transition: .25s ease;
+ margin-left: 5px;
+ margin-right: 5px;
+}
+
+.game-header .active {
+ color: white;
+ border-radius: 2px;
+ background-color: cadetblue;
+ opacity: 80%;
+ padding-top: 8px;
+ padding-bottom: 8px;
+}
+
+.game-header a:hover:not(.active) {
+ color: cadetblue;
+
+ /* box-shadow: 0 1.5px 0 0 currentColor; */
+}
\ No newline at end of file
diff --git a/webapp/src/components/GameHeader/index.jsx b/webapp/src/components/GameHeader/index.jsx
new file mode 100644
index 0000000..af0dad6
--- /dev/null
+++ b/webapp/src/components/GameHeader/index.jsx
@@ -0,0 +1,15 @@
+import './index.css';
+import React from 'react';
+import { NavLink } from "react-router-dom";
+// import { AppData } from "../../context/data"
+
+export default function GameHeader() {
+ // const [data] = React.useContext(AppData)
+
+
+ return
+};
diff --git a/webapp/src/components/GameSelector/index.css b/webapp/src/components/GameSelector/index.css
new file mode 100644
index 0000000..8fe03fb
--- /dev/null
+++ b/webapp/src/components/GameSelector/index.css
@@ -0,0 +1,47 @@
+.Games {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+}
+
+.Games .li {
+ border: 1px solid black;
+ margin-bottom: 5px;
+}
+
+.Games .li p {
+ margin: 5px;
+}
+
+.Games .li p q {
+ color: gray;
+}
+
+.Games .li p i {
+ font-size: 70%;
+}
+
+.Games .li button.action {
+ display: none;
+}
+
+.Games .li:hover button.action {
+ display: initial;
+}
+
+.separator {
+ /* width: 20%; */
+ /* height: 20px; */
+ border-bottom: 1px dotted black;
+ text-align: center;
+ font-size: 50%;
+ padding-left: 50%;
+ margin-bottom: 7px;
+}
+
+.stone {
+ font-size: 140%;
+ vertical-align: -3px;
+}
\ No newline at end of file
diff --git a/webapp/src/components/GameSelector/index.jsx b/webapp/src/components/GameSelector/index.jsx
new file mode 100644
index 0000000..fd401d7
--- /dev/null
+++ b/webapp/src/components/GameSelector/index.jsx
@@ -0,0 +1,82 @@
+import './index.css';
+import React from 'react';
+
+import { AppData } from "../../context/data"
+
+export default function Game() {
+ const [data] = React.useContext(AppData)
+
+ if (!data?.games)
+ return
Loading..
+
+ // for (const [key, value] of Object.entries(data.games))
+ // console.log(key, value);
+
+ console.log("data.games", data.games)
+ const waitForYou = data.games
+ .filter(game => game.status === Status.WaitForYou)
+ .map(game => {
+ return
+
+ You {Stone(game.myColor)} vs {game.opponentName} {Stone(oppositeColor(game.myColor))}
+
+ {game.message}
+
+ {/*
+ */}
+
+
+ });
+
+ const WaitForOpponent = data.games
+ .filter(game => game.status === Status.WaitForOpponent)
+ .map(game => {
+ return
+
+ You {Stone(game.myColor)} vs {game.opponentName} {Stone(oppositeColor(game.myColor))}
+
+ {game.message}
+
+ {/* */}
+
+
+ });
+
+ return
+
+ {waitForYou}
+ {WaitForOpponent.length > 0 &&
+
+ waiting for opponent ({WaitForOpponent.length})
+
+ }
+ {WaitForOpponent}
+
+
+};
+
+
+const Status = {
+ WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
+ WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU",
+}
+
+function Stone(color) {
+ if (color === "WHITE")
+ return
⛀
+
+ if (color === "BLACK")
+ return
⛂
+
+ return
{color}
+}
+
+function oppositeColor(color) {
+ if (color === "WHITE")
+ return "BLACK"
+
+ if (color === "BLACK")
+ return "WHITE"
+
+ return color
+}
diff --git a/webapp/src/components/Header/index.css b/webapp/src/components/Header/index.css
index d1f3ba0..9ef8aee 100644
--- a/webapp/src/components/Header/index.css
+++ b/webapp/src/components/Header/index.css
@@ -8,7 +8,7 @@ h1 {
height: 1px;
}
-nav {
+.app-header {
padding: auto;
align-items: center;
justify-content: center;
@@ -16,18 +16,18 @@ nav {
flex-wrap: wrap;
}
-nav a {
+.app-header a {
color: lightgray;
text-decoration: none;
transition: .25s ease;
- width: 100px;
+ width: fit-content;
margin-left: 5px;
margin-right: 5px;
padding: 0.25rem 1rem;
}
-nav .active {
+.app-header .active {
color: white;
border-radius: 2px;
background-color: cadetblue;
@@ -35,18 +35,17 @@ nav .active {
padding: 0.25rem 1rem;
}
-nav a:hover:not(.active) {
+.app-header a:hover:not(.active) {
color: cadetblue;
box-shadow: 0 1.5px 0 0 currentcolor;
}
-
-[data-darkreader-scheme="dark"] nav a {
+[data-darkreader-scheme="dark"] .app-header a {
color: darkslategrey;
}
-[data-darkreader-scheme="dark"] nav .active {
+[data-darkreader-scheme="dark"] .app-header .active {
color: white;
box-shadow: 0 1.5px 0 0 currentcolor;
}
\ No newline at end of file
diff --git a/webapp/src/components/Header/index.jsx b/webapp/src/components/Header/index.jsx
index 40a5e08..ef24c12 100644
--- a/webapp/src/components/Header/index.jsx
+++ b/webapp/src/components/Header/index.jsx
@@ -2,7 +2,7 @@ import './index.css';
import './wave.css'
import React from "react"
import { NavLink } from "react-router-dom";
-import OfflineToggle from '../OnlineTgl';
+import OnlineToggle from '../OnlineTgl';
import { AppData } from "../../context/data"
export default function Header() {
@@ -10,9 +10,9 @@ export default function Header() {
return
- CordaCheckers
+ CordaCheckers
-