Add the Game Gig event page

Sources/HaCWebsiteLib/Config.swift

@@ -22,6 +22,6 @@ public struct Config {
   }
 
   public static func checkEnvVars() {
-    checkEnvVarsExist(for: "DATA_DIR")
+    checkEnvVarsExist(for: "DATA_DIR", "BACKEND_JS_DIR")
   }
 }

Sources/HaCWebsiteLib/Controllers/HackathonController.swift

@@ -0,0 +1,17 @@
+import Foundation
+import Kitura
+import HaCTML
+import LoggerAPI
+import HeliumLogger
+import DotEnv
+import SwiftyJSON
+
+struct HackathonController {
+  static func handler(hackathon: Hackathon) -> RouterHandler {
+    return { request, response, next in
+      try response.send(
+        hackathon.node.render()
+      ).end()
+    }
+  }
+}

Sources/HaCWebsiteLib/ViewModels/Hackathons/CountDownTimer.js

@@ -0,0 +1,38 @@
+function updateCountDownTimer() {
+    const startDate = {{startDate}};
+    const endDate = {{endDate}};
+    const CountDownTimerId = {{id}};
+    const CountDownTimerPreId = {{preId}};
+    const beforeEventMessage = {{beforeEventMessage}}
+    const duringEventMessage = {{duringEventMessage}}
+    const afterEventMessage = {{afterEventMessage}}
+
+    const current = new Date();
+
+    let timeLeft = 0;
+    if(current < startDate) {
+        document.getElementById(CountDownTimerPreId).innerHTML = beforeEventMessage;
+        timeLeft = startDate.getTime() - current.getTime();
+    } else {
+        document.getElementById(CountDownTimerPreId).innerHTML = duringEventMessage;
+        timeLeft = endDate.getTime() - current.getTime();
+    }
+
+    // Abort if time is up
+    if(timeLeft < 0)
+    {
+        document.getElementById(CountDownTimerId).innerHTML = afterEventMessage;
+        return;
+    }
+
+    let hours = Math.floor(timeLeft / (1000*60*60));
+    let mins = Math.floor(timeLeft/(1000 * 60) - hours * 60);
+    let secs = Math.floor(timeLeft/1000 - mins * 60 - hours * 60 * 60);
+
+    document.getElementById(CountDownTimerId).innerHTML =
+        hours + ":" + (mins<10?"0":"") + mins + "<span id=\"seconds\">:" + (secs<10?"0":"") + secs +"</span>";
+}
+
+updateCountDownTimer();
+
+setInterval(updateCountDownTimer,1000);

Sources/HaCWebsiteLib/ViewModels/Hackathons/CountDownTimer.swift

@@ -0,0 +1,36 @@
+import HaCTML
+import Foundation
+
+struct CountDownTimer : Nodeable {
+  let startDate : Date
+  let endDate : Date
+  let id = "CountDownTimer\(UUID().description)"
+
+  let preId = "CountDownTimerPre\(UUID().description)" // the id of the countdown message
+  let beforeEventMessage = "Time left to start"
+  let duringEventMessage = "Time remaining"
+  let afterEventMessage = "Time's up!"
+
+  var node: Node {
+    return Fragment(
+      El.Div[
+        Attr.className => "CountDownTimer__pre",
+        Attr.id => preId
+      ].containing(""),
+      El.Div[
+        Attr.className => "CountDownTimer",
+        Attr.id => id
+      ].containing("YOU SHOULD SEE THE TIME REMAINING HERE"),
+      Script(
+        file: "Hackathons/CountDownTimer.js",
+        escapes: [
+          "startDate": startDate, "endDate": endDate,
+          "id": id, "preId": preId,
+          "beforeEventMessage": beforeEventMessage,
+          "duringEventMessage": duringEventMessage,
+          "afterEventMessage" : afterEventMessage
+        ]
+      )
+    )
+  }
+}

Sources/HaCWebsiteLib/ViewModels/Hackathons/CurrentTime.js

