Skip to content

Win Round Box multiple Sponsors #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DarkView merged 5 commits into from
Mar 20, 2026
Merged

Win Round Box multiple Sponsors #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6c6a5eb
feat: add own roundWinBox element and support for multiple roundWinBo…
sommersdev Mar 16, 2026
0a23e69
feat: make roundWinBox multiple Sponsors Spectra+ only
sommersdev Mar 17, 2026
7a93c4b
remove tournamentInfo.name from all Types
sommersdev Mar 18, 2026
5712689
feat: improve separation of roundWinBox sponsors
sommersdev Mar 18, 2026
0b9c5d9
feat: check for duplicate roundCeremonies in round win box sponsors
sommersdev Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions angular/src/app/observer/observer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,17 @@
(validationChanged)="onPanelValidationChanged($event, 'tournamentinfoPanelId')"
></app-tournamentinfo>
</blockable-div>

<blockable-div class="col-span-6" #roundwinbox_panel>
<p-block-ui [target]="roundwinbox_panel" [blocked]="!editable" />
<app-roundwinbox
id="roundwinboxPanelId"
[data]="roundWinBox"
[isSupporter]="isSupporter"
(validationChanged)="onPanelValidationChanged($event, 'roundwinboxPanelId')"
></app-roundwinbox>
</blockable-div>

<blockable-div class="col-span-3 h-full" #seriesinfo_panel>
<p-block-ui [target]="seriesinfo_panel" [blocked]="!editable" />
<app-seriesinfo
Expand Down
59 changes: 56 additions & 3 deletions angular/src/app/observer/observer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import { HttpClient } from "@angular/common/http";
import { WatermarkComponent } from "../watermark/watermark.component";
import { PlayercamsComponent } from "../playercams/playercams.component";
import { OptionsComponent } from "../options/options.component";
import { RoundwinboxComponent } from "../roundwinbox/roundwinbox.component";

