Merge pull request #23 from AkaiiKitsune/profile-visualizer
Added Profile visualizer
This commit is contained in:
asesidaa
GitHub
commit
e30b7a7e55
@ -3,9 +3,11 @@
|
||||
@inject IGameDataService GameDataService
|
||||
@inject IDialogService DialogService
|
||||
@inject LoginService LoginService
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>
|
||||
|
||||
|
||||
<h1>Profile</h1>
|
||||
@if (LoginService.LoginRequired)
|
||||
{
|
||||
@ -35,10 +37,9 @@ else
|
||||
<MudTabPanel Text="Profile">
|
||||
<MudStack Spacing="4">
|
||||
<h2>Profile Options</h2>
|
||||
|
||||
<MudGrid>
|
||||
<MudItem xs="12" md="8">
|
||||
<MudTextField @bind-Value="@response.MyDonName" Label="Name"></MudTextField>
|
||||
<MudTextField TextChanged="UpdateMyDonName" @bind-Value="@response.MyDonName" Label="Name"></MudTextField>
|
||||
</MudItem>
|
||||
<MudItem xs="12" md="4">
|
||||
<MudSelect @bind-Value="@response.MyDonNameLanguage" Label="Language">
|
||||
@ -50,10 +51,10 @@ else
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
|
||||
<MudGrid>
|
||||
<MudItem xs="12" md="8">
|
||||
<MudTextField @bind-Value="@response.Title" Label="Title" />
|
||||
<MudTextField TextChanged="UpdateTitle" @bind-Value="@response.Title" Label="Title" />
|
||||
<MudButton Color="Color.Primary" Class="mt-1" Size="Size.Small" OnClick="@((_)=>OpenChooseTitleDialog())">
|
||||
Select a Title
|
||||
</MudButton>
|
||||
@ -68,7 +69,7 @@ else
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
|
||||
<MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
|
||||
Label="Achievement Panel Difficulty">
|
||||
@foreach (var item in Enum.GetValues<Difficulty>())
|
||||
@ -76,12 +77,12 @@ else
|
||||
<MudSelectItem Value="@item" />
|
||||
}
|
||||
</MudSelect>
|
||||
|
||||
|
||||
<MudGrid>
|
||||
<MudItem xs="12" md="4">
|
||||
<MudStack Spacing="4">
|
||||
<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" />
|
||||
<MudSwitch @bind-Checked="@response.IsDisplayDanOnNamePlate" Label="Display Dan Rank on Name Plate" Color="Color.Primary" />
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
<MudItem xs="12" md="8">
|
||||
@ -93,7 +94,7 @@ else
|
||||
<MudSelectItem Value="@i">@DifficultySettingCourseStrings[index]</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
|
||||
|
||||
<MudSelect @bind-Value="@response.DifficultySettingStar" Label="Difficulty Setting Star">
|
||||
@for (uint i = 0; i < DifficultySettingStarStrings.Length; i++)
|
||||
{
|
||||
@ -101,7 +102,7 @@ else
|
||||
<MudSelectItem Value="@i">@DifficultySettingStarStrings[index]</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
|
||||
|
||||
<MudSelect @bind-Value="@response.DifficultySettingSort" Label="Difficulty Setting Sort">
|
||||
@for (uint i = 0; i < DifficultySettingSortStrings.Length; i++)
|
||||
{
|
||||
@ -114,7 +115,7 @@ else
|
||||
</MudGrid>
|
||||
</MudStack>
|
||||
</MudTabPanel>
|
||||
|
||||
|
||||
<MudTabPanel Text="Costume">
|
||||
<MudStack Spacing="4">
|
||||
<h2>Costume Options</h2>
|
||||
@ -129,7 +130,7 @@ else
|
||||
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
|
||||
|
||||
<MudSelect @bind-Value="@response.Body" Label="Body">
|
||||
@for (var i = 0; i < costumeFlagArraySizes[2]; i++)
|
||||
{
|
||||
@ -138,7 +139,7 @@ else
|
||||
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
|
||||
|
||||
<MudSelect @bind-Value="@response.Face" Label="Face">
|
||||
@for (var i = 0; i < costumeFlagArraySizes[3]; i++)
|
||||
{
|
||||
@ -147,7 +148,7 @@ else
|
||||
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
|
||||
|
||||
<MudSelect @bind-Value="@response.Kigurumi" Label="Kigurumi">
|
||||
@for (var i = 0; i < costumeFlagArraySizes[0]; i++)
|
||||
{
|
||||
@ -156,7 +157,7 @@ else
|
||||
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
|
||||
|
||||
<MudSelect @bind-Value="@response.Puchi" Label="Puchi">
|
||||
@for (var i = 0; i < costumeFlagArraySizes[4]; i++)
|
||||
{
|
||||
@ -166,7 +167,7 @@ else
|
||||
}
|
||||
</MudSelect>
|
||||
</MudStack>
|
||||
|
||||
|
||||
<MudStack Row="true">
|
||||
<MudSelect @bind-Value="@response.BodyColor" Label="Body Color">
|
||||
@for (uint i = 0; i < Constants.COSTUME_COLOR_MAX; i++)
|
||||
@ -203,7 +204,7 @@ else
|
||||
</MudGrid>
|
||||
</MudStack>
|
||||
</MudTabPanel>
|
||||
|
||||
|
||||
<MudTabPanel Text="Song Options">
|
||||
<MudStack Spacing="4">
|
||||
<h2>Song Options</h2>
|
||||
@ -225,7 +226,7 @@ else
|
||||
<MudSelectItem Value="@i">@SpeedStrings[index]</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
|
||||
|
||||
<MudSelect @bind-Value="@response.PlaySetting.RandomType"
|
||||
Label="Random">
|
||||
@foreach (var item in Enum.GetValues<RandomType>())
|
||||
@ -233,7 +234,7 @@ else
|
||||
<MudSelectItem Value="@item" />
|
||||
}
|
||||
</MudSelect>
|
||||
|
||||
|
||||
<MudSelect @bind-Value="@response.ToneId" Label="Tone">
|
||||
@for (uint i = 0; i < ToneStrings.Length; i++)
|
||||
{
|
||||
@ -241,7 +242,7 @@ else
|
||||
<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>
|
||||
@ -253,40 +254,60 @@ else
|
||||
</MudTabs>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<MudItem md="4" xs="12" Class="py-4 px-8">
|
||||
|
||||
<MudItem md="4" xs="12" Class="py-3 px-3">
|
||||
<MudStack Spacing="4" Class="sticky" Style="top:100px">
|
||||
<MudCard style="height: 400px;">
|
||||
<MudCard style="height: auto" Outlined="true">
|
||||
<MudCardContent>
|
||||
<div style="position:relative">
|
||||
@if (response.Kigurumi == 0)
|
||||
{
|
||||
<MudImage Fluid="true" style=@($"position:absolute; filter: {CostumeColorFilters[response.BodyColor]}") Src=@ImageOrDefault("masks/body-bodymask", response.Body, "masks/body-bodymask-0000") />
|
||||
<MudImage Fluid="true" style=@($"position:absolute; filter: {CostumeColorFilters[response.FaceColor]}") Src=@ImageOrDefault("masks/body-facemask", response.Body, "masks/body-facemask-0000") />
|
||||
<MudImage Fluid="true" style="position:absolute;" onerror="this.src='images/Costumes/body/body-0000.png'" Src=@($"images/Costumes/body/body-{response.Body.ToString().PadLeft(4, '0')}.png") />
|
||||
@* Player Visualizer *@
|
||||
<MudItem style="text-align: center;">
|
||||
<MudItem style="position:relative">
|
||||
@if (response.Kigurumi == 0)
|
||||
{
|
||||
<MudImage Fluid="true" style=@($"position: relative; top: 0; left: 0; filter: {CostumeColorFilters[response.BodyColor]}") Src=@ImageOrDefault("masks/body-bodymask", response.Body, "masks/body-bodymask-0000") />
|
||||
<MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.FaceColor]}") Src=@ImageOrDefault("masks/body-facemask", response.Body, "masks/body-facemask-0000") />
|
||||
<MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/body/body-0000.png'" Src=@($"images/Costumes/body/body-{response.Body.ToString().PadLeft(4, '0')}.png") />
|
||||
<MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/face/face-0000.png'" Src=@($"images/Costumes/face/face-{response.Face.ToString().PadLeft(4, '0')}.png") />
|
||||
<MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.BodyColor]}") Src=@ImageOrDefault("masks/head-bodymask", response.Head, "head/head-0000") />
|
||||
<MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.FaceColor]}") Src=@ImageOrDefault("masks/head-facemask", response.Head, "head/head-0000") />
|
||||
<MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/head/head-0000.png'" Src=@($"images/Costumes/head/head-{response.Head.ToString().PadLeft(4, '0')}.png") />
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudImage Fluid="true" style=@($"position: relative; top: 0; left: 0; filter: {CostumeColorFilters[response.BodyColor]}") Src=@ImageOrDefault("masks/kigurumi-bodymask", response.Kigurumi, "masks/body-bodymask-0000") />
|
||||
<MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.FaceColor]}") Src=@ImageOrDefault("masks/kigurumi-facemask", response.Kigurumi, "masks/body-facemask-0000") />
|
||||
<MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/kigurumi/kigurumi-0000.png'" Src=@($"images/Costumes/kigurumi/kigurumi-{response.Kigurumi.ToString().PadLeft(4, '0')}.png") />
|
||||
}
|
||||
<MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/puchi/puchi-0000.png'" Src=@($"images/Costumes/puchi/puchi-{response.Puchi.ToString().PadLeft(4, '0')}.png") />
|
||||
</MudItem>
|
||||
</MudItem>
|
||||
|
||||
<MudImage Fluid="true" style="position:absolute;" onerror="this.src='images/Costumes/face/face-0000.png'" Src=@($"images/Costumes/face/face-{response.Face.ToString().PadLeft(4, '0')}.png") />
|
||||
|
||||
<MudImage Fluid="true" style=@($"position:absolute; filter: {CostumeColorFilters[response.BodyColor]}") Src=@ImageOrDefault("masks/head-bodymask", response.Head, "head/head-0000") />
|
||||
<MudImage Fluid="true" style=@($"position:absolute; filter: {CostumeColorFilters[response.FaceColor]}") Src=@ImageOrDefault("masks/head-facemask", response.Head, "head/head-0000") />
|
||||
<MudImage Fluid="true" style="position:absolute;" onerror="this.src='images/Costumes/head/head-0000.png'" Src=@($"images/Costumes/head/head-{response.Head.ToString().PadLeft(4, '0')}.png") />
|
||||
}
|
||||
else
|
||||
@* Player Nameplate *@
|
||||
<MudItem style="text-align: center; position:relative;">
|
||||
@* Title text *@
|
||||
<MudItem style="position:absolute; top: 7%; left:0; right:1.1%; height:38%; width:min(96%, 320px); margin: 0 auto; z-index:2; vertical-align: middle;">
|
||||
<MudItem Style="position:absolute; height:100%; width:80%; right: 10%;">
|
||||
<MudText Id="nameplate-title" Style="position:absolute; height:100%; top: 0; left: 0; right: 0; margin: auto auto; font-family: 'Nijiiro', sans-serif; color:black">@response.Title</MudText>
|
||||
</MudItem>
|
||||
</MudItem>
|
||||
@* Name text *@
|
||||
<MudItem Style="position:absolute; top: 47%; left:0; right:1.1%; height:41%; width:min(96%, 320px); margin: 0 auto; z-index:2">
|
||||
@* Name textoffset to the right for Dan Rank *@
|
||||
<MudItem Style=@($"position:absolute; height:100%; right: 10%; {(response.IsDisplayDanOnNamePlate ? "width:46%;" : "width:80%;")}")>
|
||||
<MudText Id="nameplate-name-outline" Style="position:absolute; height:100%; top: 0; left: 0; right: 0; margin: auto auto; font-family: 'Nijiiro', sans-serif; -webkit-text-stroke: 5px; -webkit-text-stroke-color: black">@response.MyDonName</MudText>
|
||||
<MudText Id="nameplate-name" Style="position:absolute; height:100%; top: 0; left: 0; right: 0; margin: auto auto; font-family: 'Nijiiro', sans-serif; color:white">@response.MyDonName</MudText>
|
||||
</MudItem>
|
||||
</MudItem>
|
||||
<MudImage onload="nameplateLoaded()" Id="nameplate" Fluid="true" Style="position: relative; top: 0; left: 0;" Src="images/Nameplates/nameplate.png" />
|
||||
<MudImage Fluid="true" Style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" Src=@($"images/Nameplates/nameplate_{TitlePlateStrings[response.TitlePlateId].Replace(' ', '_')}.png") />
|
||||
@if (response.IsDisplayDanOnNamePlate)
|
||||
{
|
||||
<MudImage Fluid="true" style=@($"position:absolute; filter: {CostumeColorFilters[response.BodyColor]}") Src=@ImageOrDefault("masks/kigurumi-bodymask", response.Kigurumi, "masks/body-bodymask-0000") />
|
||||
<MudImage Fluid="true" style=@($"position:absolute; filter: {CostumeColorFilters[response.FaceColor]}") Src=@ImageOrDefault("masks/kigurumi-facemask", response.Kigurumi, "masks/body-facemask-0000") />
|
||||
<MudImage Fluid="true" style="position:absolute;" onerror="this.src='images/Costumes/kigurumi/kigurumi-0000.png'" Src=@($"images/Costumes/kigurumi/kigurumi-{response.Kigurumi.ToString().PadLeft(4, '0')}.png") />
|
||||
<MudImage Fluid="true" Style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" Src="images/Nameplates/nameplate_dan.png" />
|
||||
}
|
||||
<MudImage Fluid="true" style="position:absolute;" onerror="this.src='images/Costumes/puchi/puchi-0000.png'" Src=@($"images/Costumes/puchi/puchi-{response.Puchi.ToString().PadLeft(4, '0')}.png") />
|
||||
|
||||
</div>
|
||||
</MudItem>
|
||||
</MudCardContent>
|
||||
@* <MudCardActions>
|
||||
<MudButton Variant="Variant.Text" Color="Color.Primary">Share</MudButton>
|
||||
<MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
|
||||
</MudCardActions> *@
|
||||
</MudCard>
|
||||
|
||||
<MudButton Disabled="@isSavingOptions"
|
||||
OnClick="SaveOptions"
|
||||
Variant="Variant.Filled"
|
||||
@ -303,7 +324,20 @@ else
|
||||
}
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
}
|
||||
}
|
||||
|
||||
@code {
|
||||
private async Task UpdateMyDonName()
|
||||
{
|
||||
@if (response is not null) await JS.InvokeVoidAsync("updateMyDonName", response.MyDonName);
|
||||
}
|
||||
|
||||
private async Task UpdateTitle()
|
||||
{
|
||||
@if (response is not null) await JS.InvokeVoidAsync("updateTitle", response.Title);
|
||||
}
|
||||
}
|
||||
@ -35,20 +35,15 @@ public partial class Profile
|
||||
"masks/body-bodymask-0070", "masks/body-bodymask-0092", "masks/body-bodymask-0121",
|
||||
"masks/body-bodymask-0123", "masks/body-bodymask-0127", "masks/body-bodymask-0136",
|
||||
"masks/body-bodymask-0153",
|
||||
|
||||
"masks/body-facemask-0005", "masks/body-facemask-0015", "masks/body-facemask-0030",
|
||||
"masks/body-facemask-0064", "masks/body-facemask-0065", "masks/body-facemask-0069",
|
||||
"masks/body-facemask-0090", "masks/body-facemask-0092", "masks/body-facemask-0136",
|
||||
"masks/body-facemask-0151", "masks/body-facemask-0152", "masks/body-facemask-0153",
|
||||
|
||||
"masks/head-bodymask-0113", "masks/head-bodymask-0138",
|
||||
|
||||
"masks/head-facemask-0003", "masks/head-facemask-0113", "masks/head-facemask-0137",
|
||||
"masks/head-facemask-0138",
|
||||
|
||||
"masks/kigurumi-bodymask-0052", "masks/kigurumi-bodymask-0109", "masks/kigurumi-bodymask-0110",
|
||||
"masks/kigurumi-bodymask-0115", "masks/kigurumi-bodymask-0123",
|
||||
|
||||
"masks/kigurumi-facemask-0052", "masks/kigurumi-facemask-0109", "masks/kigurumi-facemask-0110",
|
||||
"masks/kigurumi-facemask-0115", "masks/kigurumi-facemask-0123",
|
||||
};
|
||||
|
||||
BIN
TaikoWebUI/wwwroot/css/Nijiiro.woff2
Normal file
BIN
TaikoWebUI/wwwroot/css/Nijiiro.woff2
Normal file
Binary file not shown.
@ -1,5 +1,10 @@
|
||||
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nijiiro';
|
||||
src: url('Nijiiro.woff2') format('woff2')
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate.png
Normal file
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_AI_1.png
Normal file
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_AI_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_AI_2.png
Normal file
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_AI_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_AI_3.png
Normal file
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_AI_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_AI_4.png
Normal file
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_AI_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_dan.png
Normal file
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_dan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 750 B |
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_gold.png
Normal file
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_gold.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_purple.png
Normal file
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_purple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_rainbow.png
Normal file
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_rainbow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_wood.png
Normal file
BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_wood.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
@ -16,8 +16,8 @@
|
||||
<body>
|
||||
<div id="app">
|
||||
<svg class="loading-progress">
|
||||
<circle r="40%" cx="50%" cy="50%"/>
|
||||
<circle r="40%" cx="50%" cy="50%"/>
|
||||
<circle r="40%" cx="50%" cy="50%" />
|
||||
<circle r="40%" cx="50%" cy="50%" />
|
||||
</svg>
|
||||
<div class="loading-progress-text"></div>
|
||||
</div>
|
||||
@ -29,6 +29,8 @@
|
||||
</div>
|
||||
<script src="_framework/blazor.webassembly.js"></script>
|
||||
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
|
||||
<script src="js/textFit.min.js"></script>
|
||||
<script src="js/updateTextFit.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1
TaikoWebUI/wwwroot/js/textFit.min.js
vendored
Normal file
1
TaikoWebUI/wwwroot/js/textFit.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
(function(root,factory){"use strict";if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof exports==="object"){module.exports=factory()}else{root.textFit=factory()}})(typeof global==="object"?global:this,function(){"use strict";var defaultSettings={alignVert:false,alignHoriz:false,multiLine:false,detectMultiLine:true,minFontSize:6,maxFontSize:80,reProcess:true,widthOnly:false,alignVertWithFlexbox:false};return function textFit(els,options){if(!options)options={};var settings={};for(var key in defaultSettings){if(options.hasOwnProperty(key)){settings[key]=options[key]}else{settings[key]=defaultSettings[key]}}if(typeof els.toArray==="function"){els=els.toArray()}var elType=Object.prototype.toString.call(els);if(elType!=="[object Array]"&&elType!=="[object NodeList]"&&elType!=="[object HTMLCollection]"){els=[els]}for(var i=0;i<els.length;i++){processItem(els[i],settings)}};function processItem(el,settings){if(!isElement(el)||!settings.reProcess&&el.getAttribute("textFitted")){return false}if(!settings.reProcess){el.setAttribute("textFitted",1)}var innerSpan,originalHeight,originalHTML,originalWidth;var low,mid,high;originalHTML=el.innerHTML;originalWidth=innerWidth(el);originalHeight=innerHeight(el);if(!originalWidth||!settings.widthOnly&&!originalHeight){if(!settings.widthOnly)throw new Error("Set a static height and width on the target element "+el.outerHTML+" before using textFit!");else throw new Error("Set a static width on the target element "+el.outerHTML+" before using textFit!")}if(originalHTML.indexOf("textFitted")===-1){innerSpan=document.createElement("span");innerSpan.className="textFitted";innerSpan.style["display"]="inline-block";innerSpan.innerHTML=originalHTML;el.innerHTML="";el.appendChild(innerSpan)}else{innerSpan=el.querySelector("span.textFitted");if(hasClass(innerSpan,"textFitAlignVert")){innerSpan.className=innerSpan.className.replace("textFitAlignVert","");innerSpan.style["height"]="";el.className.replace("textFitAlignVertFlex","")}}if(settings.alignHoriz){el.style["text-align"]="center";innerSpan.style["text-align"]="center"}var multiLine=settings.multiLine;if(settings.detectMultiLine&&!multiLine&&innerSpan.scrollHeight>=parseInt(window.getComputedStyle(innerSpan)["font-size"],10)*2){multiLine=true}if(!multiLine){el.style["white-space"]="nowrap"}low=settings.minFontSize;high=settings.maxFontSize;var size=low;while(low<=high){mid=high+low>>1;innerSpan.style.fontSize=mid+"px";if(innerSpan.scrollWidth<=originalWidth&&(settings.widthOnly||innerSpan.scrollHeight<=originalHeight)){size=mid;low=mid+1}else{high=mid-1}}if(innerSpan.style.fontSize!=size+"px")innerSpan.style.fontSize=size+"px";if(settings.alignVert){addStyleSheet();var height=innerSpan.scrollHeight;if(window.getComputedStyle(el)["position"]==="static"){el.style["position"]="relative"}if(!hasClass(innerSpan,"textFitAlignVert")){innerSpan.className=innerSpan.className+" textFitAlignVert"}innerSpan.style["height"]=height+"px";if(settings.alignVertWithFlexbox&&!hasClass(el,"textFitAlignVertFlex")){el.className=el.className+" textFitAlignVertFlex"}}}function innerHeight(el){var style=window.getComputedStyle(el,null);return el.clientHeight-parseInt(style.getPropertyValue("padding-top"),10)-parseInt(style.getPropertyValue("padding-bottom"),10)}function innerWidth(el){var style=window.getComputedStyle(el,null);return el.clientWidth-parseInt(style.getPropertyValue("padding-left"),10)-parseInt(style.getPropertyValue("padding-right"),10)}function isElement(o){return typeof HTMLElement==="object"?o instanceof HTMLElement:o&&typeof o==="object"&&o!==null&&o.nodeType===1&&typeof o.nodeName==="string"}function hasClass(element,cls){return(" "+element.className+" ").indexOf(" "+cls+" ")>-1}function addStyleSheet(){if(document.getElementById("textFitStyleSheet"))return;var style=[".textFitAlignVert{","position: absolute;","top: 0; right: 0; bottom: 0; left: 0;","margin: auto;","display: flex;","justify-content: center;","flex-direction: column;","}",".textFitAlignVertFlex{","display: flex;","}",".textFitAlignVertFlex .textFitAlignVert{","position: static;","}"].join("");var css=document.createElement("style");css.type="text/css";css.id="textFitStyleSheet";css.innerHTML=style;document.body.appendChild(css)}});
|
||||
81
TaikoWebUI/wwwroot/js/updateTextFit.js
Normal file
81
TaikoWebUI/wwwroot/js/updateTextFit.js
Normal file
@ -0,0 +1,81 @@
|
||||
// Function to be called when the viewfinder size changes
|
||||
var title;
|
||||
var myDonName;
|
||||
var myDonNameOutline;
|
||||
var init = false
|
||||
const observer = new ResizeObserver(handleResize);
|
||||
function handleResize() {
|
||||
updateFit()
|
||||
}
|
||||
|
||||
function waitForElm(selector) {
|
||||
return new Promise(resolve => {
|
||||
if (document.querySelector(selector)) {
|
||||
return resolve(document.querySelector(selector));
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(mutations => {
|
||||
if (document.querySelector(selector)) {
|
||||
observer.disconnect();
|
||||
resolve(document.querySelector(selector));
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// This is a monkey hack to detect when the page has changed (to stop the observer events)
|
||||
var pushState = history.pushState;
|
||||
history.pushState = function () {
|
||||
pushState.apply(history, arguments);
|
||||
init = false;
|
||||
observer.disconnect();
|
||||
};
|
||||
|
||||
// Fetches all the relevant objects on the page so updateFit can reference them later
|
||||
function initNameplate() {
|
||||
if (window.location.href.indexOf("Profile") > -1) {
|
||||
waitForElm('#nameplate-title').then((elm) => {
|
||||
title = elm
|
||||
waitForElm('#nameplate-name').then((elm) => {
|
||||
myDonName = elm
|
||||
waitForElm('#nameplate-name-outline').then((elm) => {
|
||||
myDonNameOutline = elm
|
||||
observer.observe(document.getElementById('nameplate'));
|
||||
init = true
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateFit() {
|
||||
textFit(title, { alignHoriz: true, alignVert: true });
|
||||
textFit(myDonName, { alignHoriz: true, alignVert: true });
|
||||
textFit(myDonNameOutline, { alignHoriz: true, alignVert: true });
|
||||
}
|
||||
|
||||
|
||||
// Used to individually update texts on the nameplate
|
||||
function updateMyDonName(elm) {
|
||||
if (init) {
|
||||
myDonName.textContent = elm
|
||||
myDonNameOutline.textContent = elm
|
||||
updateFit()
|
||||
}
|
||||
}
|
||||
function updateTitle(elm) {
|
||||
if (init) {
|
||||
title.textContent = elm
|
||||
updateFit()
|
||||
}
|
||||
}
|
||||
|
||||
// Called by html onload when the image of the nameplate is loaded (this ensures the first fit is properly done)
|
||||
function nameplateLoaded() {
|
||||
initNameplate()
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user