Skip to content

Commit

Permalink
DEV: design improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
Tschaika committed Jun 30, 2024
1 parent 10169ec commit fb7a5e6
Show file tree
Hide file tree
Showing 19 changed files with 334 additions and 259 deletions.
43 changes: 28 additions & 15 deletions src/app/dialogs/table-draw/table-draw-dialog.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<div class="draw-dialog">
<h2><i class="fa fa-random"></i> Table Draw</h2>

@if (tableDraw !== undefined && tableDraw !== null) {
@if (tableDraw() !== undefined && tableDraw() !== null) {
<div class="table-draw">
<button
id="reset-button"
mat-raised-button
color="warn"
[disabled]="!areAllPlayersAlive()"
(click)="reset()"
>
RESET TABLE DRAW
Expand All @@ -27,23 +28,23 @@ <h3>Total players:</h3>
<i class="fa fa-exclamation-triangle"></i>

<span>
{{ tableDraw().noOfPlayersToMove }} player
{{ tableDraw().noOfPlayersToMove }} Player

@if (tableDraw().noOfPlayersToMove > 1) {
<span>s</span>
s
}

from table {{ tableDraw().tableIndexToTake + 1 }} ha
from table {{ tableDraw().tableIndexToTake + 1 }}

@if (tableDraw().noOfPlayersToMove < 2) {
<i>s</i>
@if (tableDraw().noOfPlayersToMove === 1) {
has
}

@if (tableDraw().noOfPlayersToMove > 1) {
<i>ve</i>
have
}

to be moved to table {{ tableDraw().tableIndexToAdd + 1 }}!
to be moved to Table {{ tableDraw().tableIndexToAdd + 1 }}!
</span>

<button
Expand All @@ -60,12 +61,20 @@ <h3>Total players:</h3>
@for (p of tableDraw().playersToMove; track p) {
<div class="notification">
<i class="fa fa-exclamation-triangle"></i>

<span>
Player <strong>{{ p.player.name }}</strong> has to move from
table {{ tableDraw().tableIndexToTake + 1 }} to
table {{ tableDraw().tableIndexToAdd + 1 }}
</span>
<button mat-raised-button color="primary" (click)="playerMoved()">DONE</button>
Player <strong>{{ p.player.name }}</strong> has to move from
Table <strong>{{ tableDraw().tableIndexToTake + 1 }}</strong> to
Table <strong>{{ tableDraw().tableIndexToAdd + 1 }}</strong>
</span>

<button
mat-raised-button
color="primary"
(click)="playerMoved()"
>
DONE
</button>
</div>
}
}
Expand Down Expand Up @@ -108,6 +117,7 @@ <h3>SET UP</h3>
<button
mat-raised-button
color="accent"
[disabled]="!areAllPlayersAlive()"
(click)="setupEmptyTables()"
>
SET UP
Expand All @@ -117,6 +127,7 @@ <h3>SET UP</h3>
<button
mat-raised-button
color="primary"
[disabled]="!areAllPlayersAlive()"
(click)="confirmSetup()"
>
CONFIRM SETUP
Expand All @@ -133,7 +144,9 @@ <h3>DRAW</h3>

<div class="draw-wrapper">
<button
mat-raised-button color="primary"
mat-raised-button
color="accent"
[disabled]="!areAllPlayersAlive()"
(click)="draw()"
>
DRAW PLAYERS
Expand All @@ -143,7 +156,7 @@ <h3>DRAW</h3>

@if (tableDraw().state === TABLE_DRAW_STATE.DRAWN) {
<div class="bullet-title">
<div class="bullet">2</div>
<div class="bullet">3</div>
<h3>MANAGE</h3>
</div>
}
Expand Down
95 changes: 11 additions & 84 deletions src/app/dialogs/table-draw/table-draw-dialog.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,13 @@ h3 {
margin-bottom: 40px;

.fa {
font-size: 40px;
font-size: 32px;
margin-right: 20px;
}

span,
span * {
font-size: 32px;

font-size: 18px;
}

button {
Expand Down Expand Up @@ -92,11 +91,19 @@ div.bullet-title {
align-items: center;
border-bottom: solid 1px $primaryDark;
margin-bottom: 24px;
padding-top: 12px;
padding-bottom: 12px;

h3 {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0;
}
}

div.bullet {
color: white;
background: green;
background: #85BB65;
font-size: 18px;
width: 32px;
height: 32px;
Expand All @@ -117,83 +124,3 @@ button[mat-raised-button] {
max-height: 80vh;
}

.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;
}
8 changes: 7 additions & 1 deletion src/app/dialogs/table-draw/table-draw-dialog.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, inject, OnInit, WritableSignal } from '@angular/core';
import { Component, computed, inject, OnInit, WritableSignal } from '@angular/core';
import { TableDraw } from '../../shared/interfaces/table-draw.interface';
import { Player } from '../../shared/interfaces/player.interface';
import { TableDrawService } from '../../shared/services/table-draw.service';
Expand All @@ -10,6 +10,7 @@ import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { TableDrawStateComponent } from '../../shared/components/table-draw-state/table-draw-state.component';
import { MatButtonModule } from '@angular/material/button';
import { TimerStateService } from '../../timer/services/timer-state.service';

@Component({
selector: 'app-table-draw-dialog',
Expand All @@ -33,6 +34,11 @@ export class TableDrawDialogComponent implements OnInit {
readonly TABLE_DRAW_STATE = TableDrawState;

private tableDrawService: TableDrawService = inject(TableDrawService);
private state: TimerStateService = inject(TimerStateService);

areAllPlayersAlive = computed(() =>
this.state.tournament().players.length > 0 && this.state.tournament().finishes.length === 0
);

ngOnInit() {
this.tableDrawService.update();
Expand Down
18 changes: 10 additions & 8 deletions ...view/blind-structure-estimated-duration/blind-structure-estimated-duration.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,24 @@
class="fa fa-chevron-circle-down"
[class.rotate-180]="isExpanded()"
></i>
<h3>Estimated duration</h3>
<h4>
Estimated duration
</h4>
</div>

<div
class="expandable"
[class.expanded]="isExpanded()"
>
<div>
<h4>players</h4>
<h5>players</h5>
<input
type="number"
name="noOfPlayers"
[ngModel]="noOfPlayers()"
(ngModelChange)="noOfPlayers.set($event)"
>
<h4>start stack</h4>
<h5>start stack</h5>
<input
type="number"
name="startStack"
Expand All @@ -33,14 +35,14 @@ <h4>start stack</h4>
</div>

<div>
<h4>rebuys</h4>
<h5>rebuys</h5>
<input
type="number"
name="noOfRebuys"
[ngModel]="noOfRebuys()"
(ngModelChange)="noOfRebuys.set($event)"
>
<h4>rebuy stack</h4>
<h5>rebuy stack</h5>
<input
type="number"
name="rebuyStack"
Expand All @@ -50,14 +52,14 @@ <h4>rebuy stack</h4>
</div>

<div>
<h4>addons</h4>
<h5>addons</h5>
<input
type="number"
name="noOfAddons"
[ngModel]="noOfAddons()"
(ngModelChange)="noOfAddons.set($event)"
>
<h4>addon stack</h4>
<h5>addon stack</h5>
<input
type="number"
name="addonStack"
Expand All @@ -66,7 +68,7 @@ <h4>addon stack</h4>
>
</div>
<p class="estimation">
{{ estimatedDurationInMinutes() | time }}
Duration: {{ estimatedDurationInMinutes() | time }}
<small>
(+/- 1 Level)
</small>
Expand Down
Loading

0 comments on commit fb7a5e6

Please sign in to comment.