enlarge player disc, center hub

Digital-Defiance · Dec 22, 2024 · eedebeb · eedebeb
1 parent f76551a
commit eedebeb
Showing 1 changed file with 21 additions and 6 deletions.
diff --git a/chili-and-cilantro-react/src/app/components/player-disc.tsx b/chili-and-cilantro-react/src/app/components/player-disc.tsx
@@ -34,6 +34,9 @@ const PlayerDisc: React.FC<PlayerDiscProps> = ({
   discSize = 160, // Default disc size
 }) => {
   const [isRevealed, setIsRevealed] = useState(reveal);
+  const iconSize = discSize / 3;
+  const iconCircleRadius = iconSize * 0.85;
+  const innerBorderRadius = iconCircleRadius * 0.85;
 
   // Define theme colors
   const playerThemes: ThemeColors[] = [
@@ -282,9 +285,6 @@ const PlayerDisc: React.FC<PlayerDiscProps> = ({
 
   // Function to render the front face
   const renderFront = () => {
-    const iconSize = discSize / 3;
-    const iconCircleRadius = iconSize * 0.7;
-
     return (
       <svg
         key={'front'}
@@ -307,6 +307,15 @@ const PlayerDisc: React.FC<PlayerDiscProps> = ({
           r={iconCircleRadius}
           fill={theme.secondary}
         />
+        {/* Inner border circle */}
+        <circle
+          cx={discSize / 2}
+          cy={discSize / 2}
+          r={innerBorderRadius}
+          fill="none"
+          stroke={theme.border}
+          strokeWidth={(discSize / 100) * 2}
+        />
         <Hat
           style={player}
           dropShadowColor={theme.accent}
@@ -322,9 +331,6 @@ const PlayerDisc: React.FC<PlayerDiscProps> = ({
 
   // Function to render the back face
   const renderBack = () => {
-    const iconSize = discSize / 3;
-    const iconCircleRadius = iconSize * 0.7;
-
     return (
       <svg
         key={'back'}
@@ -347,6 +353,15 @@ const PlayerDisc: React.FC<PlayerDiscProps> = ({
           r={iconCircleRadius}
           fill={theme.primary}
         />
+        {/* Inner border circle */}
+        <circle
+          cx={discSize / 2}
+          cy={discSize / 2}
+          r={innerBorderRadius}
+          fill="none"
+          stroke={theme.accent}
+          strokeWidth={(discSize / 100) * 2}
+        />
         <image
           href={iconSrc}
           width={iconSize}