Made things look a little nicer

Arcton · Jul 5, 2015 · 5942f97 · 5942f97
1 parent 7ac576f
commit 5942f97
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 31 deletions.
diff --git a/app/index.html b/app/index.html
@@ -11,15 +11,17 @@
     <body>
         <!-- TEMPLATES for rivets.js -->
         <script id="menu-template" type="text/html">
-            <div class="collection">
-                <a href="javascript:void(0)" id="menu-start" class="collection-item avatar">
-                    <i class="material-icons circle green">play_arrow</i>
-                    <span class="title">Play Game</span>
-                </a>
-                <a href="#helpModal" class="collection-item avatar modal-trigger">
-                    <i class="material-icons circle">live_help</i>
-                    <span class="title">How to play</span>
-                </a>
+            <div class="section center-btn">
+                <div class="row">
+                    <div class="section col s12">
+                        <a href="javascript:void(0)" id="menu-start" class="waves-effect waves-light btn-large"><i class="material-icons right">play_arrow</i>Play DataDecks</a>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="section col s12">
+                        <a href="#helpModal" class="modal-trigger waves-effect waves-light btn-flat"><i class="material-icons right">live_help</i>How to play</a>
+                    </div>
+                </div>
             </div>
         </script>
 
@@ -29,17 +31,17 @@
                 <div class="collection categories" rv-class-disabled="game.pickingCat | not" id="category-list">
                     <li class="collection-header">
                         <h5>Categories</h5>
-                        <span class="italics" rv-if="game.waitingCat">Waiting for opponent to pick...</span>
-                        <span rv-if="game.pickingCat">Your turn: Pick a category to play</span>
+                        <span class="italics pink-text" rv-if="game.waitingCat">Waiting for opponent to pick...</span>
+                        <span rv-if="game.pickingCat" class="pink-text"><i class="small material-icons">error</i>Your turn: Pick a category to play</span>
                     </li>
 
                     <a href="javascript:void(0)" class="collection-item" rv-class-active="category.id | = game.activeCategory.id" rv-each-category="categories" rv-on-click="category.onSelected">{ category.name | prettyCat }</a>
                 </div>
 
                 <div class="cards">
                     <h5>Your cards</h5>
-                    <span class="italics" rv-if="game.waitingCard">Waiting for opponents to pick...</span>
-                    <span rv-if="game.pickingCard">Pick the card you think has the <span rv-if="game.highGood">highest</span> <span rv-unless="game.highGood">lowest</span><span class="italics">{ game.activeCategory.name | lowercase }</span></span>
+                    <span class="italics pink-text" rv-if="game.waitingCard">Waiting for opponents to pick...</span>
+                    <span rv-if="game.pickingCard" class="pink-text"><i class="small material-icons">error</i>Pick the card you think has the <span rv-if="game.highGood">highest</span> <span rv-unless="game.highGood">lowest</span><span class="italics">{ game.activeCategory.name | prettyCat | lowercase }</span></span>
                     <div class="row">
                         <div class="col s12 m6 l4" rv-each-card="game._hand">
                             <div class="dd-card card small waves-effect waves-block waves-light" >
@@ -50,9 +52,9 @@ <h5>Your cards</h5>
                                     <span class="card-title grey-text text-darken-4">{ card.name }<i class="material-icons right">close</i></span>
                                     <p>{ card.description }</p>
                                 </div>
-                                <div class="card-action" rv-if="game.pickingCard">
-                                    <a href="javascript:void(0)" rv-on-click="card.onSelected">Play</a>
-                                </div>
+                                <a class="card-action play-card waves-effect waves-teal" rv-if="game.pickingCard" href="javascript:void(0)" rv-on-click="card.onSelected">
+                                    Play
+                                </a>
                             </div>
                         </div>
                     </div>
@@ -62,7 +64,7 @@ <h5>Your cards</h5>
 
         <script id="deck-list-template" type="text/html">
             <div class="collection" id="deck-list">
-                <div class="collection-header"><h4>Select Card Deck</h4></div>
+                <div class="collection-header"><h5>Select Card Deck</h5></div>
                 <a href="javascript:void(0)" class="collection-item" rv-each-deck="decks.decks" rv-on-click="decks.onSelected">
                     <span class="title">{ deck.name }</span>
                 </a>
