feat: add size to counter

src/renderer/App.tsx

@@ -31,27 +31,30 @@ export const defaultCounters = [
     count: 0,
     show: false,
     position: { top: '0%', left: '60%' },
+    size: '4em',
   },
   {
     id: 'counter-2',
     count: 0,
     show: false,
     position: { top: '30%', left: '60%' },
+    size: '4em',
   },
   {
     id: 'counter-3',
     count: 0,
     show: false,
     position: { top: '60%', left: '60%' },
+    size: '4em',
   },
 ];
 
 export default function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<Controller />} />
-        <Route path="/projector" element={<Projector />} />
+        <Route path="/projector" element={<Controller />} />
+        <Route path="/" element={<Projector />} />
       </Routes>
     </Router>
   );

src/renderer/Controller.tsx

@@ -76,6 +76,15 @@ export function Controller() {
     localStorage.setItem('counters', JSON.stringify(newCounters));
   };
 
+  // Update size of a counter
+  const handleSizeCounter = (index: number, newSize: string) => {
+    const newCounters = counters.map((counter, i) =>
+      i === index ? { ...counter, size: newSize } : counter,
+    );
+    setCounters(newCounters);
+    localStorage.setItem('counters', JSON.stringify(newCounters));
+  };
+
   // Change counter value
   const handleCounterChange = (index: number, value: number) => {
     const newCounters = counters.map((counter, i) =>
@@ -253,6 +262,18 @@ export function Controller() {
                   </button>
                 </div>
               )}
+              {counter.show && (
+                <div className="ctrl-size-controls">
+                  <label>
+                    Height:
+                    <input
+                      type="text"
+                      value={counter.size}
+                      onChange={(e) => handleSizeCounter(index, e.target.value)}
+                    />
+                  </label>
+                </div>
+              )}
             </div>
           ))}
         </div>

src/renderer/Projector.css

@@ -46,7 +46,6 @@ body {
 }
 
 .counter-display {
-  font-size: 4em;
   color: #ff1111;
   text-shadow: 2px 2px 4px #000;
   /* text-shadow: #ff999955 .5rem .35rem; */

src/renderer/Projector.tsx

@@ -75,6 +75,7 @@ export function Projector() {
               top: counter.position.top,
               left: counter.position.left,
               position: 'absolute',
+              fontSize: counter.size,
             }}
           >
             <span className="counter-display">

src/renderer/types.ts

@@ -13,4 +13,5 @@ export type Counter = {
   count: number;
   show: boolean;
   position: Position;
+  size: string;
 };