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