Skip to content

Commit

Permalink
design
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarchAle
MarchAle committed Apr 17, 2023
1 parent 0f25bca commit 5123796
Show file tree
Hide file tree
Showing 16 changed files with 285 additions and 207 deletions.
4 changes: 2 additions & 2 deletions front/react_project/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ button:hover {

.App {
background-color: var(--prim-color);
/* background: url(./assets/background1.png) no-repeat center center fixed;
background-size: cover; */
background: url(./assets/trianglyfy5.png) no-repeat center center fixed;
background-size: cover;
display: flex;
/* background-color: rgb(75, 29, 138); */
/* border: 2px black dotted; */
Expand Down
Binary file added front/react_project/src/assets/trianglify-lowres.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added front/react_project/src/assets/trianglyfy1.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added front/react_project/src/assets/trianglyfy2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added front/react_project/src/assets/trianglyfy3.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added front/react_project/src/assets/trianglyfy4.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added front/react_project/src/assets/trianglyfy5.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 43 additions & 39 deletions front/react_project/src/components/Game.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,10 +254,9 @@ const Game: React.FC = () => {
}));
}
};


const [gameWidth, setGameWidth] = useState<number>(window.innerWidth * 0.8);
const [gameHeight, setGameHeight] = useState<number>(window.innerWidth * 0.8 / (16 / 9));

