proto

index.html

@@ -0,0 +1,60 @@
+<style>
+.poisson {
+    color: blue;
+    border: solid 1px blue;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+#map {
+    border: solid 1px black;
+    width: 500px;
+    height: 700px;
+}
+</style>
+
+<h1>FisherType</h1>
+<div id="map">
+</div>
+<input type="text" id="input" />
+
+<script>
+    var mots = [
+        "boulbi", "hassoul", "am am am am", "toz", "ordinateur", "table", "poisson", "sherif", "lune",
+        "hassanat", "stéphane", "hessel", "quoi", "nan mais", "chapeau", "compliqué", "oui", "têtu",
+        "gougougaga", "dora", "exploratrice", "gay", "lgbtqa+-^10", "oreilles", "yeux", "perceuse",
+    ];
+    var map = document.getElementById("map");
+    var input = document.getElementById("input");
+    var coord_map = map.getBoundingClientRect();
+    var poissons = document.getElementsByClassName("poisson");
+
+    setInterval(() => {
+        map.innerHTML += "<div class='poisson'>" + mots[parseInt(Math.floor(Math.random()*mots.length))] + "</div>";
+        var poisson = poissons[poissons.length-1]
+        poisson.style.top = coord_map.top;
+        poisson.style.left = coord_map.left + (coord_map.width-poisson.getBoundingClientRect().width)*Math.random();
+    }, 1000);
+
+    input.onkeyup = () => {
+        for (var i in poissons) {
+            var p = poissons[i];
+            if (input.value == p.innerHTML) {
+                input.value = "";
+                p.remove();
+            }
+        }
+    };
+
+    setInterval(() => {
+        for (var i in poissons) {
+            if (isNaN(i)) continue;
+            var p = poissons[i];
+            var new_top = parseInt(p.style.top.replace("px", "")) + 10;
+            p.style.top = new_top;
+            if (new_top > coord_map.height + coord_map.top - p.getBoundingClientRect().height) {
+                p.remove();
+            }
+        }
+    }, 100);
+</script>