refactor to ES modules

index.html

@@ -22,6 +22,6 @@
 
     <div class="days" id="championships_table"></div>
 
-    <script src="script.js"></script>
+    <script type="module" src="js/sso-timer.js"></script>
   </body>
 </html>

js/championship.js

@@ -0,0 +1,44 @@
+import Data from './data.js'
+import Day from './day.js'
+import Transform from './transform.js'
+
+export default class Championship {
+  static last = null
+
+  static get next() {
+    let remainingOffset = 0
+    let day = Day.today
+    let time = Championship.nextTime
+
+    if (time == null) {
+      remainingOffset += 1440
+      day = Day.tomorrow
+      time = Championship.firstTimeNextDay
+    }
+
+    return {
+      day: day,
+      time: time,
+      location: Data.championships[day][time],
+      remaining: (remainingOffset + time) - Day.minutesPassedSinceMidnight,
+    }
+  }
+
+  static firstTimeOnDay(day) {
+    return Math.min(...Object.keys(Data.championships[day]))
+  }
+
+  static get nextTime() {
+    let nextTimes = Transform.dropChampionshipsBefore(Data.championshipsToday, Day.minutesPassedSinceMidnight)
+
+    if (nextTimes.length < 1) {
+      return null
+    }
+
+    return Math.min(...nextTimes)
+  }
+  
+  static get firstTimeTomorrow() {
+    return Championship.firstTimeOnDay(Day.tomorrow)
+  }
+}

js/data.js

@@ -0,0 +1,21 @@
+import Transform from './transform.js'
+import Day from './day.js'
+
+export default class Data {
+  static championships = {}
+  static championshipsURL = 'data/championships.json'
+  static locations = []
+
+  static get championshipsToday() {
+    return Data.championships[Day.today]
+  }
+
+  static get isLoaded() {
+    return Object.keys(Data.championships).length > 0
+  }
+
+  static init(json) {
+    Data.championships = json
+    Data.locations = Transform.championshipsToLocations(json)
+  }
+}

js/day.js

@@ -0,0 +1,26 @@
+export default class Day {
+  static date = new Date() // maybe easier to offset time zone later
+
+  static update() {
+    Day.date = new Date()
+  }
+
+  static get today() {
+    return Day.date.getDay()
+  }
+
+  static get tomorrow() {
+    let day = Day.today + 1
+    if (day > 6) day -= 6
+
+    return day
+  }
+
+  static get secondsUntilFullMinute() {
+    return (60 - Day.date.getSeconds()).toString().padStart(2, '0')
+  }
+ 
+  static get minutesPassedSinceMidnight() {
+    return Day.date.getHours() * 60 + Day.date.getMinutes()
+  }
+}

js/sso-timer.js

@@ -0,0 +1,3 @@
+import UI from './ui.js'
+
+window.addEventListener('load', UI.init)

js/transform.js

@@ -0,0 +1,21 @@
+export default class Transform {
+  static championshipsToLocations(championships) {
+    return Transform.unique(Transform.flatten(championships))
+  }
+
+  static flatten(object) {
+    return Object.values(object).reduce((arr, t) => arr.concat(Object.values(t)), [])
+  }
+
+  static unique(array) {
+    return [...new Set(array)]
+  }
+
+  static dropChampionshipsBefore(championshipsToday, time) {
+    return Object.keys(championshipsToday).filter((t) => parseInt(t) >= time)
+  }
+
+  static time(time) {
+    return Math.floor(time/60).toString().padStart(2, '0') + ":" + (time % 60).toString().padStart(2, '0')
+  }
+}

js/ui.js

@@ -0,0 +1,90 @@
+import Transform from './transform.js'
+import Championship from './championship.js'
+import Data from './data.js'
+import Day from './day.js'
+
+export default class UI {
+  static instance = null
+  static updateFrequency = 500 // in ms
+
+  constructor(rootObject) {
+    this.rootObject = rootObject
+    this.loadChampionships()
+    this.start() // auto-start, might need some more thought
+  }
+
+  static init() {
+    UI.instance = new UI(window.document)
+  }
+
+  loadResponseIntoData(response) {
+    response.json().then(Data.init)
+  }
+
+  loadChampionships() {
+    fetch(Data.championshipsURL).then(this.loadResponseIntoData)
+  }
+
+  start() {
+    this.intervalId = setInterval(() => { UI.instance.update() }, UI.updateFrequency)
+  }
+
+  stop() {
+    clearInterval(this.intervalId)
+  }
+
+  update() {
+    if (!Data.isLoaded) { return }
+
+    Day.update()
+
+    let next = Championship.next
+
+    if (Championship.last != next) {
+      Championship.last = next
+      this.updateChampionshipDetails(next)
+      this.updateChampionshipTable(next)
+    }
+
+    this.updateTimer(next)
+  }
+
+  updateChampionshipDetails(next) {
+    this.rootObject.getElementById('time').innerHTML = Transform.time(next.time)
+    this.rootObject.getElementById('location').innerHTML = next.location
+  }
+
+  updateTimer(next) {
+    let remaining = Transform.time(next.remaining) + ":" + Day.secondsUntilFullMinute
+    this.rootObject.getElementById('timer').innerHTML = remaining
+    this.rootObject.title = `${remaining} - ${next.location} - SSO Timer`
+  }
+
+  // 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'
+      }
+
+      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'
+        }
+
+        dayContainer += `<li class="${classes}"><b class="time">${formattedTime}</b>: ${location}</li>`
+      }
+
+      table += `<div class="${dayContainerClasses}"><ul class="times">${dayContainer}</ul></div>`
+    }
+
+    document.getElementById('championships_table').innerHTML = table
+  }
+}

