feat: presenter view

- connected to websockets
- some styling changes
- reusable components
- some small bugfixes

client/src/common/components/countdown/Countdown.jsx

@@ -1,16 +1,18 @@
 import { useEffect, useState } from 'react';
 import styles from './Countdown.module.css';
 
-function formatDisplay(seconds) {
+function formatDisplay(seconds, hideZero) {
   const format = (val) => `0${Math.floor(val)}`.slice(-2);
   const hours = seconds / 3600;
   const minutes = (seconds % 3600) / 60;
 
-  return [hours, minutes, seconds % 60].map(format).join(':');
+  if (hideZero && hours < 1)
+    return [minutes, seconds % 60].map(format).join(':');
+  else return [hours, minutes, seconds % 60].map(format).join(':');
 }
 
 export default function Countdown(props) {
-  const { time, small } = props;
+  const { time, small, hideZeroHours } = props;
   const [clock, setClock] = useState(time);
   let display = '-- : -- : --';
 
@@ -19,7 +21,8 @@ export default function Countdown(props) {
   }, [time]);
 
   // prepare display string
-  if (clock != null && !isNaN(clock)) display = formatDisplay(clock);
+  if (clock != null && !isNaN(clock))
+    display = formatDisplay(clock, hideZeroHours);
 
   return (
     <div className={small ? styles.countdownClockSmall : styles.countdownClock}>

client/src/common/components/countdown/Countdown.module.css

@@ -9,11 +9,10 @@
 
 /* Viewers */
 .countdownClock {
-  font-size: 18vw;
-  margin-top: 6vh;
-  margin-bottom: 5vh;
+  font-size: 21vw;
+  line-height: 21vw;
   text-align: center;
-  letter-spacing: 0.125em;
+  letter-spacing: 1vw;
 }
 
 /* Editor */