Taiko_Stuff/TaikoLocalServer
1
0
Fork 0
mirror of synced 2024-11-27 16:10:53 +01:00
Code Releases Activity

Add color pickers

Browse Source
This commit is contained in:
shiibe 2022-09-14 14:17:46 -04:00
parent fb3ceac51c
commit 0888581d27
6 changed files with 219 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
SharedProject/Models/CostumeData.cs Normal file
View File

@ -0,0 +1,16 @@
using System.Text.Json.Serialization;
namespace SharedProject.Models;
public class CostumeData
{
public uint Head { get; set; }
public uint Body { get; set; }
public uint Face { get; set; }
public uint Kigurumi { get; set; }
public uint Puchi { get; set; }
}

253
TaikoWebUI/Pages/Profile.razor
View File

@ -8,116 +8,180 @@
@if (response is not null) @if (response is not null)
{ {
<MudGrid> <MudGrid Class="my-4 pb-10">
<MudItem xs="12" md="8"> <MudItem xs="12" md="8">
<MudPaper Class="py-8 px-8 my-8" Outlined="true"> <MudPaper Elevation="0" Outlined="true">
<MudStack Spacing="4"> <MudTabs ActivePanelIndex="0" Rounded="true" Border="true" PanelClass="pa-8">
<h2>Profile Options</h2> <MudTabPanel Text="Profile">
<MudStack Spacing="4">
<h2>Profile Options</h2>
<MudTextField @bind-Value="@response.MyDonName" Label="Name"></MudTextField> <MudTextField @bind-Value="@response.MyDonName" Label="Name"></MudTextField>
<MudGrid> <MudGrid>
<MudItem xs="12" md="8"> <MudItem xs="12" md="8">
<MudTextField @bind-Value="@response.Title" Label="Title"></MudTextField> <MudTextField @bind-Value="@response.Title" Label="Title"></MudTextField>
</MudItem> </MudItem>
<MudItem xs="12" md="4"> <MudItem xs="12" md="4">
<MudSelect @bind-Value="@response.TitlePlateId" Label="Title Plate"> <MudSelect @bind-Value="@response.TitlePlateId" Label="Title Plate">
@for (uint i = 0; i < 8; i++) @for (uint i = 0; i < 8; i++)
{
var index = i;
<MudSelectItem Value="@i">@titlePlateStrings[index]</MudSelectItem>
}
</MudSelect>
</MudItem>
</MudGrid>
<MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
Label="Achievement Panel Difficulty">
@foreach (var item in Enum.GetValues<Difficulty>())
{ {
var index = i; <MudSelectItem Value="@item"/>
<MudSelectItem Value="@i">@titlePlateStrings[index]</MudSelectItem>
} }
</MudSelect> </MudSelect>
</MudItem>
</MudGrid>
<MudSelect @bind-Value="@response.AchievementDisplayDifficulty" <MudSwitch @bind-Checked="@response.IsDisplayAchievement" Label="Display Achievement Panel" Color="Color.Primary"/>
Label="Achievement Panel Difficulty"> <MudSwitch @bind-Checked="@response.IsDisplayDanOnNamePlate" Label="Display Dan Rank on Name Plate" Color="Color.Primary"/>
@foreach (var item in Enum.GetValues<Difficulty>()) </MudStack>
{ </MudTabPanel>
<MudSelectItem Value="@item"/>
}
</MudSelect>
<MudSwitch @bind-Checked="@response.IsDisplayAchievement" Label="Display Achievement Panel" Color="Color.Primary"/> <MudTabPanel Text="Costume">
<MudSwitch @bind-Checked="@response.IsDisplayDanOnNamePlate" Label="Display Dan Rank on Name Plate" Color="Color.Primary"/> <MudStack Spacing="4">
</MudStack> <h2>Costume Options</h2>
</MudPaper> <MudGrid>
<MudItem xs="12">
<MudStack Spacing="4" Class="mb-8">
<MudSelect @bind-Value="@response.Head" Label="Head">
@for (uint i = 0; i < GameDataService.COSTUME_HEAD_MAX; i++)
{
var index = i;
<MudSelectItem Value="@index">@index</MudSelectItem>
}
</MudSelect>
<MudPaper Class="py-8 px-8 my-8" Outlined="true"> <MudSelect @bind-Value="@response.Body" Label="Body">
<MudStack Spacing="4"> @for (uint i = 0; i < GameDataService.COSTUME_BODY_MAX; i++)
<h2>Song Options</h2> {
<MudGrid> var index = i;
<MudItem xs="12" md="4"> <MudSelectItem Value="@index">@index</MudSelectItem>
<MudStack Spacing="4"> }
<MudSwitch @bind-Checked="@response.PlaySetting.IsVanishOn" Label="Vanish" Color="Color.Primary"/> </MudSelect>
<MudSwitch @bind-Checked="@response.PlaySetting.IsInverseOn" Label="Inverse" Color="Color.Primary"/>
<MudSwitch @bind-Checked="@response.IsSkipOn" Label="Give Up" Color="Color.Primary"/>
<MudSwitch @bind-Checked="@response.IsVoiceOn" Label="Voice" Color="Color.Primary"/>
</MudStack>
</MudItem>
<MudItem xs="12" md="8">
<MudStack Spacing="4">
<MudSelect @bind-Value="@response.PlaySetting.Speed" Label="Speed">
@for (uint i = 0; i < 15; i++)
{
var index = i;
<MudSelectItem Value="@i">@speedStrings[index]</MudSelectItem>
}
</MudSelect>
<MudSelect @bind-Value="@response.PlaySetting.RandomType" <MudSelect @bind-Value="@response.Face" Label="Face">
Label="Random"> @for (uint i = 0; i < GameDataService.COSTUME_FACE_MAX; i++)
@foreach (var item in Enum.GetValues<RandomType>()) {
{ var index = i;
<MudSelectItem Value="@item"/> <MudSelectItem Value="@index">@index</MudSelectItem>
} }
</MudSelect> </MudSelect>
<MudSelect @bind-Value="@response.ToneId" Label="Tone"> <MudSelect @bind-Value="@response.Kigurumi" Label="Kigurumi">
@for (uint i = 0; i < 19; i++) @for (uint i = 0; i < GameDataService.COSTUME_KIGURUMI_MAX; i++)
{ {
var index = i; var index = i;
<MudSelectItem Value="@i">@toneStrings[index]</MudSelectItem> <MudSelectItem Value="@index">@index</MudSelectItem>
} }
</MudSelect> </MudSelect>
<MudSlider Class="mb-8" @bind-Value="@response.NotesPosition" Size="Size.Medium" Min="-5" Max="5" Step="1" TickMarks="true" TickMarkLabels="@notePositionStrings"> <MudSelect @bind-Value="@response.Puchi" Label="Puchi">
<MudText Typo="Typo.caption">Notes Position</MudText> @for (uint i = 0; i < GameDataService.COSTUME_PUCHI_MAX; i++)
</MudSlider> {
</MudStack> var index = i;
</MudItem> <MudSelectItem Value="@index">@index</MudSelectItem>
</MudGrid> }
</MudStack> </MudSelect>
</MudPaper> </MudStack>
<MudPaper Class="py-8 px-8 my-8" Outlined="true"> <MudStack Row="true">
<MudStack Spacing="4"> <MudSelect @bind-Value="@response.BodyColor" Label="Body Color">
<MudText Typo="Typo.h2">Costume Options</MudText> @for (uint i = 0; i < GameDataService.COSTUME_COLOR_MAX; i++)
<MudGrid> {
<MudItem xs="12" md="4"> var index = i;
<MudStack Spacing="4"> <MudSelectItem Value="@index">
<MudTextField @bind-Value="@response.Kigurumi" Label="Kigurumi"/> <div class="color-box" style=@($"background: {costumeColors[index]}")></div>
<MudTextField @bind-Value="@response.Head" Label="Head"/> @index
<MudTextField @bind-Value="@response.Face" Label="Face"/> </MudSelectItem>
<MudTextField @bind-Value="@response.Body" Label="Body"/> }
<MudTextField @bind-Value="@response.Puchi" Label="Puchi"/> </MudSelect>
</MudStack> <MudSelect @bind-Value="@response.FaceColor" Label="Face Color">
</MudItem> @for (uint i = 0; i < GameDataService.COSTUME_COLOR_MAX; i++)
<MudItem xs="12" md="4"> {
<MudStack Spacing="4"> var index = i;
<MudTextField @bind-Value="@response.BodyColor" Label="BodyColor"/> <MudSelectItem Value="@index">
<MudTextField @bind-Value="@response.FaceColor" Label="FaceColor"/> <div class="color-box" style=@($"background: {costumeColors[index]}")></div>
<MudTextField @bind-Value="@response.LimbColor" Label="LimbColor"/> @index
</MudStack> </MudSelectItem>
</MudItem> }
</MudGrid> </MudSelect>
</MudStack> <MudSelect @bind-Value="@response.LimbColor" Label="Limb Color">
@for (uint i = 0; i < GameDataService.COSTUME_COLOR_MAX; i++)
{
var index = i;
<MudSelectItem Value="@index">
<div class="color-box" style=@($"background: {costumeColors[index]}")></div>
@index
</MudSelectItem>
}
</MudSelect>
</MudStack>
</MudItem>
</MudGrid>
</MudStack>
</MudTabPanel>
<MudTabPanel Text="Song Options">
<MudStack Spacing="4">
<h2>Song Options</h2>
<MudGrid>
<MudItem xs="12" md="4">
<MudStack Spacing="4">
<MudSwitch @bind-Checked="@response.PlaySetting.IsVanishOn" Label="Vanish" Color="Color.Primary"/>
<MudSwitch @bind-Checked="@response.PlaySetting.IsInverseOn" Label="Inverse" Color="Color.Primary"/>
<MudSwitch @bind-Checked="@response.IsSkipOn" Label="Give Up" Color="Color.Primary"/>
<MudSwitch @bind-Checked="@response.IsVoiceOn" Label="Voice" Color="Color.Primary"/>
</MudStack>
</MudItem>
<MudItem xs="12" md="8">
<MudStack Spacing="4">
<MudSelect @bind-Value="@response.PlaySetting.Speed" Label="Speed">
@for (uint i = 0; i < 15; i++)
{
var index = i;
<MudSelectItem Value="@i">@speedStrings[index]</MudSelectItem>
}
</MudSelect>
<MudSelect @bind-Value="@response.PlaySetting.RandomType"
Label="Random">
@foreach (var item in Enum.GetValues<RandomType>())
{
<MudSelectItem Value="@item"/>
}
</MudSelect>
<MudSelect @bind-Value="@response.ToneId" Label="Tone">
@for (uint i = 0; i < 19; i++)
{
var index = i;
<MudSelectItem Value="@i">@toneStrings[index]</MudSelectItem>
}
</MudSelect>
<MudSlider Class="mb-8" @bind-Value="@response.NotesPosition" Size="Size.Medium" Min="-5" Max="5" Step="1" TickMarks="true" TickMarkLabels="@notePositionStrings">
<MudText Typo="Typo.caption">Notes Position</MudText>
</MudSlider>
</MudStack>
</MudItem>
</MudGrid>
</MudStack>
</MudTabPanel>
</MudTabs>
</MudPaper> </MudPaper>
</MudItem> </MudItem>
<MudItem md="4" xs="12" Class="py-8 px-8 my-4 pt-8">
<MudStack Spacing="4" Style="top:100px" Class="sticky"> <MudItem md="4" xs="12" Class="py-4 px-8">
<MudStack Style="top:100px" Class="sticky">
<MudButton Disabled="@isSavingOptions" <MudButton Disabled="@isSavingOptions"
OnClick="SaveOptions" OnClick="SaveOptions"
Variant="Variant.Filled" Variant="Variant.Filled"
@ -134,6 +198,7 @@
} }
</MudButton> </MudButton>
</MudStack> </MudStack>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
} }

