forked from sent/waves
412 lines
13 KiB
JavaScript
412 lines
13 KiB
JavaScript
$(document).ready(function() {
|
|
getPreferences();
|
|
createPage();
|
|
|
|
$("#bot-type").change(function() {
|
|
let val = $(this).val();
|
|
localStorage.setItem('bot_type', val);
|
|
setBotMode(val);
|
|
createPage();
|
|
});
|
|
|
|
$(document).on('input', '.warmle-selector', function() {
|
|
let val = $(this).val();
|
|
localStorage.setItem('warmle_dist', val);
|
|
update();
|
|
});
|
|
|
|
$("#word-length").on('input', function() {
|
|
localStorage.setItem('word_length' + bot.type, $(this).val());
|
|
createPage();
|
|
});
|
|
|
|
$("#max-guesses").on('input', function() {
|
|
localStorage.setItem('guesses' + bot.type, $(this).val());
|
|
createPage();
|
|
});
|
|
|
|
$(".wordbank").on('input', function() {
|
|
if (!$(this).is(':checked')) {
|
|
$(this).prop('checked', true);
|
|
return;
|
|
}
|
|
|
|
localStorage.setItem('wordbank', $(this).attr('id'));
|
|
$("#" + otherWordbank($(this).attr('id'))).prop('checked', false);
|
|
setWordbank();
|
|
update();
|
|
});
|
|
|
|
|
|
$("#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() {
|
|
makeTables($(this).html());
|
|
})
|
|
|
|
$(document).on('click', '.showlist', function() {
|
|
if ($(this).children().hasClass("visible")) {
|
|
($(this).children().removeClass("visible"));
|
|
} else {
|
|
$(this).children().addClass("visible");
|
|
}
|
|
});
|
|
});
|
|
|
|
function createPage() {
|
|
drawPage();
|
|
setLength();
|
|
setWordbank();
|
|
update();
|
|
}
|
|
|
|
function resetPage() {
|
|
clearGrids();
|
|
clearHTML(document.getElementById('next-previous-buttons'));
|
|
update();
|
|
}
|
|
|
|
function clearGrids() {
|
|
let grids = document.getElementsByClassName('grid');
|
|
|
|
for (let i = 0; i < grids.length; i++) {
|
|
clearHTML(grids[i]);
|
|
}
|
|
|
|
let full_grid = document.getElementById('hints');
|
|
full_grid.classList.add('empty');
|
|
}
|
|
|
|
function getPreferences() {
|
|
if (localStorage.getItem('bot_type')) {
|
|
let bot_type = localStorage.getItem('bot_type');
|
|
setBotMode(bot_type);
|
|
document.getElementById('bot-type').value = bot_type;
|
|
} else {
|
|
setBotMode(WORDLE);
|
|
}
|
|
|
|
if (localStorage.getItem('wordbank')) {
|
|
let bank = localStorage.getItem('wordbank');
|
|
document.getElementById(bank).checked = true;
|
|
document.getElementById(otherWordbank(bank)).checked = false;
|
|
setWordbank()
|
|
}
|
|
|
|
// if (bot.isFor(WARMLE) && localStorage.getItem('warmle_dist')) {
|
|
// let dist = localStorage.getItem('warmle_dist');
|
|
// document.getElementsByClassName('warmle-selector')[0].value = dist;
|
|
// }
|
|
}
|
|
|
|
function otherWordbank(bank) {
|
|
if (bank == 'restricted') return 'complete';
|
|
return 'restricted';
|
|
}
|
|
|
|
function drawPage() {
|
|
let container = document.getElementById('container');
|
|
let header = document.getElementById('top-of-screen');
|
|
let hints = document.getElementById('hints');
|
|
|
|
addGrid(hints);
|
|
|
|
createMainHeader(header);
|
|
createWordLengthSelector();
|
|
|
|
createGuessInput(container);
|
|
createAnswerSuggestions(container);
|
|
|
|
updateSettings();
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
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');
|
|
}
|
|
} else {
|
|
clearHTML(extra);
|
|
}
|
|
}
|
|
|
|
function addGrid(hints) {
|
|
clearHTML(hints);
|
|
|
|
for (let i = 0; i < bot.getCount(); i++) {
|
|
let grid = createElement('div', '', 'grid');
|
|
hints.append(grid);
|
|
}
|
|
}
|
|
|
|
function createMainHeader(div) {
|
|
let main_header = document.getElementById('top-of-screen');
|
|
let title = main_header.getElementsByTagName('h1')[0];
|
|
|
|
title.innerHTML = bot.type + ' Calcle';
|
|
main_header.append(title);
|
|
}
|
|
|
|
function createWordLengthSelector() {
|
|
let select_length = document.getElementById('word-length');
|
|
|
|
let options = "";
|
|
for (let i = SMALLEST_WORD; i <= LARGEST_WORD; i++) {
|
|
let selected = "";
|
|
if (i == 5) selected = "selected = 'selected'";
|
|
options += "<option value='" + i + "' " + selected +">" + i + "</option>";
|
|
}
|
|
|
|
if (bot.isFor(THIRDLE)) {
|
|
localStorage.setItem('word_length' + bot.type, 3);
|
|
options = "<option value ='3' selected = 'selected'>3</option>";
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
function createMaxGuesses(div) {
|
|
let max_input = document.getElementById('max-guesses');
|
|
|
|
let options = "";
|
|
for (let i = 3; i <= 21; i++) {
|
|
let selected = "";
|
|
if (i == 6) selected = "selected = 'selected'";
|
|
options += "<option value='" + i + "' " + selected +">" + i + "</option>";
|
|
}
|
|
|
|
if (bot.isFor(THIRDLE)) {
|
|
localStorage.setItem('guesses' + bot.type, 3);
|
|
options = "<option value ='3' selected = 'selected'>3</option>";
|
|
}
|
|
|
|
max_input.innerHTML = options;
|
|
|
|
if (localStorage.getItem('guesses' + bot.type)) {
|
|
max_input.value = localStorage.getItem('guesses' + bot.type);
|
|
}
|
|
}
|
|
|
|
const EXAMPLE_LIST =
|
|
[
|
|
{word: 'BLOKE', score: '2.188 guesses left', wrong: '96.77% solve rate'},
|
|
{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));
|
|
}
|
|
|
|
return {row: example_row, list: example_list};
|
|
}
|
|
|
|
function createWrongExample() {
|
|
let example_wrong = createElement('ul', '', 'word-list dummy');
|
|
// example_wrong.innerHTML = createListItem(EXAMPLE_LIST[0].word, EXAMPLE_LIST[0].wrong, 1);
|
|
example_wrong.append(createListItem(EXAMPLE_LIST[0].word, EXAMPLE_LIST[0].wrong, 1));
|
|
|
|
return example_wrong;
|
|
}
|
|
|
|
function makeCloseButton(type) {
|
|
let close_button = createElement('button', '', type + ' close');
|
|
return close_button;
|
|
}
|
|
|
|
function createInfoParagraphs() {
|
|
let p1 = createElement('p', `Simply enter in your last guess, click on the tiles until the colors match, hit calculate,
|
|
and the WordleBot will give you the best possible guesses from that point.`);
|
|
|
|
let p2 = createElement('p', `This means the best guess from this point would be ` + EXAMPLE_LIST[0].word + `,
|
|
and that you have an average of ` + EXAMPLE_LIST[0].score + `. If you see:`);
|
|
|
|
let p3 = createElement('p', `That means ` + EXAMPLE_LIST[0].word + ` will only solve 96.77% of the remaining possible answers within ` + bot.guessesAllowed() + ` guesses.
|
|
Generally speaking, you should only see this if you're playing on hard mode.`);
|
|
|
|
let p4 = createElement('p', `Want to see how good your starting word is? Click the
|
|
<button class = 'test dummy' disabled><i class="gg-bot"></i></button> on the top right to get a good idea.`);
|
|
|
|
return [p1, p2, p3, p4]
|
|
}
|
|
|
|
function explainExample() {
|
|
let explanation = createElement('div', '', 'description');
|
|
|
|
if (bot.isFor(WORDLE)) {
|
|
explanation.innerHTML = 'T is in the correct position, A is in the word but not in the correct position, and R, I, and N are not in the word.'
|
|
}
|
|
|
|
if (bot.isFor(WOODLE)) {
|
|
explanation.innerHTML = 'TRAIN has one letter in the correct position, and one letter in the word, but not in the correct position';
|
|
}
|
|
|
|
if (bot.isFor(PEAKS)) {
|
|
explanation.innerHTML = 'The 1st letter of the word is T, the second 2nd letter comes before R in the alphabet, the 3rd comes after A, the 4th before I, and the 5th before N.';
|
|
}
|
|
|
|
return explanation;
|
|
}
|
|
|
|
function createInfoPage() {
|
|
let info = document.getElementsByClassName('info screen')[0];
|
|
if (info.classList.contains('display')) return;
|
|
|
|
let close_button = makeCloseButton('info');
|
|
let example = createExample();
|
|
let explanation = explainExample();
|
|
let example_wrong = createWrongExample();
|
|
let paragraphs = createInfoParagraphs();
|
|
|
|
let main_header = createElement('h3', 'How does this Work?', 'top-header');
|
|
let sub_header = createElement('h3', 'After each guess you should see something like this:', 'mini');
|
|
|
|
info.append(close_button); // button to close screen
|
|
info.append(main_header); // 'how does this work'
|
|
info.append(paragraphs[0]); // intro paragraph
|
|
info.append(sub_header); // header to examples
|
|
info.append(example.row); // example row w/ colors
|
|
info.append(explanation) // explanation of tiles
|
|
info.append(example.list); // example answer list
|
|
info.append(paragraphs[1]); // explanation of answer list
|
|
info.append(example_wrong); // example answer list with wrong %
|
|
info.append(paragraphs[2]); // explanation of wrong %
|
|
info.append(paragraphs[3]); // bot paragraph
|
|
|
|
info.classList.remove('back');
|
|
info.classList.add('display');
|
|
|
|
close_button.addEventListener('click', function() {
|
|
info.classList.remove("display");
|
|
info.classList.add("back");
|
|
clearHTML(info);
|
|
});
|
|
}
|
|
|
|
function createSettingsPage() {
|
|
let settings = document.getElementsByClassName('settings screen')[0];
|
|
|
|
settings.classList.remove('hide');
|
|
settings.classList.add('display');
|
|
|
|
let close = settings.getElementsByClassName('close')[0];
|
|
close.addEventListener('click', function() {
|
|
settings.classList.remove("display");
|
|
settings.classList.add("hide");
|
|
});
|
|
}
|
|
|
|
function createGuessInput(div) {
|
|
let input = document.getElementById('word-entered');
|
|
setInputAttributes(input);
|
|
}
|
|
|
|
function setInputAttributes(input) {
|
|
input.setAttribute('autocomplete', 'off');
|
|
input.setAttribute('placeholder', 'enter your guess here');
|
|
input.setAttribute('onkeypress', 'return /[a-z]/i.test(event.key)');
|
|
input.setAttribute('oninput', 'this.value = this.value.toUpperCase()');
|
|
}
|
|
|
|
function createAnswerSuggestions() {
|
|
let suggestions = document.getElementById('suggestions');
|
|
|
|
if (bot.hasHardMode() && !document.getElementById('mode')) {
|
|
createHardModeSwitch(suggestions);
|
|
} else if (!bot.hasHardMode() && document.getElementById('mode')) {
|
|
removeHardModeSwitch(suggestions);
|
|
}
|
|
|
|
if (bot.hasMax()) {
|
|
createMaxGuesses(suggestions);
|
|
} else {
|
|
let max = document.getElementById('max-guesses');
|
|
localStorage.setItem('guesses' + bot.type, 'infinity');
|
|
max.innerHTML = "<option value ='infinity' selected = 'selected'> ∞ </option>";
|
|
}
|
|
|
|
createAnswerLists(suggestions);
|
|
}
|
|
|
|
function createAnswerLists(div) {
|
|
if (document.getElementById('answers')) {
|
|
document.getElementById('answers').remove();
|
|
}
|
|
|
|
let answer_lists = createElement('div', '', '', 'answers');
|
|
|
|
createOptions(answer_lists);
|
|
div.append(answer_lists);
|
|
}
|
|
|
|
function createOptions(div) {
|
|
let best_guesses = createElement('div', '', 'best-guesses');
|
|
let word_list = createElement('ul', '', 'word-list');
|
|
|
|
best_guesses.append(word_list);
|
|
div.append(best_guesses);
|
|
}
|
|
|
|
function createHardModeSwitch(div) {
|
|
let switch_label = createElement('div', "Show me the best guesses for 'Hard Mode':", 'hard label');
|
|
let switch_container = createElement('label', '', 'hard switch');
|
|
let switch_slider = createElement('span', '', 'slider round');
|
|
let switch_checkbox = createElement('input', '', '', 'mode');
|
|
switch_checkbox.setAttribute('type', 'checkbox');
|
|
|
|
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);
|
|
|
|
switch_checkbox.addEventListener('change', function() {
|
|
update();
|
|
});
|
|
}
|
|
|
|
function removeHardModeSwitch() {
|
|
let label = document.getElementsByClassName('hard label')[0];
|
|
let container = document.getElementsByClassName('hard switch')[0];
|
|
|
|
if (label) label.remove();
|
|
if (container) container.remove();
|
|
}
|