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
256 lines
10 KiB
HTML
256 lines
10 KiB
HTML
<div class="p-8 flex flex-col gap-3">
|
|
<label class="form-control w-full">
|
|
<div class="label">
|
|
<span class="label-text">Chart library directory</span>
|
|
</div>
|
|
<div class="join w-full">
|
|
<input
|
|
[value]="settingsService.libraryDirectory || 'No folder selected'"
|
|
class="join-item input input-bordered cursor-default pointer-events-none flex-1"
|
|
readonly
|
|
type="text"
|
|
placeholder="No directory selected!" />
|
|
@if (settingsService.libraryDirectory !== undefined) {
|
|
<button (click)="openLibraryDirectory()" class="join-item btn btn-neutral">Open Folder</button>
|
|
}
|
|
<button (click)="getLibraryDirectory()" class="join-item btn btn-primary">Choose</button>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="form-control w-full">
|
|
<div class="label">
|
|
<span class="label-text">
|
|
Chart folder name
|
|
<button class="btn btn-xs btn-circle btn-ghost" (click)="chartFolderNameModal.showModal()">
|
|
<i class="bi bi-info-circle text-sm hover:border-b-secondary-focus"></i>
|
|
</button>
|
|
<dialog #chartFolderNameModal class="modal whitespace-normal">
|
|
<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>
|
|
<div class="flex-1">
|
|
<span class="font-bold text-lg">Chart Folder Name</span>
|
|
<ul class="list-disc pl-5">
|
|
<li>Describes where Bridge will put the chart inside the chart library directory</li>
|
|
<li>Use "/" to describe subfolders</li>
|
|
<li>Use "{{ '{tag}' }}" as a placeholder for chart-specific properties</li>
|
|
<br />
|
|
Available tags:
|
|
<div class="text-xs">{{ '{name}, {artist}, {album}, {genre}, {year}, {charter}' }}</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog>
|
|
</span>
|
|
</div>
|
|
<input [formControl]="chartFolderName" class="input input-bordered" type="text" placeholder="{artist} - {name} ({charter})" />
|
|
</label>
|
|
|
|
<div class="form-control w-full max-w-xs">
|
|
<div class="label">
|
|
<span class="label-text">Appearance</span>
|
|
</div>
|
|
<div class="flex gap-3 items-center">
|
|
<div class="join join-vertical">
|
|
<div class="tooltip tooltip-right" data-tip="Zoom In (ctrl +)">
|
|
<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomIn()">
|
|
<i class="bi bi-zoom-in"></i>
|
|
</button>
|
|
</div>
|
|
<div class="tooltip tooltip-right" data-tip="Zoom Out (ctrl -)">
|
|
<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomOut()">
|
|
<i class="bi bi-zoom-out"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@if (!settingsService.customTheme) {
|
|
<div class="dropdown dropdown-hover">
|
|
<label tabindex="0" class="btn btn-neutral">{{ capitalize(settingsService.theme) }}</label>
|
|
<ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-neutral text-neutral-content rounded-box w-36">
|
|
<li>
|
|
<h2 class="menu-title text-neutral-content text-opacity-50">Dark</h2>
|
|
<ul>
|
|
<li><a (click)="setTheme('business')">Business</a></li>
|
|
<li><a (click)="setTheme('dark')">Dark</a></li>
|
|
<li><a (click)="setTheme('dim')">Dim</a></li>
|
|
<li><a (click)="setTheme('night')">Night</a></li>
|
|
<li><a (click)="setTheme('sunset')">Sunset</a></li>
|
|
<li><a (click)="setTheme('synthwave')">Synthwave</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h2 class="menu-title text-neutral-content text-opacity-50">Light</h2>
|
|
<ul>
|
|
<li><a (click)="setTheme('aqua')">Aqua</a></li>
|
|
<li><a (click)="setTheme('emerald')">Emerald</a></li>
|
|
<li><a (click)="setTheme('lemonade')">Lemonade</a></li>
|
|
<li><a (click)="setTheme('nord')">Nord</a></li>
|
|
<li><a (click)="setTheme('valentine')">Valentine</a></li>
|
|
<li><a (click)="setTheme('winter')">Winter</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button (click)="getCustomTheme()" class="btn btn-primary">Use custom theme</button>
|
|
} @else {
|
|
<button (click)="clearCustomTheme()" class="btn btn-neutral">Clear custom theme</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<div class="label">
|
|
<span class="label-text">
|
|
Download Format
|
|
<button class="btn btn-xs btn-circle btn-ghost" (click)="selectSngModal.showModal()">
|
|
<i class="bi bi-info-circle text-sm hover:border-b-secondary-focus"></i>
|
|
</button>
|
|
<dialog #selectSngModal class="modal whitespace-normal">
|
|
<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>
|
|
<div class="flex gap-6">
|
|
<div class="flex-1">
|
|
<span class="font-bold text-lg">Chart Folder</span>
|
|
<ul class="list-disc pl-5">
|
|
<li>Chart files (such as audio and album art) are placed inside a folder</li>
|
|
<li>Supported across many games</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex-1">
|
|
<span class="font-bold text-lg">.sng (new)</span>
|
|
<ul class="list-disc pl-5">
|
|
<li>Single chart file</li>
|
|
<li>Can be scanned in-game directly without extracting</li>
|
|
<li>Currently only supported by Clone Hero's current test build and YARG</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div class="text-xs">
|
|
A program to convert between .sng files and chart folders can be found
|
|
<a class="link" (click)="openUrl('https://github.com/mdsitton/SngFileFormat/releases')">here</a>.
|
|
</div>
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog>
|
|
</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<label class="label cursor-pointer">
|
|
<input type="radio" name="isSng" class="radio radio-secondary mr-2" [value]="true" [formControl]="isSng" />
|
|
.sng
|
|
</label>
|
|
|
|
<label class="label cursor-pointer">
|
|
<input type="radio" name="isSng" class="radio radio-secondary mr-2" [value]="false" [formControl]="isSng" />
|
|
Chart Folder
|
|
</label>
|
|
</div>
|
|
<div class="flex">
|
|
<label class="label cursor-pointer" for="downloadVideos">
|
|
<input id="downloadVideos" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="downloadVideos" />
|
|
Download Video Backgrounds
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<div class="label">
|
|
<span class="label-text">Table Layout</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<label class="label cursor-pointer">
|
|
<input type="radio" name="isCompactTable" class="radio radio-secondary mr-2" [value]="false" [formControl]="isCompactTable" />
|
|
Default
|
|
</label>
|
|
|
|
<label class="label cursor-pointer">
|
|
<input type="radio" name="isCompactTable" class="radio radio-secondary mr-2" [value]="true" [formControl]="isCompactTable" />
|
|
Compact
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<div class="label">
|
|
<span class="label-text">Table Columns</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<label class="label cursor-pointer" for="artistColumn">
|
|
<input id="artistColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="artistColumn" />
|
|
Artist
|
|
</label>
|
|
<label class="label cursor-pointer" for="albumColumn">
|
|
<input id="albumColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="albumColumn" />
|
|
Album
|
|
</label>
|
|
<label class="label cursor-pointer" for="genreColumn">
|
|
<input id="genreColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="genreColumn" />
|
|
Genre
|
|
</label>
|
|
<label class="label cursor-pointer" for="yearColumn">
|
|
<input id="yearColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="yearColumn" />
|
|
Year
|
|
</label>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<label class="label cursor-pointer" for="charterColumn">
|
|
<input id="charterColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="charterColumn" />
|
|
Charter
|
|
</label>
|
|
<label class="label cursor-pointer" for="lengthColumn">
|
|
<input id="lengthColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="lengthColumn" />
|
|
Length
|
|
</label>
|
|
<label class="label cursor-pointer" for="difficultyColumn">
|
|
<input id="difficultyColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="difficultyColumn" />
|
|
Difficulty
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute bottom-8 left-8 flex">
|
|
<a class="btn btn-link" (click)="openUrl('https://github.com/Geomitron/Bridge')"><i class="bi bi-github text-2xl"></i>Github</a>
|
|
<a class="btn btn-link" (click)="openUrl('https://discord.gg/cqaUXGm')"><i class="bi bi-discord text-2xl"></i>Discord</a>
|
|
<a class="btn btn-link" (click)="openUrl('https://www.patreon.com/ChorusEncore701')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" id="patreon">
|
|
<path
|
|
fill="currentColor"
|
|
fill-rule="evenodd"
|
|
d="M0 9.71C0 1.63 10.32-3.476 16.916 2.818c3.532 3.36 4.143 8.902 1.248 12.951-3.591 4.92-8.282 4.193-12.76 4.193v-9.588c.041-2.117.747-3.943 3.324-4.816 2.245-.664 4.863.581 5.653 2.947.832 2.533-.374 4.234-1.787 5.272-1.413 1.039-3.616 1.039-5.07.042v3.279c3.138 1.5 8.105-.303 9.684-4.4 1.08-2.864.332-6.185-1.912-8.26-2.701-2.2-5.653-2.74-8.811-1.204-2.204 1.12-3.741 3.404-4.116 5.894v10.834H.042L0 9.71z"></path>
|
|
</svg>
|
|
Patreon
|
|
</a>
|
|
</div>
|
|
|
|
<div class="absolute bottom-8 right-8 flex gap-6">
|
|
<div class="join">
|
|
<button *ngIf="updateAvailable === 'yes'" class="join-item btn btn-primary" (click)="downloadUpdate()">
|
|
<i class="bi text-xl" [ngClass]="updateDownloaded ? 'bi-arrow-repeat' : 'bi-cloud-arrow-down'"></i>{{ downloadUpdateText }}
|
|
</button>
|
|
<button *ngIf="updateAvailable === 'error'" class="join-item btn btn-warning" [class.disabled]="updateRetrying" (click)="retryUpdate()">
|
|
<i class="bi bi-arrow-repeat text-xl" [class.loading]="updateRetrying"></i>{{ retryUpdateText }}
|
|
</button>
|
|
<button class="join-item btn btn-outline btn-disabled">{{ currentVersion }}</button>
|
|
</div>
|
|
|
|
<div class="tooltip tooltip-left" data-tip="Toggle developer tools">
|
|
<button class="btn btn-primary btn-square btn-neutral" (click)="toggleDevTools()">
|
|
<i class="bi bi-gear text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|