From 7a69a4403bf8c76c8c9a08e6b6184d8a0e897a7b Mon Sep 17 00:00:00 2001 From: Wiktor Smaga Date: Wed, 13 Dec 2023 21:29:39 +0100 Subject: [PATCH 1/2] Update README.md --- README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f547e85..0c79465 100644 --- a/README.md +++ b/README.md @@ -24,14 +24,22 @@ Ludo Online is a multiplayer web-based implementation of the classic board game ## Architecture ![Interface](https://github.com/Wenszel/mern-ludo/blob/main/src/images/architecture.png?raw=true) ## Tech Stack + Frontend: + ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![MUI](https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=mui&logoColor=white) + Backend: + ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) ![Socket.io](https://img.shields.io/badge/Socket.io-black?style=for-the-badge&logo=socket.io&badgeColor=010101) ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) + Tests: + ![Mocha](https://img.shields.io/badge/-mocha-%238D6748?style=for-the-badge&logo=mocha&logoColor=white) ![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white) + Tools: + ![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white) ![AWS](https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge&logo=amazon-aws&logoColor=white) ![CircleCI](https://img.shields.io/badge/circle%20ci-%23161616.svg?style=for-the-badge&logo=circleci&logoColor=white) ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) ![Jira](https://img.shields.io/badge/jira-%230A0FFF.svg?style=for-the-badge&logo=jira&logoColor=white) ## Key Features and Challenges @@ -63,4 +71,4 @@ node server.js ## Screenshots -![Interface](https://github.com/Wenszel/mern-ludo/blob/main/src/images/readme1.png?raw=true) \ No newline at end of file +![Interface](https://github.com/Wenszel/mern-ludo/blob/main/src/images/readme1.png?raw=true) From 4e404c83209019c9c3fd4df7a3fc39687144279c Mon Sep 17 00:00:00 2001 From: Wiktor Smaga Date: Thu, 14 Dec 2023 14:42:23 +0100 Subject: [PATCH 2/2] CircleCI Commit --- .circleci/config.yml | 34 +++++++++++++++++++ src/components/Gameboard/Gameboard.jsx | 2 +- .../LoginPage/NameInput/NameInput.jsx | 2 +- src/hooks/useKeyPress.js | 15 ++++---- 4 files changed, 45 insertions(+), 8 deletions(-) create mode 100644 .circleci/config.yml diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 0000000..ac9ca05 --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,34 @@ +version: 2.1 + +jobs: + build_and_test: + docker: + - image: circleci/node:14 + + working_directory: ~/app + + steps: + - checkout + - run: + name: Install Frontend Dependencies + command: | + npm install + - run: + name: Install Backend Dependencies + command: | + cd backend + npm install + - run: + name: Build Frontend + command: | + npm run build + - run: + name: Test Frontend + command: | + npm test + +workflows: + version: 2 + build: + jobs: + - build_and_test diff --git a/src/components/Gameboard/Gameboard.jsx b/src/components/Gameboard/Gameboard.jsx index 99384ac..4265386 100644 --- a/src/components/Gameboard/Gameboard.jsx +++ b/src/components/Gameboard/Gameboard.jsx @@ -47,7 +47,7 @@ const Gameboard = () => { setTime(data.nextMoveTime); setStarted(data.started); }); - }, [socket]); + }, [socket, context.playerId, context.roomId, setRolledNumber]); return ( <> diff --git a/src/components/LoginPage/NameInput/NameInput.jsx b/src/components/LoginPage/NameInput/NameInput.jsx index 137b026..b34dca6 100644 --- a/src/components/LoginPage/NameInput/NameInput.jsx +++ b/src/components/LoginPage/NameInput/NameInput.jsx @@ -1,4 +1,4 @@ -import React, { useState, useContext, useEffect, useCallback } from 'react'; +import React, { useState, useContext, useEffect } from 'react'; import { SocketContext } from '../../../App'; import useInput from '../../../hooks/useInput'; import useKeyPress from '../../../hooks/useKeyPress'; diff --git a/src/hooks/useKeyPress.js b/src/hooks/useKeyPress.js index 70e4a19..1be22b8 100644 --- a/src/hooks/useKeyPress.js +++ b/src/hooks/useKeyPress.js @@ -1,10 +1,13 @@ -import { useEffect } from 'react'; +import { useEffect, useCallback } from 'react'; export default function useKeyPress(targetKey, callback) { - const keyPressHandler = ({ key }) => { - if (key === targetKey) { - callback(); - } - }; + const keyPressHandler = useCallback( + ({ key }) => { + if (key === targetKey) { + callback(); + } + }, + [targetKey, callback] + ); useEffect(() => { window.addEventListener('keydown', keyPressHandler);