const [gameWidth, setGameWidth] = useState<number>(window.innerWidth * 0.8 * 0.8);
const [gameHeight, setGameHeight] = useState<number>(window.innerWidth * 0.8 * 0.8 / (16 / 9));
// Handle windows resizing
useEffect(() => {
function handleResize() {
Expand All @@ -269,11 +268,11 @@ const Game: React.FC = () => {
window.removeEventListener('resize', handleResize);
};
}, []);

// Get css colors variables to use it in the canva
const style = getComputedStyle(document.documentElement);
const ballColor = style.getPropertyValue('--ball-color');
const secondaryColor = style.getPropertyValue('--secondary-color');
const styleColor = getComputedStyle(document.documentElement);
const ballColor = styleColor.getPropertyValue('--ball-color');
const secondaryColor = styleColor.getPropertyValue('--secondary-color');

useEffect(() => {
let paddleWidth: number = gameWidth * 0.014;
Expand Down Expand Up @@ -307,41 +306,46 @@ const Game: React.FC = () => {
<div id='Game' onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
{/* <h1>Game Page</h1> */}
<MatchsInProgress socket={socket} />
<div id="gamePanel">
{matchInProgress ?
<div id="players">
<div className="player">
<div>{players?.player1_login}</div>
<div>{players?.player1_score}</div>
</div>
<div id="separator"></div>
<div className="player">
<div>{players?.player2_score}</div>
<div>{players?.player2_login}</div>
</div>
</div>
: null}
<div id="gameField">
{matchInProgress || waitMatch ?
null
:
<div id="gameSelector">
{/* <h2>Select your opponent</h2>
<SearchUserBar /> */}
<h2>Select your game</h2>
<div id="gameButtons">
<button className={`gameButton ${waitMatch || matchInProgress ? "locked" : ""}`} onClick={launchClassic}>CLASSIC</button>
<button className={`gameButton ${waitMatch || matchInProgress ? "locked" : ""}`} onClick={launchGame}>SUPER</button>
<div id="gameContainer">
<div id="gamePanel">
{matchInProgress ?
<div id="players">
<div className="player">
<div>{players?.player1_login}</div>
<div>{players?.player1_score}</div>
</div>
<div id="separator"></div>
<div className="player">
<div>{players?.player2_score}</div>
<div>{players?.player2_login}</div>
</div>
</div>
: null}
<div id="gameField">
<canvas ref={canvasRef} tabIndex={0} width={gameWidth} height={gameHeight}></canvas>
{matchInProgress || waitMatch ?
null
:
<div id="gameSelector">
{/* <h2>Select your opponent</h2>
<SearchUserBar /> */}
<h2>Select your game</h2>
<div id="gameButtons">
<button className={`gameButton ${waitMatch || matchInProgress ? "locked" : ""}`} onClick={launchClassic}>CLASSIC</button>
<button className={`gameButton ${waitMatch || matchInProgress ? "locked" : ""}`} onClick={launchGame}>SUPER</button>
</div>
</div>

}
{waitMatch ? <div id="waitingMsg">Waiting for a worthy opponnent ...</div> : null}
{buttonReady ? <button id="readyButton" className="notReady" onClick={informReady}>{playerReady ? "Game will start soon !" : "READY ?"}</button> : null}
{timer ? <div ref={countDownDiv} id="countDown">{countdown}</div> : null}
</div>
{/* <button onClick={TEST}>TEST</button> */}
</div>
<div id="instructions">

}
{waitMatch ? <div id="waitingMsg">Waiting for a worthy opponnent ...</div> : null}
{buttonReady ? <button id="readyButton" className="notReady" onClick={informReady}>{playerReady ? "Game will start soon !" : "READY ?"}</button> : null}
{timer ? <div ref={countDownDiv} id="countDown">{countdown}</div> : null}
<canvas ref={canvasRef} tabIndex={0} width={gameWidth} height={gameHeight}></canvas>
</div>
{/* <button onClick={TEST}>TEST</button> */}
</div>
</div>
)
Expand Down
27 changes: 24 additions & 3 deletions front/react_project/src/components/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,31 @@ interface PageElement {
hit: boolean,
}

const darkenColor = function (color: string, percent: number) {
const match = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/);
if (!match) {
throw new Error('Invalid color string');
}

const r = parseInt(match[1]);
const g = parseInt(match[2]);
const b = parseInt(match[3]);
const a = match[4] ? parseFloat(match[4]) : 1;

const darkenedR = Math.round(r * (1 - percent / 100));
const darkenedG = Math.round(g * (1 - percent / 100));
const darkenedB = Math.round(b * (1 - percent / 100));

return `rgba(${darkenedR}, ${darkenedG}, ${darkenedB}, ${a})`;
};

const DarkenColor = function (stringColor: string, percent: number) {
let r: number = parseInt(stringColor.substring(2, 4), 16) * percent / 100;
let g: number = parseInt(stringColor.substring(4, 6), 16) * percent / 100;
let b: number = parseInt(stringColor.substring(6, 8), 16) * percent / 100;
let alpha: number = parseInt(stringColor.substring(8, 10), 16);

return (`#${Math.round(r).toString(16).padStart(2, '0')}${Math.round(g).toString(16).padStart(2, '0')}${Math.round(b).toString(16).padStart(2, '0')}`);
return (`#${Math.round(r).toString(16).padStart(2, '0')}${Math.round(g).toString(16).padStart(2, '0')}${Math.round(b).toString(16).padStart(2, '0')}${alpha.toString(16).padStart(2, '0')}`);
}

const style = getComputedStyle(document.documentElement);
Expand Down Expand Up @@ -61,7 +80,7 @@ const BallContainer = (props: BallContainerProps) => {
const updateBalls = (balls: BallProps[], CONTAINER_HEIGHT: number, CONTAINER_WIDTH: number, pageElements: { element: DOMRect | null, hit: boolean }[]) => {
const gravity = 0.01;
const frottement = 0.998;
const restitution = 0.98;
const restitution = 0.93;

for (let i = 0; i < balls.length; i++) {
const ball = balls[i];
Expand All @@ -83,6 +102,8 @@ const updateBalls = (balls: BallProps[], CONTAINER_HEIGHT: number, CONTAINER_WID
if (ball.vy > 1.5) {
pageElements[j].hit = true;
}
if (ball.vy < 0.12)
ball.vy = 0;
ball.vy *= -restitution;
ball.y += ball.vy;
}
Expand Down Expand Up @@ -313,7 +334,7 @@ const Home: React.FC = () => {
<div id="title">

<div>
<h1 ref={h1_title} onMouseEnter={onHoverTitle} onMouseLeave={mouseLeave} className="navLink" >ft_transcendance</h1>
<h1 ref={h1_title} onMouseEnter={onHoverTitle} onMouseLeave={mouseLeave} className="navLink" >ft_transcendence</h1>
<div className="shadow"></div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions front/react_project/src/components/MatchsInProgress.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ interface inProgressProps {
const MatchsInProgress: React.FC<inProgressProps> = (props) => {

const [matchs, setMatchs] = useState<MatchState[]>([
// {player1_login: "JOUEUR1", player2_login: "JOUEUR2", player1_score: 3, player2_score: 1, super_game_mode: false, game_has_started: true},
// {player1_login: "Rorger", player2_login: "Conrnard", player1_score: 2, player2_score: 0, super_game_mode: false, game_has_started: true},
{player1_login: "JOUEUR1", player2_login: "JOUEUR2", player1_score: 3, player2_score: 1, super_game_mode: false, game_has_started: true},
{player1_login: "Rorger", player2_login: "Conrnard", player1_score: 2, player2_score: 0, super_game_mode: false, game_has_started: true},
// {player1_login: "Roger", player2_login: "Connard", player1_score: 2, player2_score: 0, super_game_mode: false, game_has_started: true},
// {player1_login: "Michellangelloooooooooooooooooooooooooooooooooooooiiiiii", player2_login: "Michellangelloooooooooooooooooooooooooooooooooooooiiiiiifez", player1_score: 0, player2_score: 10, super_game_mode: false, game_has_started: true},
// {player1_login: "Michellangelloooooooooooiiiiii", player2_login: "Oui", player1_score: 0, player2_score: 10, super_game_mode: false, game_has_started: true},
// {player1_login: "Michellangeiiii", player2_login: "Ouiii", player1_score: 0, player2_score: 10, super_game_mode: false, game_has_started: true},
{player1_login: "Michellangeiiii", player2_login: "Ouiii", player1_score: 0, player2_score: 10, super_game_mode: false, game_has_started: true},
]);


Expand Down Expand Up @@ -112,7 +112,7 @@ const MatchsInProgress: React.FC<inProgressProps> = (props) => {
})
:
<div id="noMatch">
No Match in progress
<p>No Match in progress</p>
</div>
}
</div>
Expand Down
13 changes: 11 additions & 2 deletions front/react_project/src/styles/Base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
--text-color: #4F200D;
--ball-color: #ffd500; */

--prim-color: #264653;
/* --prim-color: #264653;
--second-color: #2a9d8f;
--third-color: #4a214a;
--text-color: #ffe5db;
--ball-color: #f4a261;
--ball-color: #f4a261; */

/* --prim-color: #5f0f40;
--second-color: #1d8ca8;
Expand All @@ -26,4 +26,13 @@
--third-color: #4a214a;
--text-color: #ffe5db;
--ball-color: #ff5a5f; */

/* 5 */
--prim-color: #0b3954;
/* --second-color: #1374b2; */
--second-color: #33469c77;
--third-color: #21c787e1;
--fourth-color: #13b4c0e1;
--text-color: #fff6fa;
--ball-color: #f6f7ffe1;
}

0 comments on commit 5123796

Please sign in to comment.