109 lines
4.0 KiB
HTML
109 lines
4.0 KiB
HTML
|
<ng-container>
|
|||
|
|
<app-header [current_page]="'nickgenerator'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
|
|||
|
|
[overlay_gradient]="0.5">
|
|||
|
|
<div class="title" header-content>
|
|||
|
|
<h1>Nickname Generator</h1>
|
|||
|
|
<h2>Customize your in-game nickname</h2>
|
|||
|
|
<h3 style="font-family: 'minecraft-text', sans-serif; font-size: 0.8rem; margin-top: 10px;">Made by TheParm</h3>
|
|||
|
|
<!--TODO remove this message when everything works-->
|
|||
|
|
<p style="font-weight: bolder; color: red">NOTICE: This page is in the process of being updated to work on the new
|
|||
|
|
site.<br> This version is functional, but only barely. Expect updates in the coming days</p>
|
|||
|
|
</div>
|
|||
|
|
</app-header>
|
|||
|
|
|
|||
|
|
<main>
|
|||
|
|
<section class="containerNick">
|
|||
|
|
<div class="controls">
|
|||
|
|
|
|||
|
|
@for (part of parts; track $index; let i = $index) {
|
|||
|
|
<div class="part">
|
|||
|
|
<div class="row">
|
|||
|
|
<mat-form-field class="textField" appearance="outline">
|
|||
|
|
<mat-label>Text</mat-label>
|
|||
|
|
<input
|
|||
|
|
matInput
|
|||
|
|
[value]="part.text"
|
|||
|
|
(input)="part.text = ($any($event.target).value || ''); onInputChanged()"
|
|||
|
|
maxlength="16"
|
|||
|
|
/>
|
|||
|
|
<mat-hint align="end">{{ part.text.length }} / 16</mat-hint>
|
|||
|
|
</mat-form-field>
|
|||
|
|
|
|||
|
|
<mat-checkbox
|
|||
|
|
class="checkbox"
|
|||
|
|
[(ngModel)]="part.gradient"
|
|||
|
|
(change)="onGradientToggle(i)"
|
|||
|
|
>Gradient
|
|||
|
|
</mat-checkbox
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
<mat-form-field
|
|||
|
|
class="colorField"
|
|||
|
|
appearance="outline"
|
|||
|
|
[style.visibility]="(part.continuation && i>0 && parts[i-1]?.gradient && part.gradient) ? 'hidden' : 'visible'">
|
|||
|
|
<mat-label>Color A</mat-label>
|
|||
|
|
<input
|
|||
|
|
matInput
|
|||
|
|
type="color"
|
|||
|
|
[value]="part.colorA"
|
|||
|
|
(input)="part.colorA = $any($event.target).value; onInputChanged()"
|
|||
|
|
/>
|
|||
|
|
</mat-form-field>
|
|||
|
|
|
|||
|
|
<mat-form-field
|
|||
|
|
class="colorField"
|
|||
|
|
appearance="outline"
|
|||
|
|
[style.visibility]="part.gradient ? 'visible' : 'hidden'">
|
|||
|
|
<mat-label>Color B</mat-label>
|
|||
|
|
<input
|
|||
|
|
matInput
|
|||
|
|
type="color"
|
|||
|
|
[value]="part.colorB"
|
|||
|
|
(input)="part.colorB = $any($event.target).value; onInputChanged()"
|
|||
|
|
/>
|
|||
|
|
</mat-form-field>
|
|||
|
|
|
|||
|
|
<mat-checkbox
|
|||
|
|
class="checkbox"
|
|||
|
|
[(ngModel)]="part.continuation"
|
|||
|
|
(change)="onContinuationToggle(i)"
|
|||
|
|
[disabled]="i===0 || !part.gradient || !parts[i-1]?.gradient"
|
|||
|
|
>Continuation
|
|||
|
|
</mat-checkbox
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
@if (part.invalid) {
|
|||
|
|
<div class="invalid">(min 1 – max 16 chars{{ part.gradient ? '' : ' for non-empty text' }})</div>
|
|||
|
|
}
|
|||
|
|
<mat-divider></mat-divider>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
<div class="buttons">
|
|||
|
|
<button mat-raised-button (click)="addPart()">Add Part</button>
|
|||
|
|
<button mat-raised-button (click)="deletePart()">Remove Part</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
@if (showCommands) {
|
|||
|
|
<div class="commands">
|
|||
|
|
<div class="commandRow">
|
|||
|
|
<div class="command">{{ tryCmd }}</div>
|
|||
|
|
<button mat-stroked-button (click)="copy(tryCmd, 'try')">{{ tryCommandButtonContent }}</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="commandRow">
|
|||
|
|
<div class="command">{{ requestCmd }}</div>
|
|||
|
|
<button mat-stroked-button (click)="copy(requestCmd, 'request')">{{ requestCommandButtonContent }}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@if (showPreview) {
|
|||
|
|
<div class="preview" [innerHTML]="previewHtml"></div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</ng-container>
|