commit
cf10c87d73
@ -0,0 +1,22 @@
|
||||
FROM node:14
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
RUN npm run build
|
||||
|
||||
EXPOSE 80
|
||||
#
|
||||
# Installez express
|
||||
RUN npm install express
|
||||
|
||||
# Copiez le script serveur personnalisé
|
||||
COPY server.js .
|
||||
|
||||
# Commande pour démarrer le serveur personnalisé
|
||||
CMD ["node", "server.js"]
|
||||
@ -0,0 +1,33 @@
|
||||
#!/bin/bash
|
||||
|
||||
|
||||
# Récupérer le répertoire du script (où que le script soit appelé)
|
||||
SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
|
||||
|
||||
# Aller au répertoire du projet
|
||||
#cd "$SCRIPT_DIR/../"
|
||||
|
||||
#* Lancement des serveurs
|
||||
node $SCRIPT_DIR/../server/server.js &
|
||||
|
||||
# Attendre un court instant pour laisser le serveur démarrer
|
||||
sleep 2
|
||||
|
||||
node $SCRIPT_DIR/../src/server/server.js &
|
||||
|
||||
# Attendre un court instant pour laisser le serveur démarrer
|
||||
sleep 2
|
||||
|
||||
|
||||
|
||||
cd $SCRIPT_DIR/..
|
||||
|
||||
#* Génération de version de production
|
||||
npm run build
|
||||
|
||||
#* Installation d'un serveur http simple
|
||||
npm install -g serve
|
||||
|
||||
#* Execution du serveur sur le répertoire de build
|
||||
serve -s build
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Vérifier si l'adresse IP est fournie en tant que paramètre
|
||||
if [ -z "$1" ]; then
|
||||
echo "Usage: $0 <adresse_ip>"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Stocker l'adresse IP fournie en tant que variable
|
||||
adresse_ip="$1"
|
||||
|
||||
SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
|
||||
|
||||
# Utiliser l'adresse IP dans la commande find avec Perl
|
||||
find $SCRIPT_DIR/../ -type f -exec perl -pi -e 's|http://[0-9.]+:([0-9]+)|http://localhost:$1|g' {} +
|
||||
|
||||
find $SCRIPT_DIR/../ -type f -exec perl -pi -e "s|http://localhost:([0-9]+)|http://$adresse_ip:\$1|g" {} +
|
||||
@ -0,0 +1,19 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.6888e917.css",
|
||||
"main.js": "/static/js/main.b6842da5.js",
|
||||
"static/js/787.a1c84483.chunk.js": "/static/js/787.a1c84483.chunk.js",
|
||||
"static/media/Person.png": "/static/media/Person.f7ba6be9e4afca5ca897.png",
|
||||
"static/media/bot.png": "/static/media/bot.057c187a23ead0769e7f.png",
|
||||
"static/media/eye.png": "/static/media/eye.cd074d043a80f09623ac.png",
|
||||
"static/media/reset.png": "/static/media/reset.82632189f4cbd1644b7a.png",
|
||||
"index.html": "/index.html",
|
||||
"main.6888e917.css.map": "/static/css/main.6888e917.css.map",
|
||||
"main.b6842da5.js.map": "/static/js/main.b6842da5.js.map",
|
||||
"787.a1c84483.chunk.js.map": "/static/js/787.a1c84483.chunk.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.6888e917.css",
|
||||
"static/js/main.b6842da5.js"
|
||||
]
|
||||
}
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.b6842da5.js"></script><link href="/static/css/main.6888e917.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,2 @@
|
||||
"use strict";(self.webpackChunkcryptide=self.webpackChunkcryptide||[]).push([[787],{787:(e,t,n)=>{n.r(t),n.d(t,{getCLS:()=>y,getFCP:()=>g,getFID:()=>C,getLCP:()=>P,getTTFB:()=>D});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},f=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},s=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,p=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){f((function(e){var t=e.timeStamp;v=t}),!0)},l=function(){return v<0&&(v=p(),d(),s((function(){setTimeout((function(){v=p(),d()}),0)}))),{get firstHiddenTime(){return v}}},g=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),n(!0)))},o=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],f=o?null:c("paint",a);(o||f)&&(n=m(e,r,t),o&&a(o),s((function(i){r=u("FCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,n(!0)}))}))})))},h=!1,T=-1,y=function(e,t){h||(g((function(e){T=e.value})),h=!0);var n,i=function(t){T>-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},p=c("layout-shift",v);p&&(n=m(i,r,t),f((function(){p.takeRecords().map(v),n(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r<a-w){var e={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+r};o.forEach((function(t){t(e)})),o=[]}},b=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),p=function(e){e.startTime<a.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),n(!0))},d=c("first-input",p);n=m(e,v,t),d&&f((function(){d.takeRecords().map(p),d.disconnect()}),!0),d&&s((function(){var a;v=u("FID"),n=m(e,v,t),o=[],r=-1,i=null,F(addEventListener),a=p,o.push(a),S()}))},k={},P=function(e,t){var n,i=l(),r=u("LCP"),a=function(e){var t=e.startTime;t<i.firstHiddenTime&&(r.value=t,r.entries.push(e),n())},o=c("largest-contentful-paint",a);if(o){n=m(e,r,t);var v=function(){k[r.id]||(o.takeRecords().map(a),o.disconnect(),k[r.id]=!0,n(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),f(v,!0),s((function(i){r=u("LCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,k[r.id]=!0,n(!0)}))}))}))}},D=function(e){var t,n=u("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]);
|
||||
//# sourceMappingURL=787.a1c84483.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,123 @@
|
||||
/*!
|
||||
Copyright (c) 2018 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/
|
||||
|
||||
/*!
|
||||
|
||||
JSZip v3.10.1 - A JavaScript class for generating and reading zip files
|
||||
<http://stuartk.com/jszip>
|
||||
|
||||
(c) 2009-2016 Stuart Knightley <stuart [at] stuartk.com>
|
||||
Dual licenced under the MIT license or GPLv3. See https://raw.github.com/Stuk/jszip/main/LICENSE.markdown.
|
||||
|
||||
JSZip uses the library pako released under the MIT license :
|
||||
https://github.com/nodeca/pako/blob/main/LICENSE
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
/*! Hammer.JS - v2.0.17-rc - 2019-12-16
|
||||
* http://naver.github.io/egjs
|
||||
*
|
||||
* Forked By Naver egjs
|
||||
* Copyright (c) hammerjs
|
||||
* Licensed under the MIT license */
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-jsx-runtime.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @remix-run/router v1.11.0
|
||||
*
|
||||
* Copyright (c) Remix Software Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE.md file in the root directory of this source tree.
|
||||
*
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/**
|
||||
* React Router DOM v6.18.0
|
||||
*
|
||||
* Copyright (c) Remix Software Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE.md file in the root directory of this source tree.
|
||||
*
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/**
|
||||
* React Router v6.18.0
|
||||
*
|
||||
* Copyright (c) Remix Software Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE.md file in the root directory of this source tree.
|
||||
*
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/** @license React v16.13.1
|
||||
* react-is.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
//! Il faudra possiblement faire une gestion des mode de jeu, pour modifier les regles en fonction de ce dernier.
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,9 @@
|
||||
<FilesMatch "\.css$">
|
||||
ForceType text/css
|
||||
Header set Content-Type "text/css"
|
||||
</FilesMatch>
|
||||
|
||||
<FilesMatch "\.js$">
|
||||
ForceType application/javascript
|
||||
Header set Content-Type "application/javascript"
|
||||
</FilesMatch>
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"headers": [
|
||||
{ "source": "**/*.js", "headers": [{ "key": "Content-Type", "value": "application/javascript; charset=utf-8" }] }
|
||||
]
|
||||
}
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
|
||||
const app = express();
|
||||
const port = process.env.PORT || 80;
|
||||
|
||||
// Servir les fichiers statiques depuis le dossier 'build'
|
||||
app.use(express.static(path.join(__dirname, 'build')));
|
||||
|
||||
// Définir le type MIME pour les fichiers JavaScript
|
||||
app.use('*.js', (req, res, next) => {
|
||||
res.type('application/javascript; charset=utf-8');
|
||||
next();
|
||||
});
|
||||
|
||||
// Route par défaut pour servir l'application React
|
||||
app.get('*', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'build', 'index.html'));
|
||||
});
|
||||
|
||||
// Démarrer le serveur
|
||||
app.listen(port, () => {
|
||||
console.log(`Serveur en cours d'exécution sur le port ${port}`);
|
||||
});
|
||||
@ -0,0 +1,87 @@
|
||||
import React, { useState } 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';
|
||||
|
||||
/* Boostrap */
|
||||
import Accordion from 'react-bootstrap/Accordion';
|
||||
import Table from 'react-bootstrap/Table';
|
||||
import Case from './CheckCase';
|
||||
|
||||
|
||||
interface AccordionIndiceComponentProps<T extends Indice> {
|
||||
instance: (new (...args: any[]) => T) | (Function & { prototype: T });
|
||||
head: string;
|
||||
lang: string;
|
||||
}
|
||||
|
||||
const AccordionIndice: React.FC<AccordionIndiceComponentProps<any>> = ({ instance, head, lang }) => {
|
||||
const indices = Stub.GenerateIndice();
|
||||
const [selectedRows, setSelectedRows] = useState<number[]>([]);
|
||||
|
||||
|
||||
const handleRowClick = (index: number) => {
|
||||
|
||||
const newSelectedRows = [...selectedRows];
|
||||
|
||||
const selectedIndex = newSelectedRows.indexOf(index);
|
||||
if (selectedIndex === -1) {
|
||||
newSelectedRows.push(index);
|
||||
} else {
|
||||
newSelectedRows.splice(selectedIndex, 1);
|
||||
}
|
||||
|
||||
console.log('New Selected Rows:', newSelectedRows);
|
||||
setSelectedRows(newSelectedRows);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Accordion defaultActiveKey={['0']} alwaysOpen style={{ width: '100%' }}>
|
||||
<Accordion.Item eventKey="0">
|
||||
<Accordion.Header>{head}</Accordion.Header>
|
||||
<Accordion.Body>
|
||||
<Table striped bordered hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Indice</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{indices
|
||||
.filter((i) => i instanceof instance)
|
||||
.map((indice, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
onClick={() => handleRowClick(index)}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
}}>
|
||||
<td
|
||||
style={{
|
||||
border: selectedRows.includes(index) ? '1px solid red' : 'none',
|
||||
backgroundColor: selectedRows.includes(index) ? '#FF9191' : 'white',
|
||||
}}>
|
||||
{indice.ToString(lang)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</Accordion.Body>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccordionIndice;
|
||||
@ -0,0 +1,41 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
||||
/* style */
|
||||
import { useTheme } from '../Style/ThemeContext';
|
||||
import '../Pages/DeducGrid.css';
|
||||
|
||||
/* res */
|
||||
import Check from '../res/icon/checkboxGreen.png';
|
||||
|
||||
/* trad */
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
|
||||
//@ts-ignore
|
||||
function Case() {
|
||||
const theme = useTheme();
|
||||
|
||||
const [bg, setbg] = useState('whitesmoke');
|
||||
|
||||
//let check = ""; //? avec image
|
||||
//let bg = 'whitesmoke';
|
||||
|
||||
function changeOnCheck(){
|
||||
// if (check == "")check = Check;
|
||||
// else check = "";
|
||||
|
||||
if(bg == "whitesmoke")setbg(theme.colors.tertiary);
|
||||
else setbg("whitesmoke");
|
||||
|
||||
console.log("clic")
|
||||
}
|
||||
|
||||
return (
|
||||
<button className='case' onClick={changeOnCheck} style={{backgroundColor: bg, borderColor:'grey'}}>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Case;
|
||||
@ -0,0 +1,67 @@
|
||||
import React, { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import ErrorPage from './ErrorPage';
|
||||
|
||||
|
||||
interface ErrorBoundaryProps {
|
||||
fallback: (error: Error, errorInfo: ErrorInfo) => ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
}
|
||||
|
||||
class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||
constructor(props: ErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hasError: false,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(): ErrorBoundaryState {
|
||||
return { hasError: true };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
|
||||
console.error('Error caught by ErrorBoundary:', error, errorInfo);
|
||||
}
|
||||
|
||||
render(): ReactNode {
|
||||
if (this.state.hasError) {
|
||||
return this.props.fallback(new Error('Error caught by ErrorBoundary'), {});
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default ErrorBoundary;
|
||||
|
||||
|
||||
|
||||
// interface ErrorBoundaryProps {
|
||||
// children: ReactNode;
|
||||
// }
|
||||
|
||||
|
||||
// class ErrorBoundary extends React.Component <ErrorBoundaryProps>{
|
||||
// state = { hasError : true }
|
||||
// //@ts-ignore
|
||||
// static getDerivedStateFromError(error){
|
||||
// return { hasError : true};
|
||||
// }
|
||||
|
||||
// componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
|
||||
// console.log(error, errorInfo);
|
||||
// }
|
||||
|
||||
// render(){
|
||||
// if (this.state.hasError){
|
||||
// return <ErrorPage/>;
|
||||
// }
|
||||
// return this.props.children;
|
||||
// }
|
||||
// }
|
||||
|
||||
// export default ErrorBoundary;
|
||||
@ -0,0 +1,37 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useTheme } from '../Style/ThemeContext';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './ErrorStyle.css';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { Button } from 'react-bootstrap';
|
||||
|
||||
|
||||
|
||||
//@ts-ignore
|
||||
function ErrorPage({ code = "", msg = "Something is wrong"}) {
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
|
||||
return (
|
||||
<div className='mainErrorDiv'>
|
||||
<div className='titleError'>
|
||||
<div>
|
||||
<h1>ERROR</h1>
|
||||
<hr style={{width:"100%"}}/>
|
||||
</div>
|
||||
{ code != "" &&
|
||||
<h1 style={{color:'darkred', margin:'10px'}}>{code}</h1>
|
||||
}
|
||||
<h2>{msg}</h2>
|
||||
</div>
|
||||
|
||||
<div className='centerDivH' style={{margin: "20px"}}>
|
||||
<Button href='/' variant='danger'>Retour à l'accueil</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ErrorPage;
|
||||
@ -0,0 +1,29 @@
|
||||
|
||||
.mainErrorDiv{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.titleError{
|
||||
border: solid 2px #C70039;
|
||||
border-radius: 10px;
|
||||
margin: 15px;
|
||||
padding: 10px;
|
||||
box-shadow: 5px 5px 5px #900C3F;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.titleError h1 {
|
||||
color: #900C3F;
|
||||
margin: 10px !important;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
.case{
|
||||
min-width: 50px;
|
||||
min-height: 50px;
|
||||
border: solid 1px whitesmoke;
|
||||
}
|
||||
|
||||
.deducDiv{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sectionAccordion{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
|
||||
|
||||
/* Style */
|
||||
import './DeducGrid.css';
|
||||
import { useTheme } from '../Style/ThemeContext';
|
||||
|
||||
/* Component */
|
||||
|
||||
/* Boostrap */
|
||||
import Accordion from 'react-bootstrap/Accordion';
|
||||
import Table from 'react-bootstrap/Table';
|
||||
import Tab from 'react-bootstrap/Tab';
|
||||
import Tabs from 'react-bootstrap/Tabs';
|
||||
|
||||
/* nav */
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
/* lang */
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import Case from '../Components/CheckCase';
|
||||
|
||||
import Age from '../model/Indices/AgeIndice'
|
||||
import Stub from '../model/Stub';
|
||||
import Edge from '../model/Graph/Edge';
|
||||
import EdgesIndice from '../model/Indices/EdgesIndice';
|
||||
import AccordionIndice from '../Components/AccordionIndice';
|
||||
import AgeIndice from '../model/Indices/AgeIndice';
|
||||
import ColorIndice from '../model/Indices/ColorIndice';
|
||||
import ColorEdgesIndice from '../model/Indices/ColorEdgesIndice';
|
||||
import SportIndice from '../model/Indices/SportIndice';
|
||||
import NbEdgesIndice from '../model/Indices/NbEdgesIndice';
|
||||
import NbSportIndice from '../model/Indices/NbSportIndice';
|
||||
import { useGame } from '../Contexts/GameContext';
|
||||
|
||||
function DeducGrid() {
|
||||
const theme = useTheme();
|
||||
//const indices = Stub.GenerateIndice();
|
||||
|
||||
|
||||
// const { players } = useGame();
|
||||
|
||||
const players = [
|
||||
"bla",
|
||||
"bli",
|
||||
"blou"
|
||||
]
|
||||
|
||||
console.log(players)
|
||||
return (
|
||||
<div style={{margin:'20px'}}>
|
||||
<Tabs defaultActiveKey="0" id="uncontrolled-tab-example" className="mb-3">
|
||||
{players.map((joueur, index) => (
|
||||
<Tab key={index} eventKey={index.toString()} title={`${joueur} ${index + 1}`}>
|
||||
<div className='deducDiv'>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={AgeIndice} head='Age' lang='fr'/>
|
||||
</div>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={ColorIndice} head='Couleur de cheveux' lang='fr'/>
|
||||
<AccordionIndice instance={ColorEdgesIndice} head='Couleur de cheveux voisine' lang='fr'/>
|
||||
</div>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={SportIndice} head='Sport' lang='fr'/>
|
||||
<AccordionIndice instance={NbSportIndice} head='Nombre de Sport' lang='fr'/>
|
||||
</div>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={EdgesIndice} head='Caractéristique des voisin' lang='fr'/>
|
||||
<AccordionIndice instance={NbEdgesIndice} head='Nombre de voisin' lang='fr'/>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DeducGrid;
|
||||
@ -0,0 +1,306 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
/* Context */
|
||||
import { useAuth } from '../Contexts/AuthContext';
|
||||
/* Style */
|
||||
import './Play.css';
|
||||
import { useTheme } from '../Style/ThemeContext';
|
||||
|
||||
/* Component */
|
||||
import ButtonImgNav from "../Components/ButtonImgNav";
|
||||
|
||||
/* Img */
|
||||
/* Icon */
|
||||
import { socket } from '../SocketConfig';
|
||||
import { NavigationType, useNavigate, useNavigationType } from 'react-router-dom';
|
||||
import GameCreator from '../model/GameCreator';
|
||||
import { useGame } from '../Contexts/GameContext';
|
||||
import ScoreBoard from '../Components/ScoreBoard';
|
||||
|
||||
import defaultImg from "../res/img/Person.png"
|
||||
|
||||
/* Types */
|
||||
import User from '../model/User';
|
||||
import EnigmeDuJourCreator from '../model/EnigmeDuJourCreator';
|
||||
import Stub from '../model/Stub';
|
||||
|
||||
import SessionService from '../services/SessionService';
|
||||
import { loadImageAsync } from '../ImageHelper';
|
||||
import { Overlay, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
|
||||
import Button from 'react-bootstrap/Button';
|
||||
import ButtonGroup from 'react-bootstrap/ButtonGroup';
|
||||
import Lobbies from './Lobbies';
|
||||
|
||||
|
||||
let cptNavigation = 0
|
||||
|
||||
|
||||
function NewPlay() {
|
||||
let first = true
|
||||
|
||||
const theme=useTheme()
|
||||
const {isLoggedIn, login, user, setUserData, manager } = useAuth();
|
||||
const {setDailyEnigmeData} = useGame()
|
||||
|
||||
const target = useRef(null);
|
||||
|
||||
const navigationType = useNavigationType()
|
||||
cptNavigation++
|
||||
if (cptNavigation % 2 == 0){
|
||||
if (navigationType.toString() == "POP"){
|
||||
socket.emit("player quit")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUserInformation = async () => {
|
||||
try {
|
||||
const sessionData = await SessionService.getSession();
|
||||
|
||||
// Vérifie si il y a une session
|
||||
if (sessionData.user) {
|
||||
// Il y a une session on récupère les infos du joueur
|
||||
const updatedPlayer: User = new User(socket.id, sessionData.user.pseudo, sessionData.user.profilePicture, {
|
||||
nbGames: sessionData.user.soloStats.nbGames,
|
||||
bestScore: sessionData.user.soloStats.bestScore,
|
||||
avgNbTry: sessionData.user.soloStats.avgNbTry,
|
||||
},
|
||||
{
|
||||
nbGames: sessionData.user.onlineStats.nbGames,
|
||||
nbWins: sessionData.user.onlineStats.nbWins,
|
||||
ratio: sessionData.user.onlineStats.ratio,
|
||||
})
|
||||
login();
|
||||
setUserData(updatedPlayer);
|
||||
} else {
|
||||
// Pas de session on génère un guest random
|
||||
const guestPlayer: User = new User(socket.id, 'Guest_' + Math.floor(Math.random() * 1000000), '',
|
||||
{
|
||||
nbGames: 0,
|
||||
bestScore: 0,
|
||||
avgNbTry: 0,
|
||||
},
|
||||
{
|
||||
nbGames: 0,
|
||||
nbWins: 0,
|
||||
ratio: 0,
|
||||
})
|
||||
setUserData(guestPlayer);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchUserInformation();
|
||||
}, [isLoggedIn]);
|
||||
|
||||
|
||||
const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (user == null){
|
||||
manager.userService.fetchUserInformation().then(([user, loggedIn]) =>{
|
||||
if (user!=null){
|
||||
if (loggedIn){
|
||||
login()
|
||||
setUserData(user)
|
||||
socket.emit("join back game", user)
|
||||
}
|
||||
else{
|
||||
loadImageAsync(defaultImg).then((blob) => {
|
||||
user.profilePicture=blob
|
||||
setUserData(user)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
socket.emit("join back game", user)
|
||||
}
|
||||
}, [isLoggedIn]);
|
||||
|
||||
const [goBackRoom, setGoBackRoom] = useState(-1)
|
||||
|
||||
useEffect(() => {
|
||||
socket.on("join back game", (room) => {
|
||||
setGoBackRoom(room)
|
||||
})
|
||||
}, [])
|
||||
|
||||
|
||||
const [room, setRoom] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
function createLobby(){
|
||||
socket.emit("lobby created")
|
||||
}
|
||||
|
||||
function launchMastermind(){
|
||||
const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
|
||||
setPersonData(choosenPerson)
|
||||
setPersonNetworkData(networkPerson)
|
||||
setIndicesData(choosenIndices)
|
||||
setIndicesData(choosenIndices)
|
||||
navigate('/game?solo=true&daily=false');
|
||||
}
|
||||
|
||||
|
||||
function launchEngimeJour(){
|
||||
//* overlay
|
||||
|
||||
if (!showOverlay)setShowOverlay(true)
|
||||
else setShowOverlay(true)
|
||||
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const handleLobbyCreated = (newRoom: any) => {
|
||||
setRoom(newRoom);
|
||||
};
|
||||
|
||||
// Ajouter l'event listener
|
||||
socket.on('lobby created', handleLobbyCreated);
|
||||
|
||||
// Nettoyer l'event listener lors du démontage du composant
|
||||
return () => {
|
||||
socket.off('lobby created', handleLobbyCreated);
|
||||
};
|
||||
|
||||
}, []); // Aucune dépendance ici
|
||||
|
||||
useEffect(() => {
|
||||
if (room !== null) {
|
||||
const nouvelleURL = `/lobby?room=${room}`;
|
||||
navigate(nouvelleURL);
|
||||
}
|
||||
}, [room, navigate]);
|
||||
|
||||
const goBack = () => {
|
||||
navigate("/lobby?room=" + goBackRoom)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const [showOverlay, setShowOverlay] = useState(false);
|
||||
const [selectedDifficulty, setSelectedDifficulty] = useState(null);
|
||||
|
||||
//@ts-ignore
|
||||
const handleDifficultyChange = (value) => {
|
||||
setSelectedDifficulty(value);
|
||||
};
|
||||
|
||||
const handleStartEasyGame = () => {
|
||||
|
||||
//* Mode facile
|
||||
//todo différencier les deux
|
||||
const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
|
||||
setPersonData(choosenPerson)
|
||||
setPersonNetworkData(networkPerson)
|
||||
setIndicesData(choosenIndices)
|
||||
setIndicesData(choosenIndices)
|
||||
|
||||
navigate('/game?solo=true&daily=true&easy=true');
|
||||
setShowOverlay(false);
|
||||
};
|
||||
|
||||
const handleStartHardGame = () => {
|
||||
//* Mode difficile
|
||||
|
||||
//todo différencier les deux
|
||||
const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
|
||||
setPersonData(choosenPerson)
|
||||
setPersonNetworkData(networkPerson)
|
||||
setIndicesData(choosenIndices)
|
||||
setIndicesData(choosenIndices)
|
||||
if (first){
|
||||
first = false
|
||||
const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
|
||||
setDailyEnigmeData(map)
|
||||
}
|
||||
navigate('/game?solo=true&daily=true&easy=false');
|
||||
setShowOverlay(false);
|
||||
};
|
||||
|
||||
|
||||
|
||||
// if (goBackRoom != -1){
|
||||
// var returnVisibility = "visible"
|
||||
// }
|
||||
// else{
|
||||
// var returnVisibility = "hidden"
|
||||
// }
|
||||
|
||||
// const returnVisibility: Visibility = goBackRoom !== -1 ? "visible" : "hidden";
|
||||
|
||||
const returnVisibility: any= goBackRoom !== -1 ? "visible" : "hidden" ;
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="MainContainer">
|
||||
<div className="NewleftContainer">
|
||||
|
||||
{/* Menu de boutons */}
|
||||
|
||||
<div className='NewbuttonGroupVertical'>
|
||||
<button onClick={launchMastermind} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
|
||||
|
||||
|
||||
<button ref={target} onClick={launchEngimeJour} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Résoudre une énigme</button>
|
||||
<Overlay show={showOverlay} target={target.current} placement="bottom" rootClose={true} rootCloseEvent='click'>
|
||||
{({ placement, arrowProps, show: _show, popper, ...props }) => (
|
||||
<div
|
||||
{...props}
|
||||
style={{
|
||||
backgroundColor: theme.colors.secondary,
|
||||
padding: '2px 10px',
|
||||
borderRadius: 3,
|
||||
...props.style,
|
||||
}}>
|
||||
|
||||
<ButtonGroup aria-label="difficulty">
|
||||
<Button onClick={handleStartEasyGame}>Facile</Button>
|
||||
<Button onClick={handleStartHardGame}>Difficile</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
)}
|
||||
</Overlay>
|
||||
|
||||
<button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
|
||||
<button onClick= {() => navigate("/join")} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
|
||||
{/* {goBackRoom != -1 && <button onClick={goBack} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Retourner à la partie</button>} */}
|
||||
<button onClick={goBack} className="ButtonNavRejoin" style={{ visibility:returnVisibility}}>Retourner à la partie</button>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Lobbies */}
|
||||
<div style={{border:'solid 1px lightgray', borderRadius:'15px', marginTop:'20px'}}>
|
||||
<Lobbies/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='NewrightContainer'>
|
||||
<div style={{ border:'solid 2px lightgray', borderRadius:'15px', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column', padding:'20px', margin:'20px 0px'}}>
|
||||
<h2>
|
||||
{user && user.pseudo}
|
||||
</h2>
|
||||
<img src={user?.profilePicture}
|
||||
height='150'
|
||||
width='150'
|
||||
alt="Person"
|
||||
/>
|
||||
</div>
|
||||
{user && (<ScoreBoard Player={user}/>)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewPlay;
|
||||
@ -1,107 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@ -1,236 +0,0 @@
|
||||
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;
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue