How to play menu

jordanjohnson56 · Jul 3, 2017 · 93a9693 · 93a9693
1 parent 66e1358
commit 93a9693
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 3 deletions.
diff --git a/client/css/style.css b/client/css/style.css
@@ -13,7 +13,7 @@ canvas {
     padding: 0;
 }
 
-h1, input, button, li {
+h1, input, button, li, .card {
     font-family: 'Anonymous Pro', monospace;
 }
 
@@ -50,6 +50,15 @@ h1, input, button, li {
     display: none;
 }
 
+#how-to-play {
+    display: none;
+}
+
+#how-to-play button {
+    margin-top: 16px;
+    width: 35%;
+}
+
 .info-box li {
     font-size: 36px;
     text-align: left;

diff --git a/client/index.html b/client/index.html
@@ -44,7 +44,9 @@ <h1 class="text-center display-1">Paint the Floor</h1>
         </form>
         <div class="row">
           <div class="col-sm-6">
-            <button class="btn btn-primary btn-block">How to Play</button>
+            <form id="how-to-play-go">
+              <button class="btn btn-primary btn-block">How to Play</button>
+            </form>
           </div>
           <div class="col-sm-6">
             <form id="create-room">
@@ -68,6 +70,42 @@ <h1 class="text-center display-2" id="room-name"></h1>
         </form>
       </div>
     </div>
+    <div class="menu" id="how-to-play">
+      <div class="info-box">
+        <h1 class="text-center display-2">How To Play</h1>
+        <div class="row">
+          <div class="col-sm-4">
+            <div class="card">
+              <img class="card-img-top" src="http://via.placeholder.com/350x150">
+              <div class="card-block">
+                Use the arrow keys to move up, down, left, and right.
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <div class="card">
+              <img class="card-img-top" src="http://via.placeholder.com/350x150">
+              <div class="card-block">
+                Move across tiles to color them. You can only move across white
+                tiles, not other players' tiles or obstacles. Be careful not to
+                get trapped.
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <div class="card">
+              <img class="card-img-top" src="http://via.placeholder.com/350x150">
+              <div class="card-block">
+                Paint the most tiles before the timer runs out to win the game!
+              </div>
+            </div>
+          </div>
+        </div>
+        <form id="how-to-play-back">
+          <button class="btn btn-primary">Back</button>
+        </form>
+      </div>
+    </div>
   </div>
   <script src="/socket.io/socket.io.js"></script>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"

diff --git a/client/js/main.js b/client/js/main.js
@@ -70,7 +70,7 @@ $(function() {
                 room_code: room_input
               });
             } else {
-              showError('Please enter a shorter room code.')
+              showError('Please enter a shorter room code.');
             }
           } else {
             showError('Please enter a room code.');
@@ -85,6 +85,18 @@ $(function() {
     return false;
   });
 
+  $('#how-to-play-go').submit(function(e) {
+    e.preventDefault();
+    $('#join').css("display", "none");
+    $('#how-to-play').css("display", "flex");
+  });
+
+  $('#how-to-play-back').submit(function(e) {
+    e.preventDefault();
+    $('#how-to-play').css("display", "none");
+    $('#join').css("display", "flex");
+  });
+
   // Error returned when a room cannot be created.
   socket.on('could_not_create_room', function() {
     showError('Could not create room.');