aboutsummaryrefslogtreecommitdiff
path: root/motto/public/script.js
diff options
context:
space:
mode:
Diffstat (limited to 'motto/public/script.js')
-rw-r--r--motto/public/script.js236
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);
+});