diff --git a/index.js b/index.js
index d29f07a..41a38cb 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,7 @@
const express = require('express');
const app = express();
const http = require('http');
+const { connect } = require('http2');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
@@ -32,6 +33,8 @@ app.get('/admin', (req, res) => {
app.use(express.static("public"))
io.on('connection', (socket) => {
+ console.log("connection " + socket.id)
+
socket.on("do-reset", () => {
console.log("reset")
io.emit("reset")
@@ -41,6 +44,11 @@ io.on('connection', (socket) => {
console.log("update");
io.emit("update", data);
});
+
+ socket.on("do-winner", (data) => {
+ console.log("winner " + data);
+ io.emit("winner", data);
+ });
});
diff --git a/public/css/styles.css b/public/css/styles.css
index 66d0872..9d23122 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -2,88 +2,72 @@
* {
margin: 0;
padding: 0;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.winner {
+ width: 100%;
+ height: 100%;
+ background: #ffd1dc;
+ z-index: 999;
+ position: fixed;
+ left: 0;
+ top: 0;
+ overflow: auto;
+ display: none;
+ font-family: "Inter", sans-serif;
+ font-size: 4em;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
}
.scoreboard {
+ z-index: 1;
background: #fefefe;
width: 100vw;
height: 100vh;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
+ align-items: center;
+ justify-content: center;
}
-
.scoreboard .container {
width: 80%;
height: 85%;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: distribute;
- justify-content: space-around;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
}
-
.scoreboard .container .scores {
width: 100%;
height: 30%;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: distribute;
- justify-content: space-around;
+ align-items: center;
+ justify-content: space-around;
}
-
.scoreboard .container .scores #a {
border-right: 2px solid black;
}
-
.scoreboard .container .scores #b {
border-left: 2px solid black;
}
-
.scoreboard .container .scores .col {
width: 30%;
height: 100%;
}
-
.scoreboard .container .scores .col div {
height: 50%;
width: 100%;
text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ justify-content: center;
+ align-items: center;
}
-
.scoreboard .container .scores .col .year {
font-size: 4em;
font-family: "Inter", sans-serif;
}
-
.scoreboard .container .scores .col #current {
font-size: 5em;
font-family: monospace;
@@ -92,72 +76,46 @@
border-radius: 25%;
color: white;
}
-
.scoreboard .container .scores .col .score {
font-size: 6em;
font-family: monospace;
}
-
.scoreboard .container .scores .col .header {
color: #cf00da;
font-family: "Bebas Neue", cursive;
font-size: 3em;
}
-
.scoreboard .container .board {
width: 100%;
height: 70%;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: distribute;
- justify-content: space-around;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
}
-
.scoreboard .container .board .row {
width: 100%;
height: 20%;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -ms-flex-pack: distribute;
- justify-content: space-around;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ justify-content: space-around;
+ align-items: center;
}
-
.scoreboard .container .board .row .question {
width: 95%;
height: 80%;
border-radius: 25px;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ justify-content: center;
+ align-items: center;
background: #ffae00;
text-align: center;
}
-
.scoreboard .container .board .row .question h1 {
font-family: "Inter", sans-serif;
width: 80%;
height: 50%;
margin: auto auto;
}
-
.scoreboard .container .board .row .answer {
width: 45%;
height: 90%;
@@ -165,18 +123,10 @@
text-align: center;
font-family: "Inter", sans-serif;
font-size: 4em;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ justify-content: center;
+ align-items: center;
background: #2193b0;
- background: -webkit-gradient(linear, left bottom, left top, from(#2193b0), to(#6dd5ed));
background: linear-gradient(to top, #2193b0, #6dd5ed);
color: white;
-}
-/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
+}/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
diff --git a/public/css/styles.sass b/public/css/styles.sass
index b2cadbe..bcc14bf 100644
--- a/public/css/styles.sass
+++ b/public/css/styles.sass
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter&display=swap')
$inter: "Inter", sans-serif
$bebas: "Bebas Neue", cursive
@@ -7,9 +7,26 @@ $bebas: "Bebas Neue", cursive
margin: 0
padding: 0
box-sizing: border-box
-
-.scoreboard
+.winner
+ width: 100%
+ height: 100%
+ background: #ffd1dc
+ z-index: 999
+ position: fixed
+ left: 0
+ top: 0
+ overflow: auto
+ display: none
+ font-family: $inter
+ font-size: 4em
+ text-align: center
+ justify-content: center
+ align-items: center
+
+
+.scoreboard
+ z-index: 1
background: #fefefe
width: 100vw
diff --git a/public/js/admin.js b/public/js/admin.js
index ef9521b..96aba7a 100644
--- a/public/js/admin.js
+++ b/public/js/admin.js
@@ -11,8 +11,7 @@ const _default = {
};
-if (sessionStorage.getItem("data") === null) sessionStorage.setItem("data", JSON.stringify(data))
-else data = sessionStorage.getItem("data")
+if (sessionStorage.getItem("data") === null) sessionStorage.setItem("data", JSON.stringify(_default))
document.getElementById("reset").addEventListener("click", () => {
sessionStorage.setItem("data", JSON.stringify(_default))
@@ -22,4 +21,134 @@ document.getElementById("reset").addEventListener("click", () => {
var update = () => {
socket.emit("do-update", JSON.parse(sessionStorage.getItem("data")))
+}
+
+var question = 0
+
+let game1 = {
+ yearA: 2026,
+ yearB: 2024,
+ scoreA: 0,
+ scoreB: 0,
+ current: 0,
+ question: "2026 vs 2024: Question 1",
+ answers: []
+}
+
+let game2 = {
+ yearA: 2025,
+ yearB: 2023,
+ scoreA: 0,
+ scoreB: 0,
+ current: 0,
+ question: "2025 vs 2023: Question 1",
+ answers: []
+}
+
+let game = [game1, game2]
+let currentGame = 0
+let currentQuestion = 0
+
+for (let j = 1; j < 3; j++)
+ document.getElementById("game"+j).addEventListener("click", () => {
+ sessionStorage.setItem("data", JSON.stringify(game[j-1]))
+ update()
+ console.log("game"+j)
+ currentGame = j
+ });
+
+class Question {
+ constructor(question, answers) {
+ this.question = question
+ this.answers = answers
+ }
+}
+
+class Answer {
+ constructor(answer, points) {
+ this.answer = answer
+ this.points = points
+ }
+}
+
+let QUESTION_STRING = '{"questions":[{"question":"What\'s is first?","answers":[["The plaza",23],["The mall",21]]},{"question":"What\'s is second?","answers":[["The plaza",23],["The mall",21]]},{"question":"What\'s is third?","answers":[["The plaza",23],["The mall",21]]},{"question":"What\'s is first?","answers":[["The plaza",23],["The house",21]]},{"question":"What\'s is second?","answers":[["The plaza",23],["The house",21]]},{"question":"What\'s is third?","answers":[["The plaza",23],["The house",21]]}]}'
+let questionData = JSON.parse(QUESTION_STRING)
+var questions = []
+
+questionData['questions'].map((q,i) => {
+ var question = new Question(q["question"], [])
+ q['answers'].map((answer) => {
+ question.answers.push(new Answer(answer[0], answer[1]))
+ })
+
+ questions.push(question)
+})
+
+document.getElementById("startround").addEventListener("click", () => {
+ currentQuestion = 0
+ loadQuestion()
+ update()
+})
+
+var loadQuestion = () => {
+ data = JSON.parse(sessionStorage.getItem("data"))
+ let idx = (currentQuestion) + ((currentGame-1)*3)
+
+ console.log("loading question " + idx)
+ data["answers"] = Array.from({length: questions[idx].answers.length}, (_, i) => i + 1)
+ data["current"] = 0
+ data["question"] = questions[idx].question
+ sessionStorage.setItem("data", JSON.stringify(data))
+ currentQuestion++
+}
+
+for (let j = 1; j < 9; j++)
+ document.getElementById("show"+j).addEventListener("click", () => {
+ showAnswer(j)
+ update()
+ });
+
+var showAnswer = (j) => {
+ data = JSON.parse(sessionStorage.getItem("data"))
+ let idx = j + ((currentGame-1)*3)
+
+ var answer = questions[idx].answers[j-1]
+ data["current"] += answer.points
+ data["answers"][j-1] = answer.answer
+ sessionStorage.setItem("data", JSON.stringify(data))
+}
+
+document.getElementById("giveA").addEventListener("click", () => {
+ givePoints("A")
+})
+
+
+document.getElementById("giveB").addEventListener("click", () => {
+ givePoints("B")
+})
+
+var givePoints = (i) => {
+ data = JSON.parse(sessionStorage.getItem("data"))
+ data["score"+i] += data["current"]
+ data["current"] = 0
+ sessionStorage.setItem("data", JSON.stringify(data))
+ update()
+}
+
+document.getElementById("nextquestion").addEventListener("click", () => {
+ loadQuestion()
+ update()
+})
+
+document.getElementById("endround").addEventListener("click", () => {
+ sendWinner()
+})
+
+var sendWinner = () => {
+ data = JSON.parse(sessionStorage.getItem("data"))
+ var winner
+ if (data.scoreA > data.scoreB) winner = "a"
+ else winner = "b"
+
+ socket.emit("do-winner", winner)
}
\ No newline at end of file
diff --git a/public/js/script.js b/public/js/script.js
index 16dc188..2615ebf 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -1,5 +1,6 @@
let socket = io();
+const winner = document.getElementById("winner")
const answers = [...Array(8).keys()].map((i) =>
document.getElementById("answer" + (i + 1))
);
@@ -36,11 +37,14 @@ var reset = () => {
answers.map((answer, i) => {
setAnswer(i + 1, i + 1);
});
+ winner.style.display = "none"
setScore(0, 0);
setYear(2020, 2020);
setCurrent(0);
setQuestion("Waiting to continue...");
+ for (let i = 1; i < 9; i++)
+ setAnswer(i, "");
};
socket.on("reset", () => {
@@ -48,9 +52,26 @@ socket.on("reset", () => {
})
socket.on("update", (data) => {
+ winner.style.display = "none"
setYear(data["yearA"], data["yearB"])
setScore(data["scoreA"], data["scoreB"])
setCurrent(data["current"])
setQuestion(data["question"])
- data["answers"]
+ for (let i = 1; i < 9; i++)
+ setAnswer(i, "");
+
+ data["answers"].map((e,i) => {
+ setAnswer(i+1, e)
+ })
+})
+
+
+
+socket.on("winner", (data) => {
+ winner.style.display = "flex"
+ console.log(data)
+ var year
+ if (data === "a") year = yearA.innerHTML
+ else year = yearB.innerHTML
+ winner.innerHTML = year + " wins!"
})
\ No newline at end of file
diff --git a/public/questions.json b/public/questions.json
new file mode 100644
index 0000000..ea69b43
--- /dev/null
+++ b/public/questions.json
@@ -0,0 +1,25 @@
+{
+ "questions": [
+ {
+ "question": "What's your favorite place to go after school?",
+ "answers": [
+ ["The plaza", 23],
+ ["The mall", 21]
+ ]
+ },
+ {
+ "question": "What's your favorite place to go during school?",
+ "answers": [
+ ["The plaza", 23],
+ ["The mall", 21]
+ ]
+ },
+ {
+ "question": "What's your favorite place to go before school?",
+ "answers": [
+ ["The plaza", 23],
+ ["The mall", 21]
+ ]
+ }
+ ]
+ }
\ No newline at end of file