Add color pickers
This commit is contained in:
parent
fb3ceac51c
commit
0888581d27
16
SharedProject/Models/CostumeData.cs
Normal file
16
SharedProject/Models/CostumeData.cs
Normal 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; }
|
||||
}
|
@ -8,9 +8,11 @@
|
||||
|
||||
@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">
|
||||
<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>
|
||||
|
||||
@ -42,9 +44,93 @@
|
||||
<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>
|
||||
|
||||
<MudPaper Class="py-8 px-8 my-8" Outlined="true">
|
||||
<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>
|
||||
|
||||
<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.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.Kigurumi" Label="Kigurumi">
|
||||
@for (uint i = 0; i < GameDataService.COSTUME_KIGURUMI_MAX; i++)
|
||||
{
|
||||
var index = i;
|
||||
<MudSelectItem Value="@index">@index</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -89,35 +175,13 @@
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
|
||||
<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>
|
||||
|
||||
</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>
|
||||
}
|
@ -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 =
|
||||
|
@ -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;
|
||||
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -19,3 +19,14 @@
|
||||
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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user