diff --git a/src/app/dialogs/table-draw/table-draw-dialog.component.html b/src/app/dialogs/table-draw/table-draw-dialog.component.html index a4950ed..5b348cf 100644 --- a/src/app/dialogs/table-draw/table-draw-dialog.component.html +++ b/src/app/dialogs/table-draw/table-draw-dialog.component.html @@ -1,12 +1,13 @@

Table Draw

- @if (tableDraw !== undefined && tableDraw !== null) { + @if (tableDraw() !== undefined && tableDraw() !== null) {
+ Player {{ p.player.name }} has to move from + Table {{ tableDraw().tableIndexToTake + 1 }} to + Table {{ tableDraw().tableIndexToAdd + 1 }} + + +
} } @@ -108,6 +117,7 @@

SET UP

Estimated duration [class.expanded]="isExpanded()" >
-

players

+
players
-

start stack

+
start stack
start stack
-

rebuys

+
rebuys
-

rebuy stack

+
rebuy stack
rebuy stack
-

addons

+
addons
-

addon stack

+
addon stack
addon stack >

- {{ estimatedDurationInMinutes() | time }} + Duration: {{ estimatedDurationInMinutes() | time }} (+/- 1 Level) diff --git a/src/app/shared/components/blind-structure-view/blind-structure-estimated-duration/blind-structure-estimated-duration.component.scss b/src/app/shared/components/blind-structure-view/blind-structure-estimated-duration/blind-structure-estimated-duration.component.scss index 642c37d..112b0bd 100644 --- a/src/app/shared/components/blind-structure-view/blind-structure-estimated-duration/blind-structure-estimated-duration.component.scss +++ b/src/app/shared/components/blind-structure-view/blind-structure-estimated-duration/blind-structure-estimated-duration.component.scss @@ -1,5 +1,9 @@ +@import "src/styles/colors_texts"; + .duration { background: aliceblue; + border: solid 1px $primaryDark; + border-radius: 8px; padding: 12px; margin-bottom: 48px; width: fit-content; @@ -8,30 +12,33 @@ display: flex; justify-content: flex-start; align-items: center; + margin-bottom: 12px; + margin-top: 12px; } .fa-chevron-circle-down { margin-right: 20px; } - h3 { + h4 { margin: 0; text-align: left; + color: black; } & > .expandable > div:not(.expandable-header) { display: flex; align-items: center; - margin-top: 20px; + margin-top: 8px; input { margin-right: 32px; - width: 140px; - font-size: 32px; + width: 120px; + font-size: 20px; font-weight: bold; color: #00437b; text-align: right; - padding-right: 8px; + padding-right: 4px; box-sizing: border-box; } @@ -40,10 +47,14 @@ font-weight: bold; } - h4 { - font-weight: normal; + h5 { margin-right: 12px; - width: 120px; + margin-top: 0; + margin-bottom: 0; + width: 90px; + text-align: left; + text-transform: uppercase; + font-weight: bold; } } @@ -52,7 +63,7 @@ } p.estimation { - font-size: 54px; + font-size: 40px; margin-top: 20px; text-align: left; font-weight: bold; diff --git a/src/app/shared/components/blind-structure-view/blind-structure-view.component.html b/src/app/shared/components/blind-structure-view/blind-structure-view.component.html index 13ea315..ca1745f 100644 --- a/src/app/shared/components/blind-structure-view/blind-structure-view.component.html +++ b/src/app/shared/components/blind-structure-view/blind-structure-view.component.html @@ -69,7 +69,7 @@ class="pause-element" cdkDrag > -

+
{{ blind.duration }}min
@@ -99,13 +99,11 @@ class="b-insert-pause" (click)="addPause.emit(blind.position)" > -
- +
+ - INSERT PAUSE - + INSERT PAUSE +
} diff --git a/src/app/shared/components/blind-structure-view/blind-structure-view.component.scss b/src/app/shared/components/blind-structure-view/blind-structure-view.component.scss index bcf8631..8339f41 100644 --- a/src/app/shared/components/blind-structure-view/blind-structure-view.component.scss +++ b/src/app/shared/components/blind-structure-view/blind-structure-view.component.scss @@ -27,8 +27,9 @@ padding: 8px; margin-bottom: 4px; margin-right: 40px; - font-size: 16px !important; - background: rgba(gold, 0.05); + font-size: 18px !important; + background: rgba(175, 225, 175, 0.5); + color: #023020; } .b-duration, @@ -72,8 +73,13 @@ opacity: 1; border-color: rgba(#85BB65, 0.6); } + + i { + margin-right: 12px; + } } + .fa-trash { font-size: 16px !important; } @@ -81,17 +87,17 @@ .blind-element .index { position: absolute; left: 0; - transform: translateX(-110%); + transform: translateX(-130%); display: flex; justify-content: center; align-items: center; - background: #00437b; - color: aliceblue; + background: #ddd; + color: #023020; font-weight: bold; font-size: 12px; - width: 20px; - height: 20px; - border-radius: 20px; + width: 24px; + height: 24px; + border-radius: 24px; } .cdk-drag-preview { diff --git a/src/app/shared/components/table-draw-state/table-draw-state.component.html b/src/app/shared/components/table-draw-state/table-draw-state.component.html index bee68e5..0bd463b 100644 --- a/src/app/shared/components/table-draw-state/table-draw-state.component.html +++ b/src/app/shared/components/table-draw-state/table-draw-state.component.html @@ -1,28 +1,48 @@
-
-
1
-
-
+
+
+ 1 +
+ +
+ +
2
-
-
+ +
+ +
3
-

+

SET UP

-

+

DRAW

-

+

MANAGE

diff --git a/src/app/shared/components/table-draw-state/table-draw-state.component.scss b/src/app/shared/components/table-draw-state/table-draw-state.component.scss index 880b7bd..76bc15c 100644 --- a/src/app/shared/components/table-draw-state/table-draw-state.component.scss +++ b/src/app/shared/components/table-draw-state/table-draw-state.component.scss @@ -24,7 +24,7 @@ div.bullets { font-size: 18px; font-weight: bold; border-radius: 24px; - background: #ccc; + background: #85BB65; color: white; display: flex; justify-content: center; @@ -32,8 +32,7 @@ div.bullets { } .draw-state > div > div.bullet.completed { - background: #85BB65; - color: white; + background: #ccc; } .draw-state > div > div.line { @@ -45,18 +44,19 @@ div.bullets { } .draw-state > div > div.line.completed { - background: #3f403f; + background: #ccc; } .draw-state > div > p { width: 130px; text-align: center; - color: #ccc; + color: $primary; } .draw-state > div > p.completed { font-weight: bold; color: $primary; + color: #ccc; } .texts p { diff --git a/src/app/shared/services/table-draw.service.ts b/src/app/shared/services/table-draw.service.ts index 8910ff8..5f78b70 100644 --- a/src/app/shared/services/table-draw.service.ts +++ b/src/app/shared/services/table-draw.service.ts @@ -158,6 +158,7 @@ export class TableDrawService { ] ); + console.log('set', tableDraw.state); this.tableDraw.set(tableDraw); this.tournamentApiService.deleteTableDraw$(tableDraw.tournament.id).pipe( @@ -279,6 +280,13 @@ export class TableDrawService { return tableDraw; }); + this.tableDraw.update( + (tableDraw: TableDraw) => ({ + ...tableDraw, + state: TableDrawState.DRAWN + }) + ); + this.tournamentApiService.deleteTableDraw$(this.tableDraw().tournament.id).pipe( take(1), switchMap(() => this.tournamentApiService.postTableDraw$(this.tableDraw())) @@ -419,6 +427,13 @@ export class TableDrawService { } resetTableDraw(): void { + this.tableDraw.update( + (tableDraw: TableDraw) => ({ + ...tableDraw, + state: TableDrawState.BLANK + }) + ); + this.tournamentApiService.deleteTableDraw$(this.tournament().id).pipe( take(1), tap(() => this.tableDraw.update((tableDraw: TableDraw) => { diff --git a/src/app/shared/services/util/formly-field.service.ts b/src/app/shared/services/util/formly-field.service.ts deleted file mode 100644 index 01faac2..0000000 --- a/src/app/shared/services/util/formly-field.service.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { Injectable } from '@angular/core'; -import { FormlyFieldConfig } from '@ngx-formly/core'; -import { Observable } from 'rxjs'; - -@Injectable({ - providedIn: 'root' -}) -export class FormlyFieldService { - - getDefaultTextField( - key: string, - label: string, - required: boolean, - maxLength = 200 - ): FormlyFieldConfig { - return { - key, - type: 'input', - props: { - label, - required, - maxLength - } - }; - } - - getDefaultDateField( - key: string, - label: string, - required: boolean - ): FormlyFieldConfig { - return { - key, - type: 'datepicker', - props: { - label, - required - } - }; - } - - getDefaultNumberField( - key: string, - label: string, - required: boolean, - disabled = false - ): FormlyFieldConfig { - return { - key, - type: 'number', - props: { - label, - required, - disabled: disabled ? true : false - } - }; - } - - getDefaultSelectField( - key: string, - label: string, - required: boolean, - options: { label: string, value: any }[] | Observable<{ label: string, value: any }[]>, - disabled = false, - ): FormlyFieldConfig { - return { - key, - type: 'select', - props: { - label, - required, - options, - disabled: disabled ? true : false - } - }; - } - - getDefaultMultiSelectField( - key: string, - label: string, - required: boolean, - options: { label: string, value: any }[] - ): FormlyFieldConfig { - return { - key, - type: 'select', - props: { - label, - required, - options, - multiple: true - } - }; - } - - getDefaultCheckboxField( - key: string, - label: string, - defaultValue = false - ): FormlyFieldConfig { - return { - key, - type: 'checkbox', - defaultValue, - props: { - label, - } - }; - } - -} diff --git a/src/app/timer/components/tournament/overview/overview.component.html b/src/app/timer/components/tournament/overview/overview.component.html index d52d65c..aa42334 100644 --- a/src/app/timer/components/tournament/overview/overview.component.html +++ b/src/app/timer/components/tournament/overview/overview.component.html @@ -22,6 +22,8 @@ - with Addon } + {{ tableDrawService.tableDraw().state }} /{{ drawState() }} + {{ tournament().name }} @ {{ tournament().locationName }} @@ -51,6 +53,8 @@
@if (tournament().finishes.length > tournament().players.length / 2) { + } @else if (drawState()) { + } @else { ; timeForRebuy: Signal; + drawState: Signal; + countdownConfig: WritableSignal; firstDonePassed = false; @@ -105,6 +111,7 @@ export class OverviewComponent implements OnInit, AfterViewInit { private state: TimerStateService = inject(TimerStateService); private tournamentApiService: TournamentApiService = inject(TournamentApiService); private fetchService: FetchService = inject(FetchService); + tableDrawService: TableDrawService = inject(TableDrawService); @HostListener('window:keyup.space', ['$event']) onKeydownSpaceHandler(event: Event) { @@ -173,6 +180,10 @@ export class OverviewComponent implements OnInit, AfterViewInit { return date; }); + this.drawState = computed(() => + this.tableDrawService.tableDraw().state + ); + this.initTimeValues(); this.initCountdownConfig(); diff --git a/src/app/timer/components/tournament/overview/tables/tables.component.html b/src/app/timer/components/tournament/overview/tables/tables.component.html new file mode 100644 index 0000000..c99b0d3 --- /dev/null +++ b/src/app/timer/components/tournament/overview/tables/tables.component.html @@ -0,0 +1,45 @@ +
+

+ Tables +

+ +
+
+ +
+ @for (table of tableDraw().tables; track table; let i = $index) { +
+

Table {{ i + 1 }}

+
+ + @for (player of table; track player; let j = $index; ) { +
+
+
+ + {{ player.seatNo + 1 }} + +
+
+ +

+ {{ player?.player?.name }} +

+ + @if (player.isButton) { +
B
+ } +
+ } +
+
+ } +
+ +
+
+
diff --git a/src/app/timer/components/tournament/overview/tables/tables.component.scss b/src/app/timer/components/tournament/overview/tables/tables.component.scss new file mode 100644 index 0000000..b7ca8fa --- /dev/null +++ b/src/app/timer/components/tournament/overview/tables/tables.component.scss @@ -0,0 +1,3 @@ +:host { + display: contents; +} diff --git a/src/app/timer/components/tournament/overview/tables/tables.component.ts b/src/app/timer/components/tournament/overview/tables/tables.component.ts new file mode 100644 index 0000000..f9dbc49 --- /dev/null +++ b/src/app/timer/components/tournament/overview/tables/tables.component.ts @@ -0,0 +1,37 @@ +import { Component, inject, OnInit, Signal } from '@angular/core'; +import { TableDrawService } from '../../../../../shared/services/table-draw.service'; +import { BulletsComponent } from '../../../../../shared/components/bullets/bullets.component'; +import { DecimalPipe } from '@angular/common'; +import { FormulaPointsPipe } from '../../../../../shared/pipes/formula-points.pipe'; +import { UserWithImageComponent } from '../../../../../shared/components/user-with-image/user-with-image.component'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatOptionModule } from '@angular/material/core'; +import { MatSelectModule } from '@angular/material/select'; +import { TableDraw } from '../../../../../shared/interfaces/table-draw.interface'; + +@Component({ + selector: 'app-tables', + templateUrl: './tables.component.html', + styleUrl: './tables.component.scss', + standalone: true, + imports: [ + BulletsComponent, + DecimalPipe, + FormulaPointsPipe, + UserWithImageComponent, + MatFormFieldModule, + MatOptionModule, + MatSelectModule + ], +}) +export class TablesComponent implements OnInit { + + tableDraw: Signal; + + private tableDrawService: TableDrawService = inject(TableDrawService); + + ngOnInit(): void { + this.tableDraw = this.tableDrawService.tableDraw; + } + +} diff --git a/src/styles.scss b/src/styles.scss index b462511..8db6179 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -10,6 +10,7 @@ @import "src/styles/fonts"; @import "src/styles/animations"; @import "src/styles/timer"; +@import "src/styles/table-draw"; html, body { diff --git a/src/styles/_material.scss b/src/styles/_material.scss index 614aee8..00d5a3c 100644 --- a/src/styles/_material.scss +++ b/src/styles/_material.scss @@ -34,6 +34,7 @@ mat-dialog-container:not(#draw) { mat-dialog-container#draw { width: 80vw; min-height: 80vh; + max-width: 1000px; } diff --git a/src/styles/_table-draw.scss b/src/styles/_table-draw.scss new file mode 100644 index 0000000..1b86419 --- /dev/null +++ b/src/styles/_table-draw.scss @@ -0,0 +1,86 @@ +@import 'src/styles/colors_texts'; + +.draw-dialog, +app-tables { + .tables-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 12px; + } + + .table { + background: #eee; + border-radius: 12px; + overflow: hidden; + } + + .table h4 { + background: $primaryDark; + color: white !important; + display: block; + text-align: center; + text-transform: uppercase; + -moz-border-radius-topleft: 12px; + -moz-border-radius-topright: 12px; + width: 100%; + padding: 12px; + box-sizing: border-box; + margin: 0; + } + + .table-content { + padding: 24px; + } + + .seat { + display: flex; + align-items: center; + padding: 4px; + color: $primaryDark; + + p { + font-size: 24px; + color: $primaryDark; + margin-top: 0 !important; + margin-bottom: 0 !important; + } + } + + .seat.fixed { + background: rgba(lime, 0.2); + } + + .seat.eliminated { + opacity: 0.3; + } + + .seat:hover { + opacity: 0.7; + cursor: pointer; + } + + .seat p { + margin-left: 12px; + } + + div.button { + border: solid 2px black; + background: white; + border-radius: 100%; + width: 20px; + height: 20px; + font-size: 15px; + display: flex; + justify-content: center; + align-items: center; + font-weight: bolder; + margin-left: 10px; + } + + button { + margin-right: 12px !important; + display: inherit !important; + width: fit-content !important; + } + +}