1
0
mirror of synced 2024-11-27 16:10:53 +01:00

Add color pickers

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

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; }
}

View File

@ -8,116 +8,180 @@
@if (response is not null)
{
<MudGrid>
<MudGrid Class="my-4 pb-10">
<MudItem xs="12" md="8">
<MudPaper Class="py-8 px-8 my-8" Outlined="true">
<MudStack Spacing="4">
<h2>Profile Options</h2>
<MudPaper Elevation="0" Outlined="true">
<MudTabs ActivePanelIndex="0" Rounded="true" Border="true" PanelClass="pa-8">
<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>
<MudItem xs="12" md="8">
<MudTextField @bind-Value="@response.Title" Label="Title"></MudTextField>
</MudItem>
<MudItem xs="12" md="4">
<MudSelect @bind-Value="@response.TitlePlateId" Label="Title Plate">
@for (uint i = 0; i < 8; i++)
<MudGrid>
<MudItem xs="12" md="8">
<MudTextField @bind-Value="@response.Title" Label="Title"></MudTextField>
</MudItem>
<MudItem xs="12" md="4">
<MudSelect @bind-Value="@response.TitlePlateId" Label="Title Plate">
@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="@i">@titlePlateStrings[index]</MudSelectItem>
<MudSelectItem Value="@item"/>
}
</MudSelect>
</MudItem>
</MudGrid>
<MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
Label="Achievement Panel Difficulty">
@foreach (var item in Enum.GetValues<Difficulty>())
{
<MudSelectItem Value="@item"/>
}
</MudSelect>
<MudSwitch @bind-Checked="@response.IsDisplayAchievement" Label="Display Achievement Panel" Color="Color.Primary"/>
<MudSwitch @bind-Checked="@response.IsDisplayDanOnNamePlate" Label="Display Dan Rank on Name Plate" Color="Color.Primary"/>
</MudStack>
</MudTabPanel>
<MudSwitch @bind-Checked="@response.IsDisplayAchievement" Label="Display Achievement Panel" Color="Color.Primary"/>
<MudSwitch @bind-Checked="@response.IsDisplayDanOnNamePlate" Label="Display Dan Rank on Name Plate" Color="Color.Primary"/>
</MudStack>
</MudPaper>
<MudTabPanel Text="Costume">
<MudStack Spacing="4">
<h2>Costume Options</h2>
<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">
<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.Body" Label="Body">
@for (uint i = 0; i < GameDataService.COSTUME_BODY_MAX; i++)
{
var index = i;
<MudSelectItem Value="@index">@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.Face" Label="Face">
@for (uint i = 0; i < GameDataService.COSTUME_FACE_MAX; i++)
{
var index = i;
<MudSelectItem Value="@index">@index</MudSelectItem>
}
</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>
<MudSelect @bind-Value="@response.Kigurumi" Label="Kigurumi">
@for (uint i = 0; i < GameDataService.COSTUME_KIGURUMI_MAX; i++)
{
var index = i;
<MudSelectItem Value="@index">@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>
</MudPaper>
<MudSelect @bind-Value="@response.Puchi" Label="Puchi">
@for (uint i = 0; i < GameDataService.COSTUME_PUCHI_MAX; i++)
{
var index = i;
<MudSelectItem Value="@index">@index</MudSelectItem>
}
</MudSelect>
</MudStack>
<MudPaper Class="py-8 px-8 my-8" Outlined="true">
<MudStack Spacing="4">
<MudText Typo="Typo.h2">Costume Options</MudText>
<MudGrid>
<MudItem xs="12" md="4">
<MudStack Spacing="4">
<MudTextField @bind-Value="@response.Kigurumi" Label="Kigurumi"/>
<MudTextField @bind-Value="@response.Head" Label="Head"/>
<MudTextField @bind-Value="@response.Face" Label="Face"/>
<MudTextField @bind-Value="@response.Body" Label="Body"/>
<MudTextField @bind-Value="@response.Puchi" Label="Puchi"/>
</MudStack>
</MudItem>
<MudItem xs="12" md="4">
<MudStack Spacing="4">
<MudTextField @bind-Value="@response.BodyColor" Label="BodyColor"/>
<MudTextField @bind-Value="@response.FaceColor" Label="FaceColor"/>
<MudTextField @bind-Value="@response.LimbColor" Label="LimbColor"/>
</MudStack>
</MudItem>
</MudGrid>
</MudStack>
<MudStack Row="true">
<MudSelect @bind-Value="@response.BodyColor" Label="Body 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>
<MudSelect @bind-Value="@response.FaceColor" Label="Face 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>
<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>
</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"
OnClick="SaveOptions"
Variant="Variant.Filled"
@ -134,6 +198,7 @@
}
</MudButton>
</MudStack>
</MudItem>
</MudGrid>
}

View File

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

View File

@ -1,4 +1,5 @@
using System.Collections.Immutable;
using MudBlazor.Utilities;
using Swan.Mapping;
using TaikoWebUI.Shared.Models;
@ -12,6 +13,15 @@ public class GameDataService : IGameDataService
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)
{
this.client = client;
@ -38,7 +48,7 @@ public class GameDataService : IGameDataService
{
var songNameKey = $"song_{music.Id}";
var songArtistKey = $"song_sub_{music.Id}";
var musicName = dict.GetValueOrDefault(songNameKey, new WordListEntry());
var musicArtist = dict.GetValueOrDefault(songArtistKey, new WordListEntry());
@ -84,6 +94,11 @@ public class GameDataService : IGameDataService
return danMap.GetValueOrDefault(danId, new DanData());
}
public string GetCostumeTitleById(uint costumeId, string type)
{
return "";
}
public int GetMusicStarLevel(uint songId, Difficulty difficulty)
{
var success = musicMap.TryGetValue(songId, out var musicDetail);

View File

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

View File

@ -18,4 +18,15 @@
.mud-progress-linear.bar-pass-red .mud-typography {
font-weight: bold;
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;
}