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", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==" "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": { "react-refresh": {
"version": "0.8.3", "version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "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": "^17.0.1",
"react-beforeunload": "^2.4.0", "react-beforeunload": "^2.4.0",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-loading": "^2.0.3",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"socket.io": "^4.5.1", "socket.io": "^4.5.1",

7
src/components/Gameboard.jsx
View File

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