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