pixel.horse/src/ts/components/app/character/character.pug

ng-template(#descriptionTooltip)
	.text-start
		p Description and tags help you organize and search for your ponies.
		p Use # tags to be able to quickly find specific ponies like #oc #winter or #unicorn
		p
			| Use @ tags to sort your ponies. @top to put them at the start of the list, @end at the end,
			| and @1 @2 @3 ... to order them manually.

page-loader(*ngIf="!playing")

.row(*ngIf="!playing && !loading")
	.col-lg-6.text-center
		h1.visually-hidden(focusTitle) Characters
		h2.visually-hidden Character selection
		.mx-auto(style="max-width: 400px;")
			discord-button.mb-3
			visit-pt-button.mb-3
			character-select(
				[(error)]="error" [newButton]="true" [removeButton]="true" (change)="updateMuzzles()"
				(preview)="previewPony = $event")

			.character-preview-box.mx-auto.my-3((fixToTop)="fixed = $event" [fixToTopOffset]="-40")
				character-preview(
					#characterPreview [pony]="previewInfo" [state]="state" [noBackground]="true" [noShadow]="fixed"
					[name]="previewName" [tag]="previewTag" [extra]="previewExtra" style="z-index: 100")

			.form-group.text-center
				button.btn.btn-lg.btn-default([disabled]="!canDuplicate" (click)="duplicate()" aria-label="Duplicate character")
					| Duplicate
				button.btn.btn-lg.btn-default.ms-2([disabled]="!canRevert" (click)="revert()" aria-label="Revert changes")
					| Revert
				button.btn.btn-lg.btn-default.ms-2([disabled]="!canSave" (click)="save()" aria-label="Save character")
					| Save

			play-box(label="Save & Play" [(error)]="error")
			play-notice

	.col-lg-6.character-tabs([setOutlineHidden]="!customOutlines" [class.character-tab-warning]="updateWarning")
		h2.visually-hidden Character customization
		tabset(type="pills" *ngIf="loaded" saveActiveTab="character-active-tab" label="Character customization")
			tab(title="body")
				.character-tab(*tabContent)
					div(*ngIf="account?.supporter")
						.row.form-group
							label.col-sm-4.col-form-label.text-patreon
								| Supporter options
							.col-sm-8.text-muted.pt-2
								custom-checkbox([(checked)]="pony.hideSupport") hide supporter tag
						hr.my-2

					.row.form-group
						label.col-sm-4.col-form-label Advanced options
						.col-sm-8.text-muted.pt-1
							custom-checkbox([(checked)]="pony.respawnAtSpawn")
								| always respawn at spawn point
							custom-checkbox([(checked)]="info.customOutlines")
								| allow custom outlines
							custom-checkbox([(checked)]="info.freeOutlines" (checkedChange)="freeOutlinesChanged($event)")
								| don't darken outlines
							custom-checkbox(
								[(checked)]="info.darkenLockedOutlines" [disabled]="!info.freeOutlines"
								(checkedChange)="darkenLockedOutlinesChanged($event)")
								| darken locked outlines

					.row.form-group(*ngIf="debug")
						label.col-sm-4.col-form-label Debug options
						.col-sm-8
							button.btn.btn-sm.btn-default((click)="addBlush()") Add blush

					.row.form-group
						label.col-sm-4.col-form-label Export/Import options
						.col-sm-8
							button.btn.btn-sm.btn-default((click)="exportPony()") Export pony
							button.btn.btn-sm.btn-default.ms-1((click)="exportPonies()") Export all ponies
							button.btn.btn-sm.btn-default.ms-1((click)="importFile.click()") Import ponies
							input.d-none(#importFile type="file" (change)="importPonies(importFile.files[0])")

					.row.form-group
						label#social-site-label.col-sm-4.col-form-label Show social site
						.col-sm-8
							.dropdown.btn-group(dropdown)
								button.btn.btn-default.dropdown-toggle(
									dropdownToggle aria-labelledby="social-site-label" aria-describedby="social-site-help")
									fa-icon.me-1(
										*ngIf="site?.icon" [icon]="icon(site.icon)" [fixedWidth]="true" [style.color]="site.color"
										size="lg" [attr.aria-label]="site.icon")
									strong {{site?.name}}
								.dropdown-menu(*dropdownMenu)
									a.dropdown-item(*ngFor="let s of sites" (click)="site = s")
										fa-icon.me-1(
											*ngIf="s.icon" [icon]="icon(s.icon)" [fixedWidth]="true" [style.color]="s.color"
											size="lg" [attr.aria-label]="s.icon")
										strong {{s.name}}

							.dropdown.btn-group.ms-1(dropdown *ngIf="tags.length > 1")
								button.btn.btn-default.dropdown-toggle(dropdownToggle aria-label="Show tag")
									span.badge(*ngIf="tag.id" [ngClass]="'badge-' + tag.className") {{tag.id}}
									strong(*ngIf="!tag.id") {{tag.name}}
								.dropdown-menu(*dropdownMenu)
									a.dropdown-item(*ngFor="let t of tags" (click)="tag = t")
										span.badge(*ngIf="t.id" [ngClass]="'badge-' + t.className") {{t.id}}
										strong(*ngIf="!t.id") {{t.name}}

							#social-site-help.text-muted.mt-1
								| Shows social site next to your name to prove to others that it's your account.

					.row.form-group
						label.col-sm-4.col-form-label(for="description")
							| Description
							fa-icon.text-muted.ms-2([icon]="infoIcon" [tooltip]="descriptionTooltip" containerClass="tooltip-desc")
						.col-sm-8
							input.form-control#description(
								[(ngModel)]="pony.desc" placeholder="example: with a hat #oc #winter" [maxlength]="maxDescLength")

					.row.form-group
						.col-sm-4.col-lock-box
							label(for="frame-input") Animation
							check-box.lock-box([icon]="playIcon" [(checked)]="playAnimation" label="Play animation")
						.col-sm-8
							.input-group
								input.form-control#frame-input(
									type="number" [(ngModel)]="state.animationFrame" [disabled]="playAnimation" min="0"
									title="Animation frame" aria-label="Animation frame")

								.input-group-append.dropdown(*ngIf="canSaveFiles" dropdown)
									button.btn.btn-default.dropdown-toggle(dropdownToggle *ngIf="canExport" aria-label="Export / Import")
										fa-icon([icon]="codeIcon")
									.dropdown-menu.dropdown-menu-end(*dropdownMenu)
										a.dropdown-item((click)="export()") export all
										a.dropdown-item((click)="import()") import data
										a.dropdown-item((click)="testSize()") print compressed
										a.dropdown-item((click)="testJSON()") print raw

								.input-group-append.dropdown(dropdown)
									button.btn.btn-default(
										*ngIf="canSaveFiles" (click)="export(activeAnimation)" title="Save as PNG" aria-label="Save as PNG")
										fa-icon([icon]="saveIcon")
									button.btn.btn-default.dropdown-toggle(dropdownToggle style="min-width: 80px")
										strong {{animations[activeAnimation]().name}}
									.dropdown-menu.dropdown-menu-end(*dropdownMenu)
										a.dropdown-item(*ngFor="let a of animations; let i = index" (click)="setActiveAnimation(i)")
											| {{a().name}}

					hr
					fill-outline(
						label="Body color" [(fill)]="info.coatFill" [(outline)]="info.coatOutline"
						[(outlineLocked)]="info.lockCoatOutline" [outlineHidden]="!customOutlines" (change)="changed()")
					hr
					set-selection(
						label="Horn" [base]="coatFill" [set]="info.horn" [sets]="horns" [compact]="true" (change)="changed()"
						[darken]="darken")
					hr
					.row.form-group
						label.col-sm-4.col-form-label Magic color
						.col-sm-8
							color-picker([(color)]="info.magicColor" label="Magic color")
					hr
					set-selection(
						label="Wings" [base]="coatFill" [set]="info.wings" [sets]="wings" [compact]="true" (change)="changed()"
						[darken]="darken")
					hr
					set-selection(
						label="Ears" [base]="coatFill" [set]="info.ears" [sets]="ears" [compact]="true" (change)="changed()"
						[darken]="darken")
					hr
					set-selection(
						label="Front hooves" [base]="coatFill" [set]="info.frontHooves" [sets]="frontHooves" [compact]="true"
						[darken]="darken" (change)="changed()")
					hr
					set-selection(
						label="Back hooves" [base]="hoovesFill" [set]="info.backHooves" [sets]="backHooves" [compact]="true"
						[darken]="darken" (change)="changed()")
					hr
					butt-mark-editor([info]="info" [state]="buttMarkState")

			tab(title="mane")
				.character-tab(*tabContent)
					set-selection(
						label="Mane" [base]="maneFill" [set]="info.mane" [sets]="manes" [nonLockable]="true"
						[darken]="darken" (change)="changed()")
					hr
					set-selection(
						label="Back mane" [base]="maneFill" [set]="info.backMane" [sets]="backManes"
						[darken]="darken" (change)="changed()")

			tab(title="tail")
				.character-tab(*tabContent)
					set-selection(
						label="Tail" [base]="maneFill" [set]="info.tail" [sets]="tails" [darken]="darken" (change)="changed()")
					.form-group.text-center
						button.btn.btn-sm.btn-default((click)="copyCoatColorToTail()" [disabled]="info.tail.lockFills[0]")
							| Use body color

			tab(title="face")
				.character-tab(*tabContent)

					.row.form-group
						.col-sm-4.col-lock-box
							label#eye-color Eye color
							check-box.lock-box(
								[(checked)]="info.lockEyeColor" [icon]="lockIcon" (checkedChange)="eyeColorLockChanged($event)"
								label="Lock color for both eyes" title="Lock color for both eyes")
						.col-sm-8
							color-picker([(color)]="info.eyeColorRight" (colorChange)="changed()" labelledBy="eye-color")
					.row.form-group(*ngIf="!info.lockEyeColor")
						label#eye-color-left.col-sm-4.col-form-label Eye color (left)
						.col-sm-8
							color-picker([(color)]="info.eyeColorLeft" labelledBy="eye-color-left")

					.row.form-group
						.col-sm-4.col-lock-box
							label#eye-whites-label Eye whites
							check-box.lock-box(
								[(checked)]="lockEyeWhites" [icon]="lockIcon" (checkedChange)="eyeWhiteLockChanged($event)"
								label="Lock left eye white for both eyes" title="Lock left eye white for both eyes")
						.col-sm-8
							color-picker([(color)]="info.eyeWhites" (colorChange)="changed()" labelledBy="eye-whites-label")
					.row.form-group(*ngIf="info.unlockEyeWhites")
						label#eye-whites-label-left.col-sm-4.col-form-label Eye whites (left)
						.col-sm-8
							color-picker([(color)]="info.eyeWhitesLeft" labelledBy="eye-whites-label-left")

					.row.form-group
						.col-sm-4.col-lock-box
							label#eyes {{info.lockEyes ? 'Eyes' : 'Right eye'}}
							check-box.lock-box(
								[(checked)]="info.lockEyes" [icon]="lockIcon" (checkedChange)="eyeOpennessChanged($event)"
								label="Lock both eyes" title="Lock both eyes")
						.col-sm-8
							sprite-selection(
								[(selected)]="info.eyeOpennessRight" [sprites]="eyesRight" [fill]="info.eyeColorRight"
								[circle]="info.coatFill" [reverseExtra]="true" [skip]="1" [limit]="9" [darken]="darken"
								(selectedChange)="eyeOpennessChanged(info.lockEyes)" aria-labelledby="eyes")
					.row.form-group(*ngIf="!info.lockEyes")
						.col-sm-4
							label#left-eye Left eye
						.col-sm-8
							sprite-selection(
								[(selected)]="info.eyeOpennessLeft" [sprites]="eyesLeft" [fill]="info.eyeColorLeft" [darken]="darken"
								[circle]="info.coatFill" [reverseExtra]="true" [skip]="1" [limit]="5" aria-labelledby="left-eye")

					.row.form-group
						.col-sm-4.col-lock-box
							label Eyeshadow
							check-box.lock-box(
								[(checked)]="info.eyeshadow" (checkedChange)="characterPreview.blink()"
								label="Use eye shadow" title="Use eye shadow")
						.col-sm-8
							color-picker([(color)]="info.eyeshadowColor" [isDisabled]="!info.eyeshadow" label="Eyeshadow color")

					.row.form-group
						label#eyelashes.col-sm-4.col-form-label Eyelashes
						.col-sm-8
							sprite-selection(
								[(selected)]="info.eyelashes" [sprites]="eyelashes" [fill]="info.eyeColorRight" [darken]="darken"
								[circle]="info.coatFill" [reverseExtra]="true" aria-labelledby="eyelashes")

					.row.form-group
						.col-sm-4.col-lock-box
							label#eyelashes-label Eyelash color
							check-box.lock-box(
								[(checked)]="lockEyelashColor" [icon]="lockIcon" (checkedChange)="eyelashLockChanged($event)"
								label="Lock eyelash color for both eyes" title="Lock eyelash color for both eyes")
						.col-sm-8
							color-picker([(color)]="info.eyelashColor" (colorChange)="changed()" labelledBy="eyelashes-label")
					.row.form-group(*ngIf="!lockEyelashColor")
						label#eyelashes-label-left.col-sm-4.col-form-label Eyelash color (left)
						.col-sm-8
							color-picker([(color)]="info.eyelashColorLeft" labelledBy="eyelashes-label-left")

					hr
					set-selection(
						label="Muzzle" base="info.coatFill" [set]="info.nose" [sets]="noses" [darken]="darken"
						[compact]="true" (change)="changed(); updateMuzzles()")
					hr
					set-selection(
						label="Markings" [base]="coatFill" [set]="info.head" [sets]="heads" [darken]="darken"
						[onlyPatterns]="true" (change)="changed()")
					hr
					.row.form-group
						label#fangs.col-sm-4.col-form-label Fangs
						.col-sm-8
							sprite-selection(
								[(selected)]="info.fangs" [sprites]="fangs" [fill]="info.nose.fills" [darken]="darken"
								[outline]="info.nose.outlines" [circle]="info.coatFill" aria-labelledby="fangs")
					.row.form-group
						label#expression.col-sm-4.col-form-label(for="#expression-selection") Expression
						.col-sm-8
							sprite-selection#expression-selection(
								[(selected)]="info.muzzle" [sprites]="muzzles" [fill]="info.nose.fills" [darken]="darken"
								[outline]="info.nose.outlines" [circle]="info.coatFill" [limit]="9" aria-labelledby="expression")
					hr
					set-selection(
						label="Facial hair" [base]="maneFill" [set]="info.facialHair" [sets]="facialHair" [darken]="darken"
						(change)="changed()")

			tab(title="other")
				.character-tab(*tabContent)
					tabset.accessories-tabset(saveActiveTab="character-active-accessory-tab" label="Character accessories")
						tab(title="head")
							.accessory-tab(*tabContent)
								set-selection(
									label="Head accessories" [set]="info.headAccessory" [sets]="headAccessories" [darken]="darken"
									[nonLockable]="true" (change)="changed()")
								hr
								set-selection(
									label="Ear accessories" [set]="info.earAccessory" [sets]="earAccessories" [darken]="darken"
									[nonLockable]="true" (change)="changed()")
								hr
								set-selection(
									label="Face accessories" [set]="info.faceAccessory" [sets]="faceAccessories" [darken]="darken"
									[nonLockable]="true" (change)="changed()")

						tab(title="neck")
							.accessory-tab(*tabContent)
								set-selection(
									label="Neck accessories" [set]="info.neckAccessory" [sets]="neckAccessories" [darken]="darken"
									[nonLockable]="true" (change)="changed()")

						tab(title="legs")
							.accessory-tab(*tabContent)
								.row.form-group
									label.col-sm-4.col-form-label Use the same accessory
									.col-sm-8.text-muted.pt-1
										.mb-2
											custom-checkbox([(checked)]="info.lockBackLegAccessory")
												| for front and back legs
										.mb-2
											custom-checkbox([(checked)]="lockFrontLegAccessory")
												| for both front legs
										.mb-2
											custom-checkbox([(checked)]="lockBackLegAccessory" [disabled]="info.lockBackLegAccessory")
												| for both back legs

								set-selection(
									[label]="info.lockFrontLegAccessories ? 'Front leg accessory' : 'Front leg accessory (left)'"
									[set]="info.frontLegAccessory" [sets]="frontLegAccessories" [darken]="darken"
									[nonLockable]="true" (change)="changed()")
								hr
								div(*ngIf="info.unlockFrontLegAccessory")
									set-selection(
										label="Front leg accessory (right)"
										[set]="info.frontLegAccessoryRight" [sets]="frontLegAccessories" [darken]="darken"
										[nonLockable]="true" (change)="changed()")
									hr
								//- .form-group.d-flex.justify-content-center
									custom-checkbox([(checked)]="info.lockBackLegAccessory") use the same accessory for back legs
								div(*ngIf="!info.lockBackLegAccessory")
									set-selection(
										[label]="info.lockBackLegAccessories ? 'Back leg accessory' : 'Back leg accessory (left)'"
										[set]="info.backLegAccessory" [sets]="backLegAccessories" [darken]="darken"
										[nonLockable]="true" (change)="changed()")
									hr
								div(*ngIf="!info.lockBackLegAccessory && info.unlockBackLegAccessory")
									set-selection(
										label="Back leg accessory (right)"
										[set]="info.backLegAccessoryRight" [sets]="backLegAccessories" [darken]="darken"
										[nonLockable]="true" (change)="changed()")

						tab(title="chest")
							.accessory-tab(*tabContent)
								set-selection(
									label="Chest accessories" [set]="info.chestAccessory" [sets]="chestAccessories" [darken]="darken"
									[nonLockable]="true" (change)="changed()")
								set-selection(
									*ngIf="hasSleeves(info.chestAccessory.type)" label="Sleeves" [set]="info.sleeveAccessory" [darken]="darken"
									[sets]="sleeveAccessories" (change)="changed()")

						tab(title="back")
							.accessory-tab(*tabContent)
								set-selection(
									label="Back accessories" [set]="info.backAccessory" [sets]="backAccessories" [darken]="darken"
									[nonLockable]="true" (change)="changed()")

						tab(title="waist")
							.accessory-tab(*tabContent)
								set-selection(
									label="Waist accessories" [set]="info.waistAccessory" [sets]="waistAccessories" [darken]="darken"
									[nonLockable]="true" (change)="changed()")

						tab(title="other")
							.accessory-tab(*tabContent)
								.form-group.d-flex.justify-content-center.pt-2
									custom-checkbox([(checked)]="previewExtra") show preview
									em.text-muted.ms-2
										| (you have to enable these accessories in-game)
								set-selection(
									label="Extra accessories" [set]="info.extraAccessory" [sets]="extraAccessories"
									[darken]="darken" (change)="changed()")