node server + separate client folder

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

@@ -0,0 +1,18 @@
+import styles from './Countdown.module.css';
+
+function display(seconds) {
+  const format = (val) => `0${Math.floor(val)}`.slice(-2);
+  const hours = seconds / 3600;
+  const minutes = (seconds % 3600) / 60;
+
+  if (hours < 1) return [minutes, seconds % 60].map(format).join(':');
+  else return [hours, minutes, seconds % 60].map(format).join(':');
+}
+
+export default function Countdown({ time, small }) {
+  return (
+    <div className={small ? styles.countdownClockSmall : styles.countdownClock}>
+      {time === null ? '- -:- -' : display(time * 60)}
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
+
+.countdownClock {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 18vw;
+  margin-top: 6vh;
+  margin-bottom: 5vh;
+  text-align: center;
+  letter-spacing: 0.125em;
+  line-height: 0.9;
+}
+
+.countdownClockSmall {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 6em;
+  text-align: center;
+  letter-spacing: 0.1em;
+  line-height: 0.9;
+  font-weight: 600;
+  color: #333;
+}

client/src/common/components/myProgressBar/MyProgressBar.jsx

@@ -0,0 +1,16 @@
+import { clamp } from '../../../app/utils';
+import styles from './MyProgressBar.module.css';
+
+export default function MyProgressBar({ normalisedComplete }) {
+  const percentComplete = clamp(100 - normalisedComplete * 100, 0, 100);
+  const completeWidth = `${percentComplete}%`;
+
+  return (
+    <div className={styles.progress}>
+      <div
+        className={styles.progressBar}
+        style={{ width: completeWidth }}
+      ></div>
+    </div>
+  );
+}

client/src/common/components/myProgressBar/MyProgressBar.module.css

@@ -0,0 +1,22 @@
+.progress {
+  padding: 1vh;
+  width: 90%;
+  margin: 0 auto;
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
+}
+
+.progressBar {
+  height: 2vh;
+  background: linear-gradient(
+    90deg,
+    rgb(145, 255, 191, 1) 0%,
+    rgba(145, 255, 191, 0.8) 20%,
+    rgba(145, 255, 191, 0.5) 50%,
+    rgba(145, 255, 191, 0.2) 100%
+  );
+  border-radius: 4px;
+  transition: 0.4s linear;
+  transition-property: width, background-color;
+}

client/src/common/components/smallTimer/SmallTimer.jsx

@@ -0,0 +1,10 @@
+import styles from './SmallTimer.module.css';
+
+export default function SmallTimer({ label, time }) {
+  return (
+    <div className={styles.SmallTimer}>
+      <div className={styles.label}>{label}</div>
+      <div className={styles.timer}>{time}</div>
+    </div>
+  );
+}

client/src/common/components/smallTimer/SmallTimer.module.css

@@ -0,0 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
+
+.smallTimer {
+  display: flex;
+  flex-direction: column;
+}
+
+.label,
+.timer {
+  font-size: 1vw;
+  text-align: center;
+}
+
+.label {
+  font-size: 1.5vw;
+  color: #888;
+  margin-bottom: 0;
+}
+
+.timer {
+  font-family: 'Open Sans', sans-serif;
+
+  font-size: 4vw;
+  letter-spacing: 0.125em;
+}

client/src/common/components/text/NumberedText.jsx

@@ -0,0 +1,11 @@
+import { Flex, Text } from '@chakra-ui/layout';
+import styles from './NumberedText.module.css';
+
+export default function NumberedText({ number = 1, text = '' }) {
+  return (
+    <Flex>
+      <div className={styles.stylednumber}>{number}</div>
+      <Text>{text}</Text>
+    </Flex>
+  );
+}

client/src/common/components/text/NumberedText.module.css

@@ -0,0 +1,12 @@
+.stylednumber {
+  display: inline;
+  text-align: center;
+  color: white;
+  font-weight: 600;
+
+  background-color: #319795;
+  width: 1.5em;
+  border-radius: 1em;
+
+  margin-right: 0.5em;
+}