Compare commits
6 Commits
0.2.2
...
fdc0f1d73b
| Author | SHA1 | Date | |
|---|---|---|---|
 shahdlala66
|
fdc0f1d73b | ||
|
shahdlala66
|
bc644c16e3 | ||
|
shahdlala66
|
5497997455 | ||
|
shahdlala66
|
53459648c6 | ||
|
shahdlala66
|
8c97a726a7 | ||
|
shahdlala66
|
2582f8e4d6 |
@@ -7,10 +7,10 @@
|
||||
.board-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
|
||||
overflow: hidden;
|
||||
background: #5A2C28;
|
||||
background: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.square {
|
||||
@@ -41,12 +41,13 @@
|
||||
width: 28%;
|
||||
height: 28%;
|
||||
border-radius: 50%;
|
||||
background: rgba(193, 158, 245, 0.75);
|
||||
border: 2px solid #5A2C28;
|
||||
background: var(--color-secondary-purple);
|
||||
opacity: 0.75;
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
}
|
||||
|
||||
.square.selected {
|
||||
outline: 3px solid #BA6D4B;
|
||||
outline: 3px solid var(--color-primary);
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
@@ -55,7 +56,7 @@
|
||||
width: 100%;
|
||||
display: block;
|
||||
object-fit: fill;
|
||||
border: 2px solid #5A2C28;
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 10px 10px;
|
||||
border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.piece {
|
||||
width: clamp(50px, 11cqh, 160px);
|
||||
height: clamp(50px, 11cqh, 160px);
|
||||
height: clamp(40px, 8cqh, 120px);
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
.input-card {
|
||||
background: var(--color-bg-card);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: var(--size-lg-padding);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-lg-gap);
|
||||
}
|
||||
|
||||
.move-card {
|
||||
padding: var(--size-sm-padding);
|
||||
gap: var(--size-sm-gap);
|
||||
}
|
||||
|
||||
.move-card input {
|
||||
min-height: 45px;
|
||||
padding: var(--size-md-padding);
|
||||
}
|
||||
|
||||
.input-card label {
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--size-xs);
|
||||
}
|
||||
|
||||
.input-card textarea {
|
||||
resize: vertical;
|
||||
height: 40px;
|
||||
background-color:lightcyan;
|
||||
border: 3px solid var(--color-border);
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.input-card input {
|
||||
min-width: unset;
|
||||
background-color:lightcyan;
|
||||
border: 3px solid var(--color-border);
|
||||
border-radius: var(--border-radius-sm);
|
||||
|
||||
}
|
||||
|
||||
.input-card .btn {
|
||||
border: var(--button-border);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--color-bg-button);
|
||||
color: var(--color-text-primary);
|
||||
padding: var(--button-padding);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.input-card .btn:hover {
|
||||
background: var(--color-bg-button-hover);
|
||||
color: var(--color-text-button-hover);
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<section [ngClass]="['input-card', cardClass]">
|
||||
<label>{{ label }}</label>
|
||||
|
||||
@if (inputType === 'textarea') {
|
||||
<textarea
|
||||
#textareaInput
|
||||
[placeholder]="placeholder"
|
||||
[value]="value"
|
||||
[rows]="rows"
|
||||
(input)="onValueChange(textareaInput.value)"
|
||||
class="form-input"
|
||||
></textarea>
|
||||
} @else {
|
||||
<input
|
||||
#textInput
|
||||
type="text"
|
||||
[placeholder]="placeholder"
|
||||
[value]="value"
|
||||
(input)="onValueChange(textInput.value)"
|
||||
class="form-input"
|
||||
/>
|
||||
}
|
||||
|
||||
<button type="button" class="btn w-100" (click)="onButtonClick()">
|
||||
{{ buttonLabel }}
|
||||
</button>
|
||||
|
||||
@if (hintText) {
|
||||
<p class="hint-text">{{ hintText }}</p>
|
||||
}
|
||||
</section>
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-input-card',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
templateUrl: './input-card.component.html',
|
||||
styleUrl: './input-card.component.css',
|
||||
})
|
||||
export class InputCardComponent {
|
||||
@Input() label: string = '';
|
||||
@Input() placeholder: string = '';
|
||||
@Input() buttonLabel: string = 'Send';
|
||||
@Input() inputType: 'input' | 'textarea' = 'input';
|
||||
@Input() value: string = '';
|
||||
@Input() cardClass: string = '';
|
||||
@Input() hintText: string = '';
|
||||
@Input() rows: number = 4;
|
||||
|
||||
@Output() valueChange = new EventEmitter<string>();
|
||||
@Output() buttonClick = new EventEmitter<void>();
|
||||
|
||||
onValueChange(newValue: string): void {
|
||||
this.value = newValue;
|
||||
this.valueChange.emit(newValue);
|
||||
}
|
||||
|
||||
onButtonClick(): void {
|
||||
this.buttonClick.emit();
|
||||
}
|
||||
}
|
||||
@@ -1,38 +1,38 @@
|
||||
.game-shell {
|
||||
min-height: 100dvh;
|
||||
padding: clamp(0.75rem, 2vw, 1.5rem);
|
||||
padding: clamp(var(--size-md), 2vw, var(--size-xl));
|
||||
}
|
||||
|
||||
.game-card {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: #F3C8A0;
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 12px;
|
||||
padding: clamp(1rem, 2vw, 1.5rem);
|
||||
box-shadow: 0 8px 24px rgba(90, 44, 40, 0.2);
|
||||
background: var(--color-bg-main);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: clamp(var(--size-lg), 2vw, var(--size-xl));
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--size-xl);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #5A2C28;
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
color: var(--color-text-primary);
|
||||
margin: 0 0 var(--size-md);
|
||||
font-size: var(--heading-h1);
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: #5A2C28;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #5A2C28;
|
||||
margin-bottom: var(--size-sm);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -42,25 +42,19 @@ h2 {
|
||||
}
|
||||
|
||||
.top-section {
|
||||
background: #F3C8A0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #5A2C28;
|
||||
display: grid;
|
||||
gap: var(--size-md);
|
||||
margin-top: var(--size-sm);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.move-form {
|
||||
align-items: center;
|
||||
.move-card {
|
||||
padding: var(--size-lg-padding);
|
||||
}
|
||||
|
||||
.move-form label {
|
||||
color: #5A2C28;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.board-hint {
|
||||
color: #5A2C28;
|
||||
margin: 0;
|
||||
.move-card .btn {
|
||||
align-self: flex-start;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.center-column {
|
||||
@@ -68,72 +62,22 @@ h2 {
|
||||
}
|
||||
|
||||
.board-section {
|
||||
background: #B9DAD1;
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 10px;
|
||||
padding: clamp(0.5rem, 1vw, 1rem);
|
||||
background: var(--color-bg-board);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: clamp(var(--size-sm), 1vw, var(--size-lg));
|
||||
min-height: 400px;
|
||||
container-type: size;
|
||||
}
|
||||
|
||||
.import-card {
|
||||
background: #E1EAA9;
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.import-card label {
|
||||
color: #5A2C28;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.import-card textarea {
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 8px;
|
||||
background: #B9DAD1;
|
||||
padding: 0.6rem 0.75rem;
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.import-card input {
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 8px;
|
||||
background: #B9DAD1;
|
||||
padding: 0.6rem 0.75rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 8px;
|
||||
background: #C19EF5;
|
||||
color: #5A2C28;
|
||||
padding: 0.6rem 1rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #BA6D4B;
|
||||
color: #F3C8A0;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 8px;
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: var(--border-radius-sm);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.game-card {
|
||||
padding: clamp(0.75rem, 1.5vw, 1rem);
|
||||
padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
|
||||
}
|
||||
|
||||
.board-section {
|
||||
@@ -142,26 +86,26 @@ h2 {
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: clamp(1.25rem, 3vw, 1.75rem);
|
||||
font-size: var(--heading-h1-tablet);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.game-shell {
|
||||
padding: clamp(0.5rem, 1.5vw, 1rem);
|
||||
padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
|
||||
}
|
||||
|
||||
.game-card {
|
||||
padding: clamp(0.5rem, 1vw, 0.75rem);
|
||||
padding: clamp(var(--size-sm), 1vw, var(--size-md));
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: var(--size-lg);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
font-size: var(--heading-h1-mobile);
|
||||
}
|
||||
|
||||
.meta {
|
||||
@@ -169,61 +113,31 @@ h2 {
|
||||
}
|
||||
|
||||
.top-section {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.move-form {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.move-form label {
|
||||
flex-basis: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: var(--size-xs);
|
||||
margin-bottom: var(--size-xs);
|
||||
}
|
||||
|
||||
.board-section {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.import-card {
|
||||
padding: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.import-card label {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.import-card textarea,
|
||||
.import-card input {
|
||||
min-height: 70px;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.game-shell {
|
||||
padding: 0.5rem;
|
||||
padding: var(--size-sm);
|
||||
}
|
||||
|
||||
.game-card {
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
padding: var(--size-sm);
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: var(--size-md);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.1rem;
|
||||
font-size: var(--heading-h1-small);
|
||||
}
|
||||
|
||||
.meta {
|
||||
@@ -231,23 +145,11 @@ h2 {
|
||||
}
|
||||
|
||||
.top-section {
|
||||
padding: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: var(--size-xs-gap);
|
||||
margin-bottom: var(--size-xs);
|
||||
}
|
||||
|
||||
.board-section {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.import-card {
|
||||
padding: 0.5rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.import-card textarea,
|
||||
.import-card input {
|
||||
min-height: 50px;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,37 +13,21 @@
|
||||
<div class="row g-3">
|
||||
<!-- Left Sidebar - FEN Import -->
|
||||
<div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
|
||||
<aside class="import-card fen-card h-100">
|
||||
<label for="fenImport">Import FEN</label>
|
||||
<textarea
|
||||
id="fenImport"
|
||||
name="fenImport"
|
||||
[(ngModel)]="facade.fenInput"
|
||||
rows="4"
|
||||
placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
|
||||
></textarea>
|
||||
<button type="button" class="btn w-100" (click)="facade.importFen()">Load FEN</button>
|
||||
</aside>
|
||||
<app-input-card
|
||||
label="Import FEN"
|
||||
placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
|
||||
buttonLabel="Load FEN"
|
||||
inputType="textarea"
|
||||
[value]="facade.fenInput"
|
||||
cardClass="fen-card"
|
||||
(valueChange)="facade.fenInput = $event"
|
||||
(buttonClick)="facade.importFen()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Center - Chess Board -->
|
||||
<div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
|
||||
<section class="center-column d-flex flex-column h-100">
|
||||
<div class="top-section mb-3">
|
||||
<form class="move-form d-flex flex-wrap gap-2 mb-2" (ngSubmit)="facade.submitMove()">
|
||||
<label for="uciMove" class="form-label mb-0">Play move (UCI)</label>
|
||||
<input
|
||||
id="uciMove"
|
||||
name="uciMove"
|
||||
class="form-control flex-grow-1"
|
||||
[(ngModel)]="facade.moveInput"
|
||||
placeholder="e2e4"
|
||||
/>
|
||||
<button type="submit" class="btn">Send Move</button>
|
||||
</form>
|
||||
<p class="board-hint small mb-0">Click your piece to highlight legal targets.</p>
|
||||
</div>
|
||||
|
||||
<div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
|
||||
<app-chess-board
|
||||
[fen]="facade.state.fen"
|
||||
@@ -52,22 +36,35 @@
|
||||
(squareSelected)="facade.onBoardSquareSelected($event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section class="top-section">
|
||||
<app-input-card
|
||||
label="Play move (UCI)"
|
||||
placeholder="e2e4"
|
||||
buttonLabel="Send Move"
|
||||
inputType="input"
|
||||
[value]="facade.moveInput"
|
||||
cardClass="move-card"
|
||||
hintText="Click your piece to highlight legal targets."
|
||||
(valueChange)="facade.moveInput = $event"
|
||||
(buttonClick)="facade.submitMove()"
|
||||
/>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Right Sidebar - PGN Import -->
|
||||
<div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
|
||||
<aside class="import-card pgn-card h-100">
|
||||
<label for="pgnImport">Import PGN</label>
|
||||
<textarea
|
||||
id="pgnImport"
|
||||
name="pgnImport"
|
||||
[(ngModel)]="facade.pgnInput"
|
||||
rows="4"
|
||||
placeholder="1. e4 e5 2. Nf3 Nc6 *"
|
||||
></textarea>
|
||||
<button type="button" class="btn w-100" (click)="facade.importPgn()">Load PGN</button>
|
||||
</aside>
|
||||
<app-input-card
|
||||
label="Import PGN"
|
||||
placeholder="1. e4 e5 2. Nf3 Nc6 *"
|
||||
buttonLabel="Load PGN"
|
||||
inputType="textarea"
|
||||
[value]="facade.pgnInput"
|
||||
cardClass="pgn-card"
|
||||
(valueChange)="facade.pgnInput = $event"
|
||||
(buttonClick)="facade.importPgn()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,12 +4,13 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
|
||||
import { InputCardComponent } from '../../components/input-card/input-card.component';
|
||||
import { GameFacade } from './game.facade';
|
||||
|
||||
@Component({
|
||||
selector: 'app-game',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, RouterLink, ChessBoardComponent],
|
||||
imports: [CommonModule, FormsModule, RouterLink, ChessBoardComponent, InputCardComponent],
|
||||
providers: [GameFacade],
|
||||
templateUrl: './game.component.html',
|
||||
styleUrl: './game.component.css'
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { DestroyRef, Injectable, OnDestroy, inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { interval, startWith, Subscription, switchMap } from 'rxjs';
|
||||
import { interval, startWith, Subscription, switchMap, delay } from 'rxjs';
|
||||
import { getPieceAtSquare, isPieceColor } from '../../core/chess/fen.utils';
|
||||
import { getErrorMessage } from '../../core/http/error-message.util';
|
||||
import { GameFull, GameState, GameStreamEvent, LegalMove } from '../../models/game.models';
|
||||
@@ -25,16 +25,37 @@ export class GameFacade implements OnDestroy {
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
private streamSubscription: Subscription | null = null;
|
||||
private pollSubscription: Subscription | null = null;
|
||||
private botMoveSubscription: Subscription | null = null;
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.streamSubscription?.unsubscribe();
|
||||
this.pollSubscription?.unsubscribe();
|
||||
this.botMoveSubscription?.unsubscribe();
|
||||
}
|
||||
|
||||
get state(): GameState | null {
|
||||
return this.game?.state ?? null;
|
||||
}
|
||||
|
||||
private isBotPlayer(playerId: string): boolean {
|
||||
return playerId.startsWith('bot-');
|
||||
}
|
||||
|
||||
private isPlayingAgainstBot(): boolean {
|
||||
if (!this.game) {
|
||||
return false;
|
||||
}
|
||||
return this.isBotPlayer(this.game.white.id) || this.isBotPlayer(this.game.black.id);
|
||||
}
|
||||
|
||||
private isCurrentPlayerBot(): boolean {
|
||||
if (!this.game || !this.state) {
|
||||
return false;
|
||||
}
|
||||
const currentPlayer = this.state.turn === 'white' ? this.game.white : this.game.black;
|
||||
return this.isBotPlayer(currentPlayer.id);
|
||||
}
|
||||
|
||||
setGameId(gameId: string): void {
|
||||
this.gameId = gameId;
|
||||
this.loadGame();
|
||||
@@ -94,6 +115,7 @@ export class GameFacade implements OnDestroy {
|
||||
}
|
||||
this.moveInput = '';
|
||||
this.clearSelection();
|
||||
this.tryMakeBotMove();
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Move rejected.');
|
||||
@@ -153,6 +175,7 @@ export class GameFacade implements OnDestroy {
|
||||
this.clearSelection();
|
||||
this.streamSubscription?.unsubscribe();
|
||||
this.pollSubscription?.unsubscribe();
|
||||
this.botMoveSubscription?.unsubscribe();
|
||||
this.pollSubscription = null;
|
||||
|
||||
this.gameApi
|
||||
@@ -163,6 +186,7 @@ export class GameFacade implements OnDestroy {
|
||||
this.game = game;
|
||||
this.loading = false;
|
||||
this.startStream();
|
||||
this.tryMakeBotMove();
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, `Could not load game ${this.gameId}.`);
|
||||
@@ -205,6 +229,7 @@ export class GameFacade implements OnDestroy {
|
||||
this.game = game;
|
||||
if (previousMoves !== game.state.moves.join(',')) {
|
||||
this.clearSelection();
|
||||
this.tryMakeBotMove();
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -214,6 +239,7 @@ export class GameFacade implements OnDestroy {
|
||||
if (event.type === 'gameFull') {
|
||||
this.game = event.game;
|
||||
this.clearSelection();
|
||||
this.tryMakeBotMove();
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -222,6 +248,7 @@ export class GameFacade implements OnDestroy {
|
||||
this.game = { ...this.game, state: event.state };
|
||||
if (event.state.moves.length !== moveCountBefore) {
|
||||
this.clearSelection();
|
||||
this.tryMakeBotMove();
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -231,6 +258,45 @@ export class GameFacade implements OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
private tryMakeBotMove(): void {
|
||||
if (!this.isPlayingAgainstBot() || !this.isCurrentPlayerBot() || !this.state) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.botMoveSubscription?.unsubscribe();
|
||||
this.botMoveSubscription = this.gameApi
|
||||
.getLegalMoves(this.gameId)
|
||||
.pipe(
|
||||
delay(1000),
|
||||
takeUntilDestroyed(this.destroyRef)
|
||||
)
|
||||
.subscribe({
|
||||
next: (response) => {
|
||||
if (response.moves.length === 0) {
|
||||
return;
|
||||
}
|
||||
const botMove = response.moves[Math.floor(Math.random() * response.moves.length)];
|
||||
this.gameApi
|
||||
.makeMove(this.gameId, botMove.uci)
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: (state) => {
|
||||
if (this.game) {
|
||||
this.game = { ...this.game, state };
|
||||
}
|
||||
this.clearSelection();
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Bot move failed.');
|
||||
}
|
||||
});
|
||||
},
|
||||
error: () => {
|
||||
this.errorMessage = 'Could not get legal moves for bot move.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private clearSelection(): void {
|
||||
this.selectedSquare = null;
|
||||
this.selectedSquareMoves = [];
|
||||
|
||||
@@ -2,98 +2,99 @@
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 2rem;
|
||||
padding: var(--size-xl);
|
||||
}
|
||||
|
||||
.welcome-card {
|
||||
width: min(900px, 100%);
|
||||
border-radius: 12px;
|
||||
border: 2px solid #5A2C28;
|
||||
background: #F3C8A0;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 8px 24px rgba(90, 44, 40, 0.2);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
background: var(--color-bg-main);
|
||||
padding: var(--size-xl-padding);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0.25rem;
|
||||
color: #5A2C28;
|
||||
margin: 0 0 var(--size-xs);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--heading-h1);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
margin: 0 0 var(--size-lg);
|
||||
}
|
||||
|
||||
.mode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 1rem;
|
||||
gap: var(--size-xl-gap);
|
||||
}
|
||||
|
||||
.mode {
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: var(--size-lg-padding);
|
||||
text-align: left;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
gap: var(--size-xs);
|
||||
}
|
||||
|
||||
.mode span {
|
||||
font-size: 1.15rem;
|
||||
color: #5A2C28;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.mode small {
|
||||
color: #5A2C28;
|
||||
color: var(--color-text-primary);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.mode-active {
|
||||
background: #B9DAD1;
|
||||
background: var(--color-secondary-mint);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mode-active:hover:enabled {
|
||||
background: #B9C2DA;
|
||||
background: var(--color-secondary-blue);
|
||||
}
|
||||
|
||||
.mode-disabled {
|
||||
background: #E1EAA9;
|
||||
background: var(--color-bg-card);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #5A2C28;
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 700;
|
||||
margin-top: 1rem;
|
||||
margin-top: var(--size-xl);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.welcome-shell {
|
||||
padding: 1rem;
|
||||
padding: var(--size-lg);
|
||||
}
|
||||
|
||||
.welcome-card {
|
||||
padding: 1.5rem;
|
||||
padding: var(--size-xl);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
font-size: var(--heading-h1-mobile);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.875rem;
|
||||
margin: 0 0 1rem;
|
||||
margin: 0 0 var(--size-lg);
|
||||
}
|
||||
|
||||
.mode-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 0.75rem;
|
||||
gap: var(--size-md-gap);
|
||||
}
|
||||
|
||||
.mode {
|
||||
padding: 0.75rem;
|
||||
gap: 0.15rem;
|
||||
padding: var(--size-md-padding);
|
||||
gap: var(--size-xs-gap);
|
||||
}
|
||||
|
||||
.mode span {
|
||||
@@ -111,22 +112,22 @@ p {
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.welcome-shell {
|
||||
padding: 0.5rem;
|
||||
padding: var(--size-sm);
|
||||
}
|
||||
|
||||
.welcome-card {
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
padding: var(--size-lg-padding);
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.25rem;
|
||||
margin: 0 0 0.15rem;
|
||||
font-size: var(--heading-h1-small);
|
||||
margin: 0 0 var(--size-xs);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.8rem;
|
||||
margin: 0 0 0.75rem;
|
||||
margin: 0 0 var(--size-md);
|
||||
}
|
||||
|
||||
.mode-grid {
|
||||
@@ -134,10 +135,163 @@ p {
|
||||
}
|
||||
|
||||
.mode {
|
||||
padding: 0.65rem;
|
||||
padding: var(--size-md-padding);
|
||||
}
|
||||
|
||||
.mode span {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
.difficulty-selector {
|
||||
grid-column: 1 / -1;
|
||||
background: var(--color-bg-card);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: var(--size-lg-padding);
|
||||
margin: var(--size-md) 0;
|
||||
}
|
||||
|
||||
.difficulty-selector p {
|
||||
margin: 0 0 var(--size-md);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.difficulty-buttons {
|
||||
display: flex;
|
||||
gap: var(--size-md-gap);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.difficulty-btn {
|
||||
flex: 1;
|
||||
min-width: 80px;
|
||||
padding: var(--size-md-padding);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.difficulty-btn.easy {
|
||||
background: var(--color-success-light, #d4edda);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.difficulty-btn.easy:hover:enabled {
|
||||
background: var(--color-success, #28a745);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.difficulty-btn.medium {
|
||||
background: var(--color-warning-light, #fff3cd);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.difficulty-btn.medium:hover:enabled {
|
||||
background: var(--color-warning, #ffc107);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.difficulty-btn.hard {
|
||||
background: var(--color-danger-light, #f8d7da);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.difficulty-btn.hard:hover:enabled {
|
||||
background: var(--color-danger, #dc3545);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.join-game-form {
|
||||
grid-column: 1 / -1;
|
||||
background: var(--color-bg-card);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: var(--size-lg-padding);
|
||||
margin: var(--size-md) 0;
|
||||
}
|
||||
|
||||
.join-game-form p {
|
||||
margin: 0 0 var(--size-md);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.join-game-input-group {
|
||||
display: flex;
|
||||
gap: var(--size-md-gap);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.join-game-input {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
padding: var(--size-md-padding);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
background: white;
|
||||
color: var(--color-text-primary);
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.join-game-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-secondary-mint);
|
||||
box-shadow: 0 0 0 3px rgba(185, 218, 209, 0.2);
|
||||
}
|
||||
|
||||
.join-game-input:disabled {
|
||||
background: var(--color-bg-card);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.join-game-btn {
|
||||
padding: var(--size-md-padding) var(--size-lg);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.join-game-btn.join {
|
||||
background: var(--color-secondary-mint);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.join-game-btn.join:hover:enabled {
|
||||
background: var(--color-secondary-blue);
|
||||
}
|
||||
|
||||
.join-game-btn.join:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.join-game-btn.cancel {
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.join-game-btn.cancel:hover:enabled {
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
.join-game-btn.cancel:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.difficulty-btn.hard:hover:enabled {
|
||||
background: var(--color-danger, #dc3545);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.difficulty-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -4,22 +4,71 @@
|
||||
<p>Pick a mode to begin.</p>
|
||||
|
||||
<div class="mode-grid">
|
||||
<button type="button" class="mode mode-disabled" disabled>
|
||||
<button type="button" class="mode mode-active" (click)="toggleDifficultySelector()" [disabled]="creating">
|
||||
<span>Bot</span>
|
||||
<small>Coming soon</small>
|
||||
<small>{{ creating ? 'Creating game...' : 'Choose difficulty' }}</small>
|
||||
</button>
|
||||
|
||||
@if (showDifficultySelector) {
|
||||
<div class="difficulty-selector">
|
||||
<p>Select difficulty:</p>
|
||||
<div class="difficulty-buttons">
|
||||
<button type="button" class="difficulty-btn easy" (click)="startVsBot('easy')" [disabled]="creating">
|
||||
Easy
|
||||
</button>
|
||||
<button type="button" class="difficulty-btn medium" (click)="startVsBot('medium')" [disabled]="creating">
|
||||
Medium
|
||||
</button>
|
||||
<button type="button" class="difficulty-btn hard" (click)="startVsBot('hard')" [disabled]="creating">
|
||||
Hard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<button type="button" class="mode mode-active" (click)="startOneVsOne()" [disabled]="creating">
|
||||
<span>1 vs 1</span>
|
||||
<small>{{ creating ? 'Creating game...' : 'Start now' }}</small>
|
||||
</button>
|
||||
|
||||
<button type="button" class="mode mode-disabled" disabled>
|
||||
<span>Future Technique</span>
|
||||
<small>Placeholder</small>
|
||||
<button type="button" class="mode mode-active" (click)="toggleJoinGameForm()" [disabled]="joiningGame">
|
||||
<span>Join Game</span>
|
||||
<small>{{ joiningGame ? 'Joining...' : 'Enter game ID' }}</small>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (showJoinGameForm) {
|
||||
<div class="join-game-form">
|
||||
<p>Enter the game ID:</p>
|
||||
<div class="join-game-input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="join-game-input"
|
||||
[(ngModel)]="gameIdInput"
|
||||
placeholder="Paste game ID here"
|
||||
[disabled]="joiningGame"
|
||||
(keyup.enter)="joinGame()"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="join-game-btn join"
|
||||
(click)="joinGame()"
|
||||
[disabled]="joiningGame || !gameIdInput.trim()"
|
||||
>
|
||||
{{ joiningGame ? 'Joining...' : 'Join' }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="join-game-btn cancel"
|
||||
(click)="clearJoinGameForm()"
|
||||
[disabled]="joiningGame"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (errorMessage) {
|
||||
<p class="error">{{ errorMessage }}</p>
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { finalize } from 'rxjs';
|
||||
import { getErrorMessage } from '../../core/http/error-message.util';
|
||||
@@ -8,13 +9,17 @@ import { GameApiService } from '../../services/game-api.service';
|
||||
@Component({
|
||||
selector: 'app-welcome',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
imports: [CommonModule, FormsModule],
|
||||
templateUrl: './welcome.component.html',
|
||||
styleUrl: './welcome.component.css'
|
||||
})
|
||||
export class WelcomeComponent {
|
||||
creating = false;
|
||||
errorMessage = '';
|
||||
showDifficultySelector = false;
|
||||
showJoinGameForm = false;
|
||||
gameIdInput = '';
|
||||
joiningGame = false;
|
||||
|
||||
constructor(
|
||||
private readonly router: Router,
|
||||
@@ -41,4 +46,66 @@ export class WelcomeComponent {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
startVsBot(difficulty: 'easy' | 'medium' | 'hard'): void {
|
||||
if (this.creating) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.errorMessage = '';
|
||||
this.creating = true;
|
||||
this.showDifficultySelector = false;
|
||||
|
||||
this.gameApi
|
||||
.createGameVsBot(difficulty)
|
||||
.pipe(finalize(() => (this.creating = false)))
|
||||
.subscribe({
|
||||
next: (game) => {
|
||||
void this.router.navigate(['/game', game.gameId]);
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Unable to create a game against bot.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggleDifficultySelector(): void {
|
||||
this.showDifficultySelector = !this.showDifficultySelector;
|
||||
this.showJoinGameForm = false;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
toggleJoinGameForm(): void {
|
||||
this.showJoinGameForm = !this.showJoinGameForm;
|
||||
this.showDifficultySelector = false;
|
||||
this.errorMessage = '';
|
||||
this.gameIdInput = '';
|
||||
}
|
||||
|
||||
joinGame(): void {
|
||||
if (this.joiningGame || !this.gameIdInput.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.errorMessage = '';
|
||||
this.joiningGame = true;
|
||||
|
||||
this.gameApi
|
||||
.getGame(this.gameIdInput.trim())
|
||||
.pipe(finalize(() => (this.joiningGame = false)))
|
||||
.subscribe({
|
||||
next: (game) => {
|
||||
void this.router.navigate(['/game', game.gameId]);
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
clearJoinGameForm(): void {
|
||||
this.showJoinGameForm = false;
|
||||
this.gameIdInput = '';
|
||||
this.errorMessage = '';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,8 @@ import {
|
||||
GameFull,
|
||||
GameState,
|
||||
GameStreamEvent,
|
||||
LegalMovesResponse
|
||||
LegalMovesResponse,
|
||||
PlayerInfo
|
||||
} from '../models/game.models';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
@@ -21,6 +22,25 @@ export class GameApiService {
|
||||
return this.http.post<GameFull>(`${this.apiBase}/api/board/game`, {});
|
||||
}
|
||||
|
||||
createGameVsBot(difficulty: 'easy' | 'medium' | 'hard' = 'medium'): Observable<GameFull> {
|
||||
const playerColor = Math.random() > 0.5 ? 'white' : 'black';
|
||||
const playerInfo: PlayerInfo = {
|
||||
id: `player-${Date.now()}`,
|
||||
displayName: 'You'
|
||||
};
|
||||
const botInfo: PlayerInfo = {
|
||||
id: `bot-${difficulty}`,
|
||||
displayName: `Bot (${difficulty})`
|
||||
};
|
||||
|
||||
const payload =
|
||||
playerColor === 'white'
|
||||
? { white: playerInfo, black: botInfo }
|
||||
: { white: botInfo, black: playerInfo };
|
||||
|
||||
return this.http.post<GameFull>(`${this.apiBase}/api/board/game`, payload);
|
||||
}
|
||||
|
||||
getGame(gameId: string): Observable<GameFull> {
|
||||
return this.http.get<GameFull>(`${this.apiBase}/api/board/game/${gameId}`);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
/* ========================================
|
||||
COLOR VARIABLES - Semantic Naming
|
||||
======================================== */
|
||||
|
||||
:root {
|
||||
/* Primary Colors */
|
||||
--color-primary: #BA6D4B;
|
||||
--color-primary-dark: #5A2C28;
|
||||
--color-primary-light: #F3C8A0;
|
||||
|
||||
/* Secondary Colors */
|
||||
--color-secondary-mint: #B9DAD1;
|
||||
--color-secondary-blue: #B9C2DA;
|
||||
--color-secondary-purple: #C19EF5;
|
||||
--color-secondary-lime: #E1EAA9;
|
||||
|
||||
/* Functional Colors */
|
||||
--color-bg-main: #F3C8A0;
|
||||
--color-bg-board: #B9DAD1;
|
||||
--color-bg-card: #E1EAA9;
|
||||
--color-bg-input: #B9DAD1;
|
||||
--color-bg-input-focus: #B9C2DA;
|
||||
--color-bg-button: #C19EF5;
|
||||
--color-bg-button-hover: #BA6D4B;
|
||||
|
||||
--color-text-primary: #5A2C28;
|
||||
--color-text-button-hover: #F3C8A0;
|
||||
--color-border: #5A2C28;
|
||||
|
||||
/* ========================================
|
||||
TYPOGRAPHY SIZES
|
||||
======================================== */
|
||||
|
||||
/* Header Sizes */
|
||||
--heading-h1: clamp(1.5rem, 4vw, 2rem);
|
||||
--heading-h1-tablet: clamp(1.25rem, 3vw, 1.75rem);
|
||||
--heading-h1-mobile: 1.25rem;
|
||||
--heading-h1-small: 1.1rem;
|
||||
|
||||
--heading-h2: clamp(1.5rem, 4vw, 2rem);
|
||||
|
||||
/* ========================================
|
||||
SPACING SIZES (XS, SM, MD, LG, XL)
|
||||
======================================== */
|
||||
|
||||
/* Extra Small - Minimal spacing */
|
||||
--size-xs: 0.25rem;
|
||||
--size-xs-padding: 0.4rem;
|
||||
--size-xs-gap: 0.15rem;
|
||||
|
||||
/* Small - Compact spacing */
|
||||
--size-sm: 0.5rem;
|
||||
--size-sm-padding: 0.5rem;
|
||||
--size-sm-gap: 0.35rem;
|
||||
|
||||
/* Medium - Default spacing */
|
||||
--size-md: 0.75rem;
|
||||
--size-md-padding: 0.6rem 0.75rem;
|
||||
--size-md-gap: 0.5rem;
|
||||
|
||||
/* Large - Generous spacing */
|
||||
--size-lg: 1rem;
|
||||
--size-lg-padding: 1rem;
|
||||
--size-lg-gap: 0.75rem;
|
||||
|
||||
/* Extra Large - Maximum spacing */
|
||||
--size-xl: 1.5rem;
|
||||
--size-xl-padding: 1.5rem;
|
||||
--size-xl-gap: 1rem;
|
||||
|
||||
/* ========================================
|
||||
BORDER & RADIUS
|
||||
======================================== */
|
||||
--border-width: 2px;
|
||||
--border-radius-sm: 8px;
|
||||
--border-radius-md: 10px;
|
||||
--border-radius-lg: 12px;
|
||||
|
||||
/* ========================================
|
||||
FORM ELEMENTS
|
||||
======================================== */
|
||||
--form-input-padding: 0.6rem 0.75rem;
|
||||
--form-input-border: var(--border-width) solid var(--color-border);
|
||||
--form-input-radius: var(--border-radius-md);
|
||||
|
||||
--button-padding: 0.6rem 1rem;
|
||||
--button-border: var(--border-width) solid var(--color-border);
|
||||
--button-radius: var(--border-radius-sm);
|
||||
|
||||
/* ========================================
|
||||
SHADOWS
|
||||
======================================== */
|
||||
--shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
|
||||
}
|
||||
+3
-12
@@ -1,15 +1,6 @@
|
||||
@import 'styles-variables.css';
|
||||
@import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
:root {
|
||||
--warm-primary: #BA6D4B;
|
||||
--warm-dark: #5A2C28;
|
||||
--warm-light: #F3C8A0;
|
||||
--cool-mint: #B9DAD1;
|
||||
--cool-blue: #B9C2DA;
|
||||
--cool-purple: #C19EF5;
|
||||
--cool-lime: #E1EAA9;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -19,8 +10,8 @@ body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
font-family: "Comic Sans MS", "Comic Sans", cursive;
|
||||
background: linear-gradient(160deg, var(--warm-light), var(--cool-mint));
|
||||
color: var(--warm-dark);
|
||||
background: linear-gradient(160deg, var(--color-primary-light), var(--color-secondary-mint));
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
button,
|
||||
|
||||
Reference in New Issue
Block a user