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}>