85 lines
2.0 KiB
JavaScript
85 lines
2.0 KiB
JavaScript
import './index.css';
|
|
import React from 'react';
|
|
import {Accept} from './GameProposalAction';
|
|
import Reject from './Reject'
|
|
import Cancel from './GameProposalCancel'
|
|
|
|
import { AppData } from "../../context/data"
|
|
//import { AppContext } from "../../context/app"
|
|
|
|
export default function GameProposal() {
|
|
const [data] = React.useContext(AppData)
|
|
|
|
if (data.games == null)
|
|
return <div>Loading..</div>
|
|
|
|
// 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 <div className="li" key={game.uuid}>
|
|
<p>
|
|
You {Stone(game.myColor)} <i>vs</i> {game.opponentName} {Stone(oppositeColor(game.myColor))}
|
|
<br/>
|
|
<q>{game.message}</q>
|
|
<br/>
|
|
<Accept uuid={game.uuid}/>
|
|
<Reject uuid={game.uuid}/>
|
|
</p>
|
|
</div>
|
|
});
|
|
|
|
const WaitForOpponent = data.games
|
|
.filter(game => game.status === Status.WaitForOpponent)
|
|
.map(game => {
|
|
return <div className="li" key={game.uuid}>
|
|
<p>
|
|
You {Stone(game.myColor)} <i>vs</i> {game.opponentName} {Stone(oppositeColor(game.myColor))}
|
|
<br/>
|
|
<q>{game.message}</q>
|
|
<br/>
|
|
<Cancel uuid={game.uuid}/>
|
|
</p>
|
|
</div>
|
|
});
|
|
|
|
return <div className="GameProposal">
|
|
{waitForYou}
|
|
{WaitForOpponent.length > 0 &&
|
|
<div className="separator">
|
|
waiting for opponent ({WaitForOpponent.length})
|
|
</div>
|
|
}
|
|
{WaitForOpponent}
|
|
</div>
|
|
};
|
|
|
|
|
|
|
|
const Status = {
|
|
WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
|
|
WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU",
|
|
}
|
|
|
|
function Stone(color) {
|
|
if (color === "WHITE")
|
|
return <span className="stone">⛀</span>
|
|
|
|
if (color === "BLACK")
|
|
return <span className="stone">⛂</span>
|
|
|
|
return <span className="stone">{color}</span>
|
|
}
|
|
|
|
function oppositeColor(color) {
|
|
if (color === "WHITE")
|
|
return "BLACK"
|
|
|
|
if (color === "BLACK")
|
|
return "WHITE"
|
|
|
|
return color
|
|
}
|