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

front: GameBoard component

Browse Source
This commit is contained in:
djmil 2023-10-26 12:47:16 +02:00
parent 6c46188d38
commit 4421ca5445
6 changed files with 120 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/src/components/Game/GameAction.jsx
View File

@ -5,10 +5,10 @@ import Create from './GameAction/Create'
import Reject from './GameAction/Reject' import Reject from './GameAction/Reject'
import Cancel from './GameAction/Cancel' import Cancel from './GameAction/Cancel'
import Accept from './GameAction/Accept' import Accept from './GameAction/Accept'
import { AppContext } from '../../context/app' // import { AppContext } from '../../context/app'
export default function GameAction() { export default function GameAction() {
const [ctx, dispatchCtx] = React.useContext(AppContext) // const [ctx, dispatchCtx] = React.useContext(AppContext)
return ( return (
<div> <div>

33
webapp/src/components/Game/GameBoard.css
View File

@ -1,33 +0,0 @@
.board {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* scale: 15%; */
}
.tile {
border: 1px solid #e4e4e4;
float: left;
font-size: 200%;
font-weight: bold;
line-height: 34px;
height: 34px;
width: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
}
.tile.black {
background: lightgray;
}
.tile.white:hover {
background-color:azure;
}
.stone {
font-size: 120%;
}

76
webapp/src/components/Game/GameBoard.jsx
View File

@ -1,79 +1,13 @@
import './GameBoard.css'; import './GameBoard.css';
import React from 'react'; import React from 'react';
import { WhiteStone, BlackStone } from './Stone' import Board from './GameBoard/Board'
export default function Board() { export default function GameBoard() {
return <div className='board'>
<div className='row'>
<BlackTile/> <WhiteTile id={0} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={1} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={2} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={4} stone={WhiteStone()} />
</div>
<div className='row'>
<WhiteTile id={5} stone={WhiteStone()} /> <BlackTile/>
<WhiteTile id={6} stone={WhiteStone()} /> <BlackTile/>
<WhiteTile id={7} stone={WhiteStone()} /> <BlackTile/>
<WhiteTile id={8} stone={WhiteStone()} /> <BlackTile/>
</div>
<div className='row'>
<BlackTile/> <WhiteTile id={ 9} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={10} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={11} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={12} stone={WhiteStone()} />
</div>
<div className='row'>
<WhiteTile id={13} stone={null} /> <BlackTile/>
<WhiteTile id={14} stone={null} /> <BlackTile/>
<WhiteTile id={15} stone={null} /> <BlackTile/>
<WhiteTile id={16} stone={null} /> <BlackTile/>
</div>
<div className='row'>
<BlackTile/> <WhiteTile id={17} stone={null} />
<BlackTile/> <WhiteTile id={18} stone={null} />
<BlackTile/> <WhiteTile id={19} stone={null} />
<BlackTile/> <WhiteTile id={20} stone={null} />
</div>
<div className='row'>
<WhiteTile id={21} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={22} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={23} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={24} stone={BlackStone()} /> <BlackTile/>
</div>
<div className='row'>
<BlackTile/> <WhiteTile id={25} stone={BlackStone()} />
<BlackTile/> <WhiteTile id={26} stone={BlackStone()} />
<BlackTile/> <WhiteTile id={27} stone={BlackStone()} />
<BlackTile/> <WhiteTile id={28} stone={BlackStone()} />
</div>
<div className='row'>
<WhiteTile id={29} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={30} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={31} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={32} stone={BlackStone()} /> <BlackTile/>
</div>
</div>
}
function WhiteTile({ id, stone }) {
return ( return (
<div <div className='game-board'>
className='tile white' <Board />
onClick={() => handleClick(id)}
>
{stone}
</div> </div>
); )
}
function BlackTile() {
return <div className='tile black'/>
}
function handleClick(i) {
console.log("click", i)
} }

33
webapp/src/components/Game/GameBoard/Board.css Normal file
View File

@ -0,0 +1,33 @@
.board {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* scale: 15%; */
}
.tile {
border: 1px solid #e4e4e4;
float: left;
font-size: 200%;
font-weight: bold;
line-height: 34px;
height: 34px;
width: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
}
.tile.black {
background: lightgray;
}
.tile.white:hover {
background-color:azure;
}
.stone {
font-size: 120%;
}

79
webapp/src/components/Game/GameBoard/Board.jsx Normal file
View File

@ -0,0 +1,79 @@
import './Board.css';
import React from 'react';
import { WhiteStone, BlackStone } from '../Stone'
export default function Board() {
return <div className='board'>
<div className='row'>
<BlackTile/> <WhiteTile id={0} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={1} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={2} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={4} stone={WhiteStone()} />
</div>
<div className='row'>
<WhiteTile id={5} stone={WhiteStone()} /> <BlackTile/>
<WhiteTile id={6} stone={WhiteStone()} /> <BlackTile/>
<WhiteTile id={7} stone={WhiteStone()} /> <BlackTile/>
<WhiteTile id={8} stone={WhiteStone()} /> <BlackTile/>
</div>
<div className='row'>
<BlackTile/> <WhiteTile id={ 9} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={10} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={11} stone={WhiteStone()} />
<BlackTile/> <WhiteTile id={12} stone={WhiteStone()} />
</div>
<div className='row'>
<WhiteTile id={13} stone={null} /> <BlackTile/>
<WhiteTile id={14} stone={null} /> <BlackTile/>
<WhiteTile id={15} stone={null} /> <BlackTile/>
<WhiteTile id={16} stone={null} /> <BlackTile/>
</div>
<div className='row'>
<BlackTile/> <WhiteTile id={17} stone={null} />
<BlackTile/> <WhiteTile id={18} stone={null} />
<BlackTile/> <WhiteTile id={19} stone={null} />
<BlackTile/> <WhiteTile id={20} stone={null} />
</div>
<div className='row'>
<WhiteTile id={21} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={22} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={23} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={24} stone={BlackStone()} /> <BlackTile/>
</div>
<div className='row'>
<BlackTile/> <WhiteTile id={25} stone={BlackStone()} />
<BlackTile/> <WhiteTile id={26} stone={BlackStone()} />
<BlackTile/> <WhiteTile id={27} stone={BlackStone()} />
<BlackTile/> <WhiteTile id={28} stone={BlackStone()} />
</div>
<div className='row'>
<WhiteTile id={29} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={30} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={31} stone={BlackStone()} /> <BlackTile/>
<WhiteTile id={32} stone={BlackStone()} /> <BlackTile/>
</div>
</div>
}
function WhiteTile({ id, stone }) {
return (
<div
className='tile white'
onClick={() => handleClick(id)}
>
{stone}
</div>
);
}
function BlackTile() {
return <div className='tile black'/>
}
function handleClick(i) {
console.log("click", i)
}

2
webapp/src/context/data/reducer.js
View File

@ -19,7 +19,7 @@ export const initialState = {
leaderboard: null, leaderboard: null,
leaderboardFetching: false, leaderboardFetching: false,
isCurrentUser: () => false, isCurrentUser: () => null,
offlineMode: false offlineMode: false
} }