Some stuff with guessing, New toHex() method for Paints, and other fixes

classes/Controller.js → Classes/Controller.js

@@ -4,6 +4,8 @@ class Controller{
         this.model = new Model();
         this.view = new View();
         this.view.display();
+
+        this.prevGuesses = []
     }
 
     handleAddButton(){
@@ -23,4 +25,22 @@ class Controller{
         }
         this.view.display();
     }
+
+    handleGetGuess() {
+        let guess
+        let guessValid = false
+
+        //loops the prompt until the guess is valid (at least 5 chars)
+        while (!guessValid) {
+            guess =  prompt("Input guess here:")
+            if (!guess || !(guess.length == 5)) {
+                continue
+            }
+            guessValid = true
+        }
+
+        this.model.userGuess(guess)
+        this.prevGuesses.push(guess)
+        this.view.showPreviousGuesses(this.prevGuesses)
+    }
 }

classes/Model.js → Classes/Model.js

@@ -4,6 +4,8 @@ class Model{
     constructor(){
         // todo
         this.score = 0;
+        this.word  = ""
+        this.prevGuesses = []
         console.log("hello from inside of Model constructor");
     }
 
@@ -27,6 +29,14 @@ class Model{
     }
 
     getRandomWord(list){
-        return list[Math.floor(Math.random() * list.length)];
+        let randWord = list[Math.floor(Math.random() * list.length)]
+        this.word = randWord
+        return randWord;
+    }
+
+    //might need to be added onto later
+    userGuess(guess) {
+        this.prevGuesses.push(guess)
+        return (guess == this.word)
     }
 }

Classes/Paint.js

@@ -3,6 +3,15 @@ const DEFAULT_RED        = 0
 const DEFAULT_GREEN      = 0
 const DEFAULT_BLUE       = 0
 
+const HEX_VALUES = [
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F"
+]
+
 class Paint {
     //supports a single argument better c:
     constructor(red, green, blue) {
@@ -73,7 +82,7 @@ class Paint {
         let newColor = this.copy();
 
         let colorAvg = Math.round((newColor.R + newColor.G + newColor.B) / 3);
-        newColor.changeColor(colorAvg);
+        newColor.changeColor(colorAvg, colorAvg, colorAvg);
 
         return newColor;
     }
@@ -94,6 +103,31 @@ class Paint {
         return new Paint(colorVals[0], colorVals[1], colorVals[2])
     }
 
+    //just in case...
+    toHex() {
+        let hexString = "#" //remove # if its not needed
+
+        for (let rgb of this.getColor()) { //gets all 3 values
+            for(let i = 1; i <= 2; i++) {
+                let hexVal
+                if (i % 2 == 1) {
+                    hexVal = Math.floor(rgb / 16)
+                }
+                else {
+                    hexVal = rgb % 16
+                }
+
+                if (hexVal > 9) {
+                    hexVal = HEX_VALUES[hexVal - 10]
+                }
+
+                hexString += hexVal + ""
+            }
+        }
+
+        return hexString
+    }
+
     //no clue why anyone would use p5 colors over this but whatever (transparency or something?)
     toP5Color() {
         return color(this.R, this.G, this.B)

Classes/Theme.js

@@ -60,7 +60,7 @@ class Theme {
             let colorVal = this[colorName]
             let oldColor = colorVal.toGrayscale()
 
-            this.colorName = oldColor
+            this[colorName] = oldColor
         }
     }
 

classes/View.js → Classes/View.js

@@ -16,6 +16,7 @@ class View{
             <p id="scoreDisplay">check the console</p>
             <button onclick="app.handleAddButton()">add</button>
             <p id="guessDisplay">Previous guesses</p>
+            <button onclick="app.handleGetGuess()">guess</button>
         `;
     }
 

index.html

@@ -7,11 +7,11 @@
 
 <div id="stage">This is the stage. View object will change what is displayed on the stage</div>
 
-<script src="classes/Paint.js"></script>
-<script src="classes/Theme.js"></script>
-<script src="classes/Model.js"></script>
-<script src="classes/View.js"></script>
-<script src="classes/Controller.js"></script>
+<script src="Classes/Paint.js"></script>
+<script src="Classes/Theme.js"></script>
+<script src="Classes/Model.js"></script>
+<script src="Classes/View.js"></script>
+<script src="Classes/Controller.js"></script>
 <script>
     const app = new Controller();
 </script>