diff options
Diffstat (limited to 'fe')
| -rw-r--r-- | fe/admin.html | 6 | ||||
| -rw-r--r-- | fe/green.jpg | bin | 0 -> 178327 bytes | |||
| -rw-r--r-- | fe/index.html | 9 | ||||
| -rw-r--r-- | fe/leaderboard.html | 85 | ||||
| -rw-r--r-- | fe/leaderboard.js | 38 | ||||
| -rw-r--r-- | fe/play.html | 13 | ||||
| -rw-r--r-- | fe/play.js | 31 | ||||
| -rw-r--r-- | fe/purple.jpg | bin | 0 -> 156095 bytes |
8 files changed, 134 insertions, 48 deletions
diff --git a/fe/admin.html b/fe/admin.html index d95f4fa..d38776a 100644 --- a/fe/admin.html +++ b/fe/admin.html @@ -14,9 +14,9 @@ <button id="submit-settings" value="Submit">Submit</button> </div> <div id="multi-form"> - <label>Green: x</label> + <label>Purple Members: x</label> <input type="number" id="green-team-multiplier" value="1"></input> - <label>Purple: x</label> + <label>Green Members: x</label> <input type="number" id="purple-team-multiplier" value="1"></input> <button id="submit-multi">Submit</button> </div> @@ -25,4 +25,4 @@ <button id="purple-team-increment">Purple++</button> <script type="module" src="admin.js"></script> </body> -</html>
\ No newline at end of file +</html> diff --git a/fe/green.jpg b/fe/green.jpg Binary files differnew file mode 100644 index 0000000..4be823c --- /dev/null +++ b/fe/green.jpg diff --git a/fe/index.html b/fe/index.html index 9f3b3f0..ca16245 100644 --- a/fe/index.html +++ b/fe/index.html @@ -6,6 +6,15 @@ <title>Vite App</title> </head> <body> + <h1>GANG FIGHT!</h1> + <p>Enter your name and pick your team below.</p> + <p>Click the screen to gain points for your team.</p> + <p>The more determination your team has the more worth your click is.</p> + <p>Every so often a task will appear on your screen.</p> + <p>Come to me and complete the task to gain bonus points for your team.</p> + <p>May the best color win.</p> + <br> + <p>(GREEN SUXS ;-])</p> <form id="play-form" action="./play.html" method="get"> <label for="name">Name:</label> <input type="text" id="username" name="username"><br><br> diff --git a/fe/leaderboard.html b/fe/leaderboard.html index e51eca9..6394494 100644 --- a/fe/leaderboard.html +++ b/fe/leaderboard.html @@ -1,39 +1,78 @@ -<!DOCTYPE html> <html lang="en"> -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Document</title> -</head> -<body> + <head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Document</title> + <style> + body { background-color: black; font-family: Tahoma, Verdana, Segoe, sans-serif; } + #divv { + color: white; + height: 100%; + padding: 10px; + text-align: center; + } + #team-container { + color: white; + height: 100%; + font-family: Tahoma, Verdana, Segoe, sans-serif; + padding: 10px; + text-align: center; + } + #team-name { font-size: 50px;} + #team-total { font-size: 100px;} + #team-multiplier { font-size: 25px;} + table { font-size: 25px; color: white; text-align: center; margin-left: auto; margin-right: auto;} + hr { + height: 12px; + border: none; + background-color: white; + } + .container { + background-color:black; + display:flex; + } + .green-team { + background-color: green; + width: 50%; + } + .purple-team { + background-color:rebeccapurple; + flex-grow: 1; + } + #prompt {display: none;} + </style> + </head> + <body> <div id="leaderboard"> <div id="leaderboard-title">Leaderboard</div> <div id="prompt">x1.0</div> - <div id="team-container"> + <h1 style="color: white;">        Go to unchi.net/jac to join! </h1> - <!-- <div class="team-box green-team"> - <div id="team-data"></div> - <div id="team-name">Green Team</div> + <div id="team-container" class="container"> + <div id="divv" class="team-box green-team"> + <h1>Team Green</h1> + <hr> <div id="team-total">12</div> + <hr> <div class="team-member-row"> <div class="team-member-name">Bob</div> <div class="team-member-score">12</div> </div> </div> - - <div class="team-box purple-team"> - <div id="team-data"></div> - <div id="team-name">Purple Team</div> - <div id="team-total">1</div> + <div id="divv" class="team-box purple-team"> + <h1>Team Purple</h1> + <hr> + <div id="team-total">12</div> + <hr> <div class="team-member-row"> - <div class="team-member-name">Not Bob</div> - <div class="team-member-score">1</div> + <div class="team-member-name">Bob</div> + <div class="team-member-score">12</div> </div> - </div> --> - + </div> </div> + </div> <script type="module" src="leaderboard.js"></script> -</body> -</html>
\ No newline at end of file + </body> +</html> diff --git a/fe/leaderboard.js b/fe/leaderboard.js index 426fb47..74c9829 100644 --- a/fe/leaderboard.js +++ b/fe/leaderboard.js @@ -1,4 +1,5 @@ -import { API_ROOT, INGORED_USERS } from "./global.js" + +import { API_ROOT, INGORED_USERS } from "./global.js" const element = (e) => document.querySelector(e) @@ -26,7 +27,7 @@ function fill_metadata(settings) { } function clear_leaderboard() { - element(`#team-container`).innerHTML = "" + element(`#team-container`).innerHTML = '' } function fill_leaderboard(points, multipliers) { @@ -34,12 +35,17 @@ function fill_leaderboard(points, multipliers) { for (let team of ["green", "purple"]) { console.log(team) const html = ` - <div class="team-box ${team}-team"> + <div id="divv" class="team-box ${team}-team" style="background-image: url('${team}.jpg')"> + <div id="team-name" style="background-color: ${team}">${sentenceCase(team)} Team</div> + <div id="team-multiplier" style="background-color: ${team}">Determination: ${multipliers[team]}</div> + <hr> + <div id="team-total" style="background-color: ${team}">Total: ${points[team]["__total"]}</div> + <hr> <div id="team-data"></div> - <div id="team-name">${sentenceCase(team)} Team</div> - <div id="team-multiplier">x${multipliers[team]}</div> - <div id="team-total">Total: ${points[team]["__total"]}</div> + + <table> ${team_member_entry(points[team])} + </table> </div> ` element(`#team-container`).innerHTML += html @@ -48,13 +54,20 @@ function fill_leaderboard(points, multipliers) { function team_member_entry(teamPoints) { let html = "" + const sorted = [] for (let member in teamPoints) { - if (!INGORED_USERS.includes(member)) { + sorted.push([member, teamPoints[member]]) + } + sorted.sort((a, b) => b[1] - a[1]) + for (let i = 0; i<sorted.length; i++) { + + console.log(i, sorted[i], sorted[0]) + if (!INGORED_USERS.includes(sorted[i][0])) { html += ` - <div class="team-member-row"> - <div class="team-member-name">${sentenceCase(member)}</div> - <div class="team-member-score">${teamPoints[member]}</div> - </div> + <tr class="team-member-row"> + <td>${sentenceCase(sorted[i][0])}</td> + <td>${sorted[i][1]}</td> + </tr> ` } } @@ -64,7 +77,6 @@ function team_member_entry(teamPoints) { document.addEventListener("DOMContentLoaded", async () => { update() const urlParams = new URLSearchParams(window.location.search); - const poll = urlParams.get("poll") || 3000 + const poll = urlParams.get("poll") || 5000 const polling = setInterval(update, poll) }); - diff --git a/fe/play.html b/fe/play.html index d535b40..f96dfac 100644 --- a/fe/play.html +++ b/fe/play.html @@ -5,10 +5,17 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> + <style> + .full { + position: absolute; + width: 100%; + height: 100%; + font-size: 25px; + } + </style> </head> <body> - <div class="username"></div> + <button id="increment" class="full">task</button> <script type="module" src="play.js"></script> - <button id="increment">+</button> </body> -</html>
\ No newline at end of file +</html> @@ -1,6 +1,9 @@ import { API_ROOT } from "./global.js" const {team: TEAM, username: USERNAME} = getUserInfo() +const PROMPT_POLL = 30000 + +const element = (e) => document.querySelector(e) async function increment() { const response = await fetch(`${API_ROOT}/increment/${TEAM}/${USERNAME}`, {"method": "POST"}) @@ -14,11 +17,27 @@ function getUserInfo() { } -async function getUserPoints() { - const response = await fetch(`${API_ROOT}/points/${TEAM}/${USERNAME}`) - const {points} = await response.json() - return points +// async function getUserPoints() { +// const response = await fetch(`${API_ROOT}/points/${TEAM}/${USERNAME}`) +// const {points} = await response.json() +// return points +// } + +async function getPrompt() { + const response = await fetch(`${API_ROOT}/prompt/`, { "method": "GET" }) + const { prompt } = await response.json() + return prompt } -document.querySelector("#increment").addEventListener("click", increment) -document.querySelector(".username")
\ No newline at end of file +async function fillPrompt() { + element("button").innerHTML = await getPrompt() +} + +element("#increment").addEventListener("click", increment) + +document.addEventListener("DOMContentLoaded", async () => { + // element(".username").innerHTML = USERNAME + console.log("sdfsdf") + fillPrompt() + const polling = setInterval(fillPrompt, PROMPT_POLL) +}); diff --git a/fe/purple.jpg b/fe/purple.jpg Binary files differnew file mode 100644 index 0000000..caa0aa0 --- /dev/null +++ b/fe/purple.jpg |
