Merge pull request #23 from AkaiiKitsune/profile-visualizer

Added Profile visualizer

TaikoWebUI/Pages/Profile.razor

@@ -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">
+                            @* Player Visualizer *@
-                                @if (response.Kigurumi == 0)
+                            <MudItem style="text-align: center;">
-                                {
+                                <MudItem style="position:relative">
-                                    <MudImage Fluid="true" style=@($"position:absolute; filter: {CostumeColorFilters[response.BodyColor]}") Src=@ImageOrDefault("masks/body-bodymask", response.Body, "masks/body-bodymask-0000") />
+                                    @if (response.Kigurumi == 0)
-                                    <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") />
+                                        <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") />
+                            @* Player Nameplate *@
-                                    <MudImage Fluid="true" style=@($"position:absolute; filter: {CostumeColorFilters[response.FaceColor]}") Src=@ImageOrDefault("masks/head-facemask", response.Head, "head/head-0000") />
+                            <MudItem style="text-align: center; position:relative;">
-                                    <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") />
+                                @* 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;">
-                                else
+                                    <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; top: 0; left: 0; right: 0; margin: 0 auto;" Src="images/Nameplates/nameplate_dan.png" />
-                                    <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;" onerror="this.src='images/Costumes/puchi/puchi-0000.png'" Src=@($"images/Costumes/puchi/puchi-{response.Puchi.ToString().PadLeft(4, '0')}.png") />
+                            </MudItem>
-                                
-                            </div>
                         </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);
+    }
 }

TaikoWebUI/Pages/Profile.razor.cs

@@ -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",
     };

TaikoWebUI/wwwroot/css/app.css

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

TaikoWebUI/wwwroot/index.html

@@ -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>

TaikoWebUI/wwwroot/js/textFit.min.js

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

TaikoWebUI/wwwroot/js/updateTextFit.js

@@ -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()
+}