Automatic coloring based on a given answer.

index.html

@@ -87,6 +87,10 @@ <h3 class="mini-header">Choose Your Bot</h3>
                 <p class="extra-settings"></p>
         </div>
 
+        <div id="known-answer-div">
+            <input type="text" id="word-known-answer">
+        </div>
+
         <div id="guesses">
             <button id="refresh" onclick="resetPage();"><i class='fa fa-refresh'></i></button>
             <input type="text" id = "word-entered">

js/class.js

@@ -16,6 +16,11 @@ const WARMLE = 'Warmle';
 class Bot {
     constructor(type) {
         this.type = type;
+        this.answer = '';
+    }
+
+    setAnswer(answer) {
+        this.answer = answer;
     }
 
     isFor(type) {
@@ -182,13 +187,31 @@ function isLower(a, b) {
 function tilesChangeColor(row) {
     let tiles = row.getElementsByClassName('tile');
 
+    let colors = [];
+    if (bot.answer && bot.answer.length == tiles.length) {
+        let guess = '';
+        for (let tile of tiles) {
+            guess += tile.textContent;
+        }
+        colors = bot.getDifference(guess, bot.answer);
+        for (let i = 0; i < colors.length; i++) {
+            setTileColor(tiles[i], colors[i]);
+        }
+    }
+
     Array.from(tiles).forEach(function(t) {
       t.addEventListener('click', function() {
         changeTileColor(t);
       });
     });
 }
 
+function setTileColor(tile, new_color) {
+    let old_color = getTileColor(tile);
+    if (old_color != new_color) {
+        tile.classList.replace(old_color, new_color);
+    }
+}
 
 function changeTileColor(tile) {
     let old_color = getTileColor(tile);

js/main.js

@@ -38,6 +38,8 @@ function setMaxGuesses() {
 function setLength() {
     word_length = document.getElementById("word-length").value;
 
+    document.getElementById('word-known-answer').setAttribute('maxlength', word_length);
+    document.getElementById('word-known-answer').value = "";
     document.getElementById('word-entered').setAttribute('maxlength', word_length); 
     document.getElementById('word-entered').value = "";
     clearHTML(document.getElementById('next-previous-buttons'));
@@ -523,6 +525,10 @@ function botIsOn() {
     return document.getElementById('results');
 }
 
+function setKnownAnswer(knownAnswer) {
+    bot.setAnswer(knownAnswer);
+}
+
 /* 
     TABLE FUNCTIONS
     creates the rows of guesses & buttons

js/setup.js

@@ -37,6 +37,18 @@ $(document).ready(function() {
         update();
     });
 
+    $("#word-known-answer").on('input', function(e) {
+        let val = $("#word-known-answer").val();
+        if (val.length == word_length) {
+            $("#word-known-answer").blur();
+
+            setKnownAnswer(val);
+
+            if (word_length == 11) {
+                $(".tile").css('font-size', '1rem');
+            }
+        }
+    });
 
     $("#word-entered").on('input', function(e) {
         let val = $("#word-entered").val();
@@ -125,6 +137,7 @@ function drawPage() {
     createMainHeader(header);
     createWordLengthSelector();
 
+    createKnownAnswerInput(container);
     createGuessInput(container);
     createAnswerSuggestions(container);
 
@@ -332,14 +345,19 @@ function createSettingsPage() {
     });
 }
 
+function createKnownAnswerInput(div) {
+    let input = document.getElementById('word-known-answer');
+    setInputAttributes(input, 'enter known answer');
+}
+
 function createGuessInput(div) {
     let input = document.getElementById('word-entered');
-    setInputAttributes(input);
+    setInputAttributes(input, 'enter guess here');
 }
 
-function setInputAttributes(input) {
+function setInputAttributes(input, placeholder) {
     input.setAttribute('autocomplete', 'off');
-    input.setAttribute('placeholder', 'enter your guess here');
+    input.setAttribute('placeholder', placeholder);
     input.setAttribute('onkeypress', 'return /[a-z]/i.test(event.key)');
     input.setAttribute('oninput', 'this.value = this.value.toUpperCase()');
 }

wordl.css

@@ -43,6 +43,17 @@ body {
 
 /* GUESS AND ALL SUB DIVS */
 /* CONATINS ALL INFO ON WORDS ENTERED & PATTERNS */
+
+#known-answer-div {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    margin-top: .5rem;
+}
+
 #guesses {
     position: relative;
     display: flex;
@@ -236,6 +247,31 @@ button:hover, .tile:hover, .increment:hover {
     color: transparent;
 }
 
+#word-known-answer {
+    background-color: transparent;
+    caret-color: white;
+    border: none;
+    border-bottom: solid 2px var(--correct-color);
+    border-radius: none;
+    color: var(--text-color);
+    height: 2rem;
+    font-size: 1.2rem;
+    width: min(95%, 12rem);
+    text-align: center;
+    margin: .5rem;
+    padding: 0;
+    font-weight: bold;
+}
+
+#word-known-answer::placeholder {
+    color: var(--text-color);
+    font-weight: normal;
+}
+
+#word-known-answer:focus::placeholder {
+    color: transparent;
+}
+
 *:focus {
     outline: none;
 }