feat: Add multiple machine for lottery draw

- Implemented `MachineAnimation` component with animation and collision handling for lottery balls.
- Added functionality to draw balls with callbacks for drawing and animation end.
- Created utility functions for managing machine and ball interactions within the animation.

feat: Enhance main page functionality

- Introduced `clickElement` function to programmatically trigger clicks on elements.
- Added drag-and-drop file input handling with `addDropEventToChangeInputFile`.

feat: Integrate Lottie animations

- Created `startLottie` function to control Lottie animations on the random page.

chore: Update global types

- Extended global types to include `ImportMetaEnv` for environment mode.

feat: Register new custom elements

- Added `Textfield` component to the custom elements list for Spectrum Web Components.

fix: Improve custom elements registration logic

- Refined the custom elements registration check to ensure elements are only defined if not already registered.

Author: SimYunSup

src/DotNetDevLottery/Components/Random/MachineAnimation.razor

@@ -3,8 +3,16 @@
 
 <div class="container">
     <div class="button-row">
-        <ui-button treatment="outline" @onclick="OnClickButton"
-            variant="@TriggerButtonVariant(Status == DrawMachineStatus.Pending)"
+        <ui-button type="" variant="primary" @onclick="@(() => TargetPersonCount--)">
+            <span slot="icon">-</span>
+        </ui-button>
+        <span>
+            @TargetPersonCount
+        </span>
+        <ui-button variant="primary" @onclick="@(() => TargetPersonCount++)">
+            <span slot="icon">+</span>
+        </ui-button>
+        <ui-button @onclick="OnClickButton" variant="@TriggerButtonVariant(Status == DrawMachineStatus.Pending)"
             class="@TriggerButtonClass(Status == DrawMachineStatus.Pending)">
             추첨 진행
         </ui-button>
@@ -32,6 +40,7 @@
     string TriggerButtonClass(bool isDisabled) => isDisabled ? "" : "success";
     string TriggerButtonVariant(bool isDisabled) => isDisabled ? "secondary" : "";
     int PersonCount = 0;
+    int TargetPersonCount = 1;
     int RemainedPersonCount = 0;
     List<int> WinnedUserList = new List<int>();
 
@@ -45,7 +54,7 @@
         }
         machineUtils = await JSRuntime.InvokeAsync<IJSObjectReference>(
         "import",
-        "./Components/Random/MachineAnimation.razor.js"
+        "/js/Components/Random/MachineAnimation.r.js"
         );
         componentRef = DotNetObjectReference.Create(this);
         await machineUtils.InvokeVoidAsync(
@@ -66,7 +75,8 @@
         }
         SelectedUserInfo = null;
         Status = DrawMachineStatus.Pending;
-        await machineUtils.InvokeVoidAsync("executeDrawBall");
+        Console.WriteLine($"TargetPersonCount: {TargetPersonCount}");
+        await machineUtils.InvokeVoidAsync("executeDrawBall", TargetPersonCount);
         await OnBeforeDrawMachine.InvokeAsync();
     }
 
@@ -106,7 +116,7 @@
             return;
         }
         Status = DrawMachineStatus.Done;
