thayol/sso-timer
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: thayol/sso-timer:754893252e9a13bde0fd1cd57e4e30f78c19c297
Branches Tags
thayol/sso-timer:master
..
compare: thayol/sso-timer:master
Branches Tags
thayol/sso-timer:master

10 Commits
754893252e .. master

Author SHA1 Message Date
thayol dc3a19daca fix first championship the next day 2023-12-02 23:06:12 +01:00
thayol 9e82d9a6b4 redesign after "more" has been added 2023-12-02 18:06:35 +01:00
thayol 6f2d74019f remove comment that is no longer needed 2023-12-02 17:13:28 +01:00
thayol 0a14e69f82 make Championship an instantiated class 2023-12-02 17:11:25 +01:00
thayol b98513e6f3 refactor to smaller builder methods 2023-12-02 17:06:05 +01:00
thayol d0222b007f update paranoiaOffset default 2023-12-02 15:47:56 +01:00
thayol b76d4c7d2a update README.md 
Since PHP is no longer needed for hosting.
 2023-12-02 14:38:40 +01:00
thayol 0fc156b3be fix title with paranoia set 2023-12-02 14:10:24 +01:00
thayol 50209a10cd remove Next Up, serves no purpose 2023-12-02 14:09:21 +01:00
thayol f575301a6d add paranoiaOffset 2023-12-02 14:08:54 +01:00
8 changed files with 172 additions and 65 deletions
Expand all files Collapse all files
README.md
+3 -2
View File
@@ -3,8 +3,9 @@
## Setup ## Setup
1. Put your favicon to `src/favicon-32x32.png` and your page background to `src/background.jpg` 1. Put your favicon to `src/favicon-32x32.png` and your page background to `src/background.jpg`
1. Perform the championship time update. 1. Perform the championship time update
1. Make sure that your web host consumes PHP files using PHP 8 or newer 1. Install PHP 8 or newer (only needed for the data processing step
1. Make sure to keep the asset/folder structure intact when hosting
## Updating Championship Times ## Updating Championship Times
index.html
+14 -3
View File
@@ -7,17 +7,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/png" sizes="32x32" href="src/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="32x32" href="src/favicon-32x32.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet" />
</head> </head>
<body> <body>
<div class="background-image"></div> <div class="background-image"></div>
<div class="timer-container"> <div class="timer-panel-container">
<div class="timer-panel"> <div class="timer-panel">
<h2>Next Up</h2> <div class="timer-container">
<h3 class="location-container">The <span id="location">...</span> Championship</h3> <h3 class="location-container"><span class="no-mobile">The </span><span id="location">...</span><span class="no-mobile"> Championship</span></h3>
<p class="championship">at <span id="time">00:00</span></p> <p class="championship">at <span id="time">00:00</span></p>
<p class="remaining">Remaining: <span id="timer">00:00:00</span></p> <p class="remaining">Remaining: <span id="timer">00:00:00</span></p>
</div> </div>
<details class="more">
<summary>More</summary>
<div class="more-content">
<p class="paranoia-disclaimer">Make my timers shorter by <input id="paranoia" type="number" step="1" value="2"></input> minute<span id="minutes_plural">s</span>.</p>
</div>
</details>
</div>
</div> </div>
<div class="days" id="championships_table"></div> <div class="days" id="championships_table"></div>
js/championship.js
+10 -3
View File
@@ -5,6 +5,13 @@ import Transform from './transform.js'
export default class Championship { export default class Championship {
static last = null static last = null
constructor(details) {
this.day = details?.day
this.time = details?.time
this.location = details?.location
this.remaining = details?.remaining
}
static get next() { static get next() {
let remainingOffset = 0 let remainingOffset = 0
let day = Day.today let day = Day.today
@@ -13,15 +20,15 @@ export default class Championship {
if (time == null) { if (time == null) {
remainingOffset += 1440 remainingOffset += 1440
day = Day.tomorrow day = Day.tomorrow
time = Championship.firstTimeNextDay time = Championship.firstTimeTomorrow
} }
return { return new Championship({
day: day, day: day,
time: time, time: time,
location: Data.championships[day][time], location: Data.championships[day][time],
remaining: (remainingOffset + time) - Day.minutesPassedSinceMidnight, remaining: (remainingOffset + time) - Day.minutesPassedSinceMidnight,
} })
} }
static get nextChanged() { static get nextChanged() {
js/day.js
+2 -1
View File
@@ -1,5 +1,6 @@
export default class Day { export default class Day {
static date = new Date() // maybe easier to offset time zone later static date = new Date() // maybe easier to offset time zone later
static names = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
static update() { static update() {
Day.date = new Date() Day.date = new Date()
@@ -11,7 +12,7 @@ export default class Day {
static get tomorrow() { static get tomorrow() {
let day = Day.today + 1 let day = Day.today + 1
if (day > 6) day -= 6 if (day > 6) day -= 7
return day return day
} }
js/sso-timer.js
-3
View File
@@ -1,6 +1,3 @@
import UI from './ui.js' import UI from './ui.js'
import Championship from './championship.js'
window.Championship = Championship
window.addEventListener('load', UI.init) window.addEventListener('load', UI.init)
js/transform.js
+8
View File
@@ -18,4 +18,12 @@ export default class Transform {
static time(time) { static time(time) {
return Math.floor(time/60).toString().padStart(2, '0') + ":" + (time % 60).toString().padStart(2, '0') return Math.floor(time/60).toString().padStart(2, '0') + ":" + (time % 60).toString().padStart(2, '0')
} }
static stopAtZero(number) {
if (number > 0) {
return number
}
return 0
}
} }
js/ui.js
+64 -35
View File
@@ -8,21 +8,27 @@ export default class UI {
static updateFrequency = 500 // in ms static updateFrequency = 500 // in ms
constructor(rootObject) { constructor(rootObject) {
this.next = new Championship()
this.rootObject = rootObject this.rootObject = rootObject
this.loadChampionships() this.savedParanoiaOffset = localStorage.getItem('paranoiaOffset') || 1
this.start() // auto-start, might need some more thought this.#setParanoiaOffset(this.savedParanoiaOffset)
this.#loadChampionships()
this.start()
} }
static init() { static init() {
UI.instance = new UI(window.document) UI.instance = new UI(window.document)
} }
loadResponseIntoData(response) { get paranoiaOffset() {
response.json().then(Data.init) let currentParanoiaOffset = this.rootObject.getElementById('paranoia').value
if (this.savedParanoiaOffset != currentParanoiaOffset) {
this.savedParanoiaOffset = currentParanoiaOffset
localStorage.setItem('paranoiaOffset', currentParanoiaOffset)
this.#updateParanoiaPlural()
} }
loadChampionships() { return currentParanoiaOffset
fetch(Data.championshipsURL).then(this.loadResponseIntoData)
} }
start() { start() {
@@ -38,52 +44,75 @@ export default class UI {
Day.update() Day.update()
let next = Championship.next this.next = Championship.next
if (Championship.nextChanged) { if (Championship.nextChanged) {
this.updateChampionshipDetails(next) this.#updateChampionshipDetails()
this.updateChampionshipTable(next) this.#updateChampionshipTable()
} }
this.updateTimer(next) this.#updateTimer()
} }
updateChampionshipDetails(next) { #setParanoiaOffset(value) {
this.rootObject.getElementById('time').innerHTML = Transform.time(next.time) this.rootObject.getElementById('paranoia').value = value
this.rootObject.getElementById('location').innerHTML = next.location this.#updateParanoiaPlural()
} }
updateTimer(next) { #loadResponseIntoData(response) {
let remaining = Transform.time(next.remaining) + ":" + Day.secondsUntilFullMinute response.json().then(Data.init)
this.rootObject.getElementById('timer').innerHTML = remaining
this.rootObject.title = `${remaining} - ${next.location} - SSO Timer`
} }
// TODO: refactor to builder #loadChampionships() {
updateChampionshipTable(next) { fetch(Data.championshipsURL).then(this.#loadResponseIntoData)
const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
let table = ``
for (const [day, details] of Object.entries(Data.championships)) {
let dayContainer = `<h1 class="day-title">${weekdays[day]}</h1>`
let dayContainerClasses = 'day-container'
if (Day.today == day) {
dayContainerClasses += ' today'
} }
for (const [time, location] of Object.entries(details)) { #updateParanoiaPlural() {
let formattedTime = Transform.time(time) this.rootObject.getElementById('minutes_plural').innerHTML = this.paranoiaOffset == 1 ? '' : 's'
let classes = 'time-container'
if (next.day == day && next.time == time) {
classes += ' next-time'
} }
dayContainer += `<li class="${classes}"><b class="time">${formattedTime}</b>: ${location}</li>` #updateChampionshipDetails() {
this.rootObject.getElementById('time').innerHTML = Transform.time(this.next?.time)
this.rootObject.getElementById('location').innerHTML = this.next?.location
} }
table += `<div class="${dayContainerClasses}"><ul class="times">${dayContainer}</ul></div>` #updateTimer() {
let remaining = this.next?.remaining - this.paranoiaOffset
let formattedRemaining = '00:00:00'
if (remaining >= 0) {
formattedRemaining = Transform.time(remaining) + ":" + Day.secondsUntilFullMinute
} }
document.getElementById('championships_table').innerHTML = table this.rootObject.getElementById('timer').innerHTML = formattedRemaining
this.rootObject.title = `${formattedRemaining} - ${this.next?.location} - SSO Timer`
}
#updateChampionshipTable() {
document.getElementById('championships_table').innerHTML = this.#buildChampionshipTable()
}
#buildChampionshipTable() {
return Object.entries(Data.championships).map((dayDetails) => this.#buildChampionshipDay(dayDetails)).join('')
}
#buildChampionshipDay(dayDetails) {
const [day, details] = dayDetails
let dayContainer = this.#buildChampionshipTimes(day, details)
dayContainer = `<h1 class="day-title">${Day.names[day]}</h1><ul class="times">${dayContainer}</ul>`
let dayContainerClasses = 'day-container' + ((Day.today == day) ? ' today' : '')
return `<div class="${dayContainerClasses}">${dayContainer}</div>`
}
#buildChampionshipTimes(day, details) {
return Object.entries(details).map((entry) => this.#buildChampionshipTime(day, entry)).join('')
}
#buildChampionshipTime(day, entry) {
const [time, location] = entry
let classes = 'time-container' + ((this.next?.day == day && this.next?.time == time) ? ' next-time' : '')
return `<li class="${classes}"><b class="time">${Transform.time(time)}</b>: ${location}</li>`
} }
} }
style.css
+65 -12
View File
@@ -1,9 +1,18 @@
:root { :root {
--border: black; --text: black;
--background: white;
--border: white;
--border-size: 0px;
--border-pattern: solid;
--border-radius: 10px;
--box-shadow-offset: 0 0;
--box-shadow-spread: 10px;
--box-shadow: white;
--sso-pink: #e53bb9; --sso-pink: #e53bb9;
--modal-background: rgba(255, 255, 255, 0.7); --modal-background: rgba(255, 255, 255, 0.7);
--highlighted-modal-background: rgba(255, 210, 242, 0.7); --highlighted-modal-background: rgba(255, 210, 242, 0.7);
--highlighted-row: rgba(229, 59, 185, 0.55); --highlighted-row: rgba(229, 59, 185, 0.55);
--more: var(--highlighted-modal-background);
} }
* { * {
@@ -12,8 +21,9 @@
html { html {
margin: 0; margin: 0;
font-family: sans-serif; font-family: 'Quicksand', sans-serif;
background-color: white; background-color: var(--background);
color: var(--text);
} }
body { body {
@@ -21,6 +31,22 @@ body {
padding: 20px; padding: 20px;
} }
.more summary {
padding: 7px 5px;
cursor: pointer;
}
.more .more-content {
padding: 2px 5px 7px;
}
.more {
margin: 0;
background-color: var(--more);
border-radius: 0 0 var(--border-radius) var(--border-radius);
box-shadow: var(--box-shadow-offset) var(--box-shadow-spread) var(--more);
}
.background-image { .background-image {
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -31,19 +57,28 @@ body {
background-size: cover; background-size: cover;
} }
.timer-container { .timer-panel-container {
min-height: 600px; min-height: 600px;
padding-top: 50px; padding-top: 50px;
} }
.timer-container, .day-container {
background-color: var(--modal-background);
border: var(--border-size) var(--border-pattern) var(--border);
box-shadow: var(--box-shadow-offset) var(--box-shadow-spread) var(--box-shadow);
border-radius: var(--border-radius);
}
.timer-container {
padding: 5px;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.timer-panel { .timer-panel {
text-align: center; text-align: center;
max-width: 40em; max-width: 40em;
margin: 5px auto; margin: 5px auto;
background-color: var(--modal-background); padding: 0;
border: 1px solid var(--border);
border-radius: 5px;
padding: 5px;
} }
.location-container { .location-container {
@@ -55,6 +90,21 @@ body {
margin-top: 0; margin-top: 0;
} }
.paranoia-disclaimer {
font-style: italic;
}
.paranoia-disclaimer input#paranoia {
font-family: inherit;
font-size: inherit;
background-color: transparent;
border: none;
border-bottom: 2px var(--border-pattern) var(--text);
padding: 1px 4px;
text-align: center;
width: 2em;
}
.days { .days {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@@ -63,9 +113,6 @@ body {
.day-container { .day-container {
flex: 1 1 auto; flex: 1 1 auto;
background-color: var(--modal-background);
border: 1px solid var(--border);
border-radius: 5px;
padding: 5px; padding: 5px;
} }
@@ -84,9 +131,15 @@ body {
.time-container { .time-container {
list-style-type: none; list-style-type: none;
padding: 3px 5px; padding: 3px 5px;
border-radius: 5px; border-radius: var(--border-radius);
} }
.next-time { .next-time {
background-color: var(--highlighted-row); background-color: var(--highlighted-row);
} }
@media screen and (max-width: 600px) {
.no-mobile {
display: none;
}
}