TaikoLocalServer/TaikoWebUI/Pages/DaniDojo.razor

@inject IGameDataService GameDataService
@inject HttpClient Client

@page "/Cards/{baid:int}/DaniDojo"

<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>

<h1>Dani Dojo</h1>
<MudText Typo="Typo.caption">Card: @Baid</MudText>

<MudGrid Class="my-4 pb-10">
    <MudItem xs="12">
        <MudPaper Elevation="0" Outlined="true">
            <MudTabs ActivePanelIndex="0" Rounded="true" Border="true">
                @for (uint i = 1; i <= 19; i++)
                {
                    var danId = i;
                    var danData = GameDataService.GetDanDataById(danId);

                    <MudTabPanel Text="@GetDanTitle(danData.Title)" Icon="@GetDanResultIcon(danId)">
                        <MudGrid Class="pa-8 d-flex">
                            <MudItem xs="12" sm="12" md="3" Class="pb-1">
                                <MudCard Outlined="true" Style="height:100%;">
                                    <MudCardHeader Class="pb-0">
                                        <CardHeaderContent>
                                            <MudText Typo="Typo.h6">Result</MudText>
                                        </CardHeaderContent>
                                    </MudCardHeader>
                                    <MudCardContent Class="d-flex py-10" Style="justify-content:center;">
                                        <MudStack Justify="Justify.Center" AlignItems="AlignItems.Center" Spacing="6">
                                            @{
                                                var danResultState = GetDanResultState(danId);
                                                string danClearStateString = GetDanClearStateString(danResultState);
                                            }
                                            <img src=@($"/images/dani_{danResultState.ToString()}.png") style="max-width:150px; width:100%;" />
                                            <MudText Typo="Typo.body1">@danClearStateString</MudText>
                                        </MudStack>
                                    </MudCardContent>
                                </MudCard>
                            </MudItem>
                            <MudItem xs="12" sm="12" md="9">
                                <MudGrid Class="d-block">
                                @for (uint j = 0; j <= 2; j++)
                                {
                                    var index = (int)j;
                                    var danDataOdaiSong = danData.OdaiSongList[index];
                                    var stageNumber = j + 1;
                                    var difficulty = (Difficulty)danDataOdaiSong.Level;

                                    <MudItem xs="12" Class="pb-1">
                                        <MudCard Outlined="true" Class="pa-4">
                                            <MudGrid Style="display:flex; align-items: center; justify-content: flex-start;">
                                                <MudItem xs="1" md="1" Style="display:flex;flex-direction:column;align-items:center;">
                                                    <h3>@stageNumber</h3>
                                                </MudItem>

                                                <MudItem xs="2" md="1" Style="display:flex;flex-direction:column;align-items:center;">
                                                    <MudTooltip Text="@difficulty.ToString()" Placement="Placement.Top" Arrow="true">
                                                        <img src=@($"/images/difficulty_{difficulty}.png") style="width:40px;height:40px;margin-bottom:2px;" alt="@difficulty" />
                                                    </MudTooltip>
                                                    <MudStack Row="true" Spacing="0" Justify="Justify.Center" AlignItems="AlignItems.Center">
                                                        <MudIcon Icon="@Icons.Filled.Star" Size="Size.Small" />
                                                        <MudText Typo="Typo.caption" Style="line-height:1;margin-top:2px;margin-right:2px;">@GameDataService.GetMusicStarLevel(danDataOdaiSong.SongNo, difficulty)</MudText>
                                                    </MudStack>
                                                </MudItem>

                                                <MudItem xs="9" md="4" Style="display:flex;flex-direction:column;" Class="pl-4">
                                                    <MudText Typo="Typo.body1" Style="font-weight: bold;">@GameDataService.GetMusicNameBySongId(danDataOdaiSong.SongNo)</MudText>
                                                    <MudText Typo="Typo.caption">@GameDataService.GetMusicArtistBySongId(danDataOdaiSong.SongNo)</MudText>
                                                </MudItem>


                                                @if (bestDataMap.ContainsKey(danId))
                                                    {
                                                        var danBestData = bestDataMap[danId];
                                                        if (danBestData.DanBestStageDataList.Count > index)
                                                        {
                                                            var bestStage = danBestData.DanBestStageDataList[index];
                                                        <MudItem xs="12" md="6" Style="display:flex;flex-direction:column;">
                                                            <MudStack Row="true" Spacing="4" Justify="Justify.SpaceEvenly">
                                                                <MudCard Elevation="0">
                                                                    <MudText Typo="Typo.caption">Good</MudText>
                                                                    <MudText Typo="Typo.body1" Style="font-weight: bold;">@bestStage.GoodCount</MudText>
                                                                </MudCard>
                                                                <MudCard Elevation="0">
                                                                    <MudText Typo="Typo.caption">OK</MudText>
                                                                    <MudText Typo="Typo.body1" Style="font-weight: bold;">@bestStage.OkCount</MudText>
                                                                </MudCard>
                                                                <MudCard Elevation="0">
                                                                    <MudText Typo="Typo.caption">Bad</MudText>
                                                                    <MudText Typo="Typo.body1" Style="font-weight: bold;">@bestStage.BadCount</MudText>
                                                                </MudCard>
                                                                <MudCard Elevation="0">
                                                                    <MudText Typo="Typo.caption">Drumroll</MudText>
                                                                    <MudText Typo="Typo.body1" Style="font-weight: bold;">@bestStage.DrumrollCount</MudText>
                                                                </MudCard>
                                                                <MudCard Elevation="0">
                                                                    <MudText Typo="Typo.caption">MAX Combo</MudText>
                                                                    <MudText Typo="Typo.body1" Style="font-weight: bold;">@bestStage.ComboCount</MudText>
                                                                </MudCard>
                                                                <MudCard Elevation="0">
                                                                    <MudText Typo="Typo.caption">Total Hits</MudText>
                                                                    <MudText Typo="Typo.body1" Style="font-weight: bold;">@bestStage.TotalHitCount</MudText>
                                                                </MudCard>
                                                            </MudStack>
                                                        </MudItem>
                                                        }
                                                    }
                                            </MudGrid>
                                        </MudCard>
                                    </MudItem>
                                }
                                </MudGrid>
                            </MudItem>

                            <MudItem xs="12" Class="dani-results">
                                <MudGrid>
                                    <MudItem xs="12" md="3">
                                        <MudCard Outlined="true" Class="pa-2">
                                            <MudCardHeader Class="pb-0">
                                                <CardHeaderContent>
                                                    <MudText Typo="Typo.h6">Soul Gauge</MudText>
                                                </CardHeaderContent>
                                            </MudCardHeader>
                                            <MudCardContent>
                                                <MudStack Spacing="8">
                                                    @{
                                                        var redRequirement = GetSoulGauge(danData, false);
                                                        var goldRequirement = GetSoulGauge(danData, true);
                                                        var barClass = "bar-default";
                                                        var resultText = "Failed";
                                                    }
                                                    <MudStack Spacing="1">
                                                        <MudText Typo="Typo.subtitle2" Style="font-weight:bold;">Result</MudText>
                                                        @if (bestDataMap.ContainsKey(danId))
                                                        {
                                                            var danBestData = bestDataMap[danId];

                                                            if (danBestData.SoulGaugeTotal >= redRequirement) {
                                                                barClass = "bar-pass-red";
                                                                resultText = "Passed";
                                                            }

                                                            if (danBestData.SoulGaugeTotal >= goldRequirement) {
                                                                barClass = "bar-pass-gold";
                                                                resultText = "Gold";
                                                            }
                                                            
                                                            <MudProgressLinear Class="@barClass" Rounded="true" Size="Size.Large" Max="100" Value="@danBestData.SoulGaugeTotal">
                                                                <MudText Typo="Typo.caption">@(danBestData.SoulGaugeTotal)%</MudText>
                                                            </MudProgressLinear>
                                                            <MudText Typo="Typo.caption" Style="text-align: right">@resultText</MudText>
                                                        } else {
                                                            <MudProgressLinear Class="@barClass" Rounded="true" Size="Size.Large" Max="100" Value="0">
                                                                <MudText Typo="Typo.caption">0%</MudText>
                                                            </MudProgressLinear>
                                                            <MudText Typo="Typo.caption" Style="text-align: right">N/A</MudText>
                                                        }
                                                    </MudStack>
                                                    <MudStack Spacing="1">
                                                        <MudText Typo="Typo.subtitle2" Style="font-weight:bold">Conditions</MudText>
                                                        <MudStack Row="true" Justify="Justify.SpaceBetween">
                                                            <MudStack Spacing="0">
                                                                <MudText Typo="Typo.caption">Red</MudText>
                                                                <MudText Typo="Typo.body1" Style="font-weight: bold">> @redRequirement%</MudText>
                                                            </MudStack>
                                                            <MudStack Spacing="0">
                                                                <MudText Typo="Typo.caption">Gold</MudText>
                                                                <MudText Typo="Typo.body1" Style="font-weight: bold">> @goldRequirement%</MudText>
                                                            </MudStack>
                                                        </MudStack>
                                                    </MudStack>
                                                </MudStack>
                                            </MudCardContent>
                                        </MudCard>
                                    </MudItem>

                                    <MudItem xs="12" md="9">
                                        <MudStack Spacing="4">
                                        @for (var j = 1; j < danData.OdaiBorderList.Count; j++)
                                        {
                                            var border = danData.OdaiBorderList[j];
                                            
                                                <MudCard Outlined="true" Class="pa-2">
                                                    <MudCardHeader>
                                                        <CardHeaderContent>
                                                            <MudText Typo="Typo.h6">
                                                                @GetDanRequirementTitle(border)
                                                            </MudText>
                                                        </CardHeaderContent>
                                                    </MudCardHeader>
                                                    <MudCardContent>
                                                        @{
                                                            var borderType = (DanBorderType)border.BorderType;
                                                        }
                                                        @if (borderType == DanBorderType.All)
                                                        {
                                                            <MudText>@GetDanRequirementAll(border)</MudText>
                                                            @if (bestDataMap.ContainsKey(danId))
                                                            {
                                                                var bestData = bestDataMap[danId];
                                                                <MudText>
                                                                    Best: @GetAllBestFromData((DanConditionType)border.OdaiType, bestData)
                                                                </MudText>
                                                            }
                                                        }
                                                        else
                                                        {
                                                            <MudStack Row="true">
                                                                @for (var k = 0; k < 3; k++)
                                                                {
                                                                    var songNumber = k;
                                                                    <MudText>
                                                                        @GetDanRequirementPerSong(border, songNumber)
                                                                    </MudText>
                                                                    @if (!bestDataMap.ContainsKey(danId))
                                                                    {
                                                                        continue;
                                                                    }
                                                                    var bestData = bestDataMap[danId];
                                                                    if (k >= bestData.DanBestStageDataList.Count)
                                                                    {
                                                                        break;
                                                                    }
                                                                    <MudText>
                                                                        Best: @GetSongBestFromData((DanConditionType)border.OdaiType, bestData, songNumber)
                                                                    </MudText>
                                                                }
                                                            </MudStack>
                                                        }
                                                    </MudCardContent>
                                                </MudCard>
                                        }
                                        </MudStack>
                                    </MudItem>
                                </MudGrid>
                            </MudItem>
                        </MudGrid>
                    </MudTabPanel>
                }
            </MudTabs>
        </MudPaper>
    </MudItem>
</MudGrid>