Tis code very code

1 files changed, 142 insertions, 94 deletions

diff --git a/motto/public/script.js b/motto/public/script.js
index f3dbdbf..7292cc3 100644
--- a/motto/public/script.js
+++ b/motto/public/script.js
@@ -1,113 +1,161 @@
+// Pretty ugly, huh?
+
 document.querySelector(".wrapper").style.opacity = 1;
 
-function send(text, vote) {
-  var xhp = new XMLHttpRequest();
-  xhp.open("POST", "/api/vote");
-  xhp.setRequestHeader("Content-type", "application/json");
-  xhp.onreadystatechange = () => {
-    if (xhp.readyState == 4 && xhp.status == 200) console.log(xhp.responseText);
-  };
-  xhp.send(JSON.stringify({ text, vote }));
+function send(id, vote) {
+    var xhp = new XMLHttpRequest();
+    xhp.open("POST", "/api/vote");
+    xhp.setRequestHeader("Content-type", "application/json");
+    xhp.onreadystatechange = () => {
+        if (xhp.readyState == 4 && xhp.status == 200) console.log(xhp.responseText);
+    };
+    id = parseInt(id);
+    vote = parseInt(vote);
+    xhp.send(JSON.stringify({ id, vote }));
+}
+
+function add(main, description) {
+    var xhp = new XMLHttpRequest();
+    xhp.open("POST", "/api/add");
+    xhp.setRequestHeader("Content-type", "application/json");
+    xhp.onreadystatechange = () => {
+        if (xhp.readyState == 4 && xhp.status == 200) console.log(xhp.responseText);
+    };
+    xhp.send(JSON.stringify({ main, description }));
 }
 
 function initCards() {
-  let newCards = document.querySelectorAll(".card:not(.removed)");
-  newCards.forEach((card, index) => {
-    card.style.zIndex = newCards.length - index;
-    card.style.transform =
-      "scale(" + (20 - index) / 20 + ") translateY(-" + 30 * index + "px)";
-    card.style.opacity = (10 - index) / 10;
-  });
+    let newCards = document.querySelectorAll(".card:not(.removed)");
+    newCards.forEach((card, index) => {
+        card.style.zIndex = newCards.length - index;
+        card.style.transform = "scale(" + (20 - index) / 20 + ") translateY(-" + 30 * index + "px)";
+        card.style.opacity = (10 - index) / 10;
+    });
 }
 
 function start() {
-  initCards();
-
-  let cards = document.querySelectorAll(".card");
-  cards.forEach((card) => {
-    let hammer = new Hammer(card);
-    hammer.on("pan", (event) => {
-      card.classList.add("moving");
-      if (event.deltaX === 0) return;
-      if (event.center.x === 0 && event.center.y === 0) return;
-
-      const xMulti = event.deltaX * 0.03;
-      const yMulti = event.deltaY / 80;
-      const rotate = xMulti * yMulti;
-
-      event.target.style.transform =
-        "translate(" +
-        event.deltaX +
-        "px, " +
-        event.deltaY +
-        "px) rotate(" +
-        rotate +
-        "deg)";
-    });
+    initCards();
 
-    hammer.on("panend", (event) => {
-      card.classList.remove("moving");
-      const moveOutWidth = document.body.clientWidth;
-      const keep =
-        Math.abs(event.deltax) < 80 || Math.abs(event.velocityX) < 0.5;
-      event.target.classList.toggle("removed", !keep);
-
-      if (keep) {
-        event.target.style.transform = "";
-      } else {
-        event.target.style.opacity = 0;
-        const endX = Math.max(
-          Math.abs(event.velocityX) * moveOutWidth,
-          moveOutWidth
-        );
-        const toX = event.deltaX > 0 ? endX : -endX;
-        const endY = Math.abs(event.velocityY) * moveOutWidth;
-        var toY = event.deltaY > 0 ? endY : -endY;
-        var xMulti = event.deltaX * 0.03;
-        var yMulti = event.deltaY / 80;
-        var rotate = xMulti * yMulti;
-        event.target.style.transform =
-          "translate(" +
-          toX +
-          "px, " +
-          (toY + event.deltaY) +
-          "px) rotate(" +
-          rotate +
-          "deg)";
-        send(event.target.innerText, toX > 0 ? 1 : -1);
-        initCards();
-      }
+    let cards = document.querySelectorAll(".card");
+    cards.forEach((card) => {
+        let hammer = new Hammer(card);
+        hammer.on("pan", (event) => {
+            card.classList.add("moving");
+            if (event.deltaX === 0) return;
+            if (event.center.x === 0 && event.center.y === 0) return;
+
+            const xMulti = event.deltaX * 0.03;
+            const yMulti = event.deltaY / 80;
+            const rotate = xMulti * yMulti;
+
+            event.target.style.transform =
+                "translate(" + event.deltaX + "px, " + event.deltaY + "px) rotate(" + rotate + "deg)";
+        });
+
+        hammer.on("panend", (event) => {
+            card.classList.remove("moving");
+            const moveOutWidth = document.body.clientWidth;
+            const keep = Math.abs(event.deltax) < 80 || Math.abs(event.velocityX) < 0.5;
+            event.target.classList.toggle("removed", !keep);
+
+            if (keep) {
+                event.target.style.transform = "";
+            } else {
+                event.target.style.opacity = 0;
+                const endX = Math.max(Math.abs(event.velocityX) * moveOutWidth, moveOutWidth);
+                const toX = event.deltaX > 0 ? endX : -endX;
+                const endY = Math.abs(event.velocityY) * moveOutWidth;
+                const toY = event.deltaY > 0 ? endY : -endY;
+                const xMulti = event.deltaX * 0.03;
+                const yMulti = event.deltaY / 80;
+                const rotate = xMulti * yMulti;
+                event.target.style.transform =
+                    "translate(" + toX + "px, " + (toY + event.deltaY) + "px) rotate(" + rotate + "deg)";
+                send(event.target.getAttribute("data-id"), toX > 0 ? 1 : -1);
+                initCards();
+            }
+        });
     });
-  });
 }
 
-function shuffleArray(array) {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]];
-  }
+function skipCard() {
+    const card = document.querySelectorAll(".card:not(.removed)")[0];
+    const moveOutWidth = document.body.clientWidth * 1.5;
+
+    if (!card) return false;
+
+    card.classList.add("removed");
+    card.style.transform = "translate(" + moveOutWidth + "px, -100px) rotate(-30deg)";
+    initCards();
+    event.preventDefault();
+}
+
+function createButtonListener(yay) {
+    return function (event) {
+        const card = document.querySelectorAll(".card:not(.removed)")[0];
+        const moveOutWidth = document.body.clientWidth * 1.5;
+
+        if (!card) return false;
+
+        card.classList.add("removed");
+
+        if (yay) {
+            card.style.transform = "translate(" + moveOutWidth + "px, -100px) rotate(-30deg)";
+        } else {
+            card.style.transform = "translate(-" + moveOutWidth + "px, -100px) rotate(30deg)";
+        }
+
+        send(card.getAttribute("data-id"), yay ? 1 : -1);
+        initCards();
+        event.preventDefault();
+    };
 }
 
 var xhp = new XMLHttpRequest();
 xhp.open("GET", "/api/list");
 xhp.onreadystatechange = () => {
-  if (xhp.readyState == 4 && xhp.status == 200) {
-    let list = xhp.responseText.split("\n");
-    shuffleArray(list);
-    list = list.slice(0, 100);
-    const cards_element = document.querySelector(".cards");
-    list.forEach((element) => {
-      const card = document.createElement("div");
-      card.setAttribute("class", "card");
-      const h1 = document.createElement("h1");
-      h1.innerText = "ABI 2021";
-      const h2 = document.createElement("h2");
-      h2.innerText = element;
-      card.appendChild(h1);
-      card.appendChild(h2);
-      cards_element.appendChild(card);
-    });
-    start();
-  }
+    if (xhp.readyState == 4 && xhp.status == 200) {
+        let list = JSON.parse(xhp.responseText);
+        const cards_element = document.querySelector(".cards");
+        list.forEach((element) => {
+            const card = document.createElement("div");
+            card.setAttribute("class", "card");
+            card.setAttribute("data-id", element["id"]);
+            const h1 = document.createElement("h1");
+            h1.innerText = "Thema #" + element["id"];
+            const hr1 = document.createElement("hr");
+            hr1.style.marginTop = "16px";
+            const h2 = document.createElement("h1");
+            h2.innerText = element["main"];
+            h2.style.marginTop = "16px";
+            const h3 = document.createElement("h2");
+            h3.innerText = element["description"];
+            const hr2 = document.createElement("hr");
+            hr2.style.marginTop = "16px";
+            hr2.style.marginBottom = "16px";
+            const h4 = document.createElement("h2");
+            h4.innerText = "Votes: " + element["votes"];
+            card.appendChild(h1);
+            card.appendChild(hr1);
+            card.appendChild(h2);
+            card.appendChild(h3);
+            card.appendChild(hr2);
+            card.appendChild(h4);
+            cards_element.appendChild(card);
+        });
+        start();
+    }
 };
 xhp.send();
+
+var yayListener = createButtonListener(true);
+var nayListener = createButtonListener(false);
+document.getElementById("yay").addEventListener("click", yayListener);
+document.getElementById("hmm").addEventListener("click", skipCard);
+document.getElementById("nay").addEventListener("click", nayListener);
+
+document.getElementById("add").addEventListener("click", () => {
+    const main = prompt("Was ist das Hauptthema (erste Teil)?", "ABI 2021");
+    const secondary = prompt("Was ist der zweite Teil?", "Wir sind super toll");
+    if (main && secondary) add(main, secondary);
+});