Write Readme and add color differentiation for clicked tiles

README.md

@@ -1,15 +1,7 @@
-# Rocket Academy Coding Bootcamp: Project 1: Frontend App
+# Rocket Academy Coding Bootcamp: Project 1 - WAFFLE
 
-https://bc.rocketacademy.co/1-frontend/1.p-frontend-app
+Hello! Welcome to my first [Bootcamp](https://bc.rocketacademy.co/1-frontend/1.p-frontend-app) project, a clone of the WAFFLE game. Give it a try [here](https://peanutyabing.github.io/project-waffle/)!
 
-## Available Scripts
+I built this game to practice using React, and chose WAFFLE as I loved playing the [original game](https://wafflegame.net/) created by [James Robinson](https://twitter.com/jamesjessian).
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+Please tell me what you think and what other features you would like you see in the Discussions.

src/App.css

@@ -123,9 +123,11 @@ h1 {
   max-height: 70px;
   font-size: 26pt;
   font-weight: 800;
-  cursor: pointer;
   border-radius: 6px;
   border-bottom: 5px solid rgba(26, 26, 27, 0.12);
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 }
 
 #swops-left {

src/Components/Tiles.js

@@ -7,7 +7,7 @@ import { dictionary } from "../Waffle-maker/definitions.js";
 import { Button } from "react-bootstrap";
 
 export const holes = ["11", "13", "31", "33"];
-let dailyWaffleState; // This variable keeps track of the last state under Daily Mode, when user toggles between Unlimted and Daily
+let dailyWaffleState; // This variable keeps track of the last state under Daily Mode, and will be updated in componentDidUpdate()
 
 export default class Tiles extends React.Component {
   constructor(props) {
@@ -120,12 +120,16 @@ export default class Tiles extends React.Component {
     const tileId = e.target.id;
     const tileColor = this.state.waffle.filter((tile) => tile.id === tileId)[0]
       .color;
+    const updatedWaffle = [...this.state.waffle];
+    const thisTile = updatedWaffle.filter((tile) => tile.id === tileId)[0];
     if (this.hasWon() || this.hasLost() || tileColor === palette.green) {
       return;
     } else if (this.state.pairToSwop.length < 2) {
+      thisTile.color = `${thisTile.color}60`;
       this.setState(
         {
           pairToSwop: [...this.state.pairToSwop, tileId],
+          waffle: updatedWaffle,
         },
         () => this.swopLetters(this.state.pairToSwop)
       );
@@ -136,7 +140,7 @@ export default class Tiles extends React.Component {
     if (pairIdArr.length === 2) {
       if (pairIdArr[0] === pairIdArr[1]) {
         this.setState({ pairToSwop: [] });
-        alert("Can't swop a tile with itself!");
+        this.updateColor();
         return;
       }
       const updatedWaffle = [...this.state.waffle];
@@ -204,7 +208,7 @@ export default class Tiles extends React.Component {
       const colSolution =
         currentCol % 2 === 0 ? solutionCopy[`col${currentCol}`] : "";
       if (holes.includes(tile.currCoord) || tile.color === palette.green) {
-        // skip if tile is a hole, or tile is already green
+        // skip
       } else if (
         rowSolution.includes(tile.letter) ||
         colSolution.includes(tile.letter)
@@ -220,18 +224,14 @@ export default class Tiles extends React.Component {
         tile.color = palette.grey;
       }
     }
-    this.setState(
-      { waffle: waffle },
-      () => {
-        if (this.state.dailyMode) {
-          this.storeState();
-        }
-        if (this.hasLost()) {
-          this.renderBlackWaffle();
-        }
+    this.setState({ waffle: waffle }, () => {
+      if (this.state.dailyMode) {
+        this.storeState();
       }
-      // this.hasLost() ? this.renderBlackWaffle : this.storeState
-    );
+      if (this.hasLost()) {
+        this.renderBlackWaffle();
+      }
+    });
   };
 
   removeLetterFromSolution = (tile, row, col, solution) => {

src/Waffle-maker/definitions.js

@@ -1,3 +1,5 @@
+// Definitions obtained from https://github.com/meetDeveloper/freeDictionaryAPI, with customisation
+
 export const dictionary = {
   which: [
     {

src/Waffle-maker/indexed-words.js

@@ -1,3 +1,5 @@
+// Words obtained from https://www-cs-faculty.stanford.edu/~knuth/sgb-words.txt, with customisation
+
 export const indexedWords = {
   w: [
     "which",

src/Waffle-maker/waffle-maker-2.js

@@ -1,16 +1,15 @@
 import { indexedWords } from "./indexed-words.js";
 import { words } from "./words.js";
 import { palette } from "../Palette.js";
-// import fs from "fs";
 
+//// The following code was used to write the file containing 313 waffles:
+// import fs from "fs";
 // fs.writeFile("./daily-waffles-2023.js", makeDailyWaffles(), (err) => {
 //   if (err) {
 //     console.error(err);
 //   }
 // });
 
-// makeDailyWaffles();
-
 export const makeDailyWaffles = () => {
   const dailyWaffles = [];
   for (let i = 0; i < 313; i++) {
@@ -125,7 +124,7 @@ function findMatchingWord(firstLetter, middleLetter, lastLetter) {
 }
 
 function getSwoppableIndices() {
-  // Holes are indexed 6, 8, 16, and 18 and are not available for swops
+  // Holes are indexed 6, 8, 16, and 18 and are not available for swops, ever!
   // Nodes are indexed 0, 4, 12, 20, and 24 and are not to be pre-scrambled
   return [1, 2, 3, 5, 7, 9, 10, 11, 13, 14, 15, 17, 19, 21, 22, 23];
 }

src/Waffle-maker/words.js

@@ -1,3 +1,5 @@
+// Words obtained from https://www-cs-faculty.stanford.edu/~knuth/sgb-words.txt, with customisation
+
 export const words = [
   "which",
   "there",