Add word squares

author: Mark Powers <markppowers0@gmail.com> 2019-11-03 12:07:24 -0600
committer: Mark Powers <markppowers0@gmail.com> 2019-11-03 12:07:24 -0600
commit: 5c138373b366547190fbc655c19a25a7a7ab4996 (patch)
tree: 4ff10774a988278536d08a905c43b5bdfe10d9bd /src/html
parent: 316cb898d2439a28751b60511540e5fd3446cd9e (diff)
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>
author	Mark Powers <markppowers0@gmail.com>	2019-11-03 12:07:24 -0600
committer	Mark Powers <markppowers0@gmail.com>	2019-11-03 12:07:24 -0600
commit	5c138373b366547190fbc655c19a25a7a7ab4996 (patch)
tree	4ff10774a988278536d08a905c43b5bdfe10d9bd /src/html
parent	316cb898d2439a28751b60511540e5fd3446cd9e (diff)