feat: move history, export import fixed, timer added
This commit is contained in:
shahdlala66
@@ -8,180 +8,6 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theme-toggle-container {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.switch__input {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.switch__label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
background-color: #2B2B2B;
|
||||
border: 5px solid #5B5B5B;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
|
||||
}
|
||||
|
||||
.switch__indicator {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) translateX(-72%);
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #7B7B7B;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 10px 0px 0 0 rgba(0, 0, 0, 0.2) inset;
|
||||
transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
|
||||
}
|
||||
|
||||
.switch__indicator::before,
|
||||
.switch__indicator::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 9999px;
|
||||
transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
|
||||
}
|
||||
|
||||
.switch__indicator::before {
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.switch__indicator::after {
|
||||
bottom: 8px;
|
||||
right: 6px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.switch__decoration {
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 9999px;
|
||||
animation: twinkle-stars 0.8s infinite -0.6s;
|
||||
transition: all 0.4s cubic-bezier(.46,.03,.52,.96);
|
||||
}
|
||||
|
||||
.switch__decoration::before,
|
||||
.switch__decoration::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.switch__decoration::before {
|
||||
top: -20px;
|
||||
left: 10px;
|
||||
opacity: 1;
|
||||
animation: twinkle-stars 0.6s infinite;
|
||||
}
|
||||
|
||||
.switch__decoration::after {
|
||||
top: -7px;
|
||||
left: 30px;
|
||||
animation: twinkle-stars 0.6s infinite -0.2s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-stars {
|
||||
50% { opacity: 0.2; }
|
||||
}
|
||||
|
||||
.switch__input:checked + .switch__label {
|
||||
background-color: #8FB5F5;
|
||||
border-color: #347CF8;
|
||||
}
|
||||
|
||||
.switch__input:checked + .switch__label .switch__indicator {
|
||||
background-color: #ECD21F;
|
||||
box-shadow: none;
|
||||
transform: translate(-50%, -50%) translateX(72%);
|
||||
}
|
||||
|
||||
.switch__input:checked + .switch__label .switch__indicator::before,
|
||||
.switch__input:checked + .switch__label .switch__indicator::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.switch__input:checked + .switch__label .switch__decoration {
|
||||
top: 50%;
|
||||
transform: translate(0%, -50%);
|
||||
animation: cloud 8s linear infinite;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.switch__input:checked + .switch__label .switch__decoration::before {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: -8px;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.switch__input:checked + .switch__label .switch__decoration::after {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 16px;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.switch__input:checked + .switch__label .switch__decoration,
|
||||
.switch__input:checked + .switch__label .switch__decoration::before,
|
||||
.switch__input:checked + .switch__label .switch__decoration::after {
|
||||
border-radius: 9999px 9999px 0 0;
|
||||
}
|
||||
|
||||
.switch__input:checked + .switch__label .switch__decoration::after {
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
|
||||
@keyframes cloud {
|
||||
0% { transform: translate(0%, -50%); }
|
||||
50% { transform: translate(-50%, -50%); }
|
||||
100% { transform: translate(0%, -50%); }
|
||||
}
|
||||
|
||||
.clouds-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -370,21 +196,6 @@ p {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.theme-toggle-container {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.switch__label {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.switch__indicator {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.welcome-shell {
|
||||
padding: var(--size-lg);
|
||||
}
|
||||
@@ -589,7 +400,7 @@ p {
|
||||
padding: var(--size-md-padding);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
background: white;
|
||||
background: var(--color-bg-input);
|
||||
color: var(--color-text-primary);
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
|
||||
@@ -58,6 +58,11 @@
|
||||
<span>Join Game</span>
|
||||
<small>{{ joiningGame ? 'Joining...' : 'Enter game ID' }}</small>
|
||||
</button>
|
||||
|
||||
<button type="button" class="mode mode-active" (click)="toggleImportGameForm()" [disabled]="importing">
|
||||
<span>Import Game</span>
|
||||
<small>{{ importing ? 'Importing...' : 'FEN or PGN' }}</small>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (showJoinGameForm) {
|
||||
@@ -92,6 +97,49 @@
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showImportGameForm) {
|
||||
<div class="import-game-form">
|
||||
<p>Import game</p>
|
||||
<div class="import-mode-group" role="radiogroup" aria-label="Import mode">
|
||||
<label class="import-mode-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="importMode"
|
||||
[checked]="importMode === 'fen'"
|
||||
(change)="setImportMode('fen')"
|
||||
[disabled]="importing"
|
||||
/>
|
||||
<span>FEN</span>
|
||||
</label>
|
||||
<label class="import-mode-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="importMode"
|
||||
[checked]="importMode === 'pgn'"
|
||||
(change)="setImportMode('pgn')"
|
||||
[disabled]="importing"
|
||||
/>
|
||||
<span>PGN</span>
|
||||
</label>
|
||||
</div>
|
||||
<textarea
|
||||
class="import-game-text"
|
||||
[(ngModel)]="importText"
|
||||
[placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'"
|
||||
[disabled]="importing"
|
||||
rows="5"
|
||||
></textarea>
|
||||
<button
|
||||
type="button"
|
||||
class="join-game-btn join"
|
||||
(click)="submitImportedGame()"
|
||||
[disabled]="importing || !importText.trim()"
|
||||
>
|
||||
{{ importing ? 'Importing...' : 'Done' }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (errorMessage) {
|
||||
<p class="error">{{ errorMessage }}</p>
|
||||
}
|
||||
|
||||
@@ -18,8 +18,12 @@ export class WelcomeComponent {
|
||||
errorMessage = '';
|
||||
showDifficultySelector = false;
|
||||
showJoinGameForm = false;
|
||||
showImportGameForm = false;
|
||||
gameIdInput = '';
|
||||
joiningGame = false;
|
||||
importing = false;
|
||||
importMode: 'fen' | 'pgn' = 'fen';
|
||||
importText = '';
|
||||
|
||||
constructor(
|
||||
private readonly router: Router,
|
||||
@@ -81,16 +85,60 @@ export class WelcomeComponent {
|
||||
toggleDifficultySelector(): void {
|
||||
this.showDifficultySelector = !this.showDifficultySelector;
|
||||
this.showJoinGameForm = false;
|
||||
this.showImportGameForm = false;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
toggleJoinGameForm(): void {
|
||||
this.showJoinGameForm = !this.showJoinGameForm;
|
||||
this.showDifficultySelector = false;
|
||||
this.showImportGameForm = false;
|
||||
this.errorMessage = '';
|
||||
this.gameIdInput = '';
|
||||
}
|
||||
|
||||
toggleImportGameForm(): void {
|
||||
this.showImportGameForm = !this.showImportGameForm;
|
||||
this.showDifficultySelector = false;
|
||||
this.showJoinGameForm = false;
|
||||
this.errorMessage = '';
|
||||
|
||||
if (!this.showImportGameForm) {
|
||||
this.importText = '';
|
||||
this.importMode = 'fen';
|
||||
}
|
||||
}
|
||||
|
||||
setImportMode(mode: 'fen' | 'pgn'): void {
|
||||
this.importMode = mode;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
submitImportedGame(): void {
|
||||
const trimmedImport = this.importText.trim();
|
||||
if (this.importing || !trimmedImport) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.errorMessage = '';
|
||||
this.importing = true;
|
||||
|
||||
const importRequest =
|
||||
this.importMode === 'fen' ? this.gameApi.importFen(trimmedImport) : this.gameApi.importPgn(trimmedImport);
|
||||
|
||||
importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
|
||||
next: (game) => {
|
||||
this.importText = '';
|
||||
this.showImportGameForm = false;
|
||||
void this.router.navigate(['/game', game.gameId]);
|
||||
},
|
||||
error: (error) => {
|
||||
const defaultMessage = this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
|
||||
this.errorMessage = getErrorMessage(error, defaultMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
joinGame(): void {
|
||||
if (this.joiningGame || !this.gameIdInput.trim()) {
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user