added controls to watch panel

_includes/common/watch-panel.html

@@ -1,4 +1,16 @@
 <div class="watch-panel">
-  {% include embeds/twitch.html %}
-  {% include embeds/discord-chat.html %}
+  <div class="watch-contents">
+    
+    <div class="left-panel">
+      {% include embeds/twitch.html %}
+    </div>
+    <div class="right-panel">
+      {% include embeds/discord-chat.html %}
+      <!-- <button>{{ site.data.translations.join-discord[page.lang] }}</button> -->
+    </div>
+  </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>
+  </div>
 </div>

_includes/embeds/discord-chat.html

@@ -1,3 +1,9 @@
+{% if page.lang == fr %}
+  {% assign defaultchannel="752951588070359110" %}
+{% else %}
+  {% assign defaultchannel="752951544089149590" %}
+{% endif %}
+
 <div class="discord-chat">
-  <iframe src="https://titanembeds.com/embed/{{ site.discordID }}?css=155&theme=DiscordDark" height="650" width="400" frameborder="0"></iframe>
+  <iframe src="https://titanembeds.com/embed/{{ site.discordID }}?css=155&theme=DiscordDark&defaultchannel={{ defaultchannel }}" height="650" width="400" frameborder="0"></iframe>
 </div>

_sass/includes/clock.scss

@@ -3,11 +3,14 @@
 
   p,
   span {
-    color: var(--colour-white);
+    color: var(--colour-graphite);
+
+    @include darkMode {
+      color: var(--colour-white);
+    }
   }
 
   .time {
     font-size: var(--size-32);
-    // font-weight: bold;
   }
 }

_sass/includes/watch-panel.scss

@@ -1,29 +1,63 @@
 .watch-panel {
-  margin: 0 auto;
-  display: flex;
-  width: 95vw;
   margin-bottom: var(--size-128);
+  width: 95vw;
+  margin: 0 auto;
 
-  #twitch-embed {
-    flex: 4;
-    iframe {
+  .watch-contents {
+    display: flex;
+
+    .left-panel {
+      flex: 4;
+    }
+
+    .right-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      &.chat-hidden {
+        flex: 0;
+        .discord-chat {
+          width: 0;
+
+          @include touch {
+            display: none;
+          }
+        }
+      }
+    }
+
+    #twitch-embed {
       width: 100%;
       height: 100%;
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .discord-chat {
+      iframe {
+        width: 100%;
+      }
+    }
+
+    @include touch {
+      flex-direction: column;
+      #twitch-embed {
+        height: 80vh;
+      }
     }
   }
 
-  .discord-chat {
-    flex: 1;
+  .watch-controls {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--size-16);
 
-    iframe {
-      width: 100%;
-    }
-  }
-
-  @include touch {
-    flex-direction: column;
-    #twitch-embed {
-      height: 80vh;
+    button {
+      border: none;
+      margin-left: var(--size-16);
     }
   }
 }

assets/js/index.js

@@ -4282,6 +4282,7 @@ var cdTime = banner === null || banner === void 0 ? void 0 : banner.querySelecto
 var targetDate = new Date('Wed Sep 18 2020 10:30:00 GMT+0200 (Central European Summer Time)');
 
 function countdownTimer() {
+  if (!banner) return;
   var difference = +new Date(targetDate) - +new Date();
   var remaining = '';
 
@@ -4303,6 +4304,36 @@ function countdownTimer() {
 }
 
 var _default = countdownTimer;
+exports.default = _default;
+},{}],"modules/watch.js":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _default = function _default() {
+  var chatVisible = true;
+  var toggleChatButton = document.querySelector('#chat-toggle');
+  var rightPanel = document.querySelector('.right-panel');
+  console.log('toggleChatButton', toggleChatButton);
+
+  var handleButtonClick = function handleButtonClick() {
+    if (chatVisible) {
+      rightPanel.classList.add('chat-hidden');
+      chatVisible = false;
+    } else {
+      rightPanel.classList.remove('chat-hidden');
+      chatVisible = true;
+    }
+  };
+
+  if (toggleChatButton) {
+    toggleChatButton.addEventListener('click', handleButtonClick, false);
+  }
+};
+
 exports.default = _default;
 },{}],"index.js":[function(require,module,exports) {
 "use strict";
@@ -4313,17 +4344,20 @@ var _clock = _interopRequireDefault(require("./modules/clock"));
 
 var _countdown = _interopRequireDefault(require("./modules/countdown"));
 
+var _watch = _interopRequireDefault(require("./modules/watch"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var app = function app() {
   (0, _scrollHandler.default)();
   (0, _clock.default)();
+  (0, _watch.default)();
   (0, _countdown.default)();
   setInterval(_countdown.default, 1000);
 };
 
 app();
-},{"./modules/scrollHandler":"modules/scrollHandler.js","./modules/clock":"modules/clock.js","./modules/countdown":"modules/countdown.js"}],"../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
+},{"./modules/scrollHandler":"modules/scrollHandler.js","./modules/clock":"modules/clock.js","./modules/countdown":"modules/countdown.js","./modules/watch":"modules/watch.js"}],"../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
 var global = arguments[3];
 var OVERLAY_ID = '__parcel__error__overlay__';
 var OldModule = module.bundle.Module;
@@ -4351,7 +4385,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 + ':' + "60692" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61278" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/index.js

@@ -1,10 +1,12 @@
 import scrollHandler from './modules/scrollHandler';
 import clock from './modules/clock';
 import countdownTimer from './modules/countdown';
+import watchPanel from './modules/watch';
 
 const app = () => {
   scrollHandler();
   clock();
+  watchPanel();
 
   countdownTimer();
   setInterval(countdownTimer, 1000);

src/modules/countdown.js

@@ -5,6 +5,8 @@ const targetDate = new Date('Wed Sep 18 2020 10:30:00 GMT+0200 (Central European
 
 
 function countdownTimer() {
+  if (!banner) return;
+  
   const difference = +new Date(targetDate) - +new Date();
   let remaining = '';
 

src/modules/watch.js

@@ -0,0 +1,21 @@
+export default () => {
+  let chatVisible = true;
+  const toggleChatButton = document.querySelector('#chat-toggle');
+  const rightPanel = document.querySelector('.right-panel');
+
+  console.log('toggleChatButton', toggleChatButton)
+
+  const handleButtonClick = () => {
+    if (chatVisible) {
+      rightPanel.classList.add('chat-hidden');
+      chatVisible = false;
+    } else {
+      rightPanel.classList.remove('chat-hidden');
+      chatVisible = true;
+    }
+  }
+
+  if (toggleChatButton) {
+    toggleChatButton.addEventListener('click', handleButtonClick, false);
+  }
+};