@@ -72,7 +74,12 @@ <h5>Your cards</h5>
         <script id="lobby-template" type="text/html">
             <div class="container">
                 <div class="section center-btn">
+                    <h4>Waiting for players</h4>
                     <a id="lobby-ready" class="center-align valign waves-effect waves-light btn-large">Click when ready</a>
+
+                    <p>
+                        The game will continue when all players are ready or the room is full.
+                    </p>
                 </div>
             </div>
         </script>
@@ -95,7 +102,9 @@ <h5>Your cards</h5>
                 <h4>About</h4>
                 <p>
                     Created as part of GovHack 2015 by <a href="https://github.com/DataDecks" target="_blank">Arcton</a>, from Hamilton, New Zealand.
-                    Data from: <a href="http://stats.govt.nz">Statistics New Zealand</a> used under a CC-BY-3.0 NZ license, <a target="_blank" href="https://www.niwa.co.nz/education-and-training/schools/resources/climate/summary">NIWA climate data</a>.
+                    Data from: <a href="http://stats.govt.nz">Statistics New Zealand</a> (used under a CC-BY-3.0 NZ license),
+                    <a target="_blank" href="https://www.niwa.co.nz/education-and-training/schools/resources/climate/summary">NIWA climate data</a>,
+                    and <a href="http://www.parliament.nz/en-nz/MPP/MPs/Expenses">NZ Parliament</a>.
                 </p>
             </div>
             <div class="modal-footer">
@@ -108,7 +117,12 @@ <h4>About</h4>
                 <h4>How to play</h4>
                 <p>
                     Welcome to DataDecks!
-                    Rules are coming soon. For now, explore the game and have fun!
+                </p>
+
+                <p>
+                    DataDecks is a card game based on a range of data about New Zealand.
+                    Once in a game, you'll be presented with a list of data categories and the three 'cards' that are currently in your hand.
+                    The aim of the game is to play the card that you think will have the highest value for the category that has been selected.
                 </p>
             </div>
             <div class="modal-footer">

diff --git a/app/js/main.js b/app/js/main.js
@@ -26,7 +26,9 @@ rivets.configure({
 });
 
 rivets.formatters.prettyCat = function(val) {
-    return val.replace(/_/g, " ");
+    if (val !== undefined) {
+        return val.replace(/_/g, " ");
+    }
 }
 
 rivets.formatters['='] = function (value, arg) {
@@ -297,6 +299,8 @@ function connect(server) {
                         showRoundWinner(data.cards); // cat id
                         window.game.activeCategory = -1;
                         window.game.waitingCat = true;
+                        window.game.waitingCard = false;
+                        window.game.pickingCard = false;
                     }
 
                     break;
@@ -443,7 +447,7 @@ function showRoundWinner(cards) {
 
         if (parseFloat(card.value) == best) {
             tr.classList.add('winner');
-            td2.innerHTML += "<i class='tiny material-icons'>stars</i>"
+            td2.innerHTML += "<span class='badge'><i class='tiny material-icons'>stars</i></span>"
         }
 
         tbody.appendChild(tr);

diff --git a/app/scss/_state.scss b/app/scss/_state.scss
@@ -4,6 +4,10 @@
 
 .disabled, .disabled * {
     pointer-events: none;
+
+    a:not(.active) {
+        color: inherit !important;
+    }
 }
 
 .results .winner {

diff --git a/app/scss/_typography.scss b/app/scss/_typography.scss
@@ -1,17 +1,16 @@
-.categories {
-    h5 {
-        font-size: 1em;
-        text-transform: uppercase;
-        font-weight: 700;
-        text-align: center;
+h5 {
+    font-size: 1em;
+    text-transform: uppercase;
+    font-weight: 700;
+    text-align: center;
 
-        &+ * {
-            text-align: center;
-            display: block;
-        }
+    &+ * {
+        text-align: center;
+        display: block;
     }
 }
 
+
 .italics {
     font-style: italic;
 }
@@ -35,3 +34,7 @@
 .menu .score {
     display: none;
 }
+
+span i {
+    vertical-align: middle;
+}
diff --git a/app/scss/style.scss b/app/scss/style.scss
@@ -13,3 +13,10 @@
 .dd-card {
     height: auto !important;
 }
+
+.play-card {
+    text-align: center;
+    text-transform: uppercase;
+
+    @extend .teal-text;
+}