@Component({
selector: "app-observer",
Expand All @@ -50,6 +51,7 @@ import { OptionsComponent } from "../options/options.component";
TeaminfoComponent,
SeriesinfoComponent,
TournamentinfoComponent,
RoundwinboxComponent,
MapinfoComponent,
HotkeysComponent,
ObserverinfoComponent,
Expand Down Expand Up @@ -109,6 +111,11 @@ export class ObserverComponent implements OnInit {
fragment: "tournamentinfoPanelId",
command: this.scrollToPanel.bind(this),
},
{
label: "Roundwin Box",
fragment: "roundwinboxPanelId",
command: this.scrollToPanel.bind(this),
},
{
label: "Series Info",
fragment: "seriesinfoPanelId",
Expand Down Expand Up @@ -197,7 +204,6 @@ export class ObserverComponent implements OnInit {
};

protected tournamentInfo: TournamentInfo = {
name: false,
logoUrl: "",
backdropUrl: "",
timeoutDuration: 60,
Expand Down Expand Up @@ -266,6 +272,11 @@ export class ObserverComponent implements OnInit {
endTime: 0,
};

protected roundWinBox: RoundWinBox = {
type: "disabled",
sponsors: [],
};

protected timeoutInfo: TimeoutInfo = {
max: 2,
left: 2,
Expand Down Expand Up @@ -342,6 +353,8 @@ export class ObserverComponent implements OnInit {
console.log("Playercam session expired, clearing info.");
}
}
this.roundWinBox =
this.localStorageService.getItem<RoundWinBox>("roundWinBox") || this.roundWinBox;

const loadedTimeoutInfo = this.localStorageService.getItem<TimeoutInfo>("timeouts");
if (loadedTimeoutInfo) {
Expand Down Expand Up @@ -403,6 +416,22 @@ export class ObserverComponent implements OnInit {
this.electron.confirmCloseDecision(decided === true);
}

protected roundWinBoxCheckSpectraPlus() {
if (this.isSupporter) return this.roundWinBox;
if (this.roundWinBox.type != "sponsors")
return {
type: this.roundWinBox.type,
sponsors: [],
};
const roundWinBoxFirstSponsor = this.roundWinBox.sponsors[0];
roundWinBoxFirstSponsor.roundCeremonie = ["all"];
roundWinBoxFirstSponsor.wonTeam = "all";
return {
type: this.roundWinBox.type,
sponsors: [roundWinBoxFirstSponsor],
};
}

protected onConnectClick() {
if (this.tryingToConnect) return;

Expand Down Expand Up @@ -465,6 +494,7 @@ export class ObserverComponent implements OnInit {
this.watermarkInfo,
this.playercamsInfo,
this.timeoutInfo,
this.roundWinBoxCheckSpectraPlus(),
);

this.saveAllValues();
Expand All @@ -484,6 +514,7 @@ export class ObserverComponent implements OnInit {
this.localStorageService.setItem("watermark", this.watermarkInfo);
this.localStorageService.setItem("playercams", this.playercamsInfo);
this.localStorageService.setItem("timeouts", this.timeoutInfo);
this.localStorageService.setItem("roundWinBox", this.roundWinBox);
}

protected onExtrasClick() {
Expand Down Expand Up @@ -579,6 +610,7 @@ export class ObserverComponent implements OnInit {
},
tournamentInfo: this.tournamentInfo,
timeoutDuration: this.tournamentInfo.timeoutDuration,
roundWinBox: this.roundWinBoxCheckSpectraPlus(),
sponsorInfo: this.sponsorInfo,
},
})
Expand Down Expand Up @@ -776,14 +808,35 @@ export type TeamInfo = {
};

export type TournamentInfo = {
// name just activates the round win box at this time
name: boolean;
logoUrl: string;
backdropUrl: string;
timeoutDuration: number;
showMappool: boolean;
};

export type RoundWinBox = {
type: "disabled" | "tournamentInfo" | "sponsors";
sponsors: RoundWinBoxSponsors[];
};

export type RoundWinBoxWonTeam = "all" | "left" | "right";
export type RoundWinBoxRoundCeremonie = (
| "all"
| "normal"
| "ace"
| "clutch"
| "teamAce"
| "flawless"
| "thrifty"
)[];

export type RoundWinBoxSponsors = {
wonTeam: RoundWinBoxWonTeam;
roundCeremonie: RoundWinBoxRoundCeremonie;
iconUrl: string;
backdropUrl: string;
};

export type SeriesInfo = {
enable: boolean;
needed: number | null;
Expand Down
Empty file added angular/src/app/roundwinbox/roundwinbox.component.css
View file
Open in desktop
Empty file.
175 changes: 175 additions & 0 deletions angular/src/app/roundwinbox/roundwinbox.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<div class="border-surface flex flex-col gap-3 rounded-lg border p-5">
<div class="flex items-center gap-2">
<h1 class="text-color text-xl font-bold">Round Win Box</h1>
<i
class="text-md! pi pi-info size-min cursor-pointer rounded-full border p-1"
(click)="info_popover.toggle($event)"
></i>
<p-popover #info_popover>
<p class="">Recommended image size:</p>
<p class="">Logo: Any size with a 1:1 aspect ratio</p>
<p class="">Backdrop: 875x200 / 35:8 - 830x250 / 83:25 on Nobii's Style</p>
</p-popover>
</div>

<p-inputgroup>
<p-inputgroup-addon>
<p-button label="Disabled" [severity]="data.type == 'disabled' ? 'primary' : 'secondary'" (onClick)="data.type = 'disabled'; runValidation()" />
</p-inputgroup-addon>
<p-inputgroup-addon>
<p-button label="Tournament Info" [severity]="data.type == 'tournamentInfo' ? 'primary' : 'secondary'" (onClick)="data.type = 'tournamentInfo'; runValidation()" />
</p-inputgroup-addon>
<p-inputgroup-addon>
<p-button label="Sponsors" [severity]="data.type == 'sponsors' ? 'primary' : 'secondary'" (onClick)="data.type = 'sponsors'; runValidation()"/>
</p-inputgroup-addon>
</p-inputgroup>
<h1
[hidden]="data.type != 'tournamentInfo'"
class="text-md text-color italic"
>
Configure Tournament Info in the Box above.
</h1>
<h1
[hidden]="isSupporter || data.type != 'sponsors'"
class="text-md text-color italic"
>
Subscribe to Spectra+ to be able to add more than one sponsor.
</h1>

<p-blockui [target]="toBlock" [blocked]="data.type != 'sponsors'"></p-blockui>
<blockable-div #toBlock>
<div class="grid grid-cols-12 gap-3">
@for (i of numSequence(data.sponsors.length + 1); track $index) {
@if ($index == 0 || $index > 0 && isSupporter) {
<div class="col-span-7 flex flex-row">
<div class="w-full mr-2">
<div class="flex w-full mb-2">
<p-floatlabel variant="on" class="w-1/2 mr-1">
<input
pInputText
fluid
type="url"
[ngModel]="data.sponsors[$index]?.iconUrl"
(ngModelChange)="updateSponsor($index, 'iconUrl', $event)"
[class.ng-dirty]="sponsorIconError[$index]"
[class.ng-invalid]="sponsorIconError[$index]"
id="SponsorLogo{{ $index + 1 }}"
/>
<label for="SponsorLogo{{ $index + 1 }}">Sponsor {{ $index + 1 }} logo URL</label>
</p-floatlabel>
<p-floatlabel variant="on" class="w-1/2 ml-1">
<input
pInputText
fluid
type="url"
[ngModel]="data.sponsors[$index]?.backdropUrl"
(ngModelChange)="updateSponsor($index, 'backdropUrl', $event)"
[class.ng-dirty]="sponsorBackdropError[$index]"
[class.ng-invalid]="sponsorBackdropError[$index]"
id="SponsorBackdrop{{ $index + 1 }}"
/>
<label for="SponsorBackdrop{{ $index + 1 }}">Sponsor {{ $index + 1 }} backdrop URL</label>
</p-floatlabel>
</div>
<div class="flex w-full">
<p-floatlabel variant="on" class="w-1/2 mr-1">
<p-select
appendTo="body"
fluid
id="roundWinBoxDialogTeam"
[options]="roundWinBoxTeams"
[ngModel]="data.sponsors[$index]?.wonTeam"
(ngModelChange)="updateSponsor($index, 'wonTeam', $event)"
[class.ng-dirty]="$index < data.sponsors.length ? sponsorTypeError[$index] : false"
[class.ng-invalid]="$index < data.sponsors.length ? sponsorTypeError[$index] : false"
></p-select>
<label for="roundWinBoxDialogTeam">Which Team</label>
</p-floatlabel>
<p-floatlabel variant="on" class="w-1/2 ml-1">
<p-multiselect
appendTo="body"
id="roundWinBoxDialogCeremonies"
class="w-full"
[options]="roundWinBoxRoundCeremonie"
[ngModel]="data.sponsors[$index]?.roundCeremonie"
(ngModelChange)="updateSponsor($index, 'roundCeremonie', $event)"
[maxSelectedLabels]="3"
[filter]="false"
[showToggleAll]="false"
[class.ng-dirty]="$index < data.sponsors.length ? sponsorTypeError[$index] : false"
[class.ng-invalid]="$index < data.sponsors.length ? sponsorTypeError[$index] : false"
></p-multiselect>
<label for="roundWinBoxDialogCeremonies">Which Round Ceremonies</label>
</p-floatlabel>
</div>
</div>
<div class="w-1/14">
@if ($index < data.sponsors.length) {
<p-button
fluid
icon="pi pi-times"
styleClass="w-full h-full"
severity="danger"
(onClick)="this.data.sponsors.splice($index, 1); this.sponsorIconError.splice($index, 1); this.sponsorBackdropError.splice($index, 1);"
/>
}
</div>
</div>
@if ($index < data.sponsors.length) {
<div class="col-span-5 flex flex-row max-h-22">
<div
class="flex shrink min-w-0 aspect-square max-h-22 items-center justify-center mr-6 {{(sponsorIconError[$index] || !data.sponsors[$index].iconUrl) ? 'border-surface bg-emphasis rounded-xl border' : ''}}"
>
@if (sponsorIconError[$index] || !data.sponsors[$index].iconUrl) {
<i
class="text-md! pi pi-info size-min cursor-pointer rounded-full border p-1"
(click)="info_popover.toggle($event)"
></i>
<p-popover #info_popover>
<p class="">Make sure the link points directly to the image.</p>
<p class="">Valid links usually end in .png or .jpg.</p>
</p-popover>
}
<img
class="aspect-square justify-self-center object-contain"
alt=""
[src]="data.sponsors[$index].iconUrl"
(load)="onSponsorImageLoadSuccess($index, 'icon')"
(error)="onSponsorImageLoadError($index, 'icon')"
[hidden]="sponsorIconError[$index] || !data.sponsors[$index].iconUrl"
/>
</div>
<div
class="flex shrink min-w-0 aspect-35/8 max-h-full max-w-full items-center justify-center {{(sponsorBackdropError[$index] || !data.sponsors[$index].backdropUrl) ? 'border-surface bg-emphasis rounded-xl border' : ''}}"
>
@if (sponsorBackdropError[$index] || !data.sponsors[$index].backdropUrl) {
<i
class="text-md! pi pi-info size-min cursor-pointer rounded-full border p-1"
(click)="info_popover.toggle($event)"
></i>
<p-popover #info_popover>
<p class="">Make sure the link points directly to the image.</p>
<p class="">Valid links usually end in .png or .jpg.</p>
</p-popover>
}
<img
class="max-w-full max-h-full object-contain"
alt=""
[src]="data.sponsors[$index].backdropUrl"
(load)="onSponsorImageLoadSuccess($index, 'backdrop')"
(error)="onSponsorImageLoadError($index, 'backdrop')"
[hidden]="sponsorBackdropError[$index] || !data.sponsors[$index].backdropUrl"
/>
</div>
</div>
}
@if ($index < data.sponsors.length) {
<div
class="col-span-12 flex flex-row w-full border-b border-surface"
></div>
}
}
}
</div>
</blockable-div>
</div>
Loading