mirror of
https://github.com/Myxelium/Bridge-Multi.git
synced 2026-04-09 05:09:39 +00:00
353994b8e1
- Add Chart Preview - Add Drum Type dropdown when the "drums" instrument is selected - Add Min/Max Year to advanced search - Add Track Hash to advanced search - Add "Download Video Backgrounds" setting - Updated and improved detected chart issues
171 lines
7.3 KiB
HTML
171 lines
7.3 KiB
HTML
@if (selectedChart) {
|
|
<div class="flex h-full flex-col">
|
|
<div class="relative">
|
|
@if (albumArtMd5) {
|
|
@if (hasIcons && icon) {
|
|
<div class="tooltip absolute bottom-3 left-3" [attr.data-tip]="iconTooltip">
|
|
<img
|
|
class="w-16"
|
|
src="https://clonehero.gitlab.io/sources/icons/{{ icon }}"
|
|
[alt]="selectedChart.icon"
|
|
(load)="iconLoading = false"
|
|
(error)="iconLoading = false"
|
|
[class.hidden]="iconLoading" />
|
|
</div>
|
|
}
|
|
@if (albumLoading) {
|
|
<div class="skeleton w-full aspect-square"></div>
|
|
}
|
|
<img
|
|
src="https://files.enchor.us/{{ albumArtMd5 }}.jpg"
|
|
alt="Album art"
|
|
(load)="albumLoading = false"
|
|
(error)="albumLoading = false"
|
|
[class.hidden]="albumLoading" />
|
|
}
|
|
</div>
|
|
<div
|
|
class="flex flex-1 p-2 gap-1 justify-between overflow-x-hidden overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
|
|
<div class="flex flex-1 flex-col gap-1">
|
|
<div>
|
|
<b>Charter: </b>
|
|
<a class="link link-hover" (click)="onSourceLinkClicked()">{{ selectedChart.charter | removeStyleTags }}</a>
|
|
</div>
|
|
<div class="whitespace-nowrap">
|
|
<span class="font-bold">Length:</span>
|
|
{{ effectiveLength }} (+{{ extraLengthSeconds }}s)
|
|
<div
|
|
class="tooltip tooltip-bottom cursor-help [text-wrap:balance]"
|
|
data-tip="The time between the first and last note. The second value is the extra time at the start and end of the song without notes.">
|
|
<i class="bi bi-info-circle text-xs"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap">
|
|
<div class="flex-1">
|
|
@if (hasIssues) {
|
|
<div class="dropdown dropdown-hover">
|
|
<label tabindex="0" class="cursor-help"><i class="bi bi-exclamation-triangle text-lg -my-3 ml-1"></i> Issues Detected</label>
|
|
<div tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box min-w-max">
|
|
@if (metadataIssues.length > 0) {
|
|
<div class="menu-title">Metadata Issues Found:</div>
|
|
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
|
<li *ngFor="let issue of metadataIssues" class="list-item">{{ issue.description }}</li>
|
|
</ul>
|
|
}
|
|
@if (folderIssues.length > 0) {
|
|
<div class="menu-title">Chart Folder Issues Found:</div>
|
|
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
|
<li *ngFor="let issue of folderIssues" class="list-item">{{ issue.description }}</li>
|
|
</ul>
|
|
}
|
|
@if (globalChartIssues.length > 0) {
|
|
<div class="menu-title">Chart Issues Found:</div>
|
|
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
|
<li *ngFor="let issue of globalChartIssues" class="list-item">{{ issue.description }}</li>
|
|
</ul>
|
|
}
|
|
@for (trackIssues of trackIssuesGroups; track $index) {
|
|
<div class="menu-title">{{ trackIssues.groupName }}</div>
|
|
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
|
<li *ngFor="let issue of trackIssues.issues" class="list-item">{{ issue }}</li>
|
|
</ul>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
@if (selectedChart.modchart) {
|
|
<div><i class="bi bi-star text-lg -my-3 ml-1"></i> Modchart</div>
|
|
}
|
|
@for (pair of boolProperties; track $index) {
|
|
<p class="flex items-center">
|
|
<i class="bi text-2xl -my-3" [ngClass]="pair.value ? 'bi-check2' : 'bi-x'" [ngStyle]="{ color: pair.value ? 'green' : 'red' }"> </i>
|
|
<span class="ml-1 whitespace-nowrap" [class.font-bold]="pair.value">{{ pair.text }}</span>
|
|
</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-1 flex-col gap-1">
|
|
<div
|
|
class="flex flex-wrap gap-1 max-h-40 min-h-[44px] max-w-[234px] overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
|
|
@if (selectedChart.notesData.hasVocals) {
|
|
<app-chart-sidebar-instrument [chart]="selectedChart" instrument="vocals" />
|
|
}
|
|
@for (instrument of instruments; track $index) {
|
|
<app-chart-sidebar-instrument [chart]="selectedChart" [instrument]="instrument" />
|
|
}
|
|
</div>
|
|
<div class="flex flex-1 flex-col">
|
|
@if (instruments.length > 1 || difficulties.length > 1) {
|
|
<div class="flex flex-wrap gap-1">
|
|
@if (instruments.length > 1) {
|
|
<select class="select select-bordered select-sm grow-[40]" [formControl]="instrumentDropdown">
|
|
@for (instrument of instruments; track $index) {
|
|
<option [value]="instrument">{{ shortInstrumentDisplay(instrument) }}</option>
|
|
}
|
|
</select>
|
|
}
|
|
@if (difficulties.length > 1) {
|
|
<select class="select select-bordered select-sm flex-1" [formControl]="difficultyDropdown">
|
|
@for (difficulty of difficulties; track $index) {
|
|
<option [value]="difficulty">{{ difficultyDisplay(difficulty) }}</option>
|
|
}
|
|
</select>
|
|
}
|
|
</div>
|
|
}
|
|
<p class="font-bold whitespace-nowrap">Average NPS: {{ averageNps || 'N/A' }}</p>
|
|
<p class="font-bold whitespace-nowrap">Maximum NPS: {{ maximumNps }}</p>
|
|
<p class="font-bold whitespace-nowrap">Note Count: {{ noteCount }}</p>
|
|
<button class="btn btn-sm btn-neutral my-1 max-w-fit" (click)="previewModal.showModal()">
|
|
<i class="bi bi-play text-lg text-neutral-content"></i>
|
|
Chart Preview
|
|
</button>
|
|
<dialog #previewModal class="modal" (close)="chartPreview.endChartPreview()">
|
|
<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2 h-[50vh] w-[80vw] max-w-full max-h-full">
|
|
<form method="dialog">
|
|
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
|
|
<i class="bi bi-x-lg text-lg"></i>
|
|
</button>
|
|
</form>
|
|
<app-chart-sidebar-preview
|
|
#chartPreview
|
|
[selectedChart]="selectedChart"
|
|
[instrument]="instrumentDropdown.value"
|
|
[difficulty]="difficultyDropdown.value" />
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="join">
|
|
<button class="btn rounded-md flex-1 join-item btn-primary capitalize" (click)="onDownloadClicked()">Download</button>
|
|
<div
|
|
#menu
|
|
class="cursor-pointer bg-neutral rounded-md join-item dropdown dropdown-top dropdown-end p-1 flex items-center"
|
|
(click)="showMenu()"
|
|
[class.dropdown-open]="menuVisible">
|
|
<i class="bi bi-three-dots text-2xl px-1 text-neutral-content"></i>
|
|
<app-chart-sidebar-menu [chartVersions]="charts![0]" (selectedVersionChanges)="selectedChart = $event" />
|
|
</div>
|
|
<dialog #libraryDirectoryErrorModal class="modal">
|
|
<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
|
|
<form method="dialog">
|
|
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
|
|
<i class="bi bi-x-lg text-lg"></i>
|
|
</button>
|
|
</form>
|
|
<h3 class="text-lg font-bold">Chart can't be downloaded yet</h3>
|
|
<p class="py-4">Please select a chart library directory in the Settings tab before downloading.</p>
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog>
|
|
</div>
|
|
</div>
|
|
}
|