aboutsummaryrefslogtreecommitdiff
path: root/motto/public
diff options
context:
space:
mode:
Diffstat (limited to 'motto/public')
-rw-r--r--motto/public/add.svg1
-rw-r--r--motto/public/index.html7
-rw-r--r--motto/public/script.js236
-rw-r--r--motto/public/skip.svg1
-rw-r--r--motto/public/style.css121
5 files changed, 216 insertions, 150 deletions
diff --git a/motto/public/add.svg b/motto/public/add.svg
new file mode 100644
index 0000000..703c5b7
--- /dev/null
+++ b/motto/public/add.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> \ No newline at end of file
diff --git a/motto/public/index.html b/motto/public/index.html
index 5a9d698..100b2af 100644
--- a/motto/public/index.html
+++ b/motto/public/index.html
@@ -11,8 +11,13 @@
<div class="cards">
</div>
- <div class="yay_or_nay">
+ <div class="fab">
+ <button id="add" class="add_button"><img src="add.svg"></img></button>
+ </div>
+
+ <div class="yay_or_nay fab">
<button id="nay"><img src="x.svg"></img></button>
+ <button id="hmm"><img src="skip.svg"></img></button>
<button id="yay"><img src="heart.svg"></img></button>
</div>
</div>
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);
+});
diff --git a/motto/public/skip.svg b/motto/public/skip.svg
new file mode 100644
index 0000000..e002c24
--- /dev/null
+++ b/motto/public/skip.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#CDD9DD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
diff --git a/motto/public/style.css b/motto/public/style.css
index f7562ba..9de73ad 100644
--- a/motto/public/style.css
+++ b/motto/public/style.css
@@ -1,87 +1,98 @@
*,
*:before,
*:after {
- box-sizing: border-box;
- user-select: none;
- padding: 0;
- margin: 0;
+ box-sizing: border-box;
+ user-select: none;
+ padding: 0;
+ margin: 0;
}
html,
body {
- background: #ccfbfe;
- font-family: sans-serif;
- overflow: hidden;
+ background: #ccfbfe;
+ font-family: sans-serif;
+ overflow: hidden;
}
.wrapper {
- width: 100vw;
- height: 100vh;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- position: relative;
- opacity: 0;
- transition: opacity 0.5s ease-in-out;
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ opacity: 0;
+ transition: opacity 0.5s ease-in-out;
}
.cards {
- flex-grow: 1;
- padding-top: 40px;
- text-align: center;
- display: flex;
- justify-content: center;
- /* align-items: flex-end; */
- z-index: 1;
+ flex-grow: 1;
+ padding-top: 40px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1;
}
.card {
- display: inline-block;
- width: 90vw;
- max-width: 400px;
- height: 70vh;
- background: white;
- padding-bottom: 40px;
- border-radius: 8px;
- overflow: hidden;
- position: absolute;
- transition: all 0.3s ease-in-out;
- cursor: grab;
- padding: 20px;
+ display: inline-block;
+ width: 90vw;
+ max-width: 400px;
+ height: 70vh;
+ max-height: 400px;
+ background: white;
+ padding-bottom: 40px;
+ border-radius: 8px;
+ overflow: hidden;
+ position: absolute;
+ transition: all 0.3s ease-in-out;
+ cursor: grab;
+ padding: 20px;
}
.card * {
- pointer-events: none;
+ pointer-events: none;
}
.moving.card {
- transition: none;
- cursor: grabbing;
+ transition: none;
+ cursor: grabbing;
}
.yay_or_nay {
- position: absolute;
- bottom: 0;
- flex: 0 0 100px;
- text-align: center;
- padding-top: 20px;
- width: 100%;
+ z-index: 100000;
+ position: absolute;
+ bottom: 0;
+ flex: 0 0 100px;
+ text-align: center;
+ padding-top: 20px;
+ width: 100%;
}
-.yay_or_nay button {
- border-radius: 50%;
- line-height: 60px;
- width: 60px;
- border: 0;
- background: white;
- display: inline-block;
- margin: 20px;
+.fab button {
+ z-index: 100000;
+ border-radius: 50%;
+ line-height: 60px;
+ width: 60px;
+ border: 0;
+ background: white;
+ display: inline-block;
+ margin: 20px;
}
-.yay_or_nay button:focus {
- outline: 0;
+.fab button:focus {
+ outline: 0;
}
-.yay_or_nay img {
- vertical-align: middle;
+.fab img {
+ z-index: 100000;
+ vertical-align: middle;
+}
+
+.add_button {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: unset;
}