fix first championship the next day

redesign after "more" has been added
remove comment that is no longer needed
2023-12-02 23:06:12 +01:00 · 2023-12-02 18:06:35 +01:00 · 2023-12-02 17:13:28 +01:00 · 2023-12-02 17:11:25 +01:00 · 2023-12-02 17:06:05 +01:00 · 2023-12-02 15:47:56 +01:00
8 changed files with 172 additions and 65 deletions
@@ -3,8 +3,9 @@
 ## Setup

 1. Put your favicon to `src/favicon-32x32.png` and your page background to `src/background.jpg`
-1. Perform the championship time update.
-1. Make sure that your web host consumes PHP files using PHP 8 or newer
+1. Perform the championship time update
+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

@@ -7,17 +7,28 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <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>
  <body>
    <div class="background-image"></div>

-    <div class="timer-container">
+    <div class="timer-panel-container">
      <div class="timer-panel">
-        <h2>Next Up</h2>
-        <h3 class="location-container">The <span id="location">...</span> Championship</h3>
+        <div class="timer-container">
+          <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="remaining">Remaining: <span id="timer">00:00:00</span></p>
        </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 class="days" id="championships_table"></div>
@@ -5,6 +5,13 @@ import Transform from './transform.js'
 export default class Championship {
  static last = null

+  constructor(details) {
+    this.day = details?.day
+    this.time = details?.time
+    this.location = details?.location
+    this.remaining = details?.remaining
+  }
+
  static get next() {
    let remainingOffset = 0
    let day = Day.today
@@ -13,15 +20,15 @@ export default class Championship {
    if (time == null) {
      remainingOffset += 1440
      day = Day.tomorrow
-      time = Championship.firstTimeNextDay
+      time = Championship.firstTimeTomorrow
    }

-    return {
+    return new Championship({
      day: day,
      time: time,
      location: Data.championships[day][time],
      remaining: (remainingOffset + time) - Day.minutesPassedSinceMidnight,
-    }
+    })
  }

  static get nextChanged() {
@@ -1,5 +1,6 @@
 export default class Day {
  static date = new Date() // maybe easier to offset time zone later
+  static names = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

  static update() {
    Day.date = new Date()
@@ -11,7 +12,7 @@ export default class Day {

  static get tomorrow() {
    let day = Day.today + 1
-    if (day > 6) day -= 6
+    if (day > 6) day -= 7

    return day
  }
@@ -1,6 +1,3 @@
 import UI from './ui.js'
-import Championship from './championship.js'
-
-window.Championship = Championship

 window.addEventListener('load', UI.init)
@@ -18,4 +18,12 @@ export default class Transform {
  static time(time) {
    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
+  }
 }
@@ -8,21 +8,27 @@ export default class UI {
  static updateFrequency = 500 // in ms

  constructor(rootObject) {
+    this.next = new Championship()
    this.rootObject = rootObject
-    this.loadChampionships()
-    this.start() // auto-start, might need some more thought
+    this.savedParanoiaOffset = localStorage.getItem('paranoiaOffset') || 1
+    this.#setParanoiaOffset(this.savedParanoiaOffset)
+    this.#loadChampionships()
+    this.start()
  }

  static init() {
    UI.instance = new UI(window.document)
  }

-  loadResponseIntoData(response) {
-    response.json().then(Data.init)
+  get paranoiaOffset() {
+    let currentParanoiaOffset = this.rootObject.getElementById('paranoia').value
+    if (this.savedParanoiaOffset != currentParanoiaOffset) {
+      this.savedParanoiaOffset = currentParanoiaOffset
+      localStorage.setItem('paranoiaOffset', currentParanoiaOffset)
+      this.#updateParanoiaPlural()
    }

-  loadChampionships() {
-    fetch(Data.championshipsURL).then(this.loadResponseIntoData)
+    return currentParanoiaOffset
  }

  start() {
@@ -38,52 +44,75 @@ export default class UI {

    Day.update()

-    let next = Championship.next
+    this.next = Championship.next

    if (Championship.nextChanged) {
-      this.updateChampionshipDetails(next)
-      this.updateChampionshipTable(next)
+      this.#updateChampionshipDetails()
+      this.#updateChampionshipTable()
    }

-    this.updateTimer(next)
+    this.#updateTimer()
  }

-  updateChampionshipDetails(next) {
-    this.rootObject.getElementById('time').innerHTML = Transform.time(next.time)
-    this.rootObject.getElementById('location').innerHTML = next.location
+  #setParanoiaOffset(value) {
+    this.rootObject.getElementById('paranoia').value = value
+    this.#updateParanoiaPlural()
  }

-  updateTimer(next) {
-    let remaining = Transform.time(next.remaining) + ":" + Day.secondsUntilFullMinute
-    this.rootObject.getElementById('timer').innerHTML = remaining
-    this.rootObject.title = `${remaining} - ${next.location} - SSO Timer`
+  #loadResponseIntoData(response) {
+    response.json().then(Data.init)
  }

-  // TODO: refactor to builder
-  updateChampionshipTable(next) {
-    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'
+  #loadChampionships() {
+    fetch(Data.championshipsURL).then(this.#loadResponseIntoData)
  }

-      for (const [time, location] of Object.entries(details)) {
-        let formattedTime = Transform.time(time)
-        let classes = 'time-container'
-        if (next.day == day && next.time == time) {
-          classes += ' next-time'
+  #updateParanoiaPlural() {
+    this.rootObject.getElementById('minutes_plural').innerHTML = this.paranoiaOffset == 1 ? '' : 's'
  }

-        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>`
  }
 }
@@ -1,9 +1,18 @@
 :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;
  --modal-background: rgba(255, 255, 255, 0.7);
  --highlighted-modal-background: rgba(255, 210, 242, 0.7);
  --highlighted-row: rgba(229, 59, 185, 0.55);
+  --more: var(--highlighted-modal-background);
 }

 * {
@@ -12,8 +21,9 @@

 html {
  margin: 0;
-  font-family: sans-serif;
-  background-color: white;
+  font-family: 'Quicksand', sans-serif;
+  background-color: var(--background);
+  color: var(--text);
 }

 body {
@@ -21,6 +31,22 @@ body {
  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 {
  position: fixed;
  inset: 0;
@@ -31,19 +57,28 @@ body {
  background-size: cover;
 }

-.timer-container {
+.timer-panel-container {
  min-height: 600px;
  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 {
  text-align: center;
  max-width: 40em;
  margin: 5px auto;
-  background-color: var(--modal-background);
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  padding: 5px;
+  padding: 0;
 }

 .location-container {
@@ -55,6 +90,21 @@ body {
  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 {
  display: flex;
  flex-flow: row wrap;
@@ -63,9 +113,6 @@ body {

 .day-container {
  flex: 1 1 auto;
-  background-color: var(--modal-background);
-  border: 1px solid var(--border);
-  border-radius: 5px;
  padding: 5px;
 }

@@ -84,9 +131,15 @@ body {
 .time-container {
  list-style-type: none;
  padding: 3px 5px;
-  border-radius: 5px;
+  border-radius: var(--border-radius);
 }

 .next-time {
  background-color: var(--highlighted-row);
 }
+
+@media screen and (max-width: 600px) {
+  .no-mobile {
+    display: none;
+  }
+}
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