feat: increment running timer

client/src/features/control/PlaybackControl.jsx

@@ -3,6 +3,7 @@ import Countdown from '../../common/components/countdown/Countdown';
 import { stringFromMillis } from '../../common/dateConfig';
 import { useEffect, useState } from 'react';
 import { useSocket } from '../../app/context/socketContext';
+import { Button } from '@chakra-ui/button';
 import StartIconBtn from '../../common/components/buttons/StartIconBtn';
 import PauseIconBtn from '../../common/components/buttons/PauseIconBtn';
 import PrevIconBtn from '../../common/components/buttons/PrevIconBtn';
@@ -96,6 +97,14 @@ export default function PlaybackControl() {
   const started = stringFromMillis(timer.startedAt, true);
   const finish = stringFromMillis(timer.expectedFinish, true);
 
+  const incrementProps = {
+    size: 'sm',
+    width: '2.9em',
+    colorScheme: 'whiteAlpha',
+    variant: 'outline',
+    _focus: { boxShadow: 'none' },
+  };
+
   return (
     <div className={style.mainContainer}>
       <div className={style.timeContainer}>
@@ -110,6 +119,32 @@ export default function PlaybackControl() {
           <span className={style.tag}>Finish at </span>
           <span className={style.time}>{finish}</span>
         </div>
+        <div className={style.btn}>
+          <Button
+            {...incrementProps}
+            onClick={() => socket.emit('increment-timer', 1)}
+          >
+            +1
+          </Button>
+          <Button
+            {...incrementProps}
+            onClick={() => socket.emit('increment-timer', 5)}
+          >
+            +5
+          </Button>
+          <Button
+            {...incrementProps}
+            onClick={() => socket.emit('increment-timer', -1)}
+          >
+            -1
+          </Button>
+          <Button
+            {...incrementProps}
+            onClick={() => socket.emit('increment-timer', -5)}
+          >
+            -5
+          </Button>
+        </div>
       </div>
 
       <div className={style.playbackContainer}>

client/src/features/control/PlaybackControl.module.css

@@ -17,10 +17,10 @@
 .timeContainer {
   display: grid;
   grid-template-areas:
-    'clk clk ...'
-    'sta fin ...';
+    'clk clk btn'
+    'sta fin btn';
   grid-template-rows: 1fr auto;
-  grid-template-columns: 1fr 1fr 80px;
+  grid-template-columns: 2fr 2fr 22%;
   gap: 5px;
   justify-items: start;
 }
@@ -29,6 +29,22 @@
   grid-area: clk;
 }
 
+.btn {
+  grid-area: btn;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+}
+
+.minus {
+  grid-area: min;
+  display: flex;
+  flex-direction: column;
+}
+
 .start {
   grid-area: sta;
 }