+ React-Jackal
+
+ React-Jackal
+
+ {players &&
+ players.gamers &&
+ players.gamers.map((gamer, index) => {
+ if (players.mode < 4 && (index == 1 || index == 3)) {
+ return null;
+ }
+ if (players.mode < 2 && index == 2) {
+ return null;
+ }
+
+ return (
+ 0 ? gamer.userName : undefined}
+ group={grps[index]}
+ posInfo={mapInfo && mapInfo[index]}
+ changePlayer={() => changeGamer(index)}
+ changeGroup={() => changeGroup(index)}
+ />
+ );
+ })}
+
+ );
+};
+
+export default Players;
diff --git a/Front/src/app/content/layout/components/players/player.tsx b/Front/src/app/content/layout/components/players/player.tsx
new file mode 100644
index 00000000..332c5eb3
--- /dev/null
+++ b/Front/src/app/content/layout/components/players/player.tsx
@@ -0,0 +1,57 @@
+import Image from 'react-bootstrap/Image';
+
+import classes from './players.module.less';
+import { Constants } from '/app/constants';
+
+interface PlayerProps {
+ position: number;
+ type: string;
+ userName?: string;
+ group: number;
+ posInfo?: string;
+ changePlayer: () => void;
+ changeGroup: () => void;
+}
+
+const Player = ({ position, type, userName, group, posInfo, changePlayer, changeGroup }: PlayerProps) => {
+ const getUrlByPlayer = (type: string) => {
+ if (type === 'human') return '/pictures/human.png';
+ else if (type === 'robot') return '/pictures/robot.png';
+ else if (type === 'robot2') return '/pictures/robot2.png';
+ else if (type === 'robot3') return '/pictures/robot3.png';
+ };
+
+ const getTopPosition = (pos: number) => {
+ if (pos === 0) return 200;
+ else if (pos === 2) return 0;
+ return 100;
+ };
+
+ const getLeftPosition = (pos: number) => {
+ if (pos === 1) return 0;
+ else if (pos === 3) return 200;
+ return 100;
+ };
+
+ return (
+
+ setPlayers({
+ ...players,
+ mode: calcNextMode(players.mode),
+ })
+ }
+ style={{
+ cursor: 'pointer',
+ top: '110px',
+ left: players.mode == 8 ? '110px' : '130px',
+ fontSize: '48px',
+ lineHeight: '48px',
+ textAlign: 'center',
+ }}
+ >
+ {players.mode == 8 ? '2x2' : players.mode}
+
+
+ })
+
+ );
+};
+export default Player;
diff --git a/Front/src/app/content/layout/components/players/players.module.less b/Front/src/app/content/layout/components/players/players.module.less
new file mode 100644
index 00000000..3f8e51d3
--- /dev/null
+++ b/Front/src/app/content/layout/components/players/players.module.less
@@ -0,0 +1,45 @@
+.settings {
+ width: 280px !important;
+ height: 280px;
+ position: relative;
+}
+
+.player {
+ position: absolute;
+}
+
+.userName {
+ position: absolute;
+ top: -20px;
+ left: -10px;
+ width: 100px;
+ height: 26px;
+ margin: 0;
+ padding: 0;
+ color: red;
+ font-weight: bold;
+ overflow: clip;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: center;
+}
+
+.type {
+ cursor: pointer;
+ background-repeat: no-repeat;
+ width: 80px;
+ height: 80px;
+ margin: 0;
+ padding: 0;
+}
+
+.group {
+ cursor: pointer;
+ position: absolute;
+ top: 50px;
+ left: 50px;
+ width: 50px;
+ height: 50px;
+ margin: 0;
+ padding: 0;
+}
diff --git a/Front/src/app/content/layout/components/types.d.ts b/Front/src/app/content/layout/components/types.d.ts
new file mode 100644
index 00000000..b9fa3d2a
--- /dev/null
+++ b/Front/src/app/content/layout/components/types.d.ts
@@ -0,0 +1,14 @@
+export interface PlayersInfo {
+ mode: number;
+ members: string[];
+ users: number[];
+ groups: string[];
+ gamers: PlayerInfo[];
+}
+
+export interface PlayerInfo {
+ id: number;
+ type: string;
+ userId: number;
+ userName?: string;
+}
diff --git a/Front/src/app/content/layout/index.tsx b/Front/src/app/content/layout/index.tsx
new file mode 100644
index 00000000..1674e5ac
--- /dev/null
+++ b/Front/src/app/content/layout/index.tsx
@@ -0,0 +1,73 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Route, Routes } from 'react-router-dom';
+
+import GameDocuments from '../../../docs/content';
+import useClientMethod from '../../hubs/useClientMethod';
+import useHub from '../../hubs/useHub';
+import Logon from './logon';
+import MessageNotifier from './messNotifier';
+import Newgame from './newgame';
+import Quickstart from './quickstart';
+import { hubConnection } from '/app/global';
+import useClientMethods from '/app/hubs/useClientMethods';
+import Login from '/auth/content/login';
+import { getAuth } from '/auth/redux/authSlice';
+import { getEnableSockets, showMessage } from '/common/redux/commonSlice';
+import { sagaActions } from '/common/sagas';
+import Playground from '/game/content/playground';
+import gameHub from '/game/hub/gameHub';
+import { initMySettings } from '/game/redux/gameSlice';
+import { StorageState } from '/game/types';
+import NetGameCreate from '/lobby/content/gameCreate';
+import GameList from '/lobby/content/gameList';
+
+const Layout = () => {
+ const dispatch = useDispatch();
+ const enableSockets = useSelector(getEnableSockets);
+ const auth = useSelector(getAuth);
+
+ useClientMethod(enableSockets, hubConnection, 'Notify', (text) => {
+ dispatch(
+ showMessage({
+ isError: false,
+ errorCode: 'success',
+ messageText: JSON.stringify(text),
+ }),
+ );
+ });
+ useClientMethods(enableSockets, hubConnection, dispatch, gameHub.getEventHandlers);
+ useHub(enableSockets && auth.isAuthorised === true, hubConnection);
+
+ useEffect(() => {
+ const myStateStr = localStorage.getItem('state');
+ if (myStateStr) {
+ const myState: StorageState = JSON.parse(myStateStr);
+ if (myState) {
+ dispatch(initMySettings(myState));
+ }
+ }
+
+ dispatch({ type: sagaActions.GET_TILES_PACK_NAMES, payload: {} });
+ dispatch({ type: sagaActions.LOBBY_GET_LEADERBOARD, payload: {} });
+ dispatch({ type: sagaActions.AUTH_CHECK, payload: {} });
+ }, [dispatch]);
+
+ return (
+ <>
+ {userName}
}
+ {posInfo && {posInfo}
}
+