@@ -0,0 +1,9 @@
+function updateClock() {
+    const id = {{id}}
+    const current = new Date();
+    document.getElementById(id).innerHTML = current.getHours()+":"+(current.getMinutes()<10?"0":"") + current.getMinutes();
+}
+
+updateClock();
+
+setInterval(updateClock,1000);

Sources/HaCWebsiteLib/ViewModels/Hackathons/CurrentTime.swift

@@ -0,0 +1,16 @@
+import HaCTML
+import Foundation
+
+struct CurrentTime : Nodeable {
+  let id = "CurrentTime\(UUID().description)"
+
+  var node: Node {
+    return Fragment(
+      El.Span[Attr.id => id, Attr.className => "CurrentTime"].containing("Current Time"),
+      Script(
+        file: "Hackathons/CurrentTime.js",
+        escapes: ["id": id]
+      )
+    )
+  }
+}

Sources/HaCWebsiteLib/ViewModels/Hackathons/GameGig2017/GameGig2017.swift

@@ -0,0 +1,172 @@
+import HaCTML
+import Foundation
+
+// swiftlint:disable line_length
+
+
+extension String {
+  func idMangle() -> String {
+    return self.replacingOccurrences(of: " ", with: "-").lowercased()
+  }
+}
+
+// TODO: investigate if the information here can be extracted from the landing feature
+struct GameGig2017: Hackathon {
+  let gameEngines = [
+    ("Unreal Engine", "https://www.unrealengine.com"),
+    ("Unity", "https://unity3d.com/"),
+    ("LÖVE", "https://love2d.org/"),
+    ("GameMaker", "lhttps://www.yoyogames.com/gamemaker"),
+    ("raylib", "http://www.raylib.com/")
+  ]
+
+  let socialMediaLinks = [
+    ("Facebook Page", "https://www.facebook.com/hackersatcambridge"),
+    ("Facebook Event", "https://www.facebook.com/events/124219834921040/"),
+    ("Twitter", "https://twitter.com/hackersatcam")
+  ]
+
+  let tutorials = [
+    ("Web Dev with Mozilla", "https://globalgamejam.org/news/dev-web-mozilla")
+  ]
+
+  /**
+   * Creates a GameGigCard element, the title becomes its id (spaces are replaced with hyphons)
+   */
+  func GameGigCard(title: String, content: Nodeable) -> Node {
+    return El.Div[Attr.className => "GameGigCard"].containing(
+      El.Span[
+        Attr.className => "GameGigCard__title",
+        Attr.id => title.idMangle()
+      ].containing(title),
+      content
+    )
+  }
+
+  func ListOfLinks(dict: [(String, String)]) -> Nodeable {
+    return El.Ul.containing(
+      dict.map { (key, value) in
+        El.Li.containing(
+          El.A[Attr.href => value].containing(key)
+        )
+      }
+    )
+  }
+
+  func GameGigTwitterFeed() -> Nodeable {
+    return El.Div[Attr.className => "GameGigTwitterFeed"].containing(
+      TextNode(
+        "<a class=\"twitter-timeline\" data-dnt=\"true\" href=\"https://twitter.com/hashtag/hacgamegig\" data-widget-id=\"927201930149093377\">#hacgamegig Tweets</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\"://platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");</script>",
+        escapeLevel: .unsafeRaw
+      )
+    )
+  }
+
+  // TODO: grab the rulse from the constitution Repo
+  func Rules() -> Nodeable {
+    return Fragment(
+      El.P.containing("The aim of the Game Gig is to create a fun, exciting, original game from scratch in less than 12 hours. We've created a few simple rules to help the process go smoothly for everyone."),
+      El.Ul.containing(
+        El.Li.containing("Please respect and look after the Computer Lab. Note that no food or drinks are permitted in the Intel Laboratory, and we will be checking"),
+        El.Li.containing("You can work on your game in a team of up to four people."),
+        El.Li.containing("Game-making commences at 10:30 and finishes at 20:00."),
+        El.Li.containing("You are free to do whatever you like with your game after the Game Gig. You own the copyright to all the material you create during the Game Gig."),
+        El.Li.containing("You are free to use any tools or libraries available to you to create your game. You can start with any pre-existing code or content that you like and you are free to use third-party assets, as long as you let the judges know what you created yourself and what you didn't. Failure to do so could risk disqualification."),
+        El.Li.containing("It's your responsibility to make sure that you have the right to use third-party assets (for example, that they are public domain or available under an appropriate license)."),
+        El.Li.containing(TextNode(
+          Text(markdown: "Be kind and considerate to your fellow hackers and our volunteers. We're all here to have fun! By participating in the hackathon, you agree to abide by this [Code of Conduct](https://hackcodeofconduct.org/).").html,
+          escapeLevel: .unsafeRaw
+        ))
+      )
+    )
+  }
+
+  func GameGigCardsContainer(content: Nodeable) -> Node {
+    return El.Div[Attr.className => "GameGigCardsContainer"].containing(
+      content
+    )
+  }
+
+  func GameGigTopBanner() -> Node {
+    return El.Div[Attr.className => "GameGigTopBanner"].containing(
+      El.Div[Attr.className => "GameGigTopBanner__right"].containing(CurrentTime()),
+      El.Div[Attr.className => "GameGigTopBanner__left"].containing("Hackers at Cambridge Game Gig 80's")
+    )
+  }
+
+  func NavBar(elements: [(String, Nodeable)]) -> Node {
+    return El.Div[Attr.className => "GameGigNavBar"].containing(
+      El.Span[Attr.className => "GameGigNavBar__logo"].containing("Powered by Studio Gobo and Electric Square"),
+      Fragment(elements.map{ title, content in
+        El.Span[Attr.className => "GameGigNavBar__item"].containing(
+          El.A[
+            Attr.href => "#\(title.idMangle())"
+          ].containing(
+            title
+          )
+        )
+      })
+    )
+  }
+
+  // Convert a given time in String format, (eg. "12:00"), to the corresponding
+  // Swift Date object representing that time on the day of the event itself
+  let eventDate = Date.from(year: 2017, month: 12, day: 1, hour: 0, minute: 0)
+  func gameGigDate(_ time: String) -> Date {
+      // To the dirty work by converting the events date to a string, appending the time, and convertin to a date again
+      let outFormatter = DateFormatter()
+      outFormatter.dateFormat = "yyyy-MM-dd"
+      outFormatter.timeZone = TimeZone(identifier: "Europe/London")
+      outFormatter.locale = Locale(identifier: "en_GB")
+
+      let dateTimeString = outFormatter.string(from: eventDate) + " " + time
+
+      let formatter = DateFormatter()
+      formatter.dateFormat = "yyyy-MM-dd HH:mm"
+      formatter.timeZone = TimeZone(identifier: "Europe/London")
+      formatter.locale = Locale(identifier: "en_GB")
+      let dateTime = formatter.date(from: dateTimeString)
+      return dateTime ?? Date()
+  }
+
+  var node: Node {
+    // Define all  time related info
+    let gigStartDate = gameGigDate("10:30")
+    let gigEndDate = gameGigDate("20:30")
+
+
+    let schedule = [
+      ("Arrival", gameGigDate("10:00")),
+      ("Start Jamming!", gigStartDate),
+      ("Lunch", gameGigDate("12:00")),
+      ("Dinner", gameGigDate("18:00")),
+      ("Stop Jamming!", gigEndDate),
+      ("LT1 Prizes and wrap-up", gameGigDate("21:00"))
+    ]
+
+    // Define the list of game gig "cards" that are displayed as content
+    let gameGigCards = [
+      ("Schedule", Schedule(schedule: schedule)),
+      ("Feed", GameGigTwitterFeed()),
+      ("Get Involved", ListOfLinks(dict: socialMediaLinks)),
+      ("Game Engines", ListOfLinks(dict: gameEngines)),
+      ("Tutorials", ListOfLinks(dict: tutorials)),
+      ("Rules", Rules())
+    ]
+
+    return UI.Pages.base(
+      title: "Hackers at Cambridge Game Gig 80's",
+      customStylesheets: ["gamegig2017"],
+      content: Fragment(
+        GameGigTopBanner(),
+        NavBar(elements: gameGigCards),
+        CountDownTimer(startDate: gigStartDate, endDate: gigEndDate),
+        GameGigCardsContainer(content: Fragment(
+          gameGigCards.map{ title, content in
+            GameGigCard(title: title, content: content)
+          }
+        ))
+      )
+    )
+  }
+}

