+
@for (i of parseCount(); track i) {
![Card Image]()
}
diff --git a/frontend/src/app/card/card.component.scss b/frontend/src/app/card/card.component.scss
index ac4fbd6..b167f77 100755
--- a/frontend/src/app/card/card.component.scss
+++ b/frontend/src/app/card/card.component.scss
@@ -7,14 +7,28 @@
width: 100px;
height: 140px;
- border: 2px solid black;
+ border: 1px solid #AAAAAA;
- background: #666;
- border-radius: 10px;
+ background: #111;
+ border-radius: 2px;
transition: all 0.3s;
cursor: pointer;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+
&.selected {
border: 4px solid white;
}
+
+ &.small {
+ width: 30px;
+ height: 30px;
+ margin: 1px;
+
+ img {
+ width: 20px;
+ }
+ }
}
\ No newline at end of file
diff --git a/frontend/src/app/card/card.component.ts b/frontend/src/app/card/card.component.ts
index cd59d9f..5f64a23 100755
--- a/frontend/src/app/card/card.component.ts
+++ b/frontend/src/app/card/card.component.ts
@@ -10,6 +10,7 @@ import { Card, CardColor, CardCount, CardShade, CardShape } from '../models/card
export class CardComponent implements OnInit {
@Input() card!: Card;
@Input() selected: boolean = false;
+ @Input() small: boolean = false;
shapeFile: string = '';
shapeWidth: number = 80;
diff --git a/frontend/src/app/game-list/game-list.component.html b/frontend/src/app/game-list/game-list.component.html
index 7ca3ad6..4e7900b 100644
--- a/frontend/src/app/game-list/game-list.component.html
+++ b/frontend/src/app/game-list/game-list.component.html
@@ -1,30 +1,24 @@
-
- Go back
-
-
-
-
-
\ No newline at end of file
diff --git a/frontend/src/app/game/game.component.html b/frontend/src/app/game/game.component.html
index 28532a8..aeb006c 100755
--- a/frontend/src/app/game/game.component.html
+++ b/frontend/src/app/game/game.component.html
@@ -1,8 +1,6 @@
| Game ID | -Started At | -Status | -Fails | -Deck Size | -||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Game ID | +Started At | +Status | +Fails | +Cards Remaining | +|
|---|---|---|---|---|---|
| {{ game.id }} | {{ game.startedAt | date: 'dd-MM-YYYY HH:mm' }} | {{ game.finishedAt ? 'Completed' : 'In Progress' }} | {{ game.fails }} | -{{ game.deck.length }} | +{{ game.deck.length + game.hand.length }} |
- Go back
-
-
-
+
+
@for(card of gameService.hand; track card.id) {
-
+
diff --git a/frontend/src/app/header/header.component.html b/frontend/src/app/header/header.component.html
index d549062..4ff0f4f 100644
--- a/frontend/src/app/header/header.component.html
+++ b/frontend/src/app/header/header.component.html
@@ -1,4 +1,4 @@
-
+
+
Deck Size {{ gameService.stats().size }} @@ -23,18 +24,21 @@ {{ gameService.stats().fails }}
- Started on + Started on {{ gameService.stats().dateStarted | date:'dd-MM-YYYY HH:mm' }}
-- -
- +
+
Upcoming Cards
+
+ @for(card of gameService.deck; track card.id) {
+
SET
diff --git a/frontend/src/app/header/header.component.scss b/frontend/src/app/header/header.component.scss index c111199..fc8c45e 100644 --- a/frontend/src/app/header/header.component.scss +++ b/frontend/src/app/header/header.component.scss @@ -1,52 +1,40 @@ -// .header-container { -// display: flex; -// flex-direction: column; -// align-items: center; -// padding: 20px; -// background-color: #333; -// color: #fff; -// } +header { + background-color: #111111; +} -// .logo-section { -// display: flex; -// flex-direction: column; -// align-items: center; -// margin-bottom: 20px; -// } +a { + background-image: linear-gradient( + to right, + #AAAAAA, + #AAAAAA 50%, + #FFFFFF 50% + ); + background-size: 200% 100%; + background-position: -100%; + display: inline-block; + // padding: 5px 0; + position: relative; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + transition: all 0.3s ease-in-out; +} -// .logo-image { -// width: 50px; -// } +a:before{ + content: ''; + background: #fff; + display: block; + position: absolute; + bottom: -3px; + left: 0; + width: 0; + height: 3px; + transition: all 0.3s ease-in-out; +} -// .logo-text { -// font-size: 24px; -// font-weight: bold; -// margin-top: 10px; -// } +a:hover { + background-position: 0; +} -// .main-nav ul { -// list-style: none; -// padding: 0; -// display: flex; -// gap: 20px; -// } - -// .main-nav .nav-link { -// color: #fff; -// text-decoration: none; -// font-size: 18px; -// } - -// .main-nav .nav-link:hover { -// text-decoration: underline; -// } - -// .new-game-button { -// background-color: #007bff; -// padding: 10px 20px; -// border-radius: 5px; -// } - -// .new-game-button:hover { -// background-color: #0056b3; -// } \ No newline at end of file +a:hover::before{ + width: 100%; +} \ No newline at end of file diff --git a/frontend/src/app/start-screen/start-screen.component.html b/frontend/src/app/start-screen/start-screen.component.html index 4770d9e..a25803d 100644 --- a/frontend/src/app/start-screen/start-screen.component.html +++ b/frontend/src/app/start-screen/start-screen.component.html @@ -1,25 +1,8 @@ -
-
-
-
-
-
- SETGame
-
-
-
-
+
+
\ No newline at end of file
diff --git a/frontend/src/app/start-screen/start-screen.component.scss b/frontend/src/app/start-screen/start-screen.component.scss
index 3de6177..e69de29 100644
--- a/frontend/src/app/start-screen/start-screen.component.scss
+++ b/frontend/src/app/start-screen/start-screen.component.scss
@@ -1,3 +0,0 @@
-.title {
- font-family: 'Courier New', Courier, monospace;
-}
\ No newline at end of file
diff --git a/frontend/src/app/start-screen/start-screen.component.ts b/frontend/src/app/start-screen/start-screen.component.ts
index 7d5165b..a66c627 100644
--- a/frontend/src/app/start-screen/start-screen.component.ts
+++ b/frontend/src/app/start-screen/start-screen.component.ts
@@ -1,23 +1,17 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
-import { CommonModule } from '@angular/common';
@Component({
selector: 'app-start-screen',
standalone: true,
- imports: [CommonModule],
+ imports: [],
templateUrl: './start-screen.component.html',
styleUrls: ['./start-screen.component.scss']
})
export class StartScreenComponent {
-
constructor(private router: Router) {}
-
- startNewGame() {
- this.router.navigate(['/game']);
- }
-
- viewGames() {
- this.router.navigate(['/game-list']);
+
+ routeTo(target: string) {
+ this.router.navigate([target]);
}
}
\ No newline at end of file
diff --git a/frontend/src/service/game/game.service.ts b/frontend/src/service/game/game.service.ts
index f7963da..3e85471 100755
--- a/frontend/src/service/game/game.service.ts
+++ b/frontend/src/service/game/game.service.ts
@@ -5,7 +5,7 @@ import axios from 'axios';
@Injectable({ providedIn: 'root' })
export class GameService {
- private deck: Card[] = [];
+ public deck: Card[] = [];
public hand: Card[] = [];
public gameId: number = 0;
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 16acd7f..fcf7dba 100755
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -3,3 +3,48 @@
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+button {
+ color: #fff;
+ cursor: pointer;
+ font-size:16px;
+ font-weight: 400;
+ line-height: 45px;
+ margin: 0 0 2em;
+ max-width: 160px;
+ position: relative;
+ text-decoration: none;
+ text-transform: uppercase;
+ width: 100%;
+
+ border: 0 solid;
+ box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
+ outline: 1px solid;
+ outline-color: rgba(255, 255, 255, .5);
+ outline-offset: 0px;
+ text-shadow: none;
+ transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
+
+ @media(min-width: 600px) {
+ margin: 0 1em 2em;
+ }
+
+ &:hover {
+ text-decoration: none;
+ border: 1px solid;
+ box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
+ outline-color: rgba(255, 255, 255, 0);
+ outline-offset: 15px;
+ text-shadow: 1px 1px 2px #427388;
+ }
+
+ &.red {
+ font-size: 14px;
+ width: auto;
+ padding-left: 10px;
+ padding-right: 10px;
+ line-height: 30px;
+ border: 1px solid rgba(140, 0, 0, .5);
+ outline-color: rgba(140, 0, 0, .5);
+ }
+}
\ No newline at end of file
+
+
+