all those last min changes 😅

.vscode/settings.json

@@ -11,5 +11,6 @@
     "titleBar.inactiveForeground": "#3cafb3",
     "titleBar.activeForeground": "#0ac2c9",
     "titleBar.inactiveBackground": "#20232e"
-  }
+  },
+  "eslint.enable": true
 }

_data/menu-variants.yml

@@ -0,0 +1,95 @@
+main: 
+  - conference: 
+    en: 
+      name: conference 2020
+    fr: 
+      name: conference 2020
+    items:
+      - program: 
+        en: 
+          name: program
+          url: "/rf2020/program"
+        fr: 
+          name: programme
+          url: /rf2020/programme
+      - participants: 
+        en: 
+          name: participants
+          url: "/rf2020/participants"
+        fr: 
+          name: intervenant·e·x
+          url: /rf2020/participants
+      - participants: 
+        en: 
+          name: gallery
+          url: "/rf2020/gallery"
+        fr: 
+          name: gallery
+          url: /rf2020/gallery
+      - participants: 
+        en: 
+          name: watch
+          url: "/rf2020/watch"
+        fr: 
+          name: watch
+          url: /rf2020/watch
+  - about: 
+    en: 
+      name: about
+      url: /about
+    fr: 
+      name: à propos
+      url: /a-propos
+
+  - donate:
+    en: 
+      name: donate
+      url: "/donate"
+    fr: 
+      name: faire un don
+      url: /donate
+
+watch:
+  - program: 
+    en: 
+      name: program
+      url: "#program"
+    fr: 
+      name: programme
+      url: "#program"
+  - gallery: 
+    en: 
+      name: gallery
+      url: "/rf2020/gallery"
+    fr: 
+      name: gallery
+      url: "/rf2020/gallery"
+  - donate:
+    en: 
+      name: donate
+      url: "/donate"
+    fr: 
+      name: faire un don
+      url: "/donate"
+gallery:
+  - watch: 
+    en: 
+      name: watch
+      url: "/rf2020/watch"
+    fr: 
+      name: watch
+      url: "/rf2020/watch"
+  - program: 
+    en: 
+      name: program
+      url: "/rf2020/program"
+    fr: 
+      name: programme
+      url: /rf2020/programme
+  - donate:
+    en: 
+      name: donate
+      url: "/donate"
+    fr: 
+      name: faire un don
+      url: "/donate"

_data/menu.yml

@@ -1,42 +0,0 @@
-- conference: 
-  en: 
-    name: conference 2020
-  fr: 
-    name: conference 2020
-  items:
-    - program: 
-      en: 
-        name: program
-        url: "/rf2020/program"
-      fr: 
-        name: programme
-        url: /rf2020/programme
-    - participants: 
-      en: 
-        name: participants
-        url: "/rf2020/participants"
-      fr: 
-        name: intervenant·e·x
-        url: /rf2020/participants
-    # - discord: 
-    #   en: 
-    #     name: RF community (discord)
-    #     url: "https://discord.gg/3yaUwg3"
-    #   fr: 
-    #     name: RF community (discord)
-    #     url: "https://discord.gg/3yaUwg3"
-- about: 
-  en: 
-    name: about
-    url: /about
-  fr: 
-    name: à propos
-    url: /a-propos
-
-- donate:
-  en: 
-    name: donate
-    url: "/donate"
-  fr: 
-    name: faire un don
-    url: /donate

_data/rf2020/events.yml

@@ -109,7 +109,7 @@
 - id : 7
   title_ : personal archive / public action III
   lang_ : EN
-  format: Talk
+  format: performance
   ref : personal-archive-public
   date : 2020-09-19 19:40
   description: |
@@ -339,10 +339,12 @@
   participants: [22]
 
 - id : 23
-  title_ : lookingGlass
+  title_ : lookingGlass — Play-along session and artist Q&A
   lang_ : EN
   format: Artwork
   ref : looking-glass
+  date : 2020-09-20 18:50
+  endDate : 2020-09-20 19:50
   description: |
     lookingGlass:
     A Digital Immersive Theatre and Gaming Experience
@@ -363,7 +365,7 @@
   lang_ : EN
   format: Talk
   ref : identifying-digital-coercion
