UBCMJC · Redorangegamez · Apr 30, 2022 · May 1, 2022 · May 3, 2022 · May 3, 2022
diff --git a/client/Main.html b/client/Main.html
@@ -1,4 +1,5 @@
 <head>
   <title>MJCApp</title>
+  <link rel="shortcut icon" href="../client/images/favicon.ico" type="image/x-icon">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
+</head>
diff --git a/client/images/favicon.ico b/client/images/favicon.ico
diff --git a/client/stylesheets/Home.css b/client/stylesheets/Home.css
@@ -0,0 +1,50 @@
+.game-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.summary-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  margin: 8px;
+  border: 3px solid black;
+  border-radius: 8px;
+  font-family: "Helvetica Neue";
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.summary-container:hover {
+  background-color: #eee;
+}
+
+.summary-column-container {
+  display: flex;
+  margin: 12px 0;
+}
+
+.summary-column-container > div {
+  margin: 0 8px;
+}
+
+.winds {
+  text-align: left;
+}
+
+.points {
+  text-align: right;
+}
+
+.username {
+  width: 180px;
+}
+
+.username > div {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/client/Main.css → client/stylesheets/Main.css b/client/Main.css → client/stylesheets/Main.css
@@ -92,3 +92,7 @@ tr:nth-of-type(even){
 .names th, td {
     text-align: center;
 }
+
+table th {
+    text-align: center;
+}
diff --git a/imports/api/Constants.js b/imports/api/Constants.js
@@ -109,8 +109,8 @@ const Constants = {
     DEAL_IN: "dealin",
     SELF_DRAW: "selfdraw",
     NO_WIN: "nowin",
-    RESTART: "restart",
     PAO: "pao",
+    RESTART: "restart",
     MISTAKE: "mistake",
 
     // Direction Constants

diff --git a/imports/api/GameDatabases.js b/imports/api/GameDatabases.js
diff --git a/imports/ui/Index.html b/imports/ui/Index.html
@@ -1,7 +1,7 @@
 <template name="Index">
   <u1 class="nav nav-tabs nav-justified">
     <!--comment-->
-    <li data-template="Home" role="presentation" class="active">
+    <li id="Home" data-template="Home" role="presentation">
       <a data-toggle="tab" href="#">Home</a>
     </li>
 
@@ -30,7 +30,7 @@
       </u1>
     </li>
 
-    <li data-template="About" role="presentation">
+    <li id="About" data-template="About" role="presentation">
       <a data-toggle="tab" href="#">About</a>
     </li>
   </u1>

diff --git a/imports/ui/Index.js b/imports/ui/Index.js
@@ -1,13 +1,25 @@
 import './static/About.html';
-import './static/Home.html';
 import './Index.html';
 
+import './home/Home';
 import './record-game/RecordHongKongGame';
 import './record-game/RecordJapaneseGame';
 import './ranking/Ranking';
 
 Template.Index.onCreated( function() {
-    this.currentTab = new ReactiveVar( "Home" );
+    if (localStorage.getItem("game_id") !== null) {
+        if (localStorage.getItem("game_type") === "jp") {
+            this.currentTab = new ReactiveVar( "RecordJapaneseGame" );
+        } else if (localStorage.getItem("game_type") === "hk") {
+            this.currentTab = new ReactiveVar( "RecordHongKongGame" );
+        }
+    } else {
+        this.currentTab = new ReactiveVar( "Home" );
+    }
+});
+
+Template.Index.onRendered( function() {
+    $("#" + this.currentTab.curValue).addClass( "active" );
 });
 
 Template.Index.helpers({

diff --git a/imports/ui/home/Home.html b/imports/ui/home/Home.html
@@ -0,0 +1,44 @@
+<template name="Home">
+  <h2>Home</h2>
+    {{ > LiveJapaneseGameModal }}
+    {{ > LiveHongKongGameModal }}
+  <div class="game-list">
+    {{#each jpn_game in jpn_games}}
+      {{> game_summary game=jpn_game name="Riichi" type="japanese"}}
+    {{/each}}
+    {{#each hk_game in hk_games}}
+      {{> game_summary game=hk_game name="Hong Kong" type="hongKong"}}
+    {{/each}}
+  </div>
+</template>
+
+<template name="game_summary">
+  <div class="summary-container"
+       data-game="{{ game._id }}"
+       data-type="{{ type }}" >
+    <div>{{name}}</div>
+    <div class="summary-column-container">
+      <div class="winds">
+        <div>East</div>
+        <div>South</div>
+        <div>West</div>
+        <div>North</div>
+      </div>
+      <div class="username">
+        <div>{{game.east_player}}</div>
+        <div>{{game.south_player}}</div>
+        <div>{{game.west_player}}</div>
+        <div>{{game.north_player}}</div>
+      </div>
+      <div class="points">
+        <div>{{displayScore game.east_score type}}</div>
+        <div>{{displayScore game.south_score type}}</div>
+        <div>{{displayScore game.west_score type}}</div>
+        <div>{{displayScore game.north_score type}}</div>
+      </div>
+    </div>
+    <div>
+      {{displayRoundWind game.current_round type}} {{displayRoundNumber game.current_round type}} Bonus {{game.current_bonus}}
+    </div>
+  </div>
+</template>
diff --git a/imports/ui/home/Home.js b/imports/ui/home/Home.js
@@ -0,0 +1,66 @@
+import { Template } from 'meteor/templating';
+import Constants from '../../api/Constants';
+import GameRecordUtils from '../../api/utils/GameRecordUtils';
+
+import { InProgressJapaneseHands, InProgressHongKongHands, Players } from '../../api/GameDatabases';
+
+import './LiveJapaneseGameModal';
+import './LiveHongKongGameModal';
+import './Home.html';
+
+Template.Home.onCreated( function() {
+    Meteor.call('canRetrievePlayer', function (error, game) {
+        return;
+    });
+});
+
+Template.Home.helpers({
+    jpn_games() {
+        return InProgressJapaneseHands.find().fetch();
+    },
+    hk_games() {
+        return InProgressHongKongHands.find().fetch();
+    }
+});
+
+Template.game_summary.helpers({
+    displayScore(score, game_type) {
+        if (game_type == Constants.GAME_TYPE.JAPANESE) {
+            return (score / 1000).toFixed(1);
+        } else {
+            return score;
+        }
+    },
+    displayRoundWind(round, game_type) {
+        if (game_type == Constants.GAME_TYPE.JAPANESE) {
+            return GameRecordUtils.displayRoundWind(round, Constants.GAME_TYPE.JAPANESE);
+        } else {
+            return GameRecordUtils.displayRoundWind(round, Constants.GAME_TYPE.HONG_KONG);
+        }
+    },
+    displayRoundNumber(round, game_type) {
+        if (game_type == Constants.GAME_TYPE.JAPANESE) {
+            return GameRecordUtils.handNumberToRoundNumber(round, Constants.GAME_TYPE.JAPANESE);
+        } else {
+            return GameRecordUtils.handNumberToRoundNumber(round, Constants.GAME_TYPE.HONG_KONG);
+        }
+    },
+
+});
+
+Template.Home.events({
+    'click .summary-container': (event) => {
+        event.preventDefault();
+        let game_type = event.currentTarget.dataset["type"];
+        if (game_type == Constants.GAME_TYPE.JAPANESE) {
+            let game = InProgressJapaneseHands.findOne(event.currentTarget.dataset["game"]);
+            Session.set("game_summary", game);
+            console.log(game);
+            $("#jpn-game-modal").modal('show');
+        } else {
+            let game = InProgressHongKongHands.findOne(event.currentTarget.dataset["game"]);
+            Session.set("game_summary", game);
+            $("#hk-game-modal").modal('show');
+        }
+    },
+})
diff --git a/imports/ui/home/LiveHongKongGameModal.html b/imports/ui/home/LiveHongKongGameModal.html
@@ -0,0 +1,104 @@
+<template name="LiveHongKongGameModal">
+    <div class="modal fade" id="hk-game-modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog" style="width:90%" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h2 class="modal-title">Live Game</h2>
+                </div>
+                <div class="modal-body" style="overflow: scroll">
+                    <table style="width:100%">
+                        <tr>
+                            <th colspan="3"></th>
+                            <th>{{get_east_player}}</th>
+                            <th>{{get_south_player}}</th>
+                            <th>{{get_west_player}}</th>
+                            <th>{{get_north_player}}</th>
+                        </tr>
+                        <tr>
+                            <th>Round</th>
+                            <th>Bonus</th>
+                            <th>Points</th>
+                            <th>{{HKG_START_POINTS}}</th>
+                            <th>{{HKG_START_POINTS}}</th>
+                            <th>{{HKG_START_POINTS}}</th>
+                            <th>{{HKG_START_POINTS}}</th>
+                        </tr>
+                        {{#each hands}}
+                        {{> hk_render_hand}}
+                        {{/each}}
+                        <tr>
+                            <td>
+                                {{displayRoundWind get_round}} {{displayRoundNumber get_round}}
+                            </td>
+                            <td>B {{get_bonus}}</td>
+                        </tr>
+                        <tr>
+                            <th colspan="3">Transaction total:</th>
+                            <td>{{get_player_delta EAST}}</td>
+                            <td>{{get_player_delta SOUTH}}</td>
+                            <td>{{get_player_delta WEST}}</td>
+                            <td>{{get_player_delta NORTH}}</td>
+                        </tr>
+                        <tr>
+                            <th colspan="3">Current score:</th>
+                            <td>{{get_player_score EAST}}</td>
+                            <td>{{get_player_score SOUTH}}</td>
+                            <td>{{get_player_score WEST}}</td>
+                            <td>{{get_player_score NORTH}}</td>
+                        </tr>
+                        <tr>
+                            <th colspan="3">End score:</th>
+                            <td>{{get_player_score_final EAST}}</td>
+                            <td>{{get_player_score_final SOUTH}}</td>
+                            <td>{{get_player_score_final WEST}}</td>
+                            <td>{{get_player_score_final NORTH}}</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<template name="hk_render_hand">
+    <tr>
+        <td>
+            {{displayRoundWind round}} {{displayRoundNumber round}}
+        </td>
+        <td>B {{bonus}}</td>
+
+        {{#if is_dealin handType}}
+        <td>{{points}}</td>
+        <td>{{eastDelta}}</td>
+        <td>{{southDelta}}</td>
+        <td>{{westDelta}}</td>
+        <td>{{northDelta}}</td>
+        {{/if}}
+
+        {{#if is_selfdraw handType}}
+        <td>{{points}}</td>
+        <td>{{eastDelta}}</td>
+        <td>{{southDelta}}</td>
+        <td>{{westDelta}}</td>
+        <td>{{northDelta}}</td>
+        {{/if}}
+
+        {{#if is_nowin handType}}
+        <td>No win!</td>
+        {{/if}}
+
+        {{#if is_restart handType}}
+        <td>Reshuffle!</td>
+        {{/if}}
+
+        {{#if is_mistake handType}}
+        <td>Mistake!</td>
+        <td>{{eastDelta}}</td>
+        <td>{{southDelta}}</td>
+        <td>{{westDelta}}</td>
+        <td>{{northDelta}}</td>
+        {{/if}}
+    </tr>
+</template>