35
TaikoWebUI/Pages/Profile.razor.cs
View File

@ -1,4 +1,6 @@
namespace TaikoWebUI.Pages; using MudBlazor.Utilities;
namespace TaikoWebUI.Pages;
public partial class Profile public partial class Profile
{ {
@ -9,26 +11,19 @@ public partial class Profile
private bool isSavingOptions; private bool isSavingOptions;
private const int COSTUME_HEAD_MAX = 138; public string[] costumeColors =
private const int COSTUME_FACE_MAX = 57;
private const int COSTUME_BODY_MAX = 154;
private const int COSTUME_KIGURUMI_MAX = 152;
private const int COSTUME_PUCHI_MAX = 127;
private const int COSTUME_COLOR_MAX = 62;
private readonly string[] costumeColors =
{ {
"F84828", "68C0C0", "DC1500", "F8F0E0", "009687", "00BF87", "#F84828", "#68C0C0", "#DC1500", "#F8F0E0", "#009687", "#00BF87",
"00FF9A", "66FFC2", "FFFFFF", "690000", "FF0000", "FF6666", "#00FF9A", "#66FFC2", "#FFFFFF", "#690000", "#FF0000", "#FF6666",
"FFB3B3", "00BCC2", "00F7FF", "66FAFF", "B3FDFF", "B3FDFF", "#FFB3B3", "#00BCC2", "#00F7FF", "#66FAFF", "#B3FDFF", "#E4E4E4",
"E4E4E4", "993800", "FF5E00", "FF9E78", "FFCFB3", "005199", "#993800", "#FF5E00", "#FF9E78", "#FFCFB3", "#005199", "#0088FF",
"0088FF", "66B8FF", "B3DBFF", "B9B9B9", "B37700", "FFAA00", "#66B8FF", "#B3DBFF", "#B9B9B9", "#B37700", "#FFAA00", "#FFCC66",
"FFCC66", "FFE2B3", "000C80", "0019FF", "6675FF", "B3BAFF", "#FFE2B3", "#000C80", "#0019FF", "#6675FF", "#B3BAFF", "#858585",
"858585", "B39B00", "FFDD00", "FFFF71", "2B0080", "5500FF", "#B39B00", "#FFDD00", "#FFFF71", "#2B0080", "#5500FF", "#9966FF",
"9966FF", "CCB3FF", "505050", "38A100", "78C900", "B3FF00", "#CCB3FF", "#505050", "#38A100", "#78C900", "#B3FF00", "#DCFF8A",
"DCFF8A", "610080", "C400FF", "DC66FF", "EDB3FF", "232323", "#610080", "#C400FF", "#DC66FF", "#EDB3FF", "#232323", "#006600",
"006600", "00B800", "00FF00", "8AFF9E", "990059", "FF0095", "#00B800", "#00FF00", "#8AFF9E", "#990059", "#FF0095", "#FF66BF",
"FF66BF", "FFB3DF", "000000" "#FFB3DF", "#000000"
}; };
private readonly string[] speedStrings = private readonly string[] speedStrings =

17
TaikoWebUI/Services/GameDataService.cs
View File

@ -1,4 +1,5 @@
using System.Collections.Immutable; using System.Collections.Immutable;
using MudBlazor.Utilities;
using Swan.Mapping; using Swan.Mapping;
using TaikoWebUI.Shared.Models; using TaikoWebUI.Shared.Models;
@ -12,6 +13,15 @@ public class GameDataService : IGameDataService
private ImmutableDictionary<uint, DanData> danMap = null!; private ImmutableDictionary<uint, DanData> danMap = null!;
private ImmutableDictionary<uint, CostumeData> costumeMap = null!;
public const uint COSTUME_HEAD_MAX = 138;
public const uint COSTUME_FACE_MAX = 57;
public const uint COSTUME_BODY_MAX = 154;
public const uint COSTUME_KIGURUMI_MAX = 152;
public const uint COSTUME_PUCHI_MAX = 127;
public const uint COSTUME_COLOR_MAX = 62;
public GameDataService(HttpClient client) public GameDataService(HttpClient client)
{ {
this.client = client; this.client = client;
@ -38,7 +48,7 @@ public class GameDataService : IGameDataService
{ {
var songNameKey = $"song_{music.Id}"; var songNameKey = $"song_{music.Id}";
var songArtistKey = $"song_sub_{music.Id}"; var songArtistKey = $"song_sub_{music.Id}";
var musicName = dict.GetValueOrDefault(songNameKey, new WordListEntry()); var musicName = dict.GetValueOrDefault(songNameKey, new WordListEntry());
var musicArtist = dict.GetValueOrDefault(songArtistKey, new WordListEntry()); var musicArtist = dict.GetValueOrDefault(songArtistKey, new WordListEntry());
@ -84,6 +94,11 @@ public class GameDataService : IGameDataService
return danMap.GetValueOrDefault(danId, new DanData()); return danMap.GetValueOrDefault(danId, new DanData());
} }
public string GetCostumeTitleById(uint costumeId, string type)
{
return "";
}
public int GetMusicStarLevel(uint songId, Difficulty difficulty) public int GetMusicStarLevel(uint songId, Difficulty difficulty)
{ {
var success = musicMap.TryGetValue(songId, out var musicDetail); var success = musicMap.TryGetValue(songId, out var musicDetail);

2
TaikoWebUI/Services/IGameDataService.cs
View File

@ -8,6 +8,8 @@ public interface IGameDataService
public string GetMusicArtistBySongId(uint songId); public string GetMusicArtistBySongId(uint songId);
public string GetCostumeTitleById(uint costumeId, string type);
public SongGenre GetMusicGenreBySongId(uint songId); public SongGenre GetMusicGenreBySongId(uint songId);
public int GetMusicIndexBySongId(uint songId); public int GetMusicIndexBySongId(uint songId);

11
TaikoWebUI/wwwroot/style.overrides.css
View File

@ -18,4 +18,15 @@
.mud-progress-linear.bar-pass-red .mud-typography { .mud-progress-linear.bar-pass-red .mud-typography {
font-weight: bold; font-weight: bold;
color: #333; color: #333;
}
.color-box {
width: 16px;
height: 16px;
border-radius: 9999px;
display: inline-block;
margin-right: 10px;
border: 1px solid black;
position: relative;
top: 2px;
} }