added update to comments with characters counter

frontend/src/components/Unipuck.tsx

@@ -0,0 +1,42 @@
+// app/components/Unipuck.tsx
+import React from 'react';
+import { Box } from '@mui/material';
+
+interface UnipuckProps {
+    pucks: number;  // Number of pucks, assuming each puck follows the same layout
+}
+
+const Unipuck: React.FC<UnipuckProps> = ({ pucks }) => {
+    const renderPuck = () => {
+        const puckSVG = (
+            <svg width="100" height="100" viewBox="0 0 100 100">
+                <circle cx="50" cy="50" r="45" stroke="black" strokeWidth="2" fill="none" />
+                {[...Array(11)].map((_, index) => {
+                    const angle = (index * (360 / 11)) * (Math.PI / 180);
+                    const x = 50 + 35 * Math.cos(angle);
+                    const y = 50 + 35 * Math.sin(angle);
+                    return <circle key={index} cx={x} cy={y} r="5" fill="black" />;
+                })}
+                {[...Array(5)].map((_, index) => {
+                    const angle = (index * (360 / 5) + 36) * (Math.PI / 180);
+                    const x = 50 + 15 * Math.cos(angle);
+                    const y = 50 + 15 * Math.sin(angle);
+                    return <circle key={index} cx={x} cy={y} r="5" fill="black" />;
+                })}
+            </svg>
+        );
+        return puckSVG;
+    };
+
+    return (
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 2 }}>
+            {[...Array(pucks)].map((_, index) => (
+                <Box key={index} sx={{ margin: 1 }}>
+                    {renderPuck()}
+                </Box>
+            ))}
+        </Box>
+    );
+};
+
+export default Unipuck;