feat: 애니메이션 추가 (#4)

.editorconfig

@@ -1,4 +1,4 @@
-[*.{ts,tsx,js,mts,cts}]
+[*.{ts,tsx,js,mjs,cjs,mts,cts,json}]
 charset = utf-8
 indent_style = space
 indent_size = 2

.github/workflows/gh-pages.yml

@@ -10,10 +10,21 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: "./.nvmrc"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          package_json_file: "./src/DotNetDevLottery/package.json"
+          run_install: false
+
       - name: Setup .NET Core SDK
         uses: actions/setup-dotnet@v4
         with:
-          dotnet-version: "8.0.x"
+          dotnet-version: "8.x"
 
       - name: Publish .NET Core Project
         run: dotnet publish ./src/DotNetDevLottery/DotNetDevLottery.csproj -c Release -o release --nologo

.gitignore

@@ -363,9 +363,11 @@ MigrationBackup/
 FodyWeavers.xsd
 
 **/wwwroot/build/
+**/wwwroot/js/
 
 .env
 
 appsettings.json
 
-.idea/
+.idea/
+.DS_Store

.nvmrc

@@ -1 +1 @@
-20.14
+20.16

src/DotNetDevLottery/.npmrc

@@ -1 +1 @@
-public-hoist-pattern[]=@spectrum-web-components/theme
+public-hoist-pattern[]=@spectrum-web-components/theme

src/DotNetDevLottery/Components/Random/MachineAnimation.razor

@@ -0,0 +1,99 @@
+@inject IJSRuntime JSRuntime
+
+<div class="container">
+    <div class="button-row">
+        <ui-button
+            treatment="outline"
+            @onclick="OnClickButton"
+            class="success">
+            추첨 진행
+        </ui-button>
+    </div>
+    <div class="machine-wrapper">
+        <div class="machine"  @ref="machineElement" />
+    </div>
+</div>
+
+@code {
+    ElementReference machineElement;
+    IJSObjectReference? machineUtils;
+    [Parameter, EditorRequired]
+    required public UserInfo[] UserInfoList { get; set; }
+    [Parameter]
+    public EventCallback OnBeforeDrawMachine { get; set; }
+    [Parameter]
+    public EventCallback<DrawUserEventArgs> OnDrawUser { get; set; }
+    [Parameter]
+    public EventCallback<DrawAnimationEndEventArgs> OnDrawAnimationEnd { get; set; }
+
+    public UserInfo? SelectedUserInfo = null;
+    int PersonCount = 0;
+    int RemainedPersonCount = 0;
+    List<int> WinnedUserList = new List<int>();
+
+    protected override async Task OnInitializedAsync()
+    {
+        PersonCount = UserInfoList.Count();
+        RemainedPersonCount = PersonCount;
+        if (PersonCount == 0) {
+            return;
+        }
+        machineUtils = await JSRuntime.InvokeAsync<IJSObjectReference>(
+            "import",
+            "/js/Components/MachineAnimation.razor.js"
+        );
+        await machineUtils.InvokeVoidAsync(
+            "init",
+            Math.Max(Math.Min(PersonCount, 60), 30),
+            machineElement,
+            DotNetObjectReference.Create(this),
+            nameof(OnDrawMachine),
+            nameof(OnDrawMachineAnimationEnd)
+        );
+    }
+
+    public async Task OnClickButton()
+    {
+        if (machineUtils == null) {
+            return;
+        }
+        SelectedUserInfo = null;
+        await machineUtils.InvokeVoidAsync("executeDrawBall");
+        await OnBeforeDrawMachine.InvokeAsync();
+    }
+
+    [JSInvokable]
+    public async Task<UserInfo?> OnDrawMachine()
+    {
+        if (RemainedPersonCount < 1)
+        {
+            // TODO: 남은 인원 없음 알림
+            return null;
+        }
+        var randomObj = new System.Random();
+        var index = randomObj.Next(RemainedPersonCount);
+        while(WinnedUserList.Contains(index)) {
+            index = randomObj.Next(RemainedPersonCount);
+        }
+        SelectedUserInfo = UserInfoList.ElementAtOrDefault(index);
+        if (SelectedUserInfo == null) {
+            return null;
+        }
+        WinnedUserList.Add(index);
+        await OnDrawUser.InvokeAsync(new DrawUserEventArgs{
+            Status = DrawMachineStatus.Drawed
+        });
+        return SelectedUserInfo;
+    }
+    [JSInvokable]
+    public async Task OnDrawMachineAnimationEnd()
+    {
+        if (SelectedUserInfo == null) {
+            return;
+        }
+        await OnDrawAnimationEnd.InvokeAsync(new DrawAnimationEndEventArgs{
+            user = SelectedUserInfo,
+            Status = DrawMachineStatus.Drawed
+        });
+    }
+}

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

@@ -0,0 +1,68 @@
+.container {
+    width: 70%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.success {
+    --spectrum-button-background-color-default: hsl(142.1 76.2% 36.3%);
+    --spectrum-button-background-color-hover: hsl(142.1 76.2% 36.3%/.9);
+    --spectrum-button-background-color-down: hsl(142.1 76.2% 36.3%/.9);
+    --spectrum-button-background-color-focus: hsl(142.1 76.2% 36.3%/.9);
+    --spectrum-button-border-color-default: hsl(142.1 76.2% 36.3%);
+    --spectrum-button-border-color-hover: hsl(142.1 76.2% 36.3%/.9);
+    --spectrum-button-border-color-down: hsl(142.1 76.2% 36.3%/.9);
+    --spectrum-button-border-color-focus: hsl(142.1 76.2% 36.3%/.9);
+    --spectrum-button-content-color-default: hsl(355.7 100% 97.3%);
+    --spectrum-button-content-color-hover: hsl(355.7 100% 97.3%/.9);
+    --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;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+}
+.machine-wrapper {
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+.machine ::deep .machine-inner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 2px solid #222222;
+    border-radius: 50%;
+    padding: 0;
+}
+.machine ::deep .ball {
+    position: absolute;
+    background-color: #666666;
+    border: 2px solid #222222;
+    border-radius: 50%;
+    width: calc(var(--ball-size) * 1px);
+    height: calc(var(--ball-size) * 1px);
+}
+
+.machine ::deep .ball.ball--drawed {
+    background-color: #666666;
+    border: 0;
+    font-size: calc(var(--ball-size) * .07px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: calc(var(--ball-size) * .1px);
+}
+
+.machine ::deep .ball.ball--drawed .name {
+    font-size: calc(var(--ball-size) * .1px);
+}

src/DotNetDevLottery/DotNetDevLottery.csproj

@@ -11,15 +11,26 @@
       <EmbeddedResource Remove="wwwroot\js\**" />
       <None Remove="wwwroot\js\**" />
     </ItemGroup>
-    <Target Name="PreBuild" BeforeTargets="Build">
-        <Message Text="Configuration is $(Configuration) $(MSBuildThisFileDirectory)" Importance="high" />
-        <Exec Condition="!Exists('node_modules')" Command="pnpm i" />
-        <Message Text="TypeScript 컴파일 중" Importance="high" />
-        <Exec Command="pnpm build" />
+    <Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
+        <PropertyGroup>
+            <RestorePackagesWithLockFile>true</RestorePackagesWithLockFile>
+        </PropertyGroup>
+        <Exec Command="pnpm i" Condition="$(RestorePackagesWithLockFile) != 'true'" />
+
+        <!-- 'Incremental builds' 가 되도록 stamp 파일을 업데이트한다. -->
+        <Touch Files="node_modules/.install-stamp" AlwaysCreate="true" />
+    </Target>
+    <Target Name="PreBuild" DependsOnTargets="NpmInstall" BeforeTargets="BeforeBuild">
+        <Message Text="TypeScript 컴파일 중 $(Configuration)" Importance="high" />
+        <PropertyGroup>
+            <NodeCommand Condition="$(Configuration) == 'Release'">pnpm build</NodeCommand>
+            <NodeCommand Condition="$(Configuration) != 'Release'">pnpm build:dev</NodeCommand>
+        </PropertyGroup>
+        <Exec Command="$(NodeCommand)" />
     </Target>
     <ItemGroup>
-        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0-rc.1.23421.29" />
-        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0-rc.1.23421.29" PrivateAssets="all" />
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.10" />
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.10" PrivateAssets="all" />
         <PackageReference Include="NPOI" Version="2.6.2" />
     </ItemGroup>
 

src/DotNetDevLottery/Models/MachineEventArgs.cs

@@ -0,0 +1,17 @@
+namespace DotNetDevLottery.Models;
+
+public enum DrawMachineStatus {
+    Init,
+    Pending,
+    Drawed,
+    Done,
+}
+
+public class DrawUserEventArgs {
+    public DrawMachineStatus Status;
+}
+
+public class DrawAnimationEndEventArgs {
+    public DrawMachineStatus Status;
+    required public UserInfo user;
+}

src/DotNetDevLottery/Pages/Main.razor

@@ -101,7 +101,7 @@
 
     protected override async Task OnInitializedAsync()
     {
-        elementUtils = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./build/js/element.mjs");
+        elementUtils = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/Pages/Main.razor.js");
         await elementUtils.InvokeVoidAsync("addDropEventToChangeInputFile", dropzoneElement);
     }
 
@@ -145,6 +145,16 @@
         {
             await EventService.LoadUserInfoListAsync(selectedEventCompanyIndex, targetFile);
             isSecondFilterOpened = true;
+            foreach(var userInfoGroup in EventService.UserInfos)
+                {
+                    Console.WriteLine(userInfoGroup.personName);
+                }
+                Console.WriteLine("");
+            foreach(var userInfoGroup in EventService.UserInfos
+                .GroupBy((userInfo) => userInfo.ticketType))
+                {
+                    Console.WriteLine(userInfoGroup.First().personName);
+                }
             groupNames = EventService.UserInfos
                 .GroupBy((userInfo) => userInfo.ticketType)
                 .Select((userInfoGroup) => userInfoGroup.First().ticketType ?? string.Empty)