From 60c31f059e24d13f6fcc79afe1b3d359778fc5a9 Mon Sep 17 00:00:00 2001 From: Rushil Umaretiya Date: Wed, 14 Sep 2022 09:46:42 -0400 Subject: [PATCH] feat: finished full app --- admin.html | 15 ++++- index.html | 3 + index.js | 8 +++ public/css/styles.css | 126 ++++++++++++-------------------------- public/css/styles.sass | 23 ++++++- public/js/admin.js | 133 ++++++++++++++++++++++++++++++++++++++++- public/js/script.js | 23 ++++++- public/questions.json | 25 ++++++++ 8 files changed, 260 insertions(+), 96 deletions(-) create mode 100644 public/questions.json diff --git a/admin.html b/admin.html index 8f739a4..fe062f5 100644 --- a/admin.html +++ b/admin.html @@ -9,8 +9,19 @@

welcome to the admin page

- - +
+ + +
+ + +
+ + +
+ +
+ diff --git a/index.html b/index.html index 5aceee3..413d2d6 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,9 @@ +
+ 202X Wins! +
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