djmil/corda-checkers
djmil/corda-checkers
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

final ui layout

Browse Source
This commit is contained in:
djmil 2023-11-20 22:03:06 +01:00
parent cd9bad7646
commit e017787441
9 changed files with 146 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
webapp/src/App.css
View File

@ -1,10 +1,18 @@
h1 {
margin-top: 10px;
margin-bottom: 10px;
}
.Header .OnlineToggle {
transform: scale(.5);
margin-left: -19px;
margin-top: -7px;
}
.Header {
display: flex;
justify-content: center;
margin-left: 60px;
}
.Header nav {
@ -12,8 +20,9 @@
justify-content: center;
display: flex;
flex-wrap: wrap;
padding-left: 30px;
padding-top: 10px;
padding-bottom: 5px;
}
.Header a {

4
webapp/src/App.js
View File

@ -57,9 +57,7 @@ function Header({ configReducer, isPolling }) {
return (
<div className='Header'>
<h1>
CordaCheckers
</h1>
<h1>CordaCheckers</h1>
<OnlineToggle
isOnline={config.online}

1
webapp/src/components/Checkers.css
View File

@ -8,7 +8,6 @@
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.Board.flip {

141
webapp/src/container/Games.css
View File

@ -5,31 +5,25 @@
.Games .left-side {
float: left;
width: 45%;
/* max-width: 400px; */
/* height: 100px; */
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.Games .right-side {
float: left;
width: 55%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ViewSelector {
text-align: center;
text-align: end;
margin-bottom: 10px;
margin-left: -10px;
background-color: lightgrey;
width: 100%;
padding-top: 8px;
@ -37,6 +31,10 @@
color: black;
}
.ViewSelector .Container {
margin-right: 30px;
}
.ViewSelector a {
color: black;
text-decoration: none;
@ -55,127 +53,50 @@
}
.ViewSelector a:hover:not(.active) {
color: cadetblue;
color: cadetblue;
box-shadow: 0 1.5px 0 0 currentColor;
}
.ViewSelector .Counter {
background-color:#FF3A19;;
background-color: #FF3A19;
;
margin-right: 1px;
font-size: 60%;
vertical-align: 7px;
}
.ViewProvider {
display: flex;
flex-flow: column;
height: 340px;
justify-content: center;
align-items: center;
justify-content: center;
align-items: flex-end;
margin-right: 30px;
}
.NewGame {
margin-right: 30px;
margin-bottom: 30px;
}
.ActionPanel {
text-align: center;
margin-bottom: 10px;
height: 34.5px;
/* background-color: lightgrey; */
width: 100%;
/* padding-top: 8px;
padding-bottom: 8px; */
color: black;
padding-left: -10px;
/* */
margin-left: 10px;
border: 0.5px dotted lightslategray;
height: 34.5px;
width: 100%;
color: black;
padding-left: 17px;
border: 0.5px dotted lightslategray;
}
.ActionPanel button {
width:fit-content;
padding: 6px;
padding-left: 15px;
padding-right: 15px;
border-radius: 5px;
border: 0.5px solid darkgrey;
margin: 2px;
.GameBoard {
padding-left: 30px;
}
.ActionPanel .Create.ready {
background-color:#00b0ff30;
}
.ActionPanel .Create.ready:hover {
background-color:#00b0ffa0;
}
.ActionPanel .Create.ready:active {
background-color:#00b0fff0;
}
.ActionPanel .Cancel.ready,
.ActionPanel .Reject.ready,
.ActionPanel .Surrender.ready
{
background-color:#ffaaaa60
}
.ActionPanel .Cancel.ready:hover,
.ActionPanel .Reject.ready:hover,
.ActionPanel .Surrender.ready:hover
{
background-color:#ff000060
}
.ActionPanel .Cancel.ready:active,
.ActionPanel .Reject.ready:active,
.ActionPanel .Surrender.ready:active
{
background-color:#ff0000a0
}
.ActionPanel .Accept.ready {
background-color: #00af0018;
}
.ActionPanel .Accept.ready:hover {
background-color:#00af0060;
}
.ActionPanel .Accept.ready:active {
background-color:#00af00a0;
}
/*
* Draw
*/
.ActionPanel .Draw.ready,
.ActionPanel .Draw.accept,
.ActionPanel .Draw.reject {
background-color: #ffff0018;
}
.ActionPanel .Draw.ready:hover {
background-color:#ffff0040;
}
.ActionPanel .Draw.ready:active {
background-color:#ffff00a0;
}
.ActionPanel .Draw.accept:hover {
background-color:#a4ff4a50;
}
.ActionPanel .Draw.accept:active {
background-color:#10ff0080;
}
.ActionPanel .Draw.reject:hover {
background-color:#ffaaaa60;
}
.ActionPanel .Draw.reject:active {
background-color:#ff000090;
.Message2Opponent {
margin: 10px;
margin-left: 30px;
width: 270px;
}

12
webapp/src/container/Games.jsx
View File

@ -41,10 +41,12 @@ function ViewSelector({ games }) {
return (
<nav className='ViewSelector' >
<NavLink to='new'>New</NavLink>
<NavLink to='proposal'>Proposal<Counter number={awaiting.proposals} /></NavLink>
<NavLink to='active' >Active<Counter number={awaiting.active} /></NavLink>
<NavLink to='archive' >Archive</NavLink>
<div className='Container' >
<NavLink to='new'>New</NavLink>
<NavLink to='proposal'>Proposal<Counter number={awaiting.proposals} /></NavLink>
<NavLink to='active' >Active<Counter number={awaiting.active} /></NavLink>
<NavLink to='archive' >Archive</NavLink>
</div>
</nav>
)
}
@ -119,7 +121,7 @@ function GameBoardRoutes({ gamesReducer, gamesApi, username }) {
dispatchGames({ type: 'nextNewGame', board });
}
const onStoneMove = (uuid, move) => gamesApi.pushGameMove({uuid, move, message: games.active.message});
const onStoneMove = (uuid, move) => gamesApi.pushGameMove({ uuid, move, message: games.active.message });
return (
<Routes>

84
webapp/src/container/games/ActionPanel.css Normal file
View File

@ -0,0 +1,84 @@
.ActionPanel button {
width: fit-content;
padding: 6px;
padding-left: 15px;
padding-right: 15px;
border-radius: 5px;
border: 0.5px solid darkgrey;
margin: 2px;
}
.ActionPanel .Create.ready {
background-color: #00b0ff30;
}
.ActionPanel .Create.ready:hover {
background-color: #00b0ffa0;
}
.ActionPanel .Create.ready:active {
background-color: #00b0fff0;
}
.ActionPanel .Cancel.ready,
.ActionPanel .Reject.ready,
.ActionPanel .Surrender.ready {
background-color: #ffaaaa60
}
.ActionPanel .Cancel.ready:hover,
.ActionPanel .Reject.ready:hover,
.ActionPanel .Surrender.ready:hover {
background-color: #ff000060
}
.ActionPanel .Cancel.ready:active,
.ActionPanel .Reject.ready:active,
.ActionPanel .Surrender.ready:active {
background-color: #ff0000a0
}
.ActionPanel .Accept.ready {
background-color: #00af0018;
}
.ActionPanel .Accept.ready:hover {
background-color: #00af0060;
}
.ActionPanel .Accept.ready:active {
background-color: #00af00a0;
}
/*
* Draw
*/
.ActionPanel .Draw.ready,
.ActionPanel .Draw.accept,
.ActionPanel .Draw.reject {
background-color: #ffff0018;
}
.ActionPanel .Draw.ready:hover {
background-color: #ffff0040;
}
.ActionPanel .Draw.ready:active {
background-color: #ffff00a0;
}
.ActionPanel .Draw.accept:hover {
background-color: #a4ff4a50;
}
.ActionPanel .Draw.accept:active {
background-color: #10ff0080;
}
.ActionPanel .Draw.reject:hover {
background-color: #ffaaaa60;
}
.ActionPanel .Draw.reject:active {
background-color: #ff000090;
}

1
webapp/src/container/games/ActionPanel.jsx
View File

@ -1,6 +1,7 @@
import React, { useContext } from 'react';
import { GamesContext } from '../../context/games';
import Wobler from '../../components/Wobler';
import './ActionPanel.css'
/*
* NewGame actoins

11
webapp/src/container/games/GameBoard.css
View File

@ -1,14 +1,12 @@
.GameBoard .Player {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.GameBoard .Tile {
line-height: 34px;
height: 34px;
width: 34px;
width: 34px;
margin-right: -1px;
margin-top: -1px;
}
@ -18,10 +16,5 @@
}
.GameBoard .Tile.white.interactive:hover {
background-color:azure;
}
.Message2Opponent {
margin: 10px;
width: 270px;
background-color: azure;
}

20
webapp/src/container/games/GameBoard.jsx
View File

@ -6,27 +6,27 @@ import { Color, Player, Board } from '../../components/Checkers';
import './GameBoard.css';
export default function GameBoard({ username, onStoneClick, onStoneMove }) {
const game = useSelectedGame();
const game = useSelectedGame() || {};
const opponentColor = Color.opposite(game?.myColor);
const [opponentName, myName] = (game?.opponentName) ? [game.opponentName, username] : ['', ''];
const flipBoard = (game?.myColor === Color.black) ? true : null;
const myName = game.opponentName ? username : '';
const opponentColor = Color.opposite(game.myColor);
const flipBoard = (game.myColor === Color.black) ? true : null;
const optionalOnStoneClick = (typeof onStoneClick !== 'function') ? null :
(cellId) => onStoneClick(game?.uuid, cellId);
(cellId) => onStoneClick(game.uuid, cellId);
const optionalOnStoneMove = (typeof onStoneMove !== 'function') ? null :
(move) => onStoneMove(game?.uuid, move);
(move) => onStoneMove(game.uuid, move);
return (
<div className='GameBoard'>
<Player color={opponentColor || Color.black} name={opponentName} />
<Board board={game?.board} flip={flipBoard}
<Player color={opponentColor || Color.black} name={game.opponentName} />
<Board board={game.board} flip={flipBoard}
onStoneClick={optionalOnStoneClick}
onStoneMove={optionalOnStoneMove}
/>
<Player color={game?.myColor || Color.white} name={myName} />
{game?.isPushingGameMove ? <span>Moving...</span> : null /* TODO: isPushing shall be stored per game. curernty it is global indicator */}
<Player color={game.myColor || Color.white} name={myName} />
{game.isPushingGameMove ? <span>Moving...</span> : null /* TODO: isPushing shall be stored per game. curernty it is global indicator */}
</div>
)
}