-  date : 2020-09-20 00:00
+  date : 2020-09-20 13:45
   description: |
     In the last decade, several public stories have hit the headlines, underlining the necessity to rethink our relation to digital technologies and our behavior with regard to privacy. Whether it be Snowden’s revelations, Cambridge Analytica, or Facebook political advertising, all of these narratives seem to turn public opinion towards skepticism and defiance. However, they also seem to dissimulate the more subtle means of coercion existing in the digital realm, both technical and psycho-sociological aspects. In 2018, Sir Tim Berners-Lee, who invented what is now known as the World Wide Web, gave an interview in which he admits that “the web has failed instead of served humanity, as it was supposed to have done, and failed in many places”. He had envisioned a system that would provide means of empowerment to its users. He thought, as some still do, that a standardized platform in which people would be able to participate openly in the elaboration of a common interest could provide a radical shift from a centralized capitalist political system. Nonetheless, this has proven to be a failure. By his own admission, the web has become quite the opposite : centralization has brought monopoly to only a handful of services, hiding behind a Utopian vision embodied in personalized services and recommendations. We think that this failure also illustrates the lack of understanding the public has of the implicit technical dogma guiding online services and their technical interdependence. How can we accurately identify coercion and the potential means of re-decentralizing ? We propose to analyze this re-decentralization via these talking points : 1) the psycho-sociological analysis of the relation between one’s opinion and the tools of capitalist coercion, 2) the technical aspects of the dissimulated interdependence of various services, notably privately owned and/or controlled APIs.
   participants: [24]
@@ -445,21 +447,25 @@
   participants: [27]
 
 - id : 18
-  title_ : NOD (Neural Optimal Decisor)
+  title_ : NOD (Neural Optimal Decisor) - Play-along and Artist Q&A
   lang_ : EN
   format: Artwork
   ref : nod
+  date : 2020-09-20 17:35
+  endDate : 2020-09-20 18:35
   description: |
     NOD is an acronym for Neural Optimal Decisor, a subcomponent of a big artificial supreme entity in charge of monitoring and analyzing massive amounts of data from people who agreed to delegate personal life to this ubiquitous organism.  
     This Artificial Intelligence takes advantage of every device connected to the vast network, and it obtains real-time biometric and social information from users. People do not need to handle struggle situations because data collected by each NOD will be a valuable asset to optimize human decisions by them. NODs will enhance people's lives supported by reliable information and probabilistic evidence.  
     The experience drives the player into the NOD perspective in charge of improving human lives. In this sense, players can track people's actions, communications, and variables through devices connected to the internet. Smartphones, smartwatches, and other devices become interfaces to take an in-depth look at people's private life. A simple game mechanic allows players to identify people as metadata of their physical dimension, accompanied by lectures that label people's current status. The NOD must make decisions by humans based on their probabilistic measurements of well- being. However, for better or worse, humans seem to want to run away from predictability.  
     The game arises from a series of questions. What range of options do we have to make a decision? Is our identity being demarcated by algorithms? Are we an extension or part of a kind of digital monoculture? Do we govern our lives, or are these driven by the influence of data presented to us in seemingly harmless and casual ways?  
   participants: [28]
+  event-link: https://reclaimfutures.whereby.com/nod
+  gallery-link: /rf2020/gallery/nod.html
   links: 
     - https://simmer.io/@materianstbl/nod 
 
 - id : 19
-  title_ : RF introdcution & opening remarks
+  title_ : RF introduction & opening remarks
   lang_ : EN
   format: misc
   date : 2020-09-18 10:45

_data/watch-menu.yml

@@ -1,14 +0,0 @@
-- program: 
-  en: 
-    name: program
-    url: "#program"
-  fr: 
-    name: programme
-    url: "#program"
-- donate:
-  en: 
-    name: donate
-    url: "/donate"
-  fr: 
-    name: faire un don
-    url: "/donate"

_includes/common/clock.html

@@ -1 +1 @@
-<div class="inline-block hide-m" id="clock"><p></p></div>
+<div class="inline-block hide-m clock"><span></span></div>

_includes/common/header-collapsed.html

@@ -1,5 +1,5 @@
 <header class="page-header header-collapsed">
-  {% include common/navigation.html menu=site.data.watch-menu clock=true %}
+  {% include common/navigation.html clock=true %}
 
 
   {% if page.parentEn %}

_includes/common/navigation.html

