aboutsummaryrefslogtreecommitdiff
path: root/src/html/word-square.html
diff options
context:
space:
mode:
authorMark Powers <markppowers0@gmail.com>2019-11-03 12:07:24 -0600
committerMark Powers <markppowers0@gmail.com>2019-11-03 12:07:24 -0600
commit5c138373b366547190fbc655c19a25a7a7ab4996 (patch)
tree4ff10774a988278536d08a905c43b5bdfe10d9bd /src/html/word-square.html
parent316cb898d2439a28751b60511540e5fd3446cd9e (diff)
Add word squares
Diffstat (limited to 'src/html/word-square.html')
-rw-r--r--src/html/word-square.html223
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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-25 00:54:09 +0000