Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into ConnexionAPI
@ -1,10 +1,14 @@
|
||||
#graph-container {
|
||||
width: 100%;
|
||||
height: 75vh;
|
||||
height: 100vh;
|
||||
/* padding: 20px; */
|
||||
|
||||
/* border-radius: 25px; */
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
|
||||
import React from 'react';
|
||||
import PersonStatus from './PersonStatus';
|
||||
|
||||
//@ts-ignore
|
||||
function PlayerList({ players }) {
|
||||
return (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
|
||||
{
|
||||
//@ts-ignore
|
||||
players.map((player, index) => (
|
||||
<PersonStatus key={index} state={player.state} name={player.name} />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayerList;
|
||||
@ -0,0 +1,104 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.playerlistDiv{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 10px;
|
||||
top :50px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
/* #playerCanvasBody{
|
||||
columns: 2 auto;
|
||||
grid-row: 2;
|
||||
} */
|
||||
@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
|
||||
/* Style */
|
||||
import '../Style/Global.css';
|
||||
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
function InfoPage() { //! cette page n'affiche que des informations et est suceptible de changer selon le context.
|
||||
|
||||
return (
|
||||
|
||||
<div>
|
||||
<h1>Informations</h1>
|
||||
|
||||
<h2>Indice possible :</h2>
|
||||
<h3>
|
||||
couleur de cheveux d'une personne
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Possède les cheveux noir
|
||||
</li>
|
||||
<li>
|
||||
Possède les cheveux roux
|
||||
</li>
|
||||
<li>
|
||||
Possède les cheveux blond
|
||||
</li>
|
||||
<li>
|
||||
Possède les cheveux brun
|
||||
</li>
|
||||
<li>
|
||||
Possède les cheveux blanc
|
||||
</li>
|
||||
</ul>
|
||||
<hr/>
|
||||
<h3>
|
||||
Sport d'une personne
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Effectue du Foot <u>ou</u> du tennis
|
||||
</li>
|
||||
<li>
|
||||
Effectue du rugby <u>ou</u> du tennis
|
||||
</li>
|
||||
</ul>
|
||||
<h3>
|
||||
Caractèristique des voisins
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Possède deux voisins footballeur
|
||||
</li>
|
||||
<li>
|
||||
Possède aucun voisin rugbyman
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Topographie</h2>
|
||||
<p>Legende des différents objet disponible sur la carte.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InfoPage;
|
||||
@ -0,0 +1,10 @@
|
||||
const COLORS = {
|
||||
primary:'#0064E0',
|
||||
secondary:'',
|
||||
tertiary:'',
|
||||
|
||||
white: '#fff',
|
||||
black: '#000',
|
||||
}
|
||||
|
||||
export default COLORS;
|
||||
@ -0,0 +1,13 @@
|
||||
// theme.js
|
||||
const theme = {
|
||||
colors: {
|
||||
primary: '#0064E0',
|
||||
secondary: '#0052B8',
|
||||
|
||||
text: '#fff'
|
||||
|
||||
//faire une gestion dark/light
|
||||
},
|
||||
};
|
||||
|
||||
export default theme;
|
||||
@ -0,0 +1,15 @@
|
||||
// ThemeContext.js
|
||||
import React, { createContext, useContext } from 'react';
|
||||
import theme from './Theme';
|
||||
|
||||
const ThemeContext = createContext(theme);
|
||||
|
||||
export const useTheme = () => useContext(ThemeContext);
|
||||
|
||||
//@ts-ignore
|
||||
export const ThemeProvider = ({ children }) => (
|
||||
<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
|
||||
);
|
||||
|
||||
|
||||
//* style={{ color: theme.colors.primary }}
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 992 B |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 4.8 KiB |