@@ -1,7 +1,9 @@
-{% if include.menu %}
+{% if page.menu-variant %}
+  {% assign menu = site.data.menu-variants[page.menu-variant] %}
+{% elsif include.menu %}
   {% assign menu = include.menu %}
 {% else %}
-  {% assign menu = site.data.menu %}
+  {% assign menu = site.data.menu-variants.main %}
 {% endif %}
 
 

_includes/common/watch-panel.html

@@ -11,6 +11,6 @@
   </div>
   <div class="watch-controls">
     <button id="chat-toggle">Toggle chat</button>
-    <a href="https://discord.gg/Hr9zQkQ" class="margin-0"><button>Join Discord</button></a>
+    <a href="https://discord.gg/Hr9zQkQ" class="margin-0"><button>Open in Discord app</button></a>
   </div>
 </div>

_includes/embeds/twitch.html

@@ -1,11 +1,11 @@
 <!-- Add a placeholder for the Twitch embed -->
 <div id="twitch-embed"></div>
-
 <!-- Load the Twitch embed script -->
 <script src="https://player.twitch.tv/js/embed/v1.js"></script>
 
+
 <!-- Create a Twitch.Player object. This will render within the placeholder div -->
-<script type="text/javascript">
+<script type="text/javascript" id='twitch-script'>
   new Twitch.Player("twitch-embed", {
     channel: "{{ site.twitchChannel }}"
   });

_includes/program/full-program.html

@@ -3,17 +3,4 @@
   {% include program/program-day.html date="2020-09-18" weekday=5 %}
   {% include program/program-day.html date="2020-09-19" weekday=6 %}
   {% include program/program-day.html date="2020-09-20" weekday=0 %}
-
-  <div class="content margin-64-bottom">
-
-    <h3 class="textbox inline-block">The gallery:</h3>
-    <ul class="prog-list margin-16-bottom block">
-      {% for event in events %}
-        {% assign format=event.format | downcase %}
-        {% if format == 'artwork' %}
-          {% include program/program-item.html event=event %}
-        {% endif %}
-      {% endfor %}
-    </ul>
-  </div>
 </div>

_includes/program/program-day.html

@@ -1,8 +1,9 @@
 {% assign events = site.data.rf2020.events | sort: "date" %}
 {% assign date = include.date | date: "%d.%m" %}
+{% assign dateClass = include.date | date: "%d-%m" %}
 {% assign weekday = include.weekday %}
 
-<div class="content margin-64-bottom {{ date }}">
+<div class="content margin-64-bottom day-{{ dateClass }}">
   <h3 class="textbox inline-block ">{{ site.data.date-locales[page.lang].full_weekday[weekday] }} - {{ date }}</h3>
   <ul class="prog-list margin-16-bottom block" >
     {% for event in events %}

_includes/rf2020/nod.html

@@ -0,0 +1 @@
+<iframe src="https://i.simmer.io/@materianstbl/nod" style="width:1280px;height:720px;border:0" class="gallery-nod"></iframe>

_includes/text/fr/main-text.md

