début tuto
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Thomas Chazot
7 months ago
parent
c08223fbb5
commit
355ef62f7f
@ -0,0 +1,201 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { DataSet, Network} from "vis-network/standalone/esm/vis-network";
|
||||
import GraphCreator from "../model/Graph/GraphCreator";
|
||||
import "./GraphContainer.css";
|
||||
import IndiceTesterFactory from "../model/Factory/IndiceTesterFactory";
|
||||
import Person from "../model/Person";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useGame } from "../Contexts/GameContext";
|
||||
import { socket } from "../SocketConfig"
|
||||
import { colorToEmoji, positionToColor, positionToEmoji } from "../ColorHelper";
|
||||
import { ColorToHexa } from "../model/EnumExtender";
|
||||
import Bot from "../model/Bot";
|
||||
import NodePerson from "../model/Graph/NodePerson";
|
||||
import { useAuth } from "../Contexts/AuthContext";
|
||||
import Indice from "../model/Indices/Indice";
|
||||
import Pair from "../model/Pair";
|
||||
import Player from "../model/Player";
|
||||
import JSONParser from "../JSONParser";
|
||||
import User from "../model/User";
|
||||
import { json } from "body-parser";
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
import {basePath} from "../AdressSetup"
|
||||
import PersonNetwork from "../model/PersonsNetwork";
|
||||
|
||||
interface TutorialGraphProps {
|
||||
onNodeClick: (shouldShowChoiceBar: boolean) => void;
|
||||
handleShowTurnBar: (shouldShowTurnBar: boolean) => void
|
||||
handleTurnBarTextChange: (newTurnBarText: string) => void
|
||||
setPlayerTouched: (newPlayerTouch: number) => void;
|
||||
playerTouched: number
|
||||
changecptTour: (newcptTour : number) => void
|
||||
addToHistory: (message : string) => void
|
||||
solo : boolean
|
||||
isDaily : boolean
|
||||
isEasy: boolean
|
||||
setNetwork: (network: Network) => void
|
||||
showLast: boolean
|
||||
setNetworkEnigme: (networkEnigme: Map<number, Pair<Indice, boolean>[]>) => void
|
||||
askedWrong: boolean
|
||||
setAskedWrong: (askedWrong: boolean) => void
|
||||
setPlayerIndex: (playerIndex: number) => void
|
||||
importToPdf: boolean
|
||||
setImportToPdf: (imp: boolean) => void
|
||||
importToJSON: boolean
|
||||
setImportToJSON: (imp: boolean) => void
|
||||
}
|
||||
|
||||
let lastNodes: NodePerson[] = []
|
||||
let firstIndex = true
|
||||
|
||||
|
||||
|
||||
const TutorialGraph: React.FC<TutorialGraphProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON}) => {
|
||||
let cptTour: number = 0
|
||||
|
||||
//* Gestion du temps :
|
||||
let initMtn = 0
|
||||
|
||||
const {isLoggedIn, user, manager} = useAuth();
|
||||
const {setIndiceData} = useGame();
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [lastIndex, setLastIndex] = useState(-1)
|
||||
/*
|
||||
|
||||
useEffect(() =>{
|
||||
touchedPlayer=playerTouched
|
||||
console.log(playerTouched)
|
||||
if (touchedPlayer == -1){
|
||||
if (!askedWrongLocal){
|
||||
socket.emit("put correct background", socket.id)
|
||||
}
|
||||
}
|
||||
else if (touchedPlayer < players.length && touchedPlayer>=0){
|
||||
if(!askedWrongLocal){
|
||||
socket.emit("put correct background", socket.id)
|
||||
socket.emit("put grey background", socket.id, touchedPlayer)
|
||||
}
|
||||
}
|
||||
else if(touchedPlayer == players.length){
|
||||
socket.emit("put imossible grey", socket.id)
|
||||
}
|
||||
}, [playerTouched])
|
||||
|
||||
*/
|
||||
|
||||
useEffect(() => {
|
||||
const tab: NodePerson[] = []
|
||||
for(const n of lastNodes.reverse()){
|
||||
|
||||
}
|
||||
lastNodes = tab
|
||||
if (showLast){
|
||||
socket.emit("opacity activated", socket.id)
|
||||
}
|
||||
else{
|
||||
socket.emit("opacity deactivated", socket.id)
|
||||
}
|
||||
|
||||
}, [showLast])
|
||||
|
||||
let playerIndex: number = 0
|
||||
|
||||
if (firstIndex){
|
||||
firstIndex=false
|
||||
setPlayerIndex(playerIndex)
|
||||
}
|
||||
let index = 0
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
|
||||
let jsonGraph = require("../tuto/graph.json")
|
||||
let jsonIndice = require("../tuto/indices.json")
|
||||
|
||||
const personNetwork = JSONParser.JSONToNetwork(JSON.stringify(jsonGraph))
|
||||
const indices = JSONParser.JSONToIndices(jsonIndice)
|
||||
|
||||
setIndiceData(indices[0])
|
||||
if (personNetwork == null){
|
||||
return
|
||||
}
|
||||
const graph = GraphCreator.CreateGraph(personNetwork)
|
||||
|
||||
const nodes = graph.nodesPerson;
|
||||
|
||||
|
||||
let n = graph.nodesPerson;
|
||||
let e = graph.edges;
|
||||
const graphState = { n, e };
|
||||
|
||||
// Sauvegarder l'état dans localStorage
|
||||
localStorage.setItem('graphState', JSON.stringify(graphState));
|
||||
|
||||
const container = document.getElementById('graph-container');
|
||||
if (!container) {
|
||||
console.error("Container not found");
|
||||
return;
|
||||
}
|
||||
// Charger les données dans le graph
|
||||
|
||||
// Configuration des options du Graphe
|
||||
const initialOptions = {
|
||||
|
||||
layout: {
|
||||
improvedLayout: true,
|
||||
hierarchical: {
|
||||
enabled: false,
|
||||
direction: 'LR', // LR (Left to Right) ou autre selon votre préférence
|
||||
sortMethod: 'hubsize'
|
||||
},
|
||||
randomSeed: 2
|
||||
},
|
||||
physics: {
|
||||
enabled: true,
|
||||
barnesHut: {
|
||||
gravitationalConstant: -1000,
|
||||
springConstant: 0.001,
|
||||
springLength: 100
|
||||
},
|
||||
solver: "repulsion",
|
||||
repulsion: {
|
||||
nodeDistance: 100 // Put more distance between the nodes.
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const networkData = { nodes: nodes, edges: graph.edges };
|
||||
const network = new Network(container, networkData, initialOptions);
|
||||
network.stabilize();
|
||||
setNetwork(network)
|
||||
|
||||
|
||||
network.on("dragging", (params) => {
|
||||
if (params.nodes.length > 0) {
|
||||
// Un nœud a été cliqué
|
||||
initialOptions.physics.enabled = false;
|
||||
network.setOptions(initialOptions);
|
||||
setNetwork(network)
|
||||
}
|
||||
});
|
||||
|
||||
}, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="graph-container"/>
|
||||
</>
|
||||
);
|
||||
|
||||
function delay(ms: number): Promise<void> {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default TutorialGraph;
|
||||
@ -0,0 +1,454 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Switch from "react-switch";
|
||||
import {saveAs} from "file-saver"
|
||||
|
||||
/* Style */
|
||||
import "./InGame.css"
|
||||
import {useTheme} from '../Style/ThemeContext'
|
||||
/* Component */
|
||||
import GraphContainer from '../Components/GraphContainer';
|
||||
import PlayerList from '../Components/PlayerList';
|
||||
import TurnBar from '../Components/TurnBar';
|
||||
|
||||
/* Icon */
|
||||
import Param from "../res/icon/param.png";
|
||||
import Info from "../res/icon/infoGreen.png";
|
||||
import Check from "../res/icon/checkboxGreen.png";
|
||||
import MGlass from "../res/icon/magnifying-glass.png";
|
||||
import Reset from "../res/icon/reset.png";
|
||||
import Oeye from "../res/icon/eye.png";
|
||||
import Ceye from "../res/icon/hidden.png";
|
||||
import JSZip from 'jszip';
|
||||
|
||||
/* nav */
|
||||
import { Link, Navigate, useNavigate, useNavigationType } from 'react-router-dom';
|
||||
|
||||
/* Boostrap */
|
||||
import Offcanvas from 'react-bootstrap/Offcanvas';
|
||||
|
||||
/* Model */
|
||||
import Stub from '../model/Stub';
|
||||
import { HiLanguage } from 'react-icons/hi2';
|
||||
import { Nav, NavDropdown, Spinner } from 'react-bootstrap';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useGame } from '../Contexts/GameContext';
|
||||
import { socket } from '../SocketConfig';
|
||||
import { Network } from 'vis-network';
|
||||
import {generateLatexCode, generateLatexCodeEnigme} from '../Script/LatexScript';
|
||||
import Pair from '../model/Pair';
|
||||
import Indice from '../model/Indices/Indice';
|
||||
import {basePath} from "../AdressSetup"
|
||||
import TutorialGraph from '../Components/TutorialGraph';
|
||||
|
||||
|
||||
let cptNavigation = 0
|
||||
|
||||
//@ts-ignore
|
||||
const Tutorial = ({locale, changeLocale}) => {
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
const navigationType = useNavigationType()
|
||||
cptNavigation++
|
||||
if (cptNavigation % 2 == 0){
|
||||
if (navigationType.toString() == "POP"){
|
||||
socket.emit("player quit")
|
||||
navigate(`${basePath}/`)
|
||||
}
|
||||
}
|
||||
|
||||
//* Gestion solo
|
||||
let IsSolo: boolean = true
|
||||
const solotmp = params.get('solo');
|
||||
if (solotmp == "false"){
|
||||
IsSolo=false
|
||||
}
|
||||
|
||||
//* Gestion daily
|
||||
let isDaily: boolean = true
|
||||
const isDailytmp = params.get('daily');
|
||||
if (isDailytmp == "false"){
|
||||
isDaily=false
|
||||
}
|
||||
|
||||
|
||||
let isEasy: boolean = true
|
||||
const isEasytmp = params.get('easy');
|
||||
if (isEasytmp == "false"){
|
||||
isEasy=false
|
||||
}
|
||||
//* Historique
|
||||
const [history, setHistory] = useState<string[]>([]);
|
||||
const [showLast, setShowLast] = useState(false)
|
||||
const [askedWrong, setAskedWrong] = useState(false)
|
||||
const [importToPdf, setImportToPdf] = useState(false)
|
||||
const [importToJSON, setImportToJSON] = useState(false)
|
||||
|
||||
const setImportToJSONData = (imp: boolean) => {
|
||||
setImportToJSON(imp)
|
||||
}
|
||||
|
||||
const setImportToPdfData = (imp: boolean) => {
|
||||
setImportToPdf(imp)
|
||||
}
|
||||
|
||||
// Fonction pour ajouter un élément à l'historique
|
||||
const addToHistory = (message: string) => {
|
||||
setHistory(prevHistory => [...prevHistory, message]);
|
||||
};
|
||||
|
||||
const setShowLastData = () =>{
|
||||
setLastVisible(!showLast);
|
||||
setShowLast(!showLast);
|
||||
}
|
||||
|
||||
const setAskedWrongData = (askedWrong: boolean) => {
|
||||
setAskedWrong(askedWrong)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const historyContainer = document.getElementById('history-container');
|
||||
if (historyContainer) {
|
||||
historyContainer.scrollTop = historyContainer.scrollHeight;
|
||||
}
|
||||
}, [history]);
|
||||
|
||||
|
||||
const {personNetwork, person, indices} = useGame()
|
||||
|
||||
const [showChoiceBar, setShowChoiceBar] = useState(false);
|
||||
const [showTurnBar, setShowTurnBar] = useState(false);
|
||||
const [turnBarText, setTurnBarText] = useState("");
|
||||
const [playerTouched, setPlayerTouched] = useState(-2)
|
||||
const [playerIndex, setPlayerIndex] = useState(-2)
|
||||
|
||||
|
||||
const [network, setNetwork] = useState<Network | null>(null)
|
||||
const [networkEnigme, setNetworkEnigme] = useState<Map<number, Pair<Indice, boolean>[]> | null>(null)
|
||||
|
||||
const setNetworkData = (network: Network) => {
|
||||
setNetwork(network)
|
||||
}
|
||||
|
||||
const setNetworkEnigmeData = (networkEnigme: Map<number, Pair<Indice, boolean>[]>) => {
|
||||
setNetworkEnigme(networkEnigme)
|
||||
}
|
||||
|
||||
const handleNodeClick = (shouldShowChoiceBar: boolean) => {
|
||||
setShowChoiceBar(shouldShowChoiceBar);
|
||||
};
|
||||
|
||||
const handleSetPlayerTouched = (newPlayerTouched: number) => {
|
||||
setPlayerTouched(newPlayerTouched);
|
||||
};
|
||||
|
||||
|
||||
const handleShowTurnBar = (shouldShowTurnBar: boolean) => {
|
||||
setShowTurnBar(shouldShowTurnBar);
|
||||
};
|
||||
|
||||
const handleTurnBarTextChange = (newTurnBarText: string) =>{
|
||||
setTurnBarText(newTurnBarText)
|
||||
}
|
||||
|
||||
const setPlayerIndexData = (playerIndex: number) => {
|
||||
setPlayerIndex(playerIndex)
|
||||
}
|
||||
|
||||
const generateTEX = async () => {
|
||||
if (network != null && personNetwork != null && person != null){
|
||||
|
||||
const zip = new JSZip();
|
||||
|
||||
if (isDaily && networkEnigme != null){
|
||||
const tex = generateLatexCodeEnigme(personNetwork, person, indices, network, networkEnigme)
|
||||
const blob = new Blob([tex], { type: 'application/x-latex;charset=utf-8' });
|
||||
zip.file('socialGraph.tex', tex);
|
||||
}
|
||||
else{
|
||||
const tex = generateLatexCode(personNetwork, person, indices, network)
|
||||
const blob = new Blob([tex], { type: 'application/x-latex;charset=utf-8' });
|
||||
zip.file('socialGraph.tex', tex);
|
||||
}
|
||||
|
||||
const imageNames = ['ballon-de-basket.png', 'ballon-de-foot.png', "baseball.png", "bowling.png", "tennis.png"]; // Liste des noms de fichiers d'images
|
||||
const imagesFolder = 'Script';
|
||||
|
||||
for (const imageName of imageNames) {
|
||||
const imageUrl = process.env.PUBLIC_URL + `/${imagesFolder}/${imageName}`;
|
||||
const response = await fetch(imageUrl);
|
||||
|
||||
if (response.ok) {
|
||||
const imageBlob = await response.blob();
|
||||
zip.file(`${imageName}`, imageBlob);
|
||||
} else {
|
||||
console.error(`Erreur de chargement de l'image ${imageName}`);
|
||||
}
|
||||
}
|
||||
|
||||
const content = await zip.generateAsync({ type: 'blob' });
|
||||
|
||||
// Enregistre l'archive en tant que fichier
|
||||
saveAs(content, 'social_graph.zip');
|
||||
|
||||
// Utiliser FileSaver pour télécharger le fichier
|
||||
}
|
||||
}
|
||||
|
||||
const resetGraph = () => {
|
||||
setisLoading(true);
|
||||
socket.emit("reset graph", socket.id)
|
||||
setTimeout(() => {
|
||||
setisLoading(false);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
/* 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 [cptTour, setcptTour] = useState(0);
|
||||
|
||||
const [LastVisible, setLastVisible] = useState(false);
|
||||
|
||||
const [isLoading, setisLoading] = useState(false);
|
||||
|
||||
|
||||
//@ts-ignore
|
||||
const changecptTour = (newcptTour) => {
|
||||
setcptTour(newcptTour);
|
||||
};
|
||||
|
||||
const handleChange = () => {
|
||||
if (show){
|
||||
handleClose()
|
||||
}
|
||||
else {
|
||||
handleShow()
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleChangeS = () => {
|
||||
if (showS){
|
||||
handleCloseS()
|
||||
}
|
||||
else {
|
||||
handleShowS()
|
||||
}
|
||||
};
|
||||
|
||||
const eye = LastVisible ? Oeye : Ceye; //icon que l'on affiche pour l'oeil : fermé ou ouvert.
|
||||
|
||||
/* Windows open */
|
||||
//@ts-ignore
|
||||
const openInNewTab = (url) => { //! avec url ==> dangereux
|
||||
window.open(url);
|
||||
};
|
||||
|
||||
const [SwitchEnabled, setSwitchEnabled] = useState(false)
|
||||
const allIndices = Stub.GenerateIndice()
|
||||
const { indice, players, actualPlayerIndex} = useGame();
|
||||
|
||||
const nbPlayer = players.length;
|
||||
const navdeduc = 'deduc?actualId=' + actualPlayerIndex + '&nbPlayer=' + nbPlayer;
|
||||
|
||||
return (
|
||||
<div id="mainDiv">
|
||||
{showTurnBar && <TurnBar text={turnBarText}/>}
|
||||
<div id='graphDiv'>
|
||||
<TutorialGraph onNodeClick={handleNodeClick}
|
||||
handleShowTurnBar={handleShowTurnBar}
|
||||
handleTurnBarTextChange={handleTurnBarTextChange}
|
||||
changecptTour={changecptTour}
|
||||
addToHistory={addToHistory}
|
||||
solo={IsSolo}
|
||||
isDaily={isDaily}
|
||||
isEasy={isEasy}
|
||||
setPlayerTouched={handleSetPlayerTouched}
|
||||
playerTouched={playerTouched}
|
||||
setNetwork={setNetworkData}
|
||||
setNetworkEnigme={setNetworkEnigmeData}
|
||||
showLast={showLast}
|
||||
setPlayerIndex={setPlayerIndexData}
|
||||
askedWrong={askedWrong}
|
||||
setAskedWrong={setAskedWrongData}
|
||||
importToPdf={importToPdf}
|
||||
setImportToPdf={setImportToPdfData}
|
||||
importToJSON={importToJSON}
|
||||
setImportToJSON={setImportToJSONData}/>
|
||||
</div>
|
||||
|
||||
|
||||
{(!isDaily || (isDaily && isEasy)) &&
|
||||
<div className='historique' id="history-container">
|
||||
{history.map((item, index) => (
|
||||
<div key={index}>{item}</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className='paramDiv'>
|
||||
<button className='button'
|
||||
style={{
|
||||
backgroundColor: theme.colors.tertiary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}
|
||||
onClick={handleChangeS}>
|
||||
<img src={Param} alt="paramètres" height='40'/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className='menuGame'>
|
||||
<div className='resetDiv'>
|
||||
<button className='button'
|
||||
style={{
|
||||
backgroundColor: theme.colors.tertiary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}
|
||||
onClick={resetGraph}>
|
||||
|
||||
{
|
||||
isLoading ? (
|
||||
<Spinner animation="grow" />
|
||||
)
|
||||
: (
|
||||
<img src={Reset} alt="paramètres" height='40'/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <Link to='/info#indice-possible' target='_blank'>
|
||||
//? redirection impossible apparament (securité des navigateur
|
||||
*/}
|
||||
<Link to={`${basePath}/info`} target='_blank'>
|
||||
<button className='button'
|
||||
style={{
|
||||
backgroundColor: theme.colors.tertiary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}>
|
||||
<img src={Info} alt="info" height="40"/>
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link to={`${basePath}/${navdeduc}`} target='_blank'>
|
||||
<button className='button'
|
||||
style={{
|
||||
backgroundColor: theme.colors.tertiary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}>
|
||||
<img src={Check} alt="check" height="40"/>
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<button className='button' onClick={handleChange}
|
||||
style={{
|
||||
backgroundColor: theme.colors.tertiary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}>
|
||||
<img src={MGlass} alt="indice" height="40"/>
|
||||
</button>
|
||||
|
||||
{!IsSolo && <button className='button' onClick={setShowLastData}
|
||||
style={{
|
||||
backgroundColor: theme.colors.tertiary,
|
||||
borderColor: theme.colors.secondary
|
||||
}}>
|
||||
<img src={ eye } 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>
|
||||
|
||||
</Offcanvas.Body>
|
||||
</Offcanvas>
|
||||
*/}
|
||||
|
||||
{ !IsSolo &&
|
||||
<div className='playerlistDiv'>
|
||||
<PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong}/>
|
||||
</div>
|
||||
}
|
||||
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default Tutorial;
|
||||
@ -0,0 +1 @@
|
||||
{"persons":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":7,"name":"Violet","age":24,"color":2,"sports":[3]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0]}]},{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3]}]},{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3],"friends":[{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0]}]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2],"friends":[{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3]},{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":8,"name":"Sebastian","age":13,"color":0,"sports":[1]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4]}]},{"id":4,"name":"Sophia","age":20,"color":4,"sports":[1,3],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":1,"name":"Carter","age":20,"color":1,"sports":[1,0]}]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0],"friends":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4]}]},{"id":6,"name":"Benjamin","age":52,"color":1,"sports":[0,2,4],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]},{"id":5,"name":"Alice","age":68,"color":3,"sports":[0]}]},{"id":7,"name":"Violet","age":24,"color":2,"sports":[3],"friends":[{"id":0,"name":"Charlotte","age":25,"color":2,"sports":[4]}]},{"id":8,"name":"Sebastian","age":13,"color":0,"sports":[1],"friends":[{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]}]},{"id":9,"name":"Liam","age":19,"color":4,"sports":[0],"friends":[{"id":2,"name":"Ava","age":40,"color":3,"sports":[2,3]},{"id":3,"name":"Aurora","age":19,"color":0,"sports":[4,2]}]}]}
|
||||
@ -0,0 +1 @@
|
||||
"[{\"type\":\"AgeIndice\",\"id\":5,\"minimum\":20,\"maximum\":29},{\"type\":\"SportIndice\",\"id\":24,\"sports\":[2,3]},{\"type\":\"ColorEdgesIndice\",\"id\":27,\"neighborsColors\":[0]}]"
|
||||
Loading…
Reference in new issue