diff options
Diffstat (limited to 'src/html/word-square.html')
| -rw-r--r-- | src/html/word-square.html | 223 |
1 files changed, 223 insertions, 0 deletions
diff --git a/src/html/word-square.html b/src/html/word-square.html new file mode 100644 index 0000000..32089e7 --- /dev/null +++ b/src/html/word-square.html @@ -0,0 +1,223 @@ +<!doctype html> +<html lang="en"> + +<html> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> + <style> + input[type=text] + { + font-size:52px; + width: 57px; + height: 57px; + border: 1px solid grey; + margin-right: 2px; + text-align: center; + } + .row { + padding: 2px; + } + .list { + display: inline-block; + overflow-x: scroll; + width: 50%; + white-space: nowrap; + } + .best-square pre { + display: inline-block; + padding-left: 50px; + } + .best-square { + border: 1px solid grey; + } + </style> + <script src="js/words.js"></script> + <script> + function submit(){ + var size = get_size(); + var words = []; + for(var row = 0 ; row < size; row++){ + words.push(""); + } + for(var row = 0 ; row < size; row++){ + for(var i = 0 ; i < size; i++){ + var element = document.getElementById("col"+row+"_"+i); + words[row] += element.value.substring(0,1); + } + } + var name = document.getElementById("name").value; + var details = {"words": words.join("\n"), "name": name} + var formBody = []; + for (var property in details) { + var encodedKey = encodeURIComponent(property); + var encodedValue = encodeURIComponent(details[property]); + formBody.push(encodedKey + "=" + encodedValue); + } + formBody = formBody.join("&"); + //console.log(JSON.stringify()); + fetch(new Request("/wordsquares", { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' + }, + body: formBody + })) + .then((response) => { + console.log(response); + window.location = "/"; + }); + } + + function filter_row(cols){ + return words.filter(word => { + if(word.length != cols.length){ + return false; + } + word = word.toUpperCase(); + for(var i = 0; i < cols.length; i++){ + if( (cols[i] != "" && word.substring(i, i+1) != cols[i])){ + return false; + } + } + return true; + }).join(" "); + } + + function update_input(from, to){ + var fromEl = document.querySelector(from); + fromEl.value = fromEl.value.toUpperCase(); + //$(from).val($(from).val().toUpperCase()) + to.forEach(element => { + document.querySelector(element).value = fromEl.value; + //fromEl.value = fromEl.fromEl.toUpperCase(); + //$(element).val($(from).val()); + }); + } + + function update_filter(row){ + var size = get_size(); + var cols = []; + for(var i = 0 ; i < size; i++){ + var element = document.getElementById("col"+row+"_"+i); + cols.push(element.value.substring(0,1)); + //cols.push($("#col"+row+"_"+i).val().substring(0,1)); + } + document.getElementById("filter"+row).textContent = filter_row(cols); + //$("#filter"+row).text(filter_row(cols)); + } + + function clear_input(){ + var size = get_size(); + document.querySelectorAll("input[type=text]").forEach(element => { + element.value = ""; + }) + //$('input[type=text]').val(""); + for(var i = 0 ; i < size; i++){ + update_filter(i); + } + } + + function get_size(){ + return parseInt(document.getElementById("size_input").value); + } + + function resize(){ + var size = get_size(); + var square = document.getElementById("square"); + square.innerHTML = ""; + // var filter = document.getElementById("filter"); + // filter.innerHTML = ""; + for(var i = 0; i < size; i++){ + var divRow = document.createElement("div"); + divRow.setAttribute("id", "row"+i); + divRow.setAttribute("class", "row"); + square.appendChild(divRow); + for(var j = 0; j < size; j++){ + var colInput = document.createElement("input"); + colInput.setAttribute("id", "col"+i+"_"+j); + colInput.setAttribute("value", ""); + colInput.setAttribute("type", "text"); + colInput.setAttribute("data-row", i); + colInput.setAttribute("data-col", j); + divRow.appendChild(colInput); + + var listener = function(element){ + var row = parseInt(element.target.getAttribute("data-row")); + var col = parseInt(element.target.getAttribute("data-col")); + update_input("#col"+row+"_"+col, ["#col"+col+"_"+row]) + update_filter(row); + update_filter(col); + // focus on next input + // col++; + // if(col == size){ + // console.log("end of row"); + // row++; + // col = 0; + // if(row == size){ + // row = 0; + // } + // } + // document.getElementById("col"+row+"_"+col).focus(); + } + colInput.addEventListener("keyup", listener); + colInput.addEventListener("change", listener); + colInput.addEventListener("paste", listener); + } + var divFilter = document.createElement("div"); + divFilter.setAttribute("id", "filter"+i); + divFilter.setAttribute("class", "list"); + divRow.appendChild(divFilter); + } + } + + window.onload = function(){ + var feed = new Vue({ + el: '#app', + data: { + show: window.location.hash == '#success', + best : [] + }, + created() { + fetch(new Request('/wordsquares/best')).then(response => response.json()) + .then(response => this.best = response.best); + console.log(this.best); + } + }); + + resize(); + clear_input() + + var inputChange = function(){ resize(); }; + document.getElementById("size_input").addEventListener("keyup", inputChange); + document.getElementById("size_input").addEventListener("change", inputChange); + document.getElementById("size_input").addEventListener("paste", inputChange); + } + </script> +</head> +<body > + <div id="app"> + <div id="square"></div> + <div> + <button onclick="clear_input()">Clear</button> + <input id="size_input" width="5" type="number" value="4"></input> + <div> + <input id="name" placeholder="Your name"> + <button onclick="submit()">Submit</button> + <p id="status" v-if='show'>Success, thank you!</p> + </div> + </div> + <!-- <div id="filter"></div> --> + <div class="feed"> + <span>Best Submitted:</span> + <div class="best-square" v-for="item in best"> + <pre> +{{item.words}} + </pre> + <span>{{item.name}}</span> + </div> + </div> + </div> +</body> +</html> |