@@ -26,6 +26,7 @@ Tou·s·x·tes les participant·x·e·s seront défrayé·x·e·s grâce à un p
 Afin de vous aider dans la formulation de votre proposition, nous avons assemblé une liste de [titres et sujets de conférences hypothétiques](https://www.are.na/reclaimfutures/hypothetical-subjects) que vous pouvez adopter, adapter, utiliser pour vous inspirer ou, bien sûr, ignorer complètement.
 
 {:.link-to-submit}
-**Pour nous envoyer votre proposition, rendez vous sur <br />[« soumettre une proposition »](/fr/participer/)**
+La date limite de dépôt des soumissions est maintenant dépassée.
+
 
 <small id="ref-1">[1] Si vous craignez que des facteurs financiers limitent votre participation à la conférence, veuillez communiquer avec nous et nous ferons tout notre possible pour vous aider.</small>  

_layouts/event.html

@@ -8,6 +8,11 @@ parentNameFr: programme
 ---
 
 {% assign format=page.format | downcase %}
+{% assign time = page.date | date: "%H:%M" %}
+{% assign endTime = page.endDate | date: "%H:%M" %}
+{% capture date %}
+  {% include utils/translated-date.html date=page.date  lang=page.lang %}
+{% endcapture %}
 
 {% capture regLink %}
   {% if format == 'workshop' and page.registration-link %}
@@ -45,10 +50,16 @@ parentNameFr: programme
           {% endfor %}
         {% endfor %}
       </div>
-      {% if format != 'artwork' %}
+      {% if time and time != '00:00' %}
         <div class="textbox">
-          <h3 class="text-right">{% include utils/translated-date.html date=page.date  lang=page.lang %}</h3>
+          <h3 class="text-right">{{ date }}</h3>
-          <h3 class="margin-0 text-right">{{ page.date | date: "%H:%M" }}<small class="sup">(CEST)</small></h3>
+          <h3 class="margin-0 text-right">
+            {{ time }}
+            {% if endTime %}
+              → {{ endTime }}
+            {% endif %}
+            <small class="sup">(CEST)</small> 
+          </h3>
         </div>
       {% endif %}
     </div>
@@ -57,6 +68,9 @@ parentNameFr: programme
       {% if page.youtube %}
         {% include embeds/youtube.html slug=page.youtube %}
       {% endif %}
+      {% if page.event-link %}
+        <strong><a href="{{ page.event-link }}">click here</a> to join us on for a play-along and Q&A with the artist on {{ date }} at {{ time }} -> {{ endTime }}.</strong>
+      {% endif %}
       <p>
         {{ page.description | markdownify }}
       </p>

_layouts/watch.html

@@ -1,21 +1,19 @@
 ---
 layout: default
 ---
+<span class="layout-watch">
   
   {% include common/header.html collapsed=true %}
   
-
-<main class="page lang-{{ page.lang }}" id="page-{{ page.className }}">
   {{ content }}
   
-    {% include common/watch-panel.html %}
-    <div class="page-content" id="program">
-      {% include program/full-program.html %}
-    </div>
-</main>
-
   <span class="side-title side-title--left hidden">
     ReclaimFutures 2020
   </span>
 
+  <span class="side-title side-title--right hidden">
+    {% include common/clock.html %}
+  </span>
+  
   {% include common/footer.html %}
+</span>

_sass/includes/banner.scss

@@ -49,6 +49,14 @@
     color: var(--colour-red);
   }
 
+  &.live {
+    width: 100vw;
+    h1 {
+      font-size: 2rem;
+      text-align: center;
+    }
+  }
+
   @include darkMode {
     border-color: var(--colour-graphite);
   }

_sass/includes/clock.scss

@@ -1,16 +1,11 @@
-#clock {
+.clock {
-  margin-right: var(--size-24);
-
-  p,
   span {
     color: var(--colour-graphite);
+  }
 
   @include darkMode {
+    span {
       color: var(--colour-white);
     }
   }
-
-  .time {
-    font-size: var(--size-32);
-  }
 }

_sass/includes/watch-panel.scss

@@ -56,8 +56,15 @@
     margin-top: var(--size-16);
 
     button {
+      cursor: pointer;
       border: none;
-      margin-left: var(--size-16);
+      margin-left: var(--size-8);
+      background-color: var(--colour-highlight-darker);
+      color: var(--colour-white);
+    }
+
+    a button {
+      background-color: var(--colour-highlight-darker);
     }
   }
 }

_sass/layouts/watch.scss

@@ -0,0 +1,36 @@
+.layout-watch {
+  .side-title.side-title--left {
+    left: 1%;
+  }
+
+  .side-title.side-title--right {
+    right: 1%;
+  }
+
+  @include touch {
+    #rf-logo-wrapper {
+      width: 10%;
+    }
+
+    .page-header {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    .clock {
+      display: none;
+    }
+
+    .logo {
+      margin: var(--size-16) 0;
+    }
+  }
+}
+.page-header .clock {
+  margin-right: var(--size-24);
+
+  .time {
+    font-size: var(--size-32);
+  }
+}

_sass/pages/gallery.scss

@@ -0,0 +1,19 @@
+#page-gallery {
+  a {
+    margin: 0;
+  }
+}
+
+#page-gallery-item {
+  .side-title.side-title--left {
+    left: 1%;
+  }
+
+  h2 {
+    @include textbox;
+  }
+
+  .gallery-nod {
+    width: 95vw !important;
+  }
+}

_sass/pages/watch.scss

@@ -1,25 +1,25 @@
 #page-watch {