-        Console.WriteLine("ASDF");
+
         await OnDrawAnimationEnd.InvokeAsync(new DrawAnimationEndEventArgs
         {
             user = SelectedUserInfo,

src/DotNetDevLottery/Components/Random/MachineAnimation.razor.css

@@ -19,23 +19,33 @@
     --spectrum-button-content-color-down: hsl(355.7 100% 97.3%/.9);
     --spectrum-button-content-color-focus: hsl(355.7 100% 97.3%/.9);
 }
+
 .button-row {
     flex: 0 0 auto;
     padding: 5px 0;
+    gap: 1rem;
+    line-height: 50px;
     height: 50px;
     display: flex;
     justify-content: center;
     box-sizing: border-box;
+
+    & ui-button:has(span) {
+        padding: 0;
+    }
 }
+
 .machine-wrapper {
     flex: 1 1 auto;
     display: flex;
     justify-content: center;
     align-items: center;
 }
+
 .machine {
     position: relative;
 }
+
 .machine ::deep .machine-inner {
     position: absolute;
     top: 50%;
@@ -45,6 +55,7 @@
     border-radius: 50%;
     padding: 0;
 }
+
 .machine ::deep .ball {
     position: absolute;
     background-color: #666666;

src/DotNetDevLottery/DotNetDevLottery.csproj

@@ -5,12 +5,6 @@
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
     </PropertyGroup>
-    <ItemGroup>
-      <Compile Remove="wwwroot\js\**" />
-      <Content Remove="wwwroot\js\**" />
-      <EmbeddedResource Remove="wwwroot\js\**" />
-      <None Remove="wwwroot\js\**" />
-    </ItemGroup>
     <Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
         <Exec Command="pnpm i" Condition="$(RestorePackagesWithLockFile) != 'true'" ConsoleToMsBuild="true" />
 

src/DotNetDevLottery/Pages/Main.razor.cs

@@ -27,7 +27,7 @@ public partial class Main : ComponentBase, IAsyncDisposable
 
   protected override async Task OnInitializedAsync()
   {
-    elementUtils = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Pages/Main.razor.js");
+    elementUtils = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/Pages/Main.r.js");
     await elementUtils.InvokeVoidAsync("addDropEventToChangeInputFile", dropzoneElement);
   }
 

src/DotNetDevLottery/Pages/Random.razor.cs

@@ -30,7 +30,7 @@ protected override async Task OnInitializedAsync()
       return;
     }
 
-    lottieUtils = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Pages/Random.razor.js");
+    lottieUtils = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/Pages/Random.r.js");
   }
 
   public void OnBeforeDrawMachine()

src/DotNetDevLottery/config/build-script.mjs

@@ -10,12 +10,12 @@ const cwd = process.cwd();
 const indexEntryPoint = path.resolve(cwd, "./typescript/index.ts");
 
 const componentEntryPoints = await glob([
-  "./typescript/Components/**/*.razor.ts",
+  "./typescript/Components/**/*.r.ts",
 ], {
   cwd
 });
 const pageEntryPoints = await glob([
-  "./typescript/Pages/**/*.razor.ts",
+  "./typescript/Pages/**/*.r.ts",
 ], {
   cwd
 });
@@ -35,7 +35,7 @@ const baseOptions = {
 const pageEntryPointOptions = {
   ...baseOptions,
   entryPoints: pageEntryPoints,
-  outdir: path.resolve(cwd, "./wwwroot/Pages"),
+  outdir: path.resolve(cwd, "./wwwroot/js/Pages"),
   outbase: path.resolve(cwd, "./typescript/Pages"),
 };
 /** @type {import('esbuild').BuildOptions} */
@@ -44,7 +44,7 @@ const componentEntryPointOptions = {
   ignoreAnnotations: true,
   splitting: true,
   entryPoints: componentEntryPoints,
-  outdir: path.resolve(cwd, "./wwwroot/Components"),
+  outdir: path.resolve(cwd, "./wwwroot/js/Components"),
   outbase: path.resolve(cwd, "./typescript/Components"),
 };
 const indexOptions = {

src/DotNetDevLottery/package.json

@@ -9,20 +9,21 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "packageManager": "pnpm@9.3.0+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631",
+  "packageManager": "pnpm@10.13.1",
   "dependencies": {
-    "@dimforge/rapier2d": "^0.14.0",
-    "@dimforge/rapier2d-compat": "^0.14.0",
-    "@lottiefiles/dotlottie-wc": "^0.2.22",
-    "@spectrum-web-components/bundle": "^0.48.1",
+    "@dimforge/rapier2d": "^0.17.3",
+    "@dimforge/rapier2d-compat": "^0.17.3",
+    "@lottiefiles/dotlottie-wc": "^0.6.3",
+    "@spectrum-web-components/bundle": "^1.7.0",
+    "@spectrum-web-components/textfield": "^1.7.0",
     "mitt": "^3.0.1"
   },
   "devDependencies": {
     "@microsoft/dotnet-js-interop": "^8.0.0",
-    "@types/node": "^20.16.5",
-    "esbuild": "^0.24.0",
+    "@types/node": "^24.0.14",
+    "esbuild": "^0.25.6",
     "esbuild-plugin-wasm": "^1.1.0",
-    "tinyglobby": "^0.2.9",
-    "typescript": "^5.6.3"
+    "tinyglobby": "^0.2.14",
+    "typescript": "^5.8.3"
   }
 }