mirror of
https://github.com/Rushilwiz/feud.git
synced 2025-04-03 20:10:17 -04:00
feat: finished full app
This commit is contained in:
parent
0147988368
commit
60c31f059e
15
admin.html
15
admin.html
|
|
@ -9,8 +9,19 @@
|
|||
<body>
|
||||
<h1>welcome to the admin page</h1>
|
||||
<button id="reset">reset</button>
|
||||
|
||||
|
||||
<br>
|
||||
<button id="game1">load 2026 vs 2024</button>
|
||||
<button id="game2">load 2025 vs 2023</button>
|
||||
<hr>
|
||||
<button id="startround">start round</button>
|
||||
<button id="show1">show1</button><button id="show2">show2</button><button id="show3">show3</button><button id="show4">show4</button><button id="show5">show5</button><button id="show6">show6</button><button id="show7">show7</button><button id="show8">show8</button>
|
||||
<hr>
|
||||
<button id="giveA">give points to left team (2026/2025)</button>
|
||||
<button id="giveB">give points to right team (2024/2023)</button>
|
||||
<hr>
|
||||
<button id="nextquestion">next question</button>
|
||||
<hr>
|
||||
<button id="endround">end round</button>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/js/admin.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
<link rel="stylesheet" href="/css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="winner" class="winner">
|
||||
202X Wins!
|
||||
</div>
|
||||
<div class="scoreboard">
|
||||
<div class="container">
|
||||
<div class="scores">
|
||||
|
|
|
|||
8
index.js
8
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);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}/*# sourceMappingURL=styles.css.map */
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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!"
|
||||
})
|
||||
25
public/questions.json
Normal file
25
public/questions.json
Normal file
|
|
@ -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]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user