diff --git a/index.html b/index.html index 018dc76..261506a 100644 --- a/index.html +++ b/index.html @@ -87,6 +87,10 @@

Choose Your Bot

+
+ +
+
diff --git a/js/class.js b/js/class.js index 4e275eb..cc0e5bc 100644 --- a/js/class.js +++ b/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) { @@ -47,16 +52,16 @@ class Bot { getDifference(word1, word2) { if (this.type == WOODLE) { return differencesWithoutPositions(word1, word2); - } - + } + if (this.type == PEAKS) { return getAlphabeticDifferences(word1, word2); - } - + } + if (typeof word2 == 'object') { return getDoubleDifference(word1, word2); - } - + } + if (this.type == WARMLE) { return getWarmleDifferences(word1, word2); } @@ -87,7 +92,7 @@ class Bot { getBestLetters(list) { if (this.type == PEAKS) { return lettersClosestToCenter(list); - } + } if (this.type == WARMLE) { return bestWarmleLetters(list); @@ -108,19 +113,19 @@ class Bot { if (reduced_filter) { return getAntiWordleDiffs(difference, guess); } - + if (this.type == XORDLE) { return getXordleDiffs(difference, 0, [difference]); - } - + } + if (this.type == FIBBLE) { return getFibbleDiffs(difference); } - + if (this.type == HARDLE) { return getHardleDiffs(difference); - } - + } + if (this.getCount() > 1) { return difference; } @@ -145,7 +150,7 @@ class Bot { getAllPossibleAnswersFrom(list) { list = filterList(list, 0, 0, bot.getCount() > 1); - + if (bot.isFor(XORDLE)) { list = xordleFilter(uniqueWordsFrom(list)); } @@ -156,8 +161,8 @@ class Bot { getAnswerListLength(answers) { if (bot.getCount() > 1) { return lengthOfAllLists(answers); - } - + } + return answers.length; } @@ -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); - }); + 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); @@ -208,14 +231,14 @@ function differencesWithPositions(word1, word2) { if (pairings[word1]) { if (pairings[word1][word2]) return pairings[word1][word2]; } else pairings[word1] = []; - - + + let temp1 = word1; let temp2 = word2; let diff = EMPTY.repeat(word_length); let pos = 0; - for (let j = 0; j < temp1.length; j++) { + for (let j = 0; j < temp1.length; j++) { let word1_c = temp1.charAt(j); let word2_c = temp2.charAt(j); @@ -273,7 +296,7 @@ function getDoubleDifference(guess, answers) { } function dordleDifference(guess, answers) { - return [differencesWithPositions(guess, answers.word1), + return [differencesWithPositions(guess, answers.word1), differencesWithPositions(guess, answers.word2)]; } @@ -302,7 +325,7 @@ function rowDifferencesWithPairs(row_number) { colors.push(coloring); } - + return colors; } @@ -394,14 +417,14 @@ function differencesWithoutPositions(word1, word2) { for (let j = 0; j < temp1.length; j++) { if (num_wrong == 0) break; - + let word1_c = temp1.charAt(j); let word2_c = temp2.charAt(j); if (word1_c == word2_c) { correct += CORRECT; num_wrong--; - + temp1 = temp1.slice(0, j) + temp1.slice(j+1); temp2 = temp2.slice(0, j) + temp2.slice(j+1); j--; @@ -498,14 +521,14 @@ function bestWarmleLetters(list) { new_letters[pos][j] = letters[pos][j]; let distance = document.getElementsByClassName('warmle-selector')[0].value; - for (let k = 1; k <= distance; k++) { + for (let k = 1; k <= distance; k++) { let c = charToInt(pos)+k; if (c <= 90) { c = intToChar(c); new_letters[pos][j] += letters[c][j]; } - + c = charToInt(pos)-k; if (c >= 65) { c = intToChar(c); @@ -523,7 +546,7 @@ function bestWarmleLetters(list) { function makeAlphabetArray(size) { let letters = []; - + for (let i = 65; i <= 90; i++) { let c = String.fromCharCode(i); @@ -531,7 +554,7 @@ function makeAlphabetArray(size) { for (let i = 0; i < size; i++) { letters[c].push(0); } - } + } return letters; } @@ -547,18 +570,18 @@ function reducesListMost(answers, guesses, future_guess) { let data_per_list = []; for (let j = 0; j < answers.length; j++) { - + min = answers[j].length; data_per_list.push(calculateAverageBucketSize(guesses[i], answers[j], min, future_guess)); } - + data = averageBucketSizeFromAllLists(data_per_list); } else { data = calculateAverageBucketSize(guesses[i], answers, min, future_guess); } if (!data) continue; - + min = Math.min(min, data.adjusted); best_words.push({word: guesses[i], average: data.adjusted, differences: data.differences, wrong: 0}); @@ -604,7 +627,7 @@ function reducesListLeast(answers, guesses) { } best_words = sortListByAverage(best_words); - return best_words; + return best_words; } function calculateAverageBucketSize(guess, answers, min, future_guess) { @@ -614,7 +637,7 @@ function calculateAverageBucketSize(guess, answers, min, future_guess) { let threes = 1; for (let i = 0; i < list_size; i++) { - let diff = bot.getDifference(guess, answers[i]); + let diff = bot.getDifference(guess, answers[i]); if (differences[diff] == null) { differences[diff] = []; @@ -625,7 +648,7 @@ function calculateAverageBucketSize(guess, answers, min, future_guess) { } let freq = differences[diff].length; - + if (freq > 0) { weighted += (freq/list_size)*freq - ((freq-1)/list_size)*(freq-1); if (freq > 1) { @@ -650,7 +673,7 @@ function getXordleDiffs(difference, index, diff_list) { diff_list.push(alt); getXordleDiffs(alt, index+1, diff_list); - } + } return getXordleDiffs(difference, index+1, diff_list); } @@ -685,7 +708,7 @@ function getHardleDiffs(diff) { if (diff == WRONG_SPOT.repeat(word_length)) { return differences; } - + for (let i = 0; i < diff.length; i++) { if (diff.charAt(i) == CORRECT) { new_diff += WRONG_SPOT; @@ -701,7 +724,7 @@ function getHardleDiffs(diff) { function getAntiWordleDiffs(diff, guess) { let wrong_letters = findWrongSpotLetters(diff, guess); let differences = antiRecursion(guess, diff, wrong_letters, [], 0); - + includesAllWrongSpots(differences, wrong_letters, guess); return differences; @@ -711,26 +734,26 @@ function includesAllWrongSpots(differences, wrong_letters, word) { if (!wrong_letters.length) return differences; outer: - for (let i = 0; i < differences.length; i++) { - let check_list = []; + for (let i = 0; i < differences.length; i++) { + let check_list = []; - for (let j = 0; j < word_length; j++) { - if (differences[i].charAt(j) != INCORRECT) { - let c = word.charAt(j); + for (let j = 0; j < word_length; j++) { + if (differences[i].charAt(j) != INCORRECT) { + let c = word.charAt(j); - if (!check_list.includes(c)) { - check_list.push(c); + if (!check_list.includes(c)) { + check_list.push(c); - if (check_list.length == wrong_letters.length) { - continue outer; + if (check_list.length == wrong_letters.length) { + continue outer; + } } } } + + differences.splice(i, 1); + i--; } - - differences.splice(i, 1); - i--; - } } function antiRecursion(word, difference, wrong_letters, diff_list, i) { @@ -739,7 +762,7 @@ function antiRecursion(word, difference, wrong_letters, diff_list, i) { if (i == word_length) { return [...new Set(diff_list)]; } - + if (wrong_letters.includes(word.charAt(i)) && difference.charAt(i) != CORRECT) { antiRecursion(word, replaceAt(difference, CORRECT, i), wrong_letters, diff_list, i+1); diff --git a/js/main.js b/js/main.js index c5b79b0..119fa75 100644 --- a/js/main.js +++ b/js/main.js @@ -38,13 +38,15 @@ function setMaxGuesses() { function setLength() { word_length = document.getElementById("word-length").value; - document.getElementById('word-entered').setAttribute('maxlength', word_length); + 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')); - + words = big_list.filter((a) => a.length == word_length); // words = official_guesses.slice(); // uncomment to use original wordle guess list - + clearGrids(); setWordbank(); } @@ -76,7 +78,7 @@ function setWordbank() { function getBestOf(list) { let best_list; - + if (list[bot.type]) { best_list = list[bot.type]; best_list = best_list.filter(a => a[wordbank] != null); @@ -135,7 +137,7 @@ function dontNeedToCheck(answers, unique_answers) { function separateListByLikelihood(list) { let likely = []; let unlikely = []; - + for (let i = 0; i < list.length; i++) { if (Array.isArray(list[i])) { let new_lists = separateListByLikelihood(list[i]); @@ -161,15 +163,15 @@ function getPotentialGuessesAndAnswers() { let answer_list = separated_lists.likely; let unlikely_answers = separated_lists.unlikely; let unique_answers= uniqueWordsFrom(answer_list); - + if (dontNeedToCheck(answer_list, unique_answers)) { return { - guesses: unique_answers, - answers: answer_list, - unique: unique_answers, - all: all_possible_answers, - unlikely: unlikely_answers, - }; + guesses: unique_answers, + answers: answer_list, + unique: unique_answers, + all: all_possible_answers, + unlikely: unlikely_answers, + }; } let alphabet = bot.getBestLetters(unique_answers); @@ -177,19 +179,19 @@ function getPotentialGuessesAndAnswers() { let sorted_guess_list = initialGuesses(answer_list, sorted_answer_list, unique_answers, all_possible_answers, alphabet); return { - guesses: sorted_guess_list, - answers: answer_list, - unique: sorted_answer_list, - all: all_possible_answers, - unlikely: unlikely_answers, - }; + guesses: sorted_guess_list, + answers: answer_list, + unique: sorted_answer_list, + all: all_possible_answers, + unlikely: unlikely_answers, + }; } function initialGuesses(answer_list, sorted_answer_list, unique_answers, all_possible_words, alphabet) { let sorted_guess_list = words.slice(); if (bot.isFor(THIRDLE)) sorted_guess_list = allCombinations("", []); - + if (twoAnswersLeft(answer_list) && !bot.isFor(ANTI)) { // sorted_guess_list = unique_answers; sorted_guess_list = sorted_answer_list; @@ -201,11 +203,11 @@ function initialGuesses(answer_list, sorted_answer_list, unique_answers, all_pos } sorted_guess_list = sortList(sorted_guess_list, alphabet); - + if (!bot.isFor(ANTI)) { sorted_guess_list = combineLists(sorted_answer_list, sorted_guess_list); } - + sorted_guess_list = reduceListSize(sorted_guess_list, sorted_answer_list, bot.getAnswerListLength(answer_list)); // new_lists = reduceListSize(sorted_guess_list, sorted_answer_list, bot.getAnswerListLength(answer_list)); // sorted_guess_list = new_lists.guesses; @@ -223,14 +225,14 @@ function twoAnswersLeft(answers) { function getUnfoundAnswers(answer_lists) { unfound_answers = []; - + for (let i = 0; i < answer_lists.length; i++) { if (answer_lists[i].length == 1) { unfound_answers.push(answer_lists[i][0]); } } - + for (let i = 0; i < guessesMadeSoFar(); i++) { let colors = bot.getRowColor(i); @@ -242,7 +244,7 @@ function getUnfoundAnswers(answer_lists) { } } } - + return unfound_answers; } @@ -269,7 +271,7 @@ function updateLists(likely_answers, unlikely_answers, best_guesses) { updateHeaders(bot.getAnswerListLength(likely_answers), bot.getAnswerListLength(unlikely_answers)); addToSlides("Your best possible guesses are:", guess_list); createAnswerDropdown(likely_answers, unlikely_answers); - + if (isEmpty(likely_answers) && isEmpty(unlikely_answers)) { return addToSlides("", noWordsLeftMessage()); } @@ -278,7 +280,7 @@ function updateLists(likely_answers, unlikely_answers, best_guesses) { // will only show the final two options as suggestions // ie: 'its either 'THIS' or 'THAT' return showFinalOptions(likely_answers, unlikely_answers); - } + } let unfound_answers = getUnfoundAnswers(likely_answers); if (unfound_answers.length) { @@ -304,7 +306,7 @@ function writeBestGuessList(guesses) { if (!notFullyTested(guesses[i])) { data = getDataFor(guesses[i], percent_wrong, num_guesses); - } + } let list_item = createListItem(guesses[i].word, data, i+1); list.push(list_item); @@ -333,7 +335,7 @@ function createListItem(word, data, rank) { let suggestion = createElement('span', word, 'click'); let word_with_ranking = createElement('div', rank + ". " + suggestion.outerHTML, 'suggestion'); let score = createElement('div', data, 'score'); - + let list_item = createElement('li', word_with_ranking.outerHTML + score.outerHTML); return list_item; } @@ -344,9 +346,9 @@ function updateHeaders(likely_length, unlikely_length) { let subheading = document.getElementsByClassName("possibilities separated")[0]; let total_length = unlikely_length + likely_length; let class_name = numberOfGuessesMadeIs(0) ? '' : 'showlist'; - + let likely_html = likely_length + " probable answer" + pluralOrSingle(likely_length, "", "s"); - let unlikely_html = unlikely_length + " unlikley possibilit" + pluralOrSingle(unlikely_length, "y", "ies"); + let unlikely_html = unlikely_length + " unlikley possibilit" + pluralOrSingle(unlikely_length, "y", "ies"); let likely_span = createElement('span', likely_html, class_name); let unlikely_span = createElement('span', unlikely_html, class_name); @@ -364,7 +366,7 @@ function updateHeaders(likely_length, unlikely_length) { // how many likely/unlikely answers are remaining function createAnswerDropdown(likely_answers, unlikely_answers) { if (numberOfGuessesMadeIs(0)) return; - + let word_lists = document.getElementsByClassName("showlist"); let potential_answers = word_lists[0].getElementsByTagName("div")[0]; let technically_words = word_lists[1].getElementsByTagName("div")[0]; @@ -410,7 +412,7 @@ function noWordsLeftMessage() { function unfoundAnswersMessage(unfound_answers) { let text = unfound_answers.length + " of the answers " + pluralOrSingle(unfound_answers.length, "is ", "are "); - + for (let i = 0; i < unfound_answers.length; i++) { let answer = createElement('span', printAnswer(unfound_answers[i]), 'final'); text += answer.outerHTML; @@ -424,7 +426,7 @@ function unfoundAnswersMessage(unfound_answers) { } else { text += ", "; } - } + } let message = createElement('div', text, 'multi-answer'); return [message]; @@ -440,7 +442,7 @@ function showFinalOptions(sorted, less_likely) { sorted = uniqueWordsFrom(sorted); less_likely = uniqueWordsFrom(less_likely); } - + if (bot.getAnswerListLength(sorted)) { let final_words = createElement('li', '', 'likely'); let first_answer = createElement('span', printAnswer(sorted[0]), 'final'); @@ -449,7 +451,7 @@ function showFinalOptions(sorted, less_likely) { if (sorted.length == 2) { let second_answer = createElement('span', printAnswer(sorted[1]), 'final'); final_words.innerHTML += " or " + second_answer.outerHTML; - } + } final_words.innerHTML += "."; all_suggestions.push(final_words); @@ -463,7 +465,7 @@ function showFinalOptions(sorted, less_likely) { unlikely.innerHTML += unlikely_answer.outerHTML; (i < less_likely.length - 1) ? unlikely.innerHTML += ", " : unlikely.innerHTML += "."; - } + } all_suggestions.push(unlikely); } @@ -523,6 +525,10 @@ function botIsOn() { return document.getElementById('results'); } +function setKnownAnswer(knownAnswer) { + bot.setAnswer(knownAnswer); +} + /* TABLE FUNCTIONS creates the rows of guesses & buttons @@ -599,7 +605,7 @@ function addButtons() { for (let i = 0; i < grids.length; i++) { let rows = grids[i].getElementsByClassName('row'); rows[rows.length-1].remove(); - + if (!rows.length) { clearHTML(document.getElementById('next-previous-buttons')); let full_grid = document.getElementById('hints'); @@ -645,7 +651,7 @@ function guessesArePrecomputed(difficulty) { word += getWord(i); } - let hash = makeHash(bot.type, wordbank, difficulty, + let hash = makeHash(bot.type, wordbank, difficulty, bot.guessesAllowed(), document.getElementsByClassName('warmle-selector')[0]?.value, diff); if (seconds[word] != null) { @@ -669,7 +675,7 @@ function setBestGuesses(best_guesses, difficulty) { word += getWord(i); } - let hash = makeHash(bot.type, wordbank, difficulty, bot.guessesAllowed(), + let hash = makeHash(bot.type, wordbank, difficulty, bot.guessesAllowed(), document.getElementsByClassName('warmle-selector')[0]?.value, diff); seconds[word][hash] = JSON.stringify(best_guesses.slice(0, TOP_TEN_LENGTH)); @@ -677,15 +683,15 @@ function setBestGuesses(best_guesses, difficulty) { function getBestGuesses(answer_list, guess_list, difficulty, unique_answers) { let best_guesses = guessesArePrecomputed(difficulty); - - if (best_guesses) { + + if (best_guesses) { return sortByWrongThenAverage(best_guesses); } if (numberOfGuessesMadeIs(0)) { return getFirstGuesses(difficulty); } - + if (answer_list.length > 1000) { return getTempList(guess_list, answer_list); } @@ -695,12 +701,12 @@ function getBestGuesses(answer_list, guess_list, difficulty, unique_answers) { } let initial_guesses = bot.reducesListBest(answer_list, guess_list); - + if (bot.getCount() > 1) { best_guesses = initial_guesses; } else { best_guesses = calculateGuessList(unique_answers, guess_list, initial_guesses, difficulty); - } + } setBestGuesses(best_guesses, difficulty); return best_guesses; @@ -709,7 +715,7 @@ function getBestGuesses(answer_list, guess_list, difficulty, unique_answers) { // reduces list of possibilities when list is too large to check efficiently function reduceListSize(guesses, answers, answers_size) { // if you have <10 words left, removeUselessGuesses will actually remove some ideal guesses - if (answers.length > 10 && !bot.isFor(ANTI)) { + if (answers.length > 10 && !bot.isFor(ANTI)) { guesses = removeUselessGuesses(guesses, answers); } @@ -719,10 +725,10 @@ function reduceListSize(guesses, answers, answers_size) { // if (!bot.isFor(ANTI)) { // guesses = combineLists(answers, guesses); // } - + let current = answers_size * guesses.length * bot.getCount(); let ratio = current/MAXIMUM; - + guesses = guesses.slice(0, guesses.length/ratio); // reduced = true; } @@ -730,7 +736,7 @@ function reduceListSize(guesses, answers, answers_size) { for (let guess = 0; guess < guessesMadeSoFar(); guess++) { guesses = guesses.filter(a => a != getWord(guess)); } - + // return {guesses: guesses, answers: answers, reduced: reduced}; return guesses; } @@ -749,11 +755,11 @@ function removeUselessGuesses(list, possibilities) { list.splice(i, 1); i--; break; - } + } } } - return list; + return list; } function getFirstGuesses(difficulty) { @@ -770,7 +776,7 @@ function getFirstGuesses(difficulty) { function getTempList(guesses, answers) { let letters = bot.getBestLetters(uniqueWordsFrom(answers.slice())); guesses = sortList(guesses.slice(), letters); - + guesses = bot.reducesListBest(answers.slice(), guesses.slice(0, 100)); guesses = guesses.map(a => Object.assign ({}, {word: a.word, average: a.adjusted, wrong: NOT_YET_TESTED})); return guesses; @@ -780,18 +786,18 @@ function calculateGuessList(answers, guesses, best_words, difficulty) { const start_time = performance.now(); let can_finish = false; - for (let i = 0; i < best_words.length; i++) { + for (let i = 0; i < best_words.length; i++) { let remaining = best_words[i].differences; - + let num_guesses = bot.guessesAllowed(); if (num_guesses == INFINITY) num_guesses = 6; let results = Array.apply(null, Array(num_guesses)); - + results.forEach(function(a, index) { results[index] = []}); results['w'] = []; best_words[i].results = results; - + Object.keys(remaining).forEach(function(key) { countResults(best_words[i], remaining[key], guesses, results, guessesMadeSoFar(), difficulty, key); }); @@ -828,7 +834,7 @@ function getNextGuesses(new_guesses, answers, best, differences, difficulty) { list = reduceListSize(new_guesses, uniqueWordsFrom(answers), answers.length); } else { list = filterList(new_guesses, {word: best.word, colors: differences}, true); - } + } if (!bot.isFor(ANTI) && !isDifficulty(HARD)) { list = combineLists(uniqueWordsFrom(answers), new_guesses); @@ -840,16 +846,16 @@ function getNextGuesses(new_guesses, answers, best, differences, difficulty) { function countResults(best, answers, guesses, results, attempt, difficulty, differences) { let new_guesses = combineLists(uniqueWordsFrom(answers), guesses); new_guesses = getNextGuesses(new_guesses, answers, best, differences, difficulty); - + if (answers.length <= 2 && (!bot.isFor(ANTI) || new_guesses.length == answers.length || !answers.length)) { - addToResults(results, answers, attempt, best.word, bot.guessesAllowed()); + addToResults(results, answers, attempt, best.word, bot.guessesAllowed()); } else if (attempt < bot.guessesAllowed()-1) { if (attempt == bot.guessesAllowed()-2) { new_guesses = uniqueWordsFrom(answers.slice()); } - + let best_words = bot.reducesListBest(answers, new_guesses, true); if (!best_words[0]) return; let remaining = best_words[0].differences; @@ -860,9 +866,9 @@ function countResults(best, answers, guesses, results, attempt, difficulty, diff } if (attempt >= bot.guessesAllowed()-1) { - results['w'] = combineLists(results['w'], answers); + results['w'] = combineLists(results['w'], answers); } - + calculateAverageGuesses(best, results); } @@ -874,7 +880,7 @@ function addToResults(results, answers, attempt, current_answer, max_guesses) { } else if (attempt < max_guesses) { addToSpot(results, answers.pop(), attempt+1); } - + if (answers.length && attempt < max_guesses-1) { addToSpot(results, answers.pop(), attempt+2); } @@ -905,12 +911,12 @@ function calculateAverageGuesses(current_word, results) { } current_word.results = results; - + avg = avg/sum; current_word.average = avg; } -/* FILTER FUNCTIONS */ +/* FILTER FUNCTIONS */ function filterList(list, letters, reduced_filter, split) { if (numberOfGuessesMadeIs(0)) return list; @@ -988,7 +994,7 @@ function xordleFilter(list) { doubles.push(guess); } } - } + } return doubles; } @@ -1030,13 +1036,13 @@ function sortList(list, alphabet) { } newranks[i].average = 1/newranks[i].average; } - + newranks = sortListByAverage(newranks); return newranks.map(a => a.word); } function sortListByAverage(list) { - if (bot.isFor(ANTI)) + if (bot.isFor(ANTI)) return list.sort((a, b) => (a.average <= b.average) ? 1 : -1); return list.sort((a, b) => (a.average >= b.average) ? 1 : -1); diff --git a/js/setup.js b/js/setup.js index 13be899..b37fc8a 100644 --- a/js/setup.js +++ b/js/setup.js @@ -37,18 +37,30 @@ $(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(); if (val.length == word_length) { $("#word-entered").blur(); - + makeTables(val); - + if (word_length == 11) { $(".tile").css('font-size', '1rem'); } - } + } }); $(document).on('click', '.click', function() { @@ -125,6 +137,7 @@ function drawPage() { createMainHeader(header); createWordLengthSelector(); + createKnownAnswerInput(container); createGuessInput(container); createAnswerSuggestions(container); @@ -133,18 +146,18 @@ function drawPage() { function updateSettings() { let extra = document.getElementsByClassName('extra-settings')[0]; - + if (bot.isFor(WARMLE)) { let selector = createElement('select', '', 'warmle-selector'); for (let i = 3; i >= 1; i--) { let option = createElement('option', i); option.value = i; - selector.append(option); + selector.append(option); } - setHTML(extra, - "Yellows are " + selector.outerHTML + " letters away from the correct letter."); + setHTML(extra, + "Yellows are " + selector.outerHTML + " letters away from the correct letter."); if (localStorage.getItem('warmle_dist')) { document.getElementsByClassName('warmle-selector')[0].value = localStorage.getItem('warmle_dist'); @@ -187,7 +200,7 @@ function createWordLengthSelector() { } select_length.innerHTML = options; - + if (localStorage.getItem('word_length'+ bot.type) && (localStorage.getItem('word_length'+ bot.type) >= SMALLEST_WORD || bot.isFor(THIRDLE))) { select_length.value = localStorage.getItem('word_length'+ bot.type); } @@ -209,7 +222,7 @@ function createMaxGuesses(div) { } max_input.innerHTML = options; - + if (localStorage.getItem('guesses' + bot.type)) { max_input.value = localStorage.getItem('guesses' + bot.type); } @@ -221,14 +234,14 @@ const EXAMPLE_LIST = {word: 'YOLKS', score: '2.250 guesses left'}, {word: 'KOELS', score: '2.250 guesses left'}, {word: 'KYLOE', score: '2.250 guesses left'} - ]; +]; function createExample() { let example_row = createRow('TRAIN', 'dummy'); bot.setRowColor('GBYBB', example_row); let example_list = createElement('ul', '', 'word-list dummy'); - + for (let i = 0; i < EXAMPLE_LIST.length; i++) { // example_list.innerHTML += createListItem(EXAMPLE_LIST[i].word, EXAMPLE_LIST[i].score, i+1); example_list.append(createListItem(EXAMPLE_LIST[i].word, EXAMPLE_LIST[i].score, i+1)); @@ -324,7 +337,7 @@ function createSettingsPage() { settings.classList.remove('hide'); settings.classList.add('display'); - + let close = settings.getElementsByClassName('close')[0]; close.addEventListener('click', function() { settings.classList.remove("display"); @@ -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()'); } @@ -358,7 +376,7 @@ function createAnswerSuggestions() { } else { let max = document.getElementById('max-guesses'); localStorage.setItem('guesses' + bot.type, 'infinity'); - max.innerHTML = ""; + max.innerHTML = ""; } createAnswerLists(suggestions); @@ -392,7 +410,7 @@ function createHardModeSwitch(div) { switch_container.append(switch_checkbox); switch_container.append(switch_slider); - + let header = document.getElementsByClassName('mini-title')[0]; div.insertBefore(switch_label, header); div.insertBefore(switch_container, header); diff --git a/wordl.css b/wordl.css index def3b48..503415a 100644 --- a/wordl.css +++ b/wordl.css @@ -12,7 +12,7 @@ --gray-color: #424242; touch-action: pan-x pan-y; - height: 100%; + height: 100%; } html, body { @@ -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; } @@ -271,10 +307,10 @@ button:hover, .tile:hover, .increment:hover { background: var(--off-white); box-shadow: var(--gray-color) 0 0 0 1px; z-index: 100; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; display: flex; align-items: center; flex-direction: column; @@ -332,8 +368,8 @@ button:hover, .tile:hover, .increment:hover { } .test.dummy { - display: inline; - color: var(--background); + display: inline; + color: var(--background); } .row.dummy { @@ -426,7 +462,7 @@ button:hover, .tile:hover, .increment:hover { .showlist div:not(.showlist div.visible) { height: 0; - width: 0; + width: 0; overflow: hidden; } @@ -513,7 +549,7 @@ h3.mini-title { } ul { - margin: 0; + margin: 0; padding: 0; list-style: none; margin-bottom: 0; @@ -692,7 +728,7 @@ input[type=checkbox] { } .count { - position: absolute; + position: absolute; top: -1.2rem; } @@ -720,57 +756,57 @@ input[type=checkbox] { margin-bottom: .5rem; } -.switch input { - opacity: 0; - width: 0; - height: 0; +.switch input { + opacity: 0; + width: 0; + height: 0; } .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: .2s; - transition: .2s; + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .2s; + transition: .2s; } .slider:before { - position: absolute; - content: ""; - height: 76.5%; - aspect-ratio: 1; - left: 6.67%; - bottom: 13%; - background-color: white; - -webkit-transition: .2s; - transition: .2s; + position: absolute; + content: ""; + height: 76.5%; + aspect-ratio: 1; + left: 6.67%; + bottom: 13%; + background-color: white; + -webkit-transition: .2s; + transition: .2s; } input:checked + .slider { - background-color: var(--correct-color); + background-color: var(--correct-color); } input:focus + .slider { - box-shadow: 0 0 1px var(--correct-color); + box-shadow: 0 0 1px var(--correct-color); } input:checked + .slider:before { - -webkit-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); } /* Rounded sliders */ .slider.round { - border-radius: 100vh; + border-radius: 100vh; } .slider.round:before { - border-radius: 50%; + border-radius: 50%; } /* G --> CORRECT */ @@ -788,7 +824,7 @@ input:checked + .slider:before { background: var(--wrong-spot-color); } -.W-Peaks:before { +.W-Peaks:before { content: ""; display: inline-block; position: absolute;