Comments and code cleanup

ReadME.md

@@ -0,0 +1,173 @@
+# Cryptids board game
+## Table of Contents
+1. [For players](#for-players)
+
+    1.1 [Description](#description)
+
+    1.2 [Gameplay Overview](#gameplay-overview)
+
+2. [For developers](#for-developers)
+
+    2.1 [File and Code Structure](#file-and-code-structure)
+
+    2.2 [GitHub Branch Naming](#github-branch-naming)
+
+    2.3 [Project Setup](#project-setup)
+
+    2.4 [Deploying to the Server](#deploying-to-the-server)
+
+    2.5 [Versions](#versions)
+
+
+
+# For Players
+
+## Description
+
+Cryptids Online is a digital adaptation of the popular board game, Cryptids. This online version allows players to experience the thrill of hunting for elusive creatures from the comfort of their own homes. Engage in strategic deduction and exploration with friends or other players worldwide, as you each strive to be the first to uncover the hidden cryptid's location. Whether you're a seasoned player or new to the game, Cryptids Online offers a captivating and interactive gameplay experience.
+
+
+## Gameplay Overview
+
+In Cryptids Online, each player takes on the role of a cryptozoologist, racing to locate a mysterious creature known as the cryptid. The game revolves around collecting and analyzing clues to narrow down the possible locations of the cryptid. Players use logic and deduction to interpret these clues and make strategic moves on the map. The first player to correctly identify the cryptid's location wins the game.
+
+### Key Actions
+
+1. **Explore**: Move your token to different locations on the map to gather clues.
+2. **Deduce**: Use the clues you've collected to rule out impossible locations.
+3. **Challenge**: If you think you know where the cryptid is hiding, issue a challenge and see if you're correct!
+
+
+# For developers
+## File and Code Structure
+
+### General
+
+#### Naming Convention
+
+- We will be using a snake naming convention for variables (e.g. num_users)
+  - Motivation: [CamelCase vs. Under_score](https://www.cs.kent.edu/~jmaletic/papers/ICPC2010-CamelCaseUnderScoreClouds.pdf)
+
+#### Comments
+
+1. Comments should be clear.
+2. Each file should contain a multi-line comment at the beginning of the file indicating the type of file (component, service, model, etc.).
+3. Follow the following comment outline:
+
+| // -- ToDo: ____ | Outline something that still needs to be completed in the file code |
+| --- | --- |
+| /* Function …. */ | Multi-line comment above function definitions to outline what the function does. Should like similar to multi-line comment @ beginning of file |
+| // -- xyz | 1-liner comment to outline a patch of code below it |
+
+### Frontend
+
+#### File Structure
+
+- The code should be structured in a nested folder-file system. Files will be in camel-case naming convention.
+
+
+The application will have the following folders:
+
+1. Components
+    - Contains React component .js files
+
+2. Styles
+    - Contains .css files for each component
+
+3. Services
+    - Contains .js files that specifically access APIs or produce functional code that does not interfere with a component directly
+
+4. Models
+    - Contains .js files that are data models for required objects
+
+5. Pages
+    - React component .js files that are specifically pages
+
+## GitHub Branch Naming
+
+- Kebab case when naming
+
+  **Format:** 
+
+  ``` 
+  <main-idea>/<description-of-idea> 
+  ```
+
+  examples:
+
+  ```
+  bug/fixing-login-failed
+
+  feature/adding-admin-capabilities
+
+  page/tutorial
+  ```
+
+## Project Setup
+
+1. Clone the repository from [GitHub](https://github.com/LukeRenton/CryptidsGame)
+
+```bash
+git clone https://github.com/LukeRenton/CryptidsGame
+```
+
+2. Navigate to `CryptidsGame/`
+
+```bash
+cd CryptidsGame/
+```
+
+3. Set up dependencies for local testing, for client
+
+```bash
+cd client/
+npm install
+# ---
+
+```
+
+4. For server (assuming you are in the root directory)
+
+```bash
+cd server/
+npm install express
+```
+
+5. Your project is all set up!
+
+## Deploying to the Server
+
+- Note: Assume you are in the root directory `.../CryptidsGame/`
+
+### 1. Build your React files:
+
+```bash
+cd client/
+npm run build
+# (ensure you return to the root directory for step 2)
+cd ..
+```
+
+### 2. Push your changes
+
+- **Note:** Make sure you are back in the root directory after building files
+
+```bash
+git add . && git commit -m "your commit message" && git push
+```
+
+### 3. Merge changes (if not on master branch)
+
+1. Go to [GitHub Repository](https://github.com/LukeRenton/CryptidsGame)
+2. Navigate to your selected branch
+3. Select "Make a pull request"
+4. Ask someone to review your pull request and confirm it
+5. Merge the pull request
+6. Check out your changes after it has deployed!
+
+[cryptidsgame-app.azurewebsites.net](http://cryptidsgame-app.azurewebsites.net/)
+
+## Versions
+
+- Node: 18.17.0
+- Bootstrap: v5

client/build/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.dd8c6356.css",
-    "main.js": "/static/js/main.f05a46b2.js",
+    "main.js": "/static/js/main.a2bd624f.js",
     "static/media/forest_animation.mp4": "/static/media/forest_animation.239347dfe9755133bd14.mp4",
     "static/media/wall-background.mp4": "/static/media/wall-background.9691b868f5274a0471f2.mp4",
     "static/media/cryptid-background.mp4": "/static/media/cryptid-background.af864c7aa5878e2d51e9.mp4",
@@ -35,10 +35,10 @@
     "static/media/info.svg": "/static/media/info.86375dfea0b36eba22b87e3829720254.svg",
     "index.html": "/index.html",
     "main.dd8c6356.css.map": "/static/css/main.dd8c6356.css.map",
-    "main.f05a46b2.js.map": "/static/js/main.f05a46b2.js.map"
+    "main.a2bd624f.js.map": "/static/js/main.a2bd624f.js.map"
   },
   "entrypoints": [
     "static/css/main.dd8c6356.css",
-    "static/js/main.f05a46b2.js"
+    "static/js/main.a2bd624f.js"
   ]
 }

client/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Cryptid</title><script defer="defer" src="/static/js/main.f05a46b2.js"></script><link href="/static/css/main.dd8c6356.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Cryptid</title><script defer="defer" src="/static/js/main.a2bd624f.js"></script><link href="/static/css/main.dd8c6356.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

client/src/Components/Cylinder.js

@@ -8,35 +8,5 @@ export default function Cylinder(props) {
   // Render the cylinder element with dynamic styles
     return (
       <div class="cylinder" style={{background: `radial-gradient(50% 20px at 50% 10px, #0003 99.99%, #0000 0), radial-gradient(50% 10px at 50% calc(100% - 10px), #fff3 99.99%, #0000 0), ${props.color}`, transform: `translateZ(${80+10*props.index}px) translateY(30px) translateX(50px)`}}></div>
-    //   <div id="container">
-    //   <div id="frame">
-    //     <div class="strips">
-    //       <div class="strip-1"></div>
-    //       <div class="strip-2"></div>
-    //       <div class="strip-3"></div>
-    //       <div class="strip-4"></div>
-    //       <div class="strip-5"></div>
-    //       <div class="strip-6"></div>
-    //       <div class="strip-7"></div>
-    //       <div class="strip-8"></div>
-    //       <div class="strip-9"></div>
-    //       <div class="strip-10"></div>
-    //       <div class="strip-11"></div>
-    //       <div class="strip-12"></div>
-    //       <div class="strip-13"></div>
-    //       <div class="strip-14"></div>
-    //       <div class="strip-15"></div>
-    //       <div class="strip-16"></div>
-    //       <div class="strip-17"></div>
-    //       <div class="strip-18"></div>
-    //       <div class="strip-19"></div>
-    //       <div class="strip-20"></div>
-    //       <div class="strip-21"></div>
-    //       <div class="strip-22"></div>
-    //       <div class="strip-23"></div>
-    //       <div class="strip-24"></div>
-    //     </div>
-    //   </div>
-    // </div>
     )
 }

client/src/Components/Hex.js

@@ -17,7 +17,6 @@ export default function Hex( props ) {
   const [positivePieces, setPositivePieces] = useState([]);
   const [negativePieces, setNegativePieces] = useState([]);
 
-  // const [] = useState();
   // Function to render pieces on the hex
   const renderPieces = () => {
     return props.pieces.map((piece) => {
@@ -37,12 +36,6 @@ export default function Hex( props ) {
     setShowTooltip(false);
   }
 
-  // const handleMouseHover = (event) => {
-  //   setMouseX(event.clientX);
-  //   setMouseY(event.clientY);
-  //   console.log('x: '+mouseX);
-  // }
-
   // Function to handle click event  
   const handleClick = () => {
     // Logic for placing positive, negative pieces or making a search
@@ -89,17 +82,13 @@ export default function Hex( props ) {
 
   // Function to render negative pieces
   const renderNegativePieces = () => {
-    // const negativePieces = [{row: 0, col: 0, player: 1}];
-    // const negativePieces = props.gameState.negativePieces.filter(piece => {return (piece.row === props.hexRow && piece.col === props.hexCol && piece.tileNum === props.tileNum)});
     return negativePieces.filter(piece => {return (piece.row === props.hexRow && piece.col === props.hexCol && piece.tileNum === props.tileNum)}).map(piece => {
       return <PlayerCube color={colours[piece.player]}></PlayerCube>
     });
   }
 
   // Function to render positive pieces
   const renderPositivePieces = () => {
-    // const negativePieces = [{row: 0, col: 0, player: 1}];
-    // const positivePieces = props.gameState.positivePieces.filter(piece => {return (piece.row === props.hexRow && piece.col === props.hexCol && piece.tileNum === props.tileNum)});
     return positivePieces.filter(piece => {return (piece.row === props.hexRow && piece.col === props.hexCol && piece.tileNum === props.tileNum)}).map((piece, index) => {
       return <Cylinder color={colours[piece.player]} index={index}></Cylinder>
     });
@@ -129,7 +118,6 @@ export default function Hex( props ) {
     const actual_row = destRow % 3;
     const actual_col = destCol % 6;
 
-    // console.log({row: actual_row, col: actual_col, tile: tile_num});
     console.log(props.tileNumByPosition);
 
     if (tile_num === props.tileNumByPosition && actual_row === props.hexRow && actual_col === props.hexCol) {