Sources/HaCWebsiteLib/ViewModels/Hackathons/Hackathon.swift

@@ -0,0 +1,5 @@
+import HaCTML
+
+public protocol Hackathon: Nodeable {
+
+}

Sources/HaCWebsiteLib/ViewModels/Hackathons/Schedule.swift

@@ -0,0 +1,24 @@
+import HaCTML
+import Foundation
+
+// TODO: add the ability to highlight the item in the schedule best on the time!
+struct Schedule : Nodeable {
+  let schedule: [(String, Date)]
+
+  var node: Node {
+    let formatter = DateFormatter()
+    formatter.dateFormat = "HH:mm"
+    formatter.timeZone = TimeZone(identifier: "Europe/London")
+    formatter.locale = Locale(identifier: "en_GB")
+    return El.Ul.containing(
+      schedule.map {event, date in
+      let timeString = formatter.string(from: date)
+        return El.Li.containing(
+          timeString,
+          " ",
+          event
+        )
+      }
+    )
+  }
+}

Sources/HaCWebsiteLib/ViewModels/Hackathons/Script.swift

@@ -0,0 +1,62 @@
+import HaCTML
+import DotEnv
+import Foundation
+
+protocol JavaScriptable {
+  var javaScript: String {get}
+}
+
+extension String: JavaScriptable {
+  var javaScript : String {
+    // TODO: PROPERLY ESCAPE THIS! (eg. conver newlines to backslash)
+    // NOTE: A JSON LIBRARY COULD BE USED FOR THIS!
+    return "\"\(self)\""
+  }
+}
+
+extension Date: JavaScriptable {
+  var javaScript : String {
+    let calendar = Calendar.current
+    let year = calendar.component(.year, from: self)
+    // We have to subtract 1 from the month as JavaScript months count from 0
+    // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+    let month = calendar.component(.month, from: self) - 1
+    let day = calendar.component(.day, from: self)
+    let hour = calendar.component(.hour, from: self)
+    let minute = calendar.component(.minute, from: self)
+    let second = calendar.component(.second, from: self)
+    let milliseconds = 0
+    return "new Date(Date.UTC(\(year),\(month),\(day),\(hour),\(minute),\(second),\(milliseconds)))"
+  }
+}
+
+struct UnsafeRawJavaScript {
+   let rawScript : String
+   var javaScript : String {
+     return rawScript
+   }
+}
+
+/**
+ * This class is used in order load front-end scripts from a file relative to the current path for browsing pleasure.
+ *
+ * It depends on the build system loading files into the 'Data' folder before running.
+ */
+struct Script : Nodeable {
+  let file : String
+  let escapes : [String: JavaScriptable]
+  let directory : String = DotEnv.get("BACKEND_JS_DIR")!
+  var node: Node {
+    let pathToFile = directory + "/" + file
+    do {
+      var script = try String(contentsOfFile: pathToFile, encoding: .utf8)
+      escapes.map({ key, value in
+        // TODO: find out if there is a way of doing these escapes in a Type-Safe manner!
+        script = script.replacingOccurrences(of: "{{\(key)}}", with: "\(value.javaScript)")
+      })
+      return El.Script.containing(TextNode(script, escapeLevel: .unsafeRaw))
+    } catch {
+      return El.Script.containing(TextNode("console.log(\"failed to load \(pathToFile)\");", escapeLevel: .unsafeRaw))
+    }
+  }
+}