Merge pull request #57 from zstenger93/dev

Dev

.github/workflows/build_and_deploy.yaml

@@ -0,0 +1,44 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+
+      - name: Install Dependencies
+        working-directory: frontend  # Specify the frontend folder
+        run: npm install
+
+      - name: Run Tests
+        working-directory: frontend
+        run: npm test
+
+      - name: Build Frontend
+        working-directory: frontend
+        run: npm run build
+
+  deploy:
+    runs-on: ubuntu-latest
+
+    needs: build
+
+    steps:
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/[email protected]
+        with:
+          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: frontend/build  # Adjust this path to match your structure

README.md

@@ -100,10 +100,11 @@ Tailwindcss
 			- AI Opponent
 			- Multiplayer
 			- Modded
+			- 3D
 		- Future game
 	- Chat
-		- Different Channels
-		- Online Users (later)
+		- Channels
+		- Online
 		- Image Sharing
 	- Profile
 	- About Us
@@ -172,13 +173,13 @@ Backend structure setup :white_check_mark:
 
 First mindmap :white_check_mark:
 
-Docker files for services :x:
+Docker files for services :white_check_mark:
 
 docker-compose.dev :x: :white_check_mark:
 
 Hashed passwords :x:
 
-Using OAuth system from 42 :x:
+Using OAuth system from 42 :white_check_mark:
 
 Setting unique username :x:
 
@@ -218,21 +219,21 @@ The game must be responsive :x:
 11 Minor module
 
 - **Web**
-	- *Major module*: Use a framework as backend :x:
-	- *Minor module*: Use a front-end framework or toolkit :x:
-	- *Minor module*: Use a database for the backend :x:
+	- *Major module*: Use a framework as backend :white_check_mark:
+	- *Minor module*: Use a front-end framework or toolkit :white_check_mark: :question:
+	- *Minor module*: Use a database for the backend :white_check_mark:
 	- *Major module*: Store the score of a tournament in the Blockchain :x:
 - **User Management**
 	- *Major module*: Standard user management, authentication, users across tournaments :x:
-	- *Major module*: Implementing a remote authentication :x:
+	- *Major module*: Implementing a remote authentication :white_check_mark:
 - **Gameplay and User Experience**
 	- *Major module*: Remote players :x:
 	- *Major module*: Multiplayer (more than 2) :x:
 	- *Major module*: Add Another Game with User History and Matchmaking :x:
 	- *Minor module*: Game customization options :x:
 	- *Major module*: Live chat :x:
 - **AI-Algo**
-	- *Major module*: Introduce an AI opponent :x:
+	- *Major module*: Introduce an AI opponent :white_check_mark:
 	- *Minor module*: User and game stats dashboard :x:
 - **Cybersecurity**
 	- *Major module*: Implement WAF/ModSecurity with Hardened Configuration and HashiCorp Vault for Secrets Management :x:
@@ -246,8 +247,8 @@ The game must be responsive :x:
 	- *Major module*: Use advanced 3D techniques :x:
 - **Accessibility**
 	- *Minor module*: Support on all devices :x:
-	- *Minor module*: Expanding browser compatibility :x:
-	- *Minor module*: Multiple language support :x:
+	- *Minor module*: Expanding browser compatibility :white_check_mark:
+	- *Minor module*: Multiple language support :white_check_mark:
 	- *Minor module*: Add accessibility for visually impaired users :x:
 	- *Minor module*: Server-side rendering (SSR) integration :x:
 - **Object Oriented**

frontend/package.json

@@ -1,6 +1,7 @@
 {
   "name": "frontend",
   "version": "0.1.0",
+  "homepage": "https://zstenger93.github.io/Transcendence",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

frontend/src/components/Profile.js

@@ -277,17 +277,22 @@ function Profile() {
           </div>
           <div className="mt-8 flex justify-center space-x-4">
             <button
-              className={`w-36 bg-blue-300 bg-opacity-80 text-gray-500 ${
-                showFriendsList ? "bg-purple-600" : "hover:bg-purple-600"
-              } hover:bg-opacity-50 text-gray-300 font-bold py-2 px-4 rounded`}
+              className={`w-36 bg-blue-300 bg-opacity-80 font-bold py-2 px-4 rounded 
+              ${
+                showFriendsList
+                ?
+                "bg-purple-600 text-white"
+                :
+                "text-gray-700 hover:bg-purple-600 hover:text-white"
+              }`}
               onClick={toggleFriendsList}
             >
               {t("Friends")}
             </button>
             <button
-              className={`w-36 bg-blue-300 bg-opacity-80 text-gray-500 ${
-                showMatchHistory ? "bg-purple-600" : "hover:bg-purple-600"
-              } hover:bg-opacity-50 text-gray-300 font-bold py-2 px-4 rounded`}
+              className={`w-36 bg-blue-300 bg-opacity-80 font-bold py-2 px-4 rounded ${
+                showMatchHistory ? "bg-purple-600 text-white" : "text-gray-700 hover:bg-purple-600 hover:text-white"
+              }`}
               onClick={toggleMatchHistory}
             >
               {t("Match History")}

frontend/src/locales/en/translation.json

@@ -42,7 +42,7 @@
   "Ends": "Ends",
   "Home": "Home",
   "Channels & Private Messages": "Channels & Private Messages",
-  "Play or Watch Games": "Play Or Watch Games",
+  "Play or Watch Games": "Play & Watch Games",
   "Profile": "Profile",
   "About Us": "About Us",
   "Logout": "Logout",