Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into ConnexionAPI
commit
8bb0d37d35
@ -0,0 +1,87 @@
|
||||
const express = require('express');
|
||||
const http = require('http');
|
||||
const socketIO = require('socket.io');
|
||||
const cors = require('cors');
|
||||
|
||||
const app = express();
|
||||
const server = http.createServer(app);
|
||||
const io = socketIO(server, {
|
||||
cors: {
|
||||
origin: ["http://localhost:3000", "http://localhost:3001"], // Remplacez par l'URL de votre application React
|
||||
methods: ["GET", "POST"],
|
||||
credentials: true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const map = new Map()
|
||||
// ... le reste de votre configuration du serveur
|
||||
|
||||
server.listen(3002, () => {
|
||||
console.log('Serveur Socket.IO écoutant sur le port 3001');
|
||||
});
|
||||
|
||||
io.on('connection', (socket) => {
|
||||
console.log(socket.id);
|
||||
|
||||
socket.on('network created', (network, person, indices, room) =>{
|
||||
io.to(room).emit("game created", network, person, indices, Math.floor(Math.random() * map.get(room).length))
|
||||
});
|
||||
|
||||
socket.on("lobby joined", (room, name) =>{
|
||||
socket.join(room)
|
||||
if (map.get(room) == undefined){
|
||||
map.set(room, [{id: socket.id, name: name}])
|
||||
}
|
||||
else{
|
||||
const tab = map.get(room)
|
||||
for(let i = 0; i<tab.length; i++){
|
||||
if (tab[i].id === socket.id){
|
||||
tab.splice(i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
map.get(room).push({id: socket.id, name: name})
|
||||
}
|
||||
|
||||
io.to(room).emit("new player", map.get(room))
|
||||
})
|
||||
|
||||
socket.on("lobby created", () =>{
|
||||
io.to(socket.id).emit("lobby created", Math.floor(Math.random() * 10000))
|
||||
})
|
||||
|
||||
socket.on("already asked", (nodeId, askingPlayer, askedPlayer) =>{
|
||||
io.to(askingPlayer.id).emit("already asked", nodeId, askedPlayer)
|
||||
})
|
||||
|
||||
socket.on("ask player", (nodeId, playerId, askingPlayer, askingPlayerIndex) =>{
|
||||
io.to(playerId).emit("asked", nodeId, askingPlayer, askingPlayerIndex)
|
||||
})
|
||||
|
||||
socket.on("asked all 1by1", (id, playerId) =>{
|
||||
io.to(playerId).emit("asked all", id)
|
||||
})
|
||||
|
||||
socket.on("asked wrong", (askingPlayer) =>{
|
||||
io.to(askingPlayer.id).emit("asked wrong")
|
||||
})
|
||||
|
||||
socket.on("disconnect", () =>{
|
||||
for (const k of map.keys()){
|
||||
const tab = map.get(k)
|
||||
for (let i = 0; i<tab.length; i++){
|
||||
if (tab[i].id === socket.id){
|
||||
tab.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
socket.on("node checked", (id, works, color, room, playerIndex) =>{
|
||||
console.log(playerIndex)
|
||||
io.to(room).emit("node checked", id, works, color, playerIndex)
|
||||
})
|
||||
|
||||
});
|
||||
@ -0,0 +1,56 @@
|
||||
import Player from "./model/Player";
|
||||
import { socket } from "./SocketConfig";
|
||||
|
||||
function positionToColor(pos: number): string{
|
||||
switch (pos) {
|
||||
case 0:
|
||||
return "blue";
|
||||
case 1:
|
||||
return "green";
|
||||
case 2:
|
||||
return "yellow";
|
||||
case 3:
|
||||
return "purple";
|
||||
case 4:
|
||||
return "red";
|
||||
default:
|
||||
return "brown";
|
||||
}
|
||||
}
|
||||
|
||||
function colorToEmoji(color: string, works: boolean): string{
|
||||
if (works){
|
||||
switch (color) {
|
||||
case "blue":
|
||||
return "🔵";
|
||||
case "green":
|
||||
return "🟢";
|
||||
case "yellow":
|
||||
return "🟡";
|
||||
case "purple":
|
||||
return "🟣";
|
||||
case "red":
|
||||
return "🔴";
|
||||
default:
|
||||
return "🟤";
|
||||
}
|
||||
}
|
||||
else{
|
||||
switch (color) {
|
||||
case "blue":
|
||||
return "🟦";
|
||||
case "green":
|
||||
return "🟩";
|
||||
case "yellow":
|
||||
return "🟨";
|
||||
case "purple":
|
||||
return "🟪";
|
||||
case "red":
|
||||
return "🟥";
|
||||
default:
|
||||
return "🟫";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export {colorToEmoji, positionToColor}
|
||||
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import '../Style/Global.css';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { useTheme } from '../Style/ThemeContext';
|
||||
|
||||
//@ts-ignore
|
||||
function ColoredIndices({ letter, color}) {
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
// const mystyle = {
|
||||
// backgroundColor: "#0064E0",
|
||||
// };
|
||||
|
||||
return (
|
||||
<div className='centerDivH' style={{ backgroundColor: theme.colors.primary }}>
|
||||
<img src={letter} alt="Indice Letter"/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ColoredIndices;
|
||||
@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
|
||||
/* Style */
|
||||
import '../Style/Global.css';
|
||||
//import { useTheme } from '../Style/ThemeContext';
|
||||
|
||||
/* Model */
|
||||
import Stub from '../model/Stub';
|
||||
import Indice from '../model/Indices/Indice';
|
||||
|
||||
/* lang */
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
interface IndiceListComponentProps<T extends Indice> {
|
||||
instance: (new (...args: any[]) => T) | (Function & { prototype: T });
|
||||
lang: string;
|
||||
}
|
||||
|
||||
const IndiceList: React.FC<IndiceListComponentProps<any>> = ({ instance, lang }) => {
|
||||
const indices = Stub.GenerateIndice();
|
||||
return (
|
||||
<>
|
||||
<ul className='listContainer'>
|
||||
{indices
|
||||
.filter((i) => i instanceof instance)
|
||||
.map((indice, index) => (
|
||||
<p key={index}>{indice.ToString(lang)}</p>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default IndiceList;
|
||||
@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
import { useTheme } from "../Style/ThemeContext";
|
||||
|
||||
interface TurnBarProps{
|
||||
text: string
|
||||
}
|
||||
|
||||
const TurnBar: React.FC<TurnBarProps> = ({text})=> {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<div className='upperInfo'
|
||||
style={{
|
||||
borderColor: theme.colors.secondary
|
||||
}}>
|
||||
{/* texte changeable et a traduire */}
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TurnBar;
|
||||
@ -0,0 +1,110 @@
|
||||
import React, { createContext, useContext, useState, ReactNode } from 'react';
|
||||
import Indice from '../model/Indices/Indice';
|
||||
import Person from '../model/Person';
|
||||
import PersonNetwork from '../model/PersonsNetwork';
|
||||
import Player from '../model/Player';
|
||||
|
||||
interface GameContextProps {
|
||||
indices: Indice[];
|
||||
indice: Indice | null
|
||||
person: Person | null;
|
||||
personNetwork: PersonNetwork | null;
|
||||
players: Player[]
|
||||
nodeId: number | null
|
||||
askedPersons: Person[];
|
||||
actualPlayerIndex: number;
|
||||
turnPlayerIndex: number;
|
||||
room: string;
|
||||
onlyFalse: boolean
|
||||
setIndicesData: (newIndices: Indice[]) => void;
|
||||
setIndiceData: (newIndice: Indice) => void;
|
||||
setPersonData: (newPerson: Person) => void;
|
||||
setPersonNetworkData: (newPersonNetwork: PersonNetwork) => void;
|
||||
setPlayersData: (newPlayer: Player[]) => void;
|
||||
setNodeIdData: (newId: number) => void;
|
||||
setAskedPersonsData: (newAskedPersons: Person[]) => void;
|
||||
setActualPlayerIndexData: (newActualPlayerIndex: number) => void;
|
||||
setTurnPlayerIndexData: (newTurnPlayerIndex: number) => void;
|
||||
setRoomData: (newRoom: string) => void;
|
||||
setOnlyFalseData: (newOnlyFalse: boolean) => void
|
||||
}
|
||||
|
||||
const GameContext = createContext<GameContextProps | undefined>(undefined);
|
||||
|
||||
interface GameProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
|
||||
const [indices, setIndices] = useState<Indice[]>([]);
|
||||
const [indice, setIndice] = useState<Indice | null>(null);
|
||||
const [person, setPerson] = useState<Person | null>(null);
|
||||
const [personNetwork, setPersonNetwork] = useState<PersonNetwork | null>(null);
|
||||
const [players, setPlayers] = useState<Player[]>([])
|
||||
const [nodeId, setNodeId] = useState<number | null>(null);
|
||||
const [askedPersons, setAskedPersons] = useState<Person[]>([])
|
||||
const [actualPlayerIndex, setActualPlayerIndex] = useState<number>(-1)
|
||||
const [turnPlayerIndex, setTurnPlayerIndex] = useState<number>(-1)
|
||||
const [room, setRoom] = useState<string>("")
|
||||
const [onlyFalse, setOnlyFalse] = useState<boolean>(false)
|
||||
|
||||
|
||||
const setIndicesData = (newIndices: Indice[]) => {
|
||||
setIndices(newIndices);
|
||||
};
|
||||
|
||||
const setIndiceData = (newIndice: Indice) =>{
|
||||
setIndice(newIndice)
|
||||
};
|
||||
|
||||
|
||||
const setPersonData = (newPerson: Person) => {
|
||||
setPerson(newPerson);
|
||||
};
|
||||
|
||||
const setPersonNetworkData = (newPersonNetwork: PersonNetwork) => {
|
||||
setPersonNetwork(newPersonNetwork);
|
||||
};
|
||||
|
||||
const setPlayersData = (newPlayers: Player[]) => {
|
||||
setPlayers(newPlayers);
|
||||
};
|
||||
|
||||
const setNodeIdData = (newId: number) => {
|
||||
setNodeId(newId);
|
||||
};
|
||||
|
||||
const setAskedPersonsData = (newAskedPerson: Person[]) => {
|
||||
setAskedPersons(newAskedPerson);
|
||||
};
|
||||
|
||||
const setActualPlayerIndexData = (newActualPlayerIndex: number) =>{
|
||||
setActualPlayerIndex(newActualPlayerIndex)
|
||||
}
|
||||
|
||||
const setTurnPlayerIndexData = (newTurnPlayerIndex: number) =>{
|
||||
setTurnPlayerIndex(newTurnPlayerIndex)
|
||||
}
|
||||
|
||||
const setRoomData = (newRoom: string) =>{
|
||||
setRoom(newRoom)
|
||||
}
|
||||
|
||||
const setOnlyFalseData = (newOnlyFalse: boolean) =>{
|
||||
setOnlyFalse(newOnlyFalse)
|
||||
}
|
||||
|
||||
return (
|
||||
<GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData, onlyFalse, setOnlyFalseData }}>
|
||||
{children}
|
||||
</GameContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useGame = (): GameContextProps => {
|
||||
const context = useContext(GameContext);
|
||||
if (!context) {
|
||||
throw new Error('useGame must be used within an GameProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@ -0,0 +1,83 @@
|
||||
import AgeIndice from "./model/Indices/AgeIndice";
|
||||
import ColorEdgesIndice from "./model/Indices/ColorEdgesIndice";
|
||||
import ColorIndice from "./model/Indices/ColorIndice";
|
||||
import Indice from "./model/Indices/Indice";
|
||||
import NbEdgesIndice from "./model/Indices/NbEdgesIndice";
|
||||
import NbSportIndice from "./model/Indices/NbSportIndice";
|
||||
import SportIndice from "./model/Indices/SportIndice";
|
||||
import Person from "./model/Person";
|
||||
import PersonNetwork from "./model/PersonsNetwork";
|
||||
|
||||
class JSONParser{
|
||||
|
||||
static JSONToNetwork(jsonString: any): PersonNetwork{
|
||||
const json = JSON.parse(jsonString)
|
||||
const persons: Person[] = []
|
||||
const personFriends = new Map<number, number[]>()
|
||||
json.persons.forEach((personJson: any) => {
|
||||
persons.push(JSONParser.JSONToPerson(personJson))
|
||||
personJson.friends.forEach((f: any) => {
|
||||
if (personFriends.get(personJson.id) == undefined){
|
||||
personFriends.set(personJson.id, [f.id])
|
||||
}
|
||||
else{
|
||||
personFriends.get(personJson.id)?.push(f.id)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
for(const person of persons){
|
||||
const tab = personFriends.get(person.getId())
|
||||
if (tab != undefined){
|
||||
for(const i of tab){
|
||||
person.addFriend(persons.filter((p) => p.getId() == i)[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return new PersonNetwork(persons);
|
||||
}
|
||||
|
||||
static JSONToPerson(json: any): Person {
|
||||
const person = new Person(
|
||||
json.id,
|
||||
json.name,
|
||||
json.age,
|
||||
json.color,
|
||||
json.sports,
|
||||
[]
|
||||
);
|
||||
return person;
|
||||
}
|
||||
|
||||
|
||||
static JSONToIndice(json: any): Indice{
|
||||
switch (json.type){
|
||||
case "AgeIndice":
|
||||
return new AgeIndice(json.id, json.minimum, json.maximum)
|
||||
case "ColorEdgesIndice":
|
||||
return new ColorEdgesIndice(json.id, json.neighborsColors)
|
||||
case "ColorIndice":
|
||||
return new ColorIndice(json.id, json.colors)
|
||||
case "NbEdgesIndice":
|
||||
return new NbEdgesIndice(json.id, json.nbNeighbors)
|
||||
case "NbSportIndice":
|
||||
return new NbSportIndice(json.id, json.nbSport)
|
||||
case "SportIndice":
|
||||
return new SportIndice(json.id, json.sports)
|
||||
default:
|
||||
throw new Error("PARSER unable to parse indice: " + json.type);
|
||||
}
|
||||
}
|
||||
|
||||
static JSONToIndices(jsonString: any): Indice[]{
|
||||
const json = JSON.parse(jsonString)
|
||||
const tabIndice: Indice[] = []
|
||||
json.forEach((i: any) => {
|
||||
tabIndice.push(this.JSONToIndice(i))
|
||||
});
|
||||
return tabIndice
|
||||
}
|
||||
}
|
||||
|
||||
export default JSONParser
|
||||
@ -0,0 +1,142 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"); /** import de la font */
|
||||
|
||||
|
||||
.infoPage{
|
||||
margin: 20px 100px;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
/** Sommaire */
|
||||
.list {
|
||||
max-width: 25%;
|
||||
position: relative;
|
||||
}
|
||||
.list ul {
|
||||
position: relative;
|
||||
}
|
||||
.list ul li {
|
||||
position: relative;
|
||||
left: 0;
|
||||
color: #fce4ec;
|
||||
list-style: none;
|
||||
margin: 4px 0;
|
||||
border-left: 2px solid #0052B8;
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list ul li:hover {
|
||||
left: 10px;
|
||||
}
|
||||
.list ul li span {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
padding-left: 12px;
|
||||
display: inline-block;
|
||||
z-index: 1;
|
||||
transition: 0.5s;
|
||||
color: #000;
|
||||
}
|
||||
.list ul li:hover span {
|
||||
color: #fff;
|
||||
}
|
||||
.list ul li:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0052B8;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.list ul li:hover:before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
li *{
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.LiInterfaceDisplay{
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.LiInterfaceDisplay p{
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "Raleway", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 40px;
|
||||
color: #080808;
|
||||
-webkit-transition: all 0.4s ease 0s;
|
||||
-o-transition: all 0.4s ease 0s;
|
||||
transition: all 0.4s ease 0s;
|
||||
}
|
||||
|
||||
h2 span {
|
||||
display: block;
|
||||
font-size: 0.5em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
h2 em {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
.infoPage h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.5em;
|
||||
padding-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.infoPage h2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 5px;
|
||||
width: 55px;
|
||||
background-color: #111;
|
||||
}
|
||||
.infoPage h2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 2px;
|
||||
height: 1px;
|
||||
width: 95%;
|
||||
max-width: 255px;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 20px 0 0 0;
|
||||
font-family: "Raleway", sans-serif;
|
||||
}
|
||||
|
||||
.h5title{
|
||||
margin: 50px 0 0 0;
|
||||
font-family: "Raleway", sans-serif;
|
||||
}
|
||||
|
||||
/* .infoPage h2{
|
||||
text-decoration: underline;
|
||||
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
} */
|
||||
@ -0,0 +1,107 @@
|
||||
.upperInfo{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
width: 30%;
|
||||
|
||||
border-radius: 0px 0px 30px 30px;
|
||||
border: solid;
|
||||
border-width: 2px 5px;
|
||||
|
||||
background-color: white;
|
||||
|
||||
font-size: 30px;
|
||||
|
||||
top: 20px;;
|
||||
}
|
||||
|
||||
#mainDiv{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.paramDiv{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#graphDiv{
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#bottom-container{
|
||||
bottom: 0;
|
||||
|
||||
background-color: white;
|
||||
padding:20px;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
}
|
||||
|
||||
.nbLaps{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 10px;
|
||||
top :50px;
|
||||
|
||||
margin: 10px 20px;
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
border: solid 2px;
|
||||
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#endgamebutton{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.upperInfo,
|
||||
#bottom-container,
|
||||
.menuGame {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.menuGame{
|
||||
display: flex;
|
||||
align-items: space-between;
|
||||
justify-content: end;
|
||||
flex-direction: column;
|
||||
|
||||
top:30%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.menuGame Button {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.button{
|
||||
/*background-color: #85C9C2;*/
|
||||
|
||||
border: solid 2px #85C9C2;
|
||||
border-radius: 10px;
|
||||
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
}
|
||||
@ -0,0 +1,236 @@
|
||||
import React, { useState } from 'react';
|
||||
import Switch from "react-switch";
|
||||
|
||||
/* Style */
|
||||
import "./SoloGame.css"
|
||||
import {useTheme} from '../Style/ThemeContext'
|
||||
/* Component */
|
||||
import GraphContainer from '../Components/GraphContainer';
|
||||
import ChoiceBar from '../Components/ChoiceBar';
|
||||
import ButtonImgNav from '../Components/ButtonImgNav';
|
||||
import PersonStatus from '../Components/PersonStatus';
|
||||
import PlayerList from '../Components/PlayerList';
|
||||
|
||||
/* Icon */
|
||||
import Leave from "../res/icon/leave.png";
|
||||
import Param from "../res/icon/param.png";
|
||||
import Replay from "../res/icon/replay.png";
|
||||
import Info from "../res/icon/infoGreen.png";
|
||||
import Check from "../res/icon/checkboxGreen.png";
|
||||
import Alpha from "../res/GreekLetters/alphaW.png";
|
||||
|
||||
/* nav */
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
/* Boostrap */
|
||||
import Button from 'react-bootstrap/Button';
|
||||
import Offcanvas from 'react-bootstrap/Offcanvas';
|
||||
|
||||
/* Model */
|
||||
import Stub from '../model/Stub';
|
||||
import { HiLanguage } from 'react-icons/hi2';
|
||||
import { Nav, NavDropdown } from 'react-bootstrap';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import Color from '../model/Color';
|
||||
import TurnBar from '../Components/TurnBar';
|
||||
import { useGame } from '../Contexts/GameContext';
|
||||
|
||||
//@ts-ignore
|
||||
const SoloGame = ({locale, changeLocale}) => {
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const [showChoiceBar, setShowChoiceBar] = useState(false);
|
||||
const [showTurnBar, setShowTurnBar] = useState(false);
|
||||
|
||||
|
||||
const handleNodeClick = (shouldShowChoiceBar: boolean) => {
|
||||
setShowChoiceBar(shouldShowChoiceBar);
|
||||
};
|
||||
|
||||
const handleShowTurnBar = (shouldShowTurnBar: boolean) => {
|
||||
setShowTurnBar(shouldShowTurnBar);
|
||||
};
|
||||
|
||||
/* offcanvas */
|
||||
//? faire une fonction pour close et show en fonction de l'etat du canva ?
|
||||
//? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ?
|
||||
const [show, setShow] = useState(false);
|
||||
const handleClose = () => setShow(false);
|
||||
const handleShow = () => setShow(true);
|
||||
|
||||
// const [showP, setShowP] = useState(false);
|
||||
// const handleCloseP = () => setShowP(false);
|
||||
// const handleShowP = () => setShowP(true);
|
||||
|
||||
const [showS, setShowS] = useState(false);
|
||||
const handleCloseS = () => setShowS(false);
|
||||
const handleShowS = () => setShowS(true);
|
||||
|
||||
const handleChange = () => {
|
||||
if (show){
|
||||
handleClose()
|
||||
}
|
||||
else {
|
||||
handleShow()
|
||||
}
|
||||
};
|
||||
|
||||
// const handleChangeP = () => {
|
||||
// if (showP){
|
||||
// handleCloseP()
|
||||
// }
|
||||
// else {
|
||||
// handleShowP()
|
||||
// }
|
||||
// };
|
||||
|
||||
const handleChangeS = () => {
|
||||
if (showS){
|
||||
handleCloseS()
|
||||
}
|
||||
else {
|
||||
handleShowS()
|
||||
}
|
||||
};
|
||||
|
||||
/* Windows open */
|
||||
//@ts-ignore
|
||||
const openInNewTab = (url) => { //! avec url ==> dangereux
|
||||
window.open(url);
|
||||
};
|
||||
|
||||
const [SwitchEnabled, setSwitchEnabled] = useState(false)
|
||||
const indices = Stub.GenerateIndice()
|
||||
const { indice, players } = useGame();
|
||||
|
||||
|
||||
return (
|
||||
<div id="mainDiv">
|
||||
<TurnBar text="je suis dans la page solo"/>
|
||||
<div id='graphDiv'>
|
||||
{/* <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} FromSolo={true}/> */}
|
||||
</div>
|
||||
|
||||
<div className='nbLaps' style={{
|
||||
backgroundColor: theme.colors.primary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}>
|
||||
Tour : 5
|
||||
</div>
|
||||
|
||||
<div className='paramDiv'>
|
||||
<button className='button'
|
||||
style={{
|
||||
backgroundColor: theme.colors.primary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}
|
||||
onClick={handleChangeS}>
|
||||
<img src={Param} alt="paramètres" height='40'/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='menuGame'>
|
||||
<Link to='/info' target='_blank'>
|
||||
<button className='button'
|
||||
style={{
|
||||
backgroundColor: theme.colors.primary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}>
|
||||
<img src={Info} alt="info" height="40"/>
|
||||
</button>
|
||||
</Link>
|
||||
{/* <button className='button' onClick={() => openInNewTab('http://localhost:3000/play')}> //! avec url =={'>'} dangereux
|
||||
<img src={Check} alt="check" height="40"/>
|
||||
</button> */}
|
||||
|
||||
<Link to='/info' target='_blank'>
|
||||
<button className='button'
|
||||
style={{
|
||||
backgroundColor: theme.colors.primary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}>
|
||||
<img src={Check} alt="check" height="40"/>
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<button className='button' onClick={handleChange}
|
||||
style={{
|
||||
backgroundColor: theme.colors.primary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}>
|
||||
<img src={Alpha} alt="indice" height="40"/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* <Offcanvas show={showP}
|
||||
onHide={handleCloseP}>
|
||||
<Offcanvas.Header closeButton>
|
||||
<Offcanvas.Title>Joueurs</Offcanvas.Title>
|
||||
<h3>Il y a {players.length} joueurs</h3>
|
||||
</Offcanvas.Header>
|
||||
<Offcanvas.Body>
|
||||
<PlayerList players={players} />
|
||||
</Offcanvas.Body>
|
||||
</Offcanvas> */}
|
||||
|
||||
<Offcanvas show={show}
|
||||
onHide={handleClose}
|
||||
placement='end'
|
||||
scroll={true}
|
||||
backdrop={false}
|
||||
style={{ height: '20%', width: '25%', top: '60vh' }}>
|
||||
<Offcanvas.Header closeButton>
|
||||
<Offcanvas.Title>Indice</Offcanvas.Title>
|
||||
</Offcanvas.Header>
|
||||
<Offcanvas.Body>
|
||||
{/* Possède les cheveux noir <u>ou</u> joue au basket */}
|
||||
{indice?.ToString(locale)}
|
||||
</Offcanvas.Body>
|
||||
</Offcanvas>
|
||||
|
||||
{
|
||||
//* canva pour les paramètres
|
||||
}
|
||||
<Offcanvas show={showS}
|
||||
onHide={handleCloseS}
|
||||
placement='top'
|
||||
style={{height: '30%', width: '30%', left: '70%' }}>
|
||||
<Offcanvas.Header closeButton>
|
||||
<Offcanvas.Title><img src={Param} alt='param'/> Paramètres</Offcanvas.Title>
|
||||
</Offcanvas.Header>
|
||||
<Offcanvas.Body>
|
||||
<Nav className="me-auto">
|
||||
<NavDropdown
|
||||
title={<span><HiLanguage/> Language </span>}
|
||||
className="navbar-title" id="basic-nav-dropdown">
|
||||
<NavDropdown.Item onClick={() => changeLocale('fr')}>
|
||||
<FormattedMessage id="languageSelector.french"/>
|
||||
</NavDropdown.Item>
|
||||
<NavDropdown.Item onClick={() => changeLocale('en')}>
|
||||
<FormattedMessage id="languageSelector.english"/>
|
||||
</NavDropdown.Item>
|
||||
</NavDropdown>
|
||||
</Nav>
|
||||
|
||||
<label>
|
||||
<Switch checked={SwitchEnabled} onChange={setSwitchEnabled}/>
|
||||
<p>Afficher les noeuds possibles</p>
|
||||
</label>
|
||||
|
||||
</Offcanvas.Body>
|
||||
</Offcanvas>
|
||||
<div id="bottom-container">
|
||||
{showChoiceBar && <ChoiceBar />}
|
||||
</div>
|
||||
{/*
|
||||
<div id="endgamebutton" > {/* tmp
|
||||
<ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default SoloGame;
|
||||
@ -0,0 +1,6 @@
|
||||
import { io } from "socket.io-client";
|
||||
|
||||
|
||||
const socket = io("http://127.20.10.4:3002");
|
||||
|
||||
export {socket}
|
||||
@ -0,0 +1,12 @@
|
||||
class Player{
|
||||
|
||||
public id: string
|
||||
public name: string;
|
||||
|
||||
constructor(id: string, name: string){
|
||||
this.id=id
|
||||
this.name=name
|
||||
}
|
||||
}
|
||||
|
||||
export default Player
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "Cryptid",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
Loading…
Reference in new issue