rajukottedi/ludo-web-multiplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added react loading

Browse Source
This commit is contained in:
Wenszel 2022-05-31 18:01:56 +02:00
parent 4083b0f5bd
commit 101a8ad3b1
3 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -12780,6 +12780,11 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
},
"react-loading": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
"integrity": "sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A=="
},
"react-refresh": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

1
package.json
View File

@ -11,6 +11,7 @@
"react": "^17.0.1",
"react-beforeunload": "^2.4.0",
"react-dom": "^17.0.1",
"react-loading": "^2.0.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"socket.io": "^4.5.1",

13
src/components/Gameboard.jsx
View File

@ -1,4 +1,5 @@
import React, { useState, useEffect, useContext, useCallback } from 'react';
import ReactLoading from 'react-loading';
import { PlayerDataContext, SocketContext } from '../App';
import Map from './game-board-components/Map';
import Dice from './game-board-components/Dice';
@ -65,9 +66,15 @@ const Gameboard = () => {
return (
<>
<Navbar players={players} started={started} time={time} isReady={isReady} />
{nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback} /> : null}
<Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
{players ? (
<>
<Navbar players={players} started={started} time={time} isReady={isReady} />
{nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback} /> : null}
<Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
</>
) : (
<ReactLoading type='spinningBubbles' color='white' height={667} width={375} />
)}
</>
);
};