fix: calculate the size of marbles using the proportion of marbles area to fix: marble is too large in a square screen

src/config/marbleConfig.ts

@@ -9,7 +9,8 @@ export const MARBLE_CONFIG = {
   size: {
     base: 192,
     min: 96,
-    maxScreenRatio: 0.25,
+    marbleCount: 19,
+    marbleArea: 0.5,
   },
 
   // Marble initial speed configuration
@@ -57,4 +58,3 @@ export const MARBLE_CONFIG = {
 } as const;
 
 export const AVATAR_BASE_URL = "https://avatar.awfufu.com/qq/";
-

src/utils/marbleFactory.ts

@@ -17,10 +17,11 @@ export class MarbleFactory {
   }
 
   // Calculate marble size (responsive)
-  private calculateMarbleSize(): number {
-    const { base, min, maxScreenRatio } = MARBLE_CONFIG.size;
-    const quarter =
-      Math.min(window.innerWidth, window.innerHeight) * maxScreenRatio;
+  public calculateMarbleSize(): number {
+    const { base, min, marbleCount, marbleArea } = MARBLE_CONFIG.size;
+    const fieldArea = this.fieldWidth * this.fieldHeight;
+    const areaPerMarble = (fieldArea * marbleArea) / marbleCount;
+    const quarter = Math.sqrt((4 * areaPerMarble) / Math.PI);
     const capped = Math.min(base, quarter || base);
     return Math.max(min, Math.floor(capped)) * this.zoomLevel;
   }

src/utils/marbleSystem.ts

@@ -291,7 +291,7 @@ export class MarbleSystem {
   // Update marble size (zoom)
   public updateMarbleSize(zoomLevel: number): void {
     this.factory.setZoomLevel(zoomLevel);
-    const size = this.calculateMarbleSize(zoomLevel);
+    const size = this.factory.calculateMarbleSize();
     const radius = size / 2;
 
     for (const m of this.marbles) {
@@ -304,15 +304,6 @@ export class MarbleSystem {
     }
   }
 
-  // Calculate marble size
-  private calculateMarbleSize(zoomLevel: number): number {
-    const { base, min, maxScreenRatio } = MARBLE_CONFIG.size;
-    const quarter =
-      Math.min(window.innerWidth, window.innerHeight) * maxScreenRatio;
-    const capped = Math.min(base, quarter || base);
-    return Math.max(min, Math.floor(capped)) * zoomLevel;
-  }
-
   /**
    * Request device motion permission
    */