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

unresponcive while fetching (#20)

Browse Source 
Reviewed-on: http://192.168.8.55:3000/HQLAx/CordaCheckers/pulls/20
This commit is contained in:
djmil 2023-11-01 10:39:39 +01:00
parent 306ecea262
commit c999302cda
2 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,9 @@
margin: 2px; margin: 2px;
} }
.game-action.create:hover { .game-action.create:hover, /* OR */
.game-action.busy
{
background-color:#00b0ff60; background-color:#00b0ff60;
} }

24
webapp/src/components/Game/GameAction/Create.jsx
View File

@ -14,7 +14,10 @@ export default function Create() {
if (!ctx.hasCurrentUser) if (!ctx.hasCurrentUser)
return alert("You must be one of the players"); return alert("You must be one of the players");
const request = ctx.get_GameProposalRequest() if (ctx.fetching === true)
return
const request = ctx.getGameProposalRequest()
ctx.setFetching(true) ctx.setFetching(true)
@ -28,7 +31,10 @@ export default function Create() {
return ( return (
<button <button
className={'game-action create' + (ctx.isEnabled ? ' enabled' : ' disabled')} className={'game-action create'
+ (ctx.enabled ? ' enabled' : ' disabled')
+ (ctx.fetching ? ' busy' : '')
}
onClick={onClick} onClick={onClick}
> >
<Wobler text="Leaderboard" dance={ctx.fetching} /> <Wobler text="Leaderboard" dance={ctx.fetching} />
@ -50,10 +56,8 @@ function Definitions() {
const hasCurrentUser = isCurrentUser(whitePlayerName) || isCurrentUser(blackPlayerName) const hasCurrentUser = isCurrentUser(whitePlayerName) || isCurrentUser(blackPlayerName)
const isEnabled = hasPlayers && hasCurrentUser const getGameProposalRequest = () => {
const [opponentName, opponentColor] = getOpponent(isCurrentUser, whitePlayerName, blackPlayerName)
const get_GameProposalRequest = () => {
const [opponentName, opponentColor] = get_Opponent(isCurrentUser, whitePlayerName, blackPlayerName)
return { return {
opponentName, opponentName,
@ -66,17 +70,17 @@ function Definitions() {
return { return {
hasPlayers, hasPlayers,
hasCurrentUser, hasCurrentUser,
isEnabled, enabled: hasPlayers && hasCurrentUser,
fetching: ctx.newGame.fetching, fetching: ctx.newGame.fetching,
setFetching: (status) => { dispatchCtx({ update: "newGame", fetching: status }) }, setFetching: (status) => { dispatchCtx({ update: "newGame", fetching: status }) },
get_GameProposalRequest, getGameProposalRequest,
clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) }, clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) },
} }
} }
function get_Opponent(isCurrentUser, whitePlayerName, blackPlayerName) { function getOpponent(isCurrentUser, whitePlayerName, blackPlayerName) {
if (isCurrentUser(whitePlayerName)) { if (isCurrentUser(whitePlayerName)) {
return [blackPlayerName, BLACK()] return [blackPlayerName, BLACK()]
} }
@ -102,6 +106,6 @@ async function postData(url = "", data = {}) {
if (response.ok) if (response.ok)
return response.json()// parses JSON response into native JavaScript objects return response.json()// parses JSON response into native JavaScript objects
console.log("recponce", response) console.wrn(response)
return {} return {}
} }