Updated Comments and Player Colours

client/src/Components/BoardInfo.js

@@ -41,6 +41,7 @@ export default function BoardInfo( props ) {
         }
     }
 
+    // Function to handle the logic of changing a player 
     const handlePlayerChange = (newPlayerNum) => {
         const state = { ...props.gameState, playerTurn: newPlayerNum };
         props.setGameState(state);

client/src/Components/Moves.js

@@ -4,9 +4,10 @@ import dropdown from '../Icons/dropdown.png'
 import { colours } from '../Models/PlayerColours'
 
 export default function Moves( props ) {
-
+    // useState hook to manage the state of which player's moves to show
     const [showPlayerMoves, setShowPlayerMoves] = useState(-1);
-
+
+    // Function to handle clicks on player headers, setting the state to show/hide the moves list
     const handleClick = (playerNum) => {
         setShowPlayerMoves(playerNum-1);
     }

client/src/Models/Tile.js

@@ -1,5 +1,6 @@
 class Tile {
     constructor(tile_number, row, col, type, animal_territory = null, playing_piece = null) {
+      // Constructor to initialize properties of a tile object
       this._tile_number = tile_number;
       this._row = row;
       this._col = col;
@@ -8,42 +9,52 @@ class Tile {
       this._playing_piece = playing_piece;
     }
 
+    // Method to generate the filename for the tile's image  
     get_tile_image() {
       return `${this._tile_number}_${this._row}_${this._col}.png`;
     }
-
+
+    // Setter method for setting the playing piece on the tile
     set playing_piece(piece) {
       this._playing_piece = piece;
     }
-
+
+    // Setter method for setting the animal territory associated with the tile
     set animal_territory(territory) {
       this._animal_territory = territory;
     }
 
+    // Getter method to access the tile number  
     get tile_number() {
       return this._tile_number;
     }
 
+    // Getter method to access the row position of the tile  
     get row() {
       return this._row;
     }
 
+    // Getter method to access the column position of the tile
     get col() {
       return this._col;
     }
 
+    // Getter method to access the type of the tile  
     get type() {
       return this._type;
     }
 
+    // Getter method to access the playing piece on the tile
     get playing_piece() {
       return this._playing_piece;
     }
 
+    // Getter method to access the animal territory associated with the tile  
     get animal_territory() {
       return this._animal_territory;
     }
 
+    // Public method to get the tile image filename  
     get tile_image() {
       return this.get_tile_image();
     }

client/src/Pages/Tutorial.js

@@ -14,8 +14,11 @@ import '../Styles/Tutorial.css'
 import { useNavigate } from 'react-router-dom';
 import PlantButton from '../Components/PlantButton';
 
+// Functional component for the Tutorial page
 export default function Tutorial() {
     const navigate = useNavigate();
+
+  // Return the JSX elements for the Tutorial component  
   return (
     <div className='tutorial-root'>
         <div className="tutorial-image-container">