Merge pull request #23 from i3ene/frontend-design

Frontend design

api/src/controllers/game.controller.ts

@@ -7,6 +7,12 @@ export namespace GameController {
   export const games: Map<string, Game> = new Map();
 
   export async function join(io: Server, socket: Socket, room: string) {
+    const game = games.get(room);
+    if (game && game.players.map.size >= 2) {
+      // TODO: Emit error message
+      return;
+    }
+
     socket.join(room);
     socket.emit(SocketAction.GAME_SOCKET_JOIN, new RoomSocketEvent(socket.id, room, RoomAction.JOIN));
     io.to(room).emit(SocketAction.GAME_SOCKET, new RoomSocketEvent(socket.id, room, RoomAction.JOIN))

api/src/models/object/game.object.ts

@@ -171,10 +171,15 @@ export class Game {
     console.log('AtEnd');
     const winner = [...this.players.map.values()].reduce((a, b) => a.health > b.health ? a : b);
     winner.user.increment({coins: 100});
-    this.room.emit(SocketAction.FRONTEND_EVENT, {
+    winner.socket.emit(SocketAction.FRONTEND_EVENT, {
       event: GameEvent.END,
       state: GameState.AT,
-      message: `Player ${winner.user.name} won! Congratulations👏`
+      message: `You won! Congratulations👏`
+    });
+    winner.socket.broadcast.to(this.roomName).emit(SocketAction.FRONTEND_EVENT, {
+      event: GameEvent.END,
+      state: GameState.AT,
+      message: `Player ${winner.user.name} won.`
     });
     this.events[GameEvent.END].emit(GameState.AFTER, null);
   }

src/app/components/friend-list/friend-list.component.html

@@ -4,6 +4,7 @@
   (searchEvent)="searchFriends($event)"
   (findEvent)="searchUsers($event)"
 ></app-friend-list-search>
+<mat-progress-bar *ngIf="loading > 0" mode="indeterminate"></mat-progress-bar>
 <ng-container *ngIf="!searching else find">
   <ng-container *ngIf="!onlyFriends">
     <mat-list-item *ngFor="let request of requests" [routerLink]="['/navigation/profile']" [queryParams]="{id: request.id}">
@@ -45,5 +46,5 @@
         <button mat-stroked-button color="primary" (click)="inviteUser(search.id)">Invite</button>
       </div>
   </mat-list-item>
-  <mat-list-item *ngIf="searches.length == 0"> No Users found... </mat-list-item>
+  <mat-list-item *ngIf="searches.length == 0 && loading == 0"> No Users found... </mat-list-item>
 </ng-template>

src/app/components/friend-list/friend-list.component.ts

@@ -15,6 +15,8 @@ export class FriendListComponent {
   searches: User[] = [];
   filter?: string;
 
+  loading: number = 0;
+
   get onlyFriends(): boolean {
     return !(this._requests?.length || this._invites?.length);
   }
@@ -49,10 +51,12 @@ export class FriendListComponent {
   constructor(private request: RequestService, public stats: StatsService, private data: DataService) { }
 
   async loadUsers(name: string) {
+    this.loading++;
     const payload = await this.data.self.searchFriends(name);
     if (!payload) this.searches = [];
     else this.searches = payload.map((x: any) => new User(x));
     this.filterList();
+    this.loading--;
   }
 
   filterList() {

src/app/components/lobby-actions/lobby-actions.component.ts

@@ -19,6 +19,7 @@ export class LobbyActionsComponent {
       if (event != 'Create') return;
       const room = dialog.componentInstance.name;
       this.room.join(SocketKey.ROOM, room);
+      this.room.join(SocketKey.GAME, room);
     });
   }
 

src/app/components/lobby-list/lobby-list.component.html

@@ -17,7 +17,7 @@
     <td>
       <div class="row">
         <button mat-stroked-button (click)="socket.join(SocketKey.ROOM, room.key)">View</button>
-        <button mat-flat-button color="primary">Play</button>
+        <button mat-flat-button color="primary" (click)="socket.join(SocketKey.ROOM, room.key); socket.join(SocketKey.GAME, room.key)">Play</button>
       </div>
     </td>
   </tr>

src/app/pages/navigation/solo/solo.component.html

@@ -1,21 +1,22 @@
 <div class="container row gap grayed">
   <div class="col spacer gap">
-    <mat-card class="spacer col">
+    <mat-card class="col">
       <h3>Daily Challenge</h3>
       <br>
-      <img width="70%" height="200px" />
-      <br>
+      <div class="row">
+        <img width="50%" src="/assets/images/house_5_extended.jpg" />
+      </div>
       <p>Rewards: [300c], [3x Cards], [1x Pack]</p>
       <br>
-      <br>
-      <br>
       <button mat-raised-button color="primary">Play</button>
       <br>
     </mat-card>
-    <mat-card class="spacer">
+    <mat-card class="col spacer">
       <b><h3>Season 0</h3></b>
       <br>
-      <img width="60%" height="100px" />
+      <div class="row center">
+        <img width="60%" src="/assets/images/landscape_4_extended.jpg" />
+      </div>
       <p>
         This season is packed full of upcoming events!
         Be ready for unique new cards and abilities, big rewards and many new game modes.
@@ -30,7 +31,9 @@ <h3>Daily Challenge</h3>
           <h3>Your next Adventure awaits!</h3>
           <h4>The Journey begins...</h4>
           <br>
-          <img width="80%" height="200px">
+          <div class="row center">
+            <img width="60%" src="/assets/images/ship_2_extended.jpg">
+          </div>
           <p>
             In this first duell you will have to show what you got.
             Your challenger is not a particular good player, but he has some cards that pack a punch!