diff --git a/src/lib/elements/CompetitorScrambleDisplay.css b/src/lib/elements/CompetitorScrambleDisplay.css index 8a278ba..b4d0315 100644 --- a/src/lib/elements/CompetitorScrambleDisplay.css +++ b/src/lib/elements/CompetitorScrambleDisplay.css @@ -99,3 +99,28 @@ competitor-scramble-display:not(.show-multi) .multi { competitor-scramble-display.show-multi-grid>twisty-player { display: none; } + + +scramble-table .additional-actions { + border: 1px solid var(--scramble-table-border-color); + padding: 2em; + line-height: 1.5em; + color: var(--scramble-table-main-color); + backdrop-filter: blur(0.25em); + background: color-mix(in oklab, var(--scramble-table-background) 90%, transparent); +} + +scramble-table .additional-actions h1 { + margin-top: 0; +} + +scramble-table .additional-actions .close { + float: right; + position: relative +} + +scramble-table dialog::backdrop { + background-color: #444; + opacity: 0.75; + z-index: 1; +} diff --git a/src/lib/elements/CompetitorScrambleDisplay.template.html b/src/lib/elements/CompetitorScrambleDisplay.template.html index c52881f..0f763d3 100644 --- a/src/lib/elements/CompetitorScrambleDisplay.template.html +++ b/src/lib/elements/CompetitorScrambleDisplay.template.html @@ -1,8 +1,9 @@ diff --git a/src/lib/elements/CompetitorScrambleDisplay.ts b/src/lib/elements/CompetitorScrambleDisplay.ts index 942664a..29081ee 100644 --- a/src/lib/elements/CompetitorScrambleDisplay.ts +++ b/src/lib/elements/CompetitorScrambleDisplay.ts @@ -11,6 +11,7 @@ import templateHTML from "./CompetitorScrambleDisplay.template.html"; import type { SharedState } from "./SharedState"; import { addCSS, parseHTML } from "./html"; +import { Alg } from "cubing/alg"; import "./MultiBlindGridDisplay"; const template = parseHTML(templateHTML); @@ -40,12 +41,53 @@ export class CompetitorScrambleDisplay extends HTMLElement { "click", () => this.#toggleShowAllSubScrambles(), ); + this.querySelector(".clear-scramble")!.addEventListener("click", () => + this.#clearScramble(), + ); this.querySelector("multi-blind-grid-display")!.addEventListener( "scramble-clicked", (e: CustomEvent<{ idx: number }>) => { this.#currentSubScrambleSetIndex(e.detail.idx); }, ); + this.#initializeAdditionalActions(); + } + + // TODO: unify dialog code with main settings + #initializeAdditionalActions() { + this.querySelector(".additional-actions-button").addEventListener( + "click", + () => { + this.#showAdditionalActions(); + }, + ); + + this.querySelector(".additional-actions button.close").addEventListener( + "click", + () => { + this.#hideAdditionalActions(); + }, + ); + } + + #showAdditionalActions() { + this.querySelector(".additional-actions").showModal(); + } + + #hideAdditionalActions() { + this.querySelector(".additional-actions").close(); + } + + #clearScramble() { + this.classList.remove("scramble-signed"); + this.#toggleShowAllSubScrambles(false); + this.#setField("competitor", ""); + this.#setField("event", ""); + this.#setField("round", ""); + this.#setField("scramble-set", ""); + this.#setField("attempt", ""); + this.querySelector("twisty-player").alg = new Alg(); + this.#hideAdditionalActions(); } #info: AttemptScrambleInfo | undefined; @@ -141,7 +183,9 @@ export class CompetitorScrambleDisplay extends HTMLElement { } #setField(field: string, text: string): void { - this.getElementsByClassName(field)[0].textContent = text; + for (const elem of this.getElementsByClassName(field)) { + elem.textContent = text; + } } async #onSetScrambler() { diff --git a/src/lib/elements/ScrambleTable.ts b/src/lib/elements/ScrambleTable.ts index 6b67836..6095809 100644 --- a/src/lib/elements/ScrambleTable.ts +++ b/src/lib/elements/ScrambleTable.ts @@ -64,9 +64,12 @@ export class ScrambleTable } #initializeSettings() { - this.querySelector("header button").addEventListener("click", () => { - this.#showSettings(); - }); + this.querySelector("header .settings-button").addEventListener( + "click", + () => { + this.#showSettings(); + }, + ); this.querySelector( ".scramble-table-settings button.close",