-  .side-title.side-title--left {
+  .stream-toggle,
-    left: 1%;
+  .stream-title {
+    margin: 0;
+    border: none;
+    padding: 4px 12px;
+    font-weight: bold;
+    font-size: 1.3rem;
+
+    &.stream-toggle {
+      background-color: var(--colour-white);
+      color: var(--colour-graphite);
+      cursor: pointer;
     }
 
-  @include touch {
+    &.stream-a {
-    #rf-logo-wrapper {
+      background: var(--colour-red);
-      width: 10%;
+      color: var(--colour-white);
     }
-
+    &.stream-b {
-    .page-header {
+      background: var(--colour-highlight);
-      display: flex;
+      color: var(--colour-white);
-      flex-direction: row-reverse;
-      justify-content: space-between;
-    }
-
-    #clock {
-      display: none;
-    }
-
-    .logo {
-      margin: var(--size-16) 0;
     }
   }
 }

assets/css/index.scss

@@ -18,6 +18,7 @@
 @import 'layouts/program';
 @import 'layouts/participant';
 @import 'layouts/event';
+@import 'layouts/watch';
 @import 'includes/scrollbar';
 @import 'includes/header';
 @import 'includes/footer';
@@ -30,4 +31,5 @@
 @import 'pages/how-to-participate';
 @import 'pages/rf2020';
 @import 'pages/donate';
+@import 'pages/gallery';
 @import 'pages/watch';

assets/js/index.js

@@ -4250,7 +4250,7 @@ var _spacetime = _interopRequireDefault(require("spacetime"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var clockContainer = document.querySelector('#clock p');
+var clockContainers = document.querySelectorAll('.clock span');
 
 var getTime = function getTime() {
   var d = (0, _spacetime.default)(new Date(), 'Europe/Zurich');
@@ -4258,11 +4258,13 @@ var getTime = function getTime() {
 };
 
 var setTime = function setTime() {
-  clockContainer.innerHTML = "<span class=\"time\">".concat(getTime(), "</span> (CEST)");
+  clockContainers.forEach(function (clock) {
+    return clock.innerHTML = "<span class=\"time\">".concat(getTime(), "</span> CEST");
+  });
 };
 
 var clock = function clock() {
-  if (clockContainer) {
+  if (clockContainers.length) {
     setTime();
     setInterval(setTime, 1000);
   }
@@ -4279,7 +4281,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var banner = document.getElementById('full-banner');
 var cdTime = banner === null || banner === void 0 ? void 0 : banner.querySelector('.cd-time');
-var targetDate = new Date('Wed Sep 18 2020 10:30:00 GMT+0200 (Central European Summer Time)');
+var targetDate = new Date('Fri Sep 18 2020 10:30:00 GMT+0200 (Central European Summer Time)');
 
 function countdownTimer() {
   if (!banner) return;
@@ -4299,7 +4301,8 @@ function countdownTimer() {
     }).join(' ');
     cdTime.innerText = remaining;
   } else {
-    banner.querySelector('h1').innerHTML = "ReclaimFutures is now <span class=\"now-live\">[LIVE]</span> <a href=\"/watch\">\u2192 click here to watch</a>";
+    banner.classList.add('live');
+    banner.querySelector('h1').innerHTML = "ReclaimFutures is now LIVE <a href=\"/rf2020/watch\" class=\"with-url-arrow\">watch</a>";
   }
 }
 
@@ -4312,12 +4315,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var twitchChannel1 = 'reclaimfutures';
+var twitchChannel2 = 'reclaimfutures2';
+var streamChannel = 1;
 
 var _default = function _default() {
+  if (document.getElementById('page-watch')) {
     var chatVisible = true;
     var toggleChatButton = document.querySelector('#chat-toggle');
     var rightPanel = document.querySelector('.right-panel');
-  console.log('toggleChatButton', toggleChatButton);
+    var program = document.getElementById('program');
+    var now = new Date();
+    var today = "".concat("0".concat(now.getDate()).slice(-2), ".").concat("0".concat(now.getMonth() + 1).slice(-2), ".").concat(now.getFullYear());
 
     var handleButtonClick = function handleButtonClick() {
       if (chatVisible) {
@@ -4332,6 +4341,51 @@ var _default = function _default() {
     if (toggleChatButton) {
       toggleChatButton.addEventListener('click', handleButtonClick, false);
     }
+
+    if (program) {
+      var dateToday = new Date();
+      var monthIsSeptember = dateToday.getMonth() + 1 === 9;
+      var days = {
+        18: program.querySelector('.day-18-09'),
+        19: program.querySelector('.day-19-09'),
+        20: program.querySelector('.day-20-09')
+      };
+
+      if (monthIsSeptember && days[dateToday.getDate()]) {
+        Object.keys(days).forEach(function (day) {
+          if ("".concat(day) !== "".concat(dateToday.getDate())) {
+            days["".concat(day)].classList.add('hide');
+          }
+        });
+      }
+    }
+
+    if (today === '18.09.2020') {
+      var watchPanel = document.querySelector('.watch-panel');
+
+      var switchStreams = function switchStreams(titleButton, toggleButton) {
+        var twitchEmbed = document.querySelector('#twitch-embed iframe');
+        twitchEmbed.setAttribute('src', "https://player.twitch.tv?channel=".concat(streamChannel === 2 ? twitchChannel1 : twitchChannel2, "&migration=true&parent=reclaimfutures.org&referrer=https%3A%2F%2Freclaimfutures.org%2Frf2020%2Fwatch%2F"));
+        streamChannel = streamChannel === 1 ? 2 : 1;
+        titleButton.innerText = "Stream ".concat(streamChannel === 1 ? 'A' : 'B');
+        toggleButton.innerText = "-> watch stream ".concat(streamChannel === 1 ? 'B' : 'A');
+        titleButton.classList.toggle('stream-a');
+        titleButton.classList.toggle('stream-b');
+      };
+
+      var streamTitle = document.createElement('span');
+      var streamToggle = document.createElement('button');
+      streamTitle.innerText = "Stream A";
+      streamToggle.innerText = "-> watch stream B";
+      streamTitle.classList.add('stream-title', 'stream-a');
+      streamToggle.classList.add('stream-toggle');
+      streamToggle.addEventListener('click', function () {
+        return switchStreams(streamTitle, streamToggle);
+      });
+      watchPanel.prepend(streamToggle);
+      watchPanel.prepend(streamTitle);
+    }
+  }
 };
 
 exports.default = _default;
@@ -4385,7 +4439,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61278" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "56406" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

fr/index.html

@@ -13,26 +13,6 @@ ref: index
 
 <div>
   <span class="intro">{{ intro | markdownify }}</span>
-  <h2>{{ site.data.translations.latest[page.lang] }}</h2>
+  {% include common/news.html %}
-  <ul class="post-list">
-    {% for post in site.posts %}
-      {% if post.lang == page.lang %}
-      <li class="post-item">
-        <header class="post-header">
-          <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
-          <h3 class="titlecase">
-            {% include utils/translated-date.html date=post.date  lang=page.lang %}
-          </h3>
-          <!-- <h3>{{ post.date | date_to_string }}</h3> -->
-
-        </header>
-        <div class="post-content">
-          <span class="post-excerpt">{{ post.excerpt }}</span>
-          <a href="{{ post.url }}">{{ site.data.translations.readMore[page.lang]}} -></a>
-        </div>
-      </li>
-      {% endif %}
-    {% endfor %}
-  </ul>
 </div> 
 

fr/rf2020/watch/index.html

@@ -0,0 +1,24 @@
+---
+layout: watch
+lang: fr
+title: Watch ReclaimFutures
+className: watch
+ref: watch
+menu-variant: watch
+
+---
+
+<main class="page lang-{{ page.lang }}" id="page-{{ page.className }}">
+    {% include common/watch-panel.html %}
+    
+    <div class="page-content margin-32-bottom" id="program">
+      <h3 class="textbox inline-block">{{ site.data.translations.program[ page.lang ]}}</h3>
+      <div>
+        <small class="textbox block margin-32-bottom inline-block">All times are CEST (UTC+2 Europe/Zurich)</small>
+      </div>
+      {% include program/program-day.html date="2020-09-18" weekday=5 %}
+      {% include program/program-day.html date="2020-09-19" weekday=6 %}
+      {% include program/program-day.html date="2020-09-20" weekday=0 %}
+      <a href="/fr/rf2020/program" class="textbox with-url-arrow">Full program</a>
+    </div>
+</main>

fr/watch/index.html

@@ -1,8 +0,0 @@
----
-layout: watch
-lang: fr
-title: Watch ReclaimFutures
-className: watch
-ref: watch
----
-

package.json

@@ -5,13 +5,13 @@
   "main": "index.js",
   "scripts": {
     "start": "run-p start-jekyll start-parcel",
-    "build": "yarn build-jekyll && yarn build-parcel",
+    "build": "npm run build-jekyll && npm run build-parcel",
-    "start-jekyll": "bundle exec jekyll serve",
+    "start-jekyll": "bundle exec jekyll serve --livereload",
     "start-parcel": "parcel src/index.js -d assets/js",
     "build-jekyll": "JEKYLL_ENV=production jekyll build",
     "build-parcel": "parcel build src/index.js -d ./_site/assets/js",
-    "deploy-dev": "yarn build && scp -r -P 7833 ./_site/* amemasu@185.203.114.165:/var/www/dev.reclaimfutures.org",
+    "deploy-dev": "npm run build && scp -r -P 7833 ./_site/* amemasu@185.203.114.165:/var/www/dev.reclaimfutures.org",
-    "deploy-prod": "yarn build && scp -r -P 7833 ./_site/* amemasu@185.203.114.165:/var/www/reclaimfutures.org"
+    "deploy-prod": "npm run build && scp -r -P 7833 ./_site/* amemasu@185.203.114.165:/var/www/reclaimfutures.org"
   },
   "author": "",
   "license": "ISC",

rf2020/gallery/index.html

@@ -0,0 +1,23 @@
+---
+layout: content-page
+lang: en
+title: RF2020 \ Gallery
+className: gallery
+ref: gallery
+menu-variant: gallery
+---
+
+<div class="page-content --wide">
+  <article class="margin-64-bottom">
+    <h2 class="inline-block textbox">Gallery</h2>
+    <ul>
+      <li>
+        <a class="inline-block textbox" href="/rf2020/gallery/nod.html">NOD (Neural Optimal Decisor)</a>
+      </li>
+      <li>
+        <a class="inline-block textbox" href="http://playlookingglass.com/">lookingGlass</a>
+      </li>
+    </ul>
+
+  </article>  
+</div>

rf2020/gallery/nod.html

@@ -0,0 +1,19 @@
+---
+layout: watch
+lang: en
+title: NOD (Neural Optimal Decisor)
+className: gallery-item
+ref: nod-gallery
+menu-variant: gallery
+
+---
+
+<div class="page-content --wide">
+  <main>
+    <h2 class="inline-block">{{ page.title }}</h2>
+    <div>
+      <p class="textbox inline-block">Read the full description and learn about the play-along event <a href="/rf2020/events/nod.html">here</a>.</p>
+    </div>
+    {% include rf2020/nod.html %}
+  </main>  
+</div>

rf2020/watch/index.html

@@ -0,0 +1,24 @@
+---
+layout: watch
+lang: en
+title: Watch ReclaimFutures
+className: watch
+ref: watch
+menu-variant: watch
+---
+
+<main class="page lang-{{ page.lang }}" id="page-{{ page.className }}">
+    {% include common/watch-panel.html %}
+    
+    <div class="page-content margin-32-bottom" id="program">
+      <h3 class="textbox inline-block">{{ site.data.translations.program[ page.lang ]}}</h3>
+      
+      <div>
+        <small class="textbox block margin-32-bottom inline-block">All times are CEST (UTC+2 Europe/Zurich)</small>
+      </div>
+      {% include program/program-day.html date="2020-09-18" weekday=5 %}
+      {% include program/program-day.html date="2020-09-19" weekday=6 %}
+      {% include program/program-day.html date="2020-09-20" weekday=0 %}
+      <a href="/rf2020/program" class="textbox with-url-arrow">Full program</a>
+    </div>
+</main>

src/modules/clock.js

@@ -1,6 +1,6 @@
 import spacetime from 'spacetime';
 
-const clockContainer = document.querySelector('#clock p');
+const clockContainers = document.querySelectorAll('.clock span');
 
 const getTime = () => {
   const d = spacetime(new Date(), 'Europe/Zurich');
@@ -8,12 +8,11 @@ const getTime = () => {
 };
 
 const setTime = () => {
-  clockContainer.innerHTML = `<span class="time">${getTime()}</span> (CEST)`;
+  clockContainers.forEach(clock => clock.innerHTML = `<span class="time">${getTime()}</span> CEST`);
 };
 
 const clock = () => {
-  if (clockContainer)
+  if (clockContainers.length) {
-  {
     setTime();
     setInterval(setTime, 1000);
   }

src/modules/countdown.js

@@ -1,7 +1,7 @@
 const banner = document.getElementById('full-banner');
 const cdTime = banner?.querySelector('.cd-time');
 
-const targetDate = new Date('Wed Sep 18 2020 10:30:00 GMT+0200 (Central European Summer Time)');
+const targetDate = new Date('Fri Sep 18 2020 10:30:00 GMT+0200 (Central European Summer Time)');
 
 
 function countdownTimer() {
@@ -27,7 +27,8 @@ function countdownTimer() {
 
       cdTime.innerText = remaining;
   } else {
-      banner.querySelector('h1').innerHTML = `ReclaimFutures is now <span class="now-live">[LIVE]</span> <a href="/watch">→ click here to watch</a>`;
+      banner.classList.add('live');
+      banner.querySelector('h1').innerHTML = `ReclaimFutures is now LIVE <a href="/rf2020/watch" class="with-url-arrow">watch</a>`;
   }
 }
 

src/modules/watch.js

@@ -1,9 +1,18 @@
+const twitchChannel1 = 'reclaimfutures';
+const twitchChannel2 = 'reclaimfutures2';
+let streamChannel = 1;
+
+
 export default () => {
+  if (document.getElementById('page-watch')) {
     let chatVisible = true;
     const toggleChatButton = document.querySelector('#chat-toggle');
     const rightPanel = document.querySelector('.right-panel');
-
+    const program = document.getElementById('program');
-  console.log('toggleChatButton', toggleChatButton)
+    const now = new Date();
+    const today = `${(`0${now.getDate()}`).slice(-2)}.${
+      (`0${now.getMonth() + 1}`).slice(-2)}.${
+      now.getFullYear()}`;
 
     const handleButtonClick = () => {
       if (chatVisible) {
@@ -13,9 +22,59 @@ export default () => {
         rightPanel.classList.remove('chat-hidden');
         chatVisible = true;
       }
-  }
+    };
 
     if (toggleChatButton) {
       toggleChatButton.addEventListener('click', handleButtonClick, false);
     }
+
+    if (program) {
+      const dateToday = new Date();
+      const monthIsSeptember = dateToday.getMonth() + 1 === 9;
+
+      const days = {
+        18: program.querySelector('.day-18-09'),
+        19: program.querySelector('.day-19-09'),
+        20: program.querySelector('.day-20-09'),
+      };
+
+      if (monthIsSeptember && days[dateToday.getDate()]) {
+        Object.keys(days).forEach(day => {
+          if (`${day}` !== `${dateToday.getDate()}`) {
+            days[`${day}`].classList.add('hide');
+          }
+        });
+      }
+    }
+
+    if (today === '18.09.2020') {
+      const watchPanel = document.querySelector('.watch-panel');
+      
+      const switchStreams = (titleButton, toggleButton) => {
+        const twitchEmbed = document.querySelector('#twitch-embed iframe');
+        twitchEmbed.setAttribute('src', `https://player.twitch.tv?channel=${streamChannel === 2 ? twitchChannel1 : twitchChannel2}&migration=true&parent=reclaimfutures.org&referrer=https%3A%2F%2Freclaimfutures.org%2Frf2020%2Fwatch%2F`);
+        streamChannel = streamChannel === 1 ? 2 : 1;
+        
+        titleButton.innerText = `Stream ${streamChannel === 1 ? 'A' : 'B'}`;
+        toggleButton.innerText = `-> watch stream ${streamChannel === 1 ? 'B' : 'A'}`;
+
+        titleButton.classList.toggle('stream-a');
+        titleButton.classList.toggle('stream-b');
+      };
+
+      const streamTitle = document.createElement('span');
+      const streamToggle = document.createElement('button');
+      streamTitle.innerText = `Stream A`;
+      streamToggle.innerText = `-> watch stream B`;
+      streamTitle.classList.add('stream-title', 'stream-a');
+      streamToggle.classList.add('stream-toggle',);
+
+      streamToggle.addEventListener('click', () => switchStreams(streamTitle, streamToggle));
+
+
+      watchPanel.prepend(streamToggle);
+      watchPanel.prepend(streamTitle);
+    }
+  }
+
 };

watch/index.html

@@ -1,8 +0,0 @@
----
-layout: watch
-lang: en
-title: Watch ReclaimFutures
-className: watch
-ref: watch
----
-