diff --git a/www/index.html b/www/index.html index 594869c..b11d660 100644 --- a/www/index.html +++ b/www/index.html @@ -50,9 +50,22 @@ - + + + + + + + + + + + + + +
@@ -94,7 +107,11 @@

Dependencies

- +
+ + + +
Loading wordlist... diff --git a/www/src/index.js b/www/src/index.js index 74eaed4..3f20722 100644 --- a/www/src/index.js +++ b/www/src/index.js @@ -304,6 +304,12 @@ window.addEventListener('click', function(e) { case 'scroll-to-bottom': window.scrollTo({left: 0, top: document.querySelector('.about').scrollHeight, behavior: 'smooth'}); return; + case 'reset-board': + clearBoard(); + return; + case 'random-board': + randomiseBoard(); + return; } } }) @@ -340,14 +346,34 @@ function loadHash() { } catch(e) { return console.error(e); } - const size = board.length; - for (let i=0;i input:nth-child(${i+1})`); - if (el !== null) el.value = board[i]; - } + loadBoard(board); + } +} + +/** Replace the board values + * @param {string[]} board List of board values top to bottom left to right +*/ +function loadBoard(board) { + const size = board.length; + for (let i=0;i input:nth-child(${i+1})`); + if (el !== null) el.value = board[i]; } } +function clearBoard() { + loadBoard(Array(16).fill('')); + document.querySelector('.output-box').innerHTML = ''; +} + +function randomiseBoard() { + loadBoard(Array(16).fill('').map(() => { + const letter = 97 + Math.floor(Math.random() * 26); + return String.fromCharCode(letter); + })); + solveCurrentBoard(); +} + async function init() { const res = await fetch('./assets/wordlist.txt'); const text = await res.text(); diff --git a/www/src/stylesheet.css b/www/src/stylesheet.css index f9d2beb..f676362 100644 --- a/www/src/stylesheet.css +++ b/www/src/stylesheet.css @@ -91,12 +91,20 @@ transform: translateY(0px); } -button.scroll-to-bottom { +section.button-bar { position: absolute; - left: 50%; bottom: 15px; - margin: 0; - margin-left: -20px; + left: 15px; + right: 15px; + display: flex; + justify-content: center; +} + +section.button-bar > div { + display: flex; +} + +section.button-bar button { width: 40px; height: 40px; border: 0; @@ -104,13 +112,14 @@ button.scroll-to-bottom { background-color: var(--hl); opacity: 0; transition: opacity .5s ease; + margin: 0 5px; } -.scroll-at-top button.scroll-to-bottom { +.scroll-at-top section.button-bar button { opacity: 1; } -.scroll-to-bottom, svg.scroll-to-bottom > * { +section.button-bar button, svg.icons * { cursor: pointer; color: var(--bg); }