Add the Game Gig event page

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,38 @@
+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"].containing(
+        El.Div[
+          Attr.className => "CountDownTimer__pre",
+          Attr.id => preId
+        ].containing(""),
+        El.Div[
+          Attr.className => "CountDownTimer_time",
+          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,227 @@
+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")
+  ]
+
+  let GoboLogo = El.A[Attr.href => "http://studiogobo.com/",
+    Attr.target => "_blank"
+  ].containing(
+    El.Img[
+      Attr.src => Assets.publicPath("/images/sponsors/studiogobo-logo.svg"),
+      Attr.alt => "Studio Gobo"
+    ]
+  )
+
+  let ElectricSquareLogo = El.A[Attr.href => "https://www.electricsquare.com/",
+    Attr.target => "_blank"
+  ].containing(
+    El.Img[
+      Attr.src => Assets.publicPath("/images/sponsors/electricsquare-logo.svg"),
+      Attr.alt => "Electric Square"
+    ]
+  )
+
+  /**
+   * 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
+      )
+    )
+  }
+
+  func Rules() -> Nodeable {
+    return Markdown("""
+      The aim of the Hackers at Cambridge Game Gig 3000 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.
+
+      - **Please note that Computer Science applicants for the University of
+        Cambridge are taking CSAT tests in LT1 and LT2, so please be quiet
+        around them. This is especially important between the hours of
+        10:00-12:00 and 15:00-17:00 when the actual tests will be taking place.
+        DO NOT TAKE THEIR REFRESHMENTS, WE HAVE OURS IN FW11.**
+
+      - Also respect and look after the Intel Lab, FW11 and the Computer Lab.
+        Note that food or drink may only be consumed in FW11, and we will be
+        checking!
+
+      - You can work on your game in a team of up to four people.
+
+      - Game-making commences at 10:30 and finishes at 20:00.
+
+      - 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 event.
+
+      - 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.
+
+      - 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).
+
+      - We will be taking lots of photos throughout the event, and publishing
+        them. You and your content may appear on some of these photos. We aim to
+        publish photos that show everyone at their best, but there might be a
+        few that you don’t like. If you see a photo like this, let us know so
+        that we can try to take it down - but be aware that it is difficult to
+        completely erase a photo from all media channels.
+
+      - 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/).
+      """
+    )
+  }
+
+  func GameGigCardsContainer(content: Nodeable) -> Node {
+    return El.Div[Attr.className => "GameGigCardsContainer"].containing(
+      content
+    )
+  }
+
+  /**
+    Not currently used but may be useful for future events
+   */
+  func NavBar(elements: [(String, Nodeable)]) -> Node {
+    return El.Div[Attr.className => "GameGigNavBar"].containing(
+      El.Span[Attr.className => "GameGigNavBar__poweredby"].containing(
+        "Powered by ",
+        GoboLogo,
+        " and ",
+        ElectricSquareLogo
+      ),
+      Fragment(elements.map{ title, content in
+        El.Span[Attr.className => "GameGigNavBar__item"].containing(
+          El.A[
+            Attr.href => "#\(title.idMangle())"
+          ].containing(
+            title
+          )
+        )
+      }),
+      El.Span[Attr.className => "GameGigNavBar__time"].containing(CurrentTime())
+    )
+  }
+
+  // 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)),
+      ("Get Involved", ListOfLinks(dict: socialMediaLinks)),
+      ("Tutorials", ListOfLinks(dict: tutorials)),
+      ("Game Engines", ListOfLinks(dict: gameEngines)),
+      //("Feed", GameGigTwitterFeed()),
+      ("Rules", Rules())
+    ]
+
+    return UI.Pages.base(
+      title: "Hackers at Cambridge Game Gig 80's",
+      customStylesheets: ["gamegig2017"],
+      content: Fragment(
+        El.Div[Attr.className => "GameGigHero"].containing(
+          El.Img[Attr.className => "GameGigHero__image", Attr.src => Assets.publicPath("/images/gamegig3000/gamegig-foreground.png")]
+        ),
+        El.Div[Attr.className => "GameGigTopBar"].containing(
+          ElectricSquareLogo[Attr.className => "GameGigTopBar__image GameGigTopBar__electricSquare"],
+          El.Div[Attr.className => "GameGigTopBar__filler"],
+          GoboLogo[Attr.className => "GameGigTopBar__image GameGigTopBar__gobo"]
+        ),
+        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
+        )
+      }
+    )
+  }
+}