script.js

@@ -1,138 +0,0 @@
-var championships = {}
-var lastChampionship = null
-var locations = []
-var updateFrequency = 500; // in ms
-
-function flattenObjectIntoSingleUniqueArray(object) {
-  return [...new Set(Object.values(object).reduce((arr, t) => arr.concat(Object.values(t)), []))]
-}
-
-function getDateObject() {
-  return new Date() // maybe easier to offset time zone later
-}
-
-function currentDay() {
-  return getDateObject().getDay()
-}
-
-function currentTime() {
-  let date = getDateObject()
-  return date.getHours() * 60 + date.getMinutes()
-}
-
-function nextDay() {
-  let day = currentDay() + 1
-  if (day > 6) day -= 6
-
-  return day
-}
-
-function firstTimeOnDay(day) {
-  return Math.min(...Object.keys(championships[day]))
-}
-
-function firstTimeNextDay() {
-  return firstTimeOnDay(nextDay())
-}
-
-function nextTime() {
-  let time = currentTime()
-
-  let nextTimes = Object.keys(championships[currentDay()]).filter((t) => parseInt(t) >= time)
-  
-  if (nextTimes.length < 1) {
-    return null
-  }
-
-  return Math.min(...nextTimes)
-}
-
-function formatTime(time) {
-  return Math.floor(time/60).toString().padStart(2, '0') + ":" + (time % 60).toString().padStart(2, '0')
-}
-
-function formatSeconds() {
-  return (60 - getDateObject().getSeconds()).toString().padStart(2, '0')
-}
-
-function nextChampionship() {
-  let remainingOffset = 0
-  let day = currentDay()
-  let time = nextTime()
-
-  if (time == null) {
-    remainingOffset = 1440
-    day = nextDay()
-    time = firstTimeNextDay()
-  }
-
-  return {
-    day: day,
-    time: time,
-    location: championships[day][time],
-    remaining: (remainingOffset + time) - currentTime(),
-  }
-}
-
-function updateChampionshipDetails(next) {
-  document.getElementById('time').innerHTML = formatTime(next.time)
-  document.getElementById('location').innerHTML = next.location
-}
-
-function updateTimer(next) {
-  let remaining = formatTime(next.remaining) + ":" + formatSeconds()
-  document.getElementById('timer').innerHTML = remaining
-  document.title = `${remaining} - ${next.location} - SSO Timer`
-}
-
-function updateChampionshipTable(next) {
-  const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-  let table = ``
-  for (const [day, details] of Object.entries(championships)) {
-    let dayContainer = `<h1 class="day-title">${weekdays[day]}</h1>`
-    let dayContainerClasses = 'day-container'
-
-    if (currentDay() == day) {
-      dayContainerClasses += ' today'
-    }
-
-    for (const [time, location] of Object.entries(details)) {
-      let formattedTime = formatTime(time)
-      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>`
-    }
-
-    table += `<div class="${dayContainerClasses}"><ul class="times">${dayContainer}</ul></div>`
-  }
-
-  document.getElementById('championships_table').innerHTML = table
-}
-
-window.addEventListener('load', () => {
-  fetch('data/championships.json').then((response) => {
-    response.json().then((json) => {
-      championships = json
-      locations = flattenObjectIntoSingleUniqueArray(championships)
-      
-    })
-  })
-
-  setInterval(() => {
-    if (championships.length < 1) {
-      return
-    }
-
-    let next = nextChampionship()
-
-    if (lastChampionship != nextChampionship()) {
-      updateChampionshipDetails(next)
-      updateChampionshipTable(next)
-    }
-
-    updateTimer(next)
-  }, updateFrequency)
-})