feat: 볼의 개수를 남은 인원 수만큼 보여주기 (#15)

dotnetdev-kr · Jan 8, 2025 · d7566d3 · d7566d3
1 parent 5eab09b
commit d7566d3
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 18 deletions.
diff --git a/src/DotNetDevLottery/Components/Random/MachineAnimation.razor b/src/DotNetDevLottery/Components/Random/MachineAnimation.razor
@@ -18,6 +18,7 @@
 
 @code {
     ElementReference machineElement;
+    private DotNetObjectReference<MachineAnimation>? componentRef;
     IJSObjectReference? machineUtils;
     [Parameter, EditorRequired]
     required public UserInfo[] UserInfoList { get; set; }
@@ -47,11 +48,12 @@
             "import",
             "/js/Components/MachineAnimation.razor.js"
         );
+        componentRef = DotNetObjectReference.Create(this);
         await machineUtils.InvokeVoidAsync(
             "init",
-            Math.Max(Math.Min(PersonCount, 60), 30),
+            PersonCount,
             machineElement,
-            DotNetObjectReference.Create(this),
+            componentRef,
             nameof(OnDrawMachine),
             nameof(OnDrawMachineAnimationEnd)
         );
@@ -116,5 +118,6 @@
             await machineUtils.InvokeVoidAsync("executeRemoveEngine");
             await machineUtils.DisposeAsync();
         }
+        componentRef?.Dispose();
     }
 }
diff --git a/src/DotNetDevLottery/package.json b/src/DotNetDevLottery/package.json
@@ -18,6 +18,7 @@
     "mitt": "^3.0.1"
   },
   "devDependencies": {
+    "@microsoft/dotnet-js-interop": "^8.0.0",
     "@types/node": "^20.16.5",
     "esbuild": "^0.24.0",
     "esbuild-plugin-wasm": "^1.1.0",

diff --git a/src/DotNetDevLottery/pnpm-lock.yaml b/src/DotNetDevLottery/pnpm-lock.yaml
diff --git a/src/DotNetDevLottery/tsconfig.json b/src/DotNetDevLottery/tsconfig.json
@@ -22,7 +22,9 @@
     "paths": {
       "@/utils/*": ["./utils/*"]
     },
-    "types": []
+    "types": [
+      "./typescript/global.d.ts"
+    ]
   },
   "include": ["**/*.ts"]
 }
diff --git a/src/DotNetDevLottery/typescript/Components/MachineAnimation.razor.ts b/src/DotNetDevLottery/typescript/Components/MachineAnimation.razor.ts
@@ -1,3 +1,4 @@
+import type { DotNet } from "@microsoft/dotnet-js-interop";
 import type { RapierNamespace } from "../utils/getRapier";
 import type { Engine } from "../utils/defineEngine";
 
@@ -57,7 +58,7 @@ async function defineDrawMachineAnimation({
     size,
   });
   const topCollider = sphere.find((part) => part.angle === Math.PI * 3 / 2)!.collider;
-  const renderedBallCount = count > 20 ? count : 20;
+  const renderedBallCount = count;
   let balls = addBallsToEngine({
     engine,
     rapier,
@@ -246,10 +247,10 @@ class Ball {
     this.#element.classList.add('ball');
     this.#size = size;
     this.#ballSize = ballSize;
-    this.#element.style.setProperty(Ball.BALL_SIZE_PROPERTY_NAME, String(this.#ballSize * 2));
+    this.#element.style.setProperty(Ball.BALL_SIZE_PROPERTY_NAME, String(this.#ballSize));
     wrapperElement.appendChild(this.#element);
 
-    const rapierBallSize = coords.toRapier.length(ballSize);
+    const rapierBallSize = coords.toRapier.length(ballSize / 2);
     const bodyDesc = new rapier.RigidBodyDesc(rapier.RigidBodyType.Dynamic)
       .setTranslation(
         ...coords.toRapier.vector(size.wrapper / 2 + index, size.wrapper / 2 + index)
@@ -265,7 +266,7 @@ class Ball {
       return false;
     }
     const [x, y] = coords.fromBody.vector(this.#body)
-    this.#element!.style.transform = `translate(${(x - this.#ballSize)}px, ${(y - this.#ballSize)}px) scale(1)`;
+    this.#element!.style.transform = `translate(${(x - this.#ballSize / 2)}px, ${(y - this.#ballSize / 2)}px) scale(1)`;
     return true;
   }
   destroy() {
@@ -313,7 +314,7 @@ function addBallsToEngine(option: AddBallsToEngineOption): Ball[] {
     element,
   } = option;
   const balls = Array.from({ length: count }, (_, index) => {
-    const BALL_SIZE = size.machine / (count * 0.75);
+    const BALL_SIZE = size.machine / (Math.sqrt(count) * 1.5 + 2);
     const ball = new Ball({
       engine,
       rapier,
@@ -330,11 +331,6 @@ function addBallsToEngine(option: AddBallsToEngineOption): Ball[] {
 let ballInterface: Awaited<ReturnType<typeof defineDrawMachineAnimation>>;
 
 
-interface DotNetInterface {
-  invokeMethodAsync: <T extends any[], R extends any>(...args: T) => Promise<R>;
-  invokeMethod: <T extends any[], R extends any>(...args: T) => R;
-}
-
 export function executeDrawBall() {
   ballInterface?.drawBall();
 }
@@ -358,10 +354,9 @@ const debounce = (callback: (...args: any[]) => void, wait: number) => {
 export async function init(
   count: number,
   element: HTMLDivElement,
-  // TODO: DotNetObjectReference이 타이핑이 있다면 교체
-  instance: DotNetInterface,
-  drawCallback: EventCallback,
-  animationEndCallback: () => Promise<void>,
+  instance: DotNet.DotNetObject,
+  drawCallback: string,
+  animationEndCallback: string,
 ) {
   const option: DefineDrawMachineAnimationOption = {
     count,

diff --git a/src/DotNetDevLottery/typescript/global.d.ts b/src/DotNetDevLottery/typescript/global.d.ts
@@ -0,0 +1,8 @@
+import type { DotNet } from '@microsoft/dotnet-js-interop';
+
+declare global {
+  interface Window {
+    DotNet: typeof DotNet;
+  }
+}
+
diff --git a/src/DotNetDevLottery/typescript/vite-env.d.ts b/src/DotNetDevLottery/typescript/vite-env.d.ts