Crypteam
/
Cryptid
4
0
Fork 0
Code Issues 10 Pull Requests Packages Projects 9 Releases Wiki Activity

ajout d'un theme global pour toutes les couleurs primaire, secondaire et quelque texte principaux 💄

Browse Source
pull/73/head
Pierre Ferreira 1 year ago committed by Thomas Chazot
parent 45b396d738
commit 3c54b1c2f7
23 changed files with 172 additions and 45 deletions
Show Stats Download Patch File Download Diff File

3
cryptide_project/src/App.tsx
Unescape View File

@ -24,6 +24,9 @@ import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
/* Style */
import './App.css';
import { ThemeProvider } from './Style/ThemeContext';
// import theme from './Style/Theme';
/* bootstrap */
import 'bootstrap/dist/css/bootstrap.min.css';

11
cryptide_project/src/Components/BigButtonNav.tsx
Unescape View File

@ -3,11 +3,20 @@ import { Link } from 'react-router-dom';
import './ButtonImgNav.css';
import { FormattedMessage } from 'react-intl';
import { useTheme } from '../Style/ThemeContext';
import COLORS from '../Style/Color';
//@ts-ignore
function BigButtonNav({ dest, img}) {
const theme = useTheme();
// const mystyle = {
// backgroundColor: "#0064E0",
// };
return (
<Link to={dest} className="link-without-underline">
<button className='bigbuttonNabImg'>
<button className='bigbuttonNabImg' style={{ backgroundColor: theme.colors.primary }}>
<img src={img} alt="Button Image" height="100" width="100"/>
</button>
</Link>

8
cryptide_project/src/Components/ButtonImgNav.css
Unescape View File

@ -3,8 +3,8 @@
width: auto;
height: 65px;
background-color: #85C9C2;
color: #2A4541;
/* background-color: #85C9C2; */
/* color: #2A4541; */
border-radius: 15px;
border-width: 0;
@ -20,8 +20,8 @@
width: auto;
height: 100px;
background-color: #85C9C2;
color: #2A4541;
/* background-color: #85C9C2; */
/* color: #2A4541; */
border-radius: 15px;
border-width: 0;

5
cryptide_project/src/Components/ButtonImgNav.tsx
Unescape View File

@ -3,11 +3,14 @@ import { Link } from 'react-router-dom';
import './ButtonImgNav.css';
import { FormattedMessage } from 'react-intl';
import { useTheme } from '../Style/ThemeContext';
//@ts-ignore
function ButtonImgNav({ dest, img, text = "" }) {
const theme = useTheme();
return (
<Link to={dest} className="link-without-underline"> {/*target='_blank' ==> ouvre un nouvelle onglet*/ }
<button className='buttonNabImg'>
<button className='buttonNabImg' style={{ backgroundColor: theme.colors.primary, color: theme.colors.secondary}}>
<img src={img} alt="Button Image" height="50" width="50"/>
<p>{text}</p>
</button>

3
cryptide_project/src/Components/ChoiceBar.css
Unescape View File

@ -13,10 +13,9 @@
.choice-bar-button {
margin: 5px;
padding: 10px;
background-color: lightseagreen;
/* background-color: lightseagreen; */
color: #fff;
border: 2px solid grey;
border-radius: 5px;
cursor: pointer;
}

1
cryptide_project/src/Components/ChoiceBar.tsx
Unescape View File

@ -2,6 +2,7 @@ import React from 'react';
import { useGame } from '../Contexts/GameContext';
import { socket } from '../SocketConfig';
import './ChoiceBar.css';
import { useTheme } from '../Style/ThemeContext';
const ChoiceBar = () => {
const { players, nodeId } = useGame();

3
cryptide_project/src/Components/NavBar.css
Unescape View File

@ -1,6 +1,6 @@
.custom-navbar{
background-color: #0064E0;
/* background-color: #85C9C2; */
color: #fff;
text-emphasis-color: #fff;
}
@ -17,7 +17,6 @@
.navbar-title-dd a {
background-color: #2A4541;
color: #fff;
border-radius: 15;
padding: 10px 20px; /* Ajustez le rembourrage selon vos préférences */

16
cryptide_project/src/Components/NavBar.tsx
Unescape View File

@ -14,21 +14,25 @@ import { HiLanguage } from 'react-icons/hi2';
/* Components */
import './NavBar.css';
/* Style */
import { useTheme } from '../Style/ThemeContext';
// @ts-ignore
function AppNavbar({changeLocale}) {
const theme = useTheme();
return (
<Navbar expand="lg" className="custom-navbar">
<Navbar expand="lg" className="custom-navbar" style={{ backgroundColor: theme.colors.primary }}>
<Container>
<Navbar.Brand href="/">
<div>
<h2>Cryptide</h2>
<h6>by Crypteam</h6>
<h2 style={{color:theme.colors.text}}>Cryptide</h2>
<h6 style={{color:theme.colors.text}}>by Crypteam</h6>
</div>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<NavDropdown title={<span><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown">
<NavDropdown title={<span style={{color:theme.colors.text}}><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown" >
<NavDropdown.Item href="play"><FormattedMessage id="play_solo"/> </NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="play"><FormattedMessage id="create_room"/> </NavDropdown.Item>
@ -37,11 +41,11 @@ function AppNavbar({changeLocale}) {
</Nav>
<div className='leftdiv'>
<Nav className="ml-auto navbar-title-dd">
<Nav.Link href="login" className='navbar-title-dd'>
<Nav.Link href="login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
<BiLogInCircle/>
<FormattedMessage id="log_in"/>
</Nav.Link>
<Nav.Link href="signup" className='navbar-title-dd'>
<Nav.Link href="signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
<BsFillPersonPlusFill/>
<FormattedMessage id="sign_up"/>
</Nav.Link>

8
cryptide_project/src/Components/PersonStatus.tsx
Unescape View File

@ -1,15 +1,21 @@
import React from 'react';
/* Style */
import '../Style/Global.css'
import { useTheme } from '../Style/ThemeContext';
/* Ressources */
import Person from '../res/img/Person.png'
import leave from '../res/img/bot.png'
//@ts-ignore
function PersonStatus({img = Person, state= leave, name = "Dummy"}) {
const theme=useTheme();
return (
<div className='centerDivV'>
<img src={img} alt="player" height="100" width="100"/>
<h4>{name}</h4>
<div className='statusDiv'>
<div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
<img src={state} alt="state" height="30" width="30"/>
</div>
</div>

2
cryptide_project/src/Pages/EndGame.css
Unescape View File

@ -15,7 +15,7 @@
width: fit-content;
border-radius: 0px 0px 30px 30px;
border: solid #85C9C2;
border: solid;
border-width: 0 5px;
padding: 20px;

10
cryptide_project/src/Pages/EndGame.tsx
Unescape View File

@ -1,6 +1,12 @@
import React from 'react';
/* Style */
import './EndGame.css';
import '../Style/Global.css';
import { useTheme } from '../Style/ThemeContext';
/* res */
import Person from '../res/img/Person.png';
import Leave from '../res/icon/leave.png';
import Replay from '../res/icon/replay.png';
@ -18,10 +24,12 @@ import { FormattedMessage } from 'react-intl';
function EndGame() {
const theme = useTheme();
return (
<div>
<div className="head">
<header className='leaderboard-header'>
<header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
<h1>Dummy a gagné !</h1>
<h3>Le tueur était <u>Bob</u></h3>
</header>

4
cryptide_project/src/Pages/Home.css
Unescape View File

@ -6,7 +6,7 @@
min-height: 100vh;
display: flex;
font-size: calc(10px + 2vmin);
color: #2A4541;
/* color: #2A4541; */
}
/**Divider**/
@ -41,7 +41,7 @@
/*Global ???*/
.button {
background-color: #49A4BE;
/* background-color: #49A4BE; */
color: #fff;
padding: 10px 20px;
border-radius: 10;

12
cryptide_project/src/Pages/Home.tsx
Unescape View File

@ -1,12 +1,14 @@
import React from 'react';
import './Home.css';
import '../App.css';
import { useTheme } from '../Style/ThemeContext';
import { Link } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import ButtonImgNav from '../Components/ButtonImgNav';
function Home() {
const theme=useTheme();
return (
<div className="home-container">
@ -46,7 +48,13 @@ function Home() {
<h3> <u><FormattedMessage id="game.illustratedBy"/></u><br/> Kwanchai Moriya</h3>
{/* <button>Jouer au jeu</button> */}
<br/>
<Link to="/play" className='button'> <FormattedMessage id="play"/> </Link>
<Link to="/play" className='button'
style={{
backgroundColor: theme.colors.primary,
borderColor: theme.colors.secondary
}}>
<FormattedMessage id="play"/>
</Link>
</div>
</div>
);

4
cryptide_project/src/Pages/InGame.css
Unescape View File

@ -7,7 +7,7 @@
width: 30%;
border-radius: 0px 0px 30px 30px;
border: solid #85C9C2;
border: solid;
border-width: 2px 5px;
background-color: white;
@ -89,7 +89,7 @@
}
.button{
background-color: #85C9C2;
/*background-color: #85C9C2;*/
border: solid 2px #85C9C2;
border-radius: 10px;

42
cryptide_project/src/Pages/InGame.tsx
Unescape View File

@ -3,7 +3,7 @@ import Switch from "react-switch";
/* Style */
import "./InGame.css"
import {useTheme} from '../Style/ThemeContext'
/* Component */
import GraphContainer from '../Components/GraphContainer';
import ChoiceBar from '../Components/ChoiceBar';
@ -31,6 +31,7 @@ import Stub from '../source/Stub';
import { HiLanguage } from 'react-icons/hi2';
import { Nav, NavDropdown } from 'react-bootstrap';
import { FormattedMessage } from 'react-intl';
import Color from '../source/Color';
//@ts-ignore
const InGame = ({locale, changeLocale}) => {
@ -55,7 +56,7 @@ const InGame = ({locale, changeLocale}) => {
];
const theme = useTheme();
const [showChoiceBar, setShowChoiceBar] = useState(false);
@ -116,7 +117,10 @@ const InGame = ({locale, changeLocale}) => {
return (
<div id="mainDiv">
<div className='upperInfo'>
<div className='upperInfo'
style={{
borderColor: theme.colors.secondary
}}>
{/* texte changeable et a traduire */}
<p>Dummy, à vous de jouer !</p>
</div>
@ -125,20 +129,34 @@ const InGame = ({locale, changeLocale}) => {
</div>
<div className='playerlistDiv'>
<button className='button' onClick={handleChangeP}>
<button className='button'
style={{
backgroundColor: theme.colors.primary,
borderColor: theme.colors.secondary
}}
onClick={handleChangeP}>
Players
</button>
</div>
<div className='paramDiv'>
<button className='button' onClick={handleChangeS}>
<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'>
<button className='button'
style={{
backgroundColor: theme.colors.primary,
borderColor: theme.colors.secondary
}}>
<img src={Info} alt="info" height="40"/>
</button>
</Link>
@ -147,12 +165,20 @@ const InGame = ({locale, changeLocale}) => {
</button> */}
<Link to='/info' target='_blank'>
<button className='button'>
<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}>
<button className='button' onClick={handleChange}
style={{
backgroundColor: theme.colors.primary,
borderColor: theme.colors.secondary
}}>
<img src={Alpha} alt="indice" height="40"/>
</button>
</div>

6
cryptide_project/src/Pages/Lobby.css
Unescape View File

@ -4,7 +4,7 @@
background-color: #fff;
min-height: 100vh;
font-size: calc(10px + 2vmin);
color: #2A4541;
/* color: #2A4541; */
}
.left-section {
@ -14,8 +14,8 @@
}
.lobby-vertical-divider{
width: 5px;
background-color: #2A4541;
width: 10px;
/* background-color: #2A4541; */
}
.right-section {

10
cryptide_project/src/Pages/Lobby.tsx
Unescape View File

@ -1,10 +1,14 @@
import React, { useEffect, useState } from 'react';
import './Lobby.css';
import PlayerItemList from '../Components/PlayerItemList'
import { useTheme } from '../Style/ThemeContext';
/* res */
import PersonImg from '../res/img/Person.png';
import Bot from '../res/img/bot.png';
import param from '../res/icon/param.png';
import cible from '../res/icon/cible.png';
/* Component */
import ButtonImgNav from '../Components/ButtonImgNav';
import { io } from 'socket.io-client';
import { Link } from 'react-router-dom';
@ -20,9 +24,11 @@ import { random } from 'lodash';
import Player from '../model/Player';
import PlayerItemList from '../Components/PlayerItemList'
function Lobby() {
const navigate = useNavigate();
const theme = useTheme()
const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setRoomData } = useGame();
@ -95,7 +101,7 @@ function Lobby() {
</div>
</div>
<div className="lobby-vertical-divider"></div>
<div className="lobby-vertical-divider" style={{backgroundColor: theme.colors.secondary}}></div>
<div className='right-part'>
<div className='title-param-div'>

9
cryptide_project/src/Pages/Play.css
Unescape View File

@ -79,10 +79,13 @@
width:200px;
height: 8vh;
background-color: #85C9C2;
color: #2A4541;
/* background-color: #85C9C2;
color: #2A4541; */
color: white;
border: solid;
border-radius: 15px;
border-width: 0;
border-width: 2px;
font-size:larger;
}

18
cryptide_project/src/Pages/Play.tsx
Unescape View File

@ -1,7 +1,8 @@
import React, { useEffect, useState } from 'react';
/* Page */
/* Style */
import './Play.css';
import { useTheme } from '../Style/ThemeContext';
/* Nav */
import { Link } from 'react-router-dom';
@ -21,6 +22,7 @@ import { useNavigate } from 'react-router-dom';
function Play() {
<<<<<<< HEAD
const [room, setRoom] = useState(null);
const navigate = useNavigate();
@ -55,6 +57,9 @@ function Play() {
=======
const theme=useTheme()
>>>>>>> faf141d (ajout d'un theme global pour toutes les couleurs primaire, secondaire et quelque texte principaux :lipstick:)
return (
<div className="MainContainer">
@ -76,12 +81,21 @@ function Play() {
/>
</div>
<div className='buttonGroupVertical'>
<<<<<<< HEAD
<Link to="/">
<button className="ButtonNav"> Jouer seul </button>
</Link>
<button onClick={createLobby} className="ButtonNav"> Créer une partie </button>
=======
<Link to="/lobby">
<button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
</Link>
<Link to="/">
<button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
</Link>
>>>>>>> faf141d (ajout d'un theme global pour toutes les couleurs primaire, secondaire et quelque texte principaux :lipstick:)
<Link to="/">
<button className="ButtonNav"> Rejoindre </button>
<button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
</Link>
</div>
</div>

10
cryptide_project/src/Style/Color.tsx
Unescape View File

@ -0,0 +1,10 @@
const COLORS = {
primary:'#0064E0',
secondary:'',
tertiary:'',
white: '#fff',
black: '#000',
}
export default COLORS;

2
cryptide_project/src/Style/Global.css
Unescape View File

@ -23,7 +23,7 @@
}
.statusDiv{
background-color: #A7E2DC;
/* background-color: #A7E2DC; */
border-radius: 15px;
height: 30px;

13
cryptide_project/src/Style/Theme.tsx
Unescape View File

@ -0,0 +1,13 @@
// theme.js
const theme = {
colors: {
primary: '#0064E0',
secondary: '#0052B8',
text: '#fff'
//faire une gestion dark/light
},
};
export default theme;

15
cryptide_project/src/Style/ThemeContext.tsx
Unescape View File

@ -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 }}
Write Preview
Loading…
Cancel
Save