Taiko_Stuff/TaikoLocalServer
1
0
Fork 0
mirror of synced 2024-11-24 06:50:15 +01:00
Code Releases Activity

More soul gauge requirement UI updates

Browse Source
This commit is contained in:
shiibe 2022-09-12 12:34:36 -04:00
parent a527628f74
commit 4b8b25b686
3 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
TaikoWebUI/Pages/DaniDojo.razor
View File

@ -87,7 +87,7 @@
</MudItem> </MudItem>
} }
<MudItem xs="12"> <MudItem xs="12" Class="dani-results">
<MudGrid> <MudGrid>
<MudItem xs="12" md="3"> <MudItem xs="12" md="3">
<MudCard Outlined="true" Class="pa-2"> <MudCard Outlined="true" Class="pa-2">
@ -97,48 +97,52 @@
</CardHeaderContent> </CardHeaderContent>
</MudCardHeader> </MudCardHeader>
<MudCardContent> <MudCardContent>
<MudStack> <MudStack Spacing="8">
@{ @{
var redRequirement = GetSoulGauge(danData, false); var redRequirement = GetSoulGauge(danData, false);
var goldRequirement = GetSoulGauge(danData, true); var goldRequirement = GetSoulGauge(danData, true);
var barColor = Color.Default; var barClass = "bar-default";
var resultText = "Failed";
} }
<MudStack Spacing="1"> <MudStack Spacing="1">
<MudText Typo="Typo.caption" Style="font-weight:bold;">Result:</MudText> <MudText Typo="Typo.subtitle2" Style="font-weight:bold;">Result</MudText>
@if (bestDataMap.ContainsKey(danId)) @if (bestDataMap.ContainsKey(danId))
{ {
var danBestData = bestDataMap[danId]; var danBestData = bestDataMap[danId];
if (danBestData.SoulGaugeTotal >= redRequirement) { if (danBestData.SoulGaugeTotal >= redRequirement) {
barColor = Color.Error; barClass = "bar-pass-red";
resultText = "Passed";
} }
if (danBestData.SoulGaugeTotal >= goldRequirement) { if (danBestData.SoulGaugeTotal >= goldRequirement) {
barColor = Color.Warning; barClass = "bar-pass-gold";
resultText = "Gold";
} }
<MudProgressLinear Color="@barColor" Rounded="true" Size="Size.Large" Style="height: 20px" Max="100" Value="@danBestData.SoulGaugeTotal">
<MudText Typo="Typo.caption" Style="color: white;">@(danBestData.SoulGaugeTotal)%</MudText> <MudProgressLinear Class="@barClass" Rounded="true" Size="Size.Large" Max="100" Value="@danBestData.SoulGaugeTotal">
<MudText Typo="Typo.caption">@(danBestData.SoulGaugeTotal)%</MudText>
</MudProgressLinear> </MudProgressLinear>
<MudText Typo="Typo.caption" Style="text-align: right">@resultText</MudText>
} else { } else {
<MudProgressLinear Color="@barColor" Rounded="true" Size="Size.Large" Style="height: 20px" Max="100" Value="0"> <MudProgressLinear Class="@barClass" Rounded="true" Size="Size.Large" Max="100" Value="0">
<MudText Typo="Typo.caption">0%</MudText> <MudText Typo="Typo.caption">0%</MudText>
</MudProgressLinear> </MudProgressLinear>
<MudText Typo="Typo.caption" Style="text-align: right">N/A</MudText>
} }
</MudStack> </MudStack>
<MudStack Spacing="1"> <MudStack Spacing="1">
<MudCard Outlined="true" Class="pa-1"> <MudText Typo="Typo.subtitle2" Style="font-weight:bold;">Conditions</MudText>
<MudStack Row="true"> <MudStack Row="true" Justify="Justify.SpaceBetween">
<MudText Typo="Typo.caption" Style="font-weight:bold;">Red Requirement:</MudText> <MudStack Spacing="0">
<MudText Typo="Typo.caption">@redRequirement%</MudText> <MudText Typo="Typo.caption">Red</MudText>
<MudText Typo="Typo.body1">> @redRequirement%</MudText>
</MudStack> </MudStack>
</MudCard> <MudStack Spacing="0">
<MudText Typo="Typo.caption">Gold</MudText>
<MudCard Outlined="true" Class="pa-1"> <MudText Typo="Typo.body1">> @goldRequirement%</MudText>
<MudStack Row="true">
<MudText Typo="Typo.caption" Style="font-weight:bold;">Gold Requirement:</MudText>
<MudText Typo="Typo.caption">@goldRequirement%</MudText>
</MudStack> </MudStack>
</MudCard> </MudStack>
</MudStack> </MudStack>
</MudStack> </MudStack>
</MudCardContent> </MudCardContent>
@ -146,10 +150,11 @@
</MudItem> </MudItem>
<MudItem xs="12" md="9"> <MudItem xs="12" md="9">
<MudStack Spacing="4">
@for (var j = 1; j < danData.OdaiBorderList.Count; j++) @for (var j = 1; j < danData.OdaiBorderList.Count; j++)
{ {
var border = danData.OdaiBorderList[j]; var border = danData.OdaiBorderList[j];
<MudStack>
<MudCard Outlined="true" Class="pa-2"> <MudCard Outlined="true" Class="pa-2">
<MudCardHeader> <MudCardHeader>
<CardHeaderContent> <CardHeaderContent>
@ -199,8 +204,8 @@
} }
</MudCardContent> </MudCardContent>
</MudCard> </MudCard>
</MudStack>
} }
</MudStack>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
</MudItem> </MudItem>

1
TaikoWebUI/wwwroot/index.html
View File

@ -8,6 +8,7 @@
<base href="/" /> <base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="style.overrides.css" rel="stylesheet" />
</head> </head>
<body> <body>

21
TaikoWebUI/wwwroot/style.overrides.css Normal file
View File

@ -0,0 +1,21 @@
.dani-results .mud-progress-linear {
height: 25px !important;
}
.mud-progress-linear.bar-pass-gold .mud-progress-linear-bars .mud-progress-linear-bar {
background: linear-gradient( 90deg, rgb(255,83,147) 0%, rgb(255,248,6) 15%, rgb(122,255,79) 30%, rgb(122,244,255) 50%, rgb(149,104,255) 65%, rgb(255,98,244) 85%, rgb(255,83,147) 100% );
}
.mud-progress-linear.bar-pass-red .mud-progress-linear-bars .mud-progress-linear-bar {
background-color: #FF3C05;
}
.mud-progress-linear.bar-default .mud-progress-linear-bars .mud-progress-linear-bar {
background-color: lightgrey;
}
.mud-progress-linear.bar-pass-gold .mud-typography,
.mud-progress-linear.bar-pass-red .mud-typography {
font-weight: bold;
color: white;
}