add how links

greggman · Sep 10, 2014 · bbac2b6 · bbac2b6
1 parent f40442d
commit bbac2b6
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 5 deletions.
diff --git a/public/css/menu.css b/public/css/menu.css
@@ -116,16 +116,21 @@ h2 a:hover {
     justify-content: center;
     align-items: center;
 }
-.hidden-msg {
+.hidden-msg,
+.unhidden-msg {
     position: fixed;
     z-index: 10;
     left: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
+}
+.hidden-msg {
     display: none;
 }
-.hidden-msg>div {
+
+.hidden-msg>div,
+.unhidden-msg>div {
     position: absolute;
     left: 0px;
     top: 0px;
@@ -146,12 +151,27 @@ h2 a:hover {
     align-content: center;
     align-items: center;
 }
-.hidden-msg>div>div {
+.hidden-msg>div>div,
+.unhidden-msg>div>div {
+    width: 80%;
     background-color: #68F;
     color: white;
     padding: 2em;
     border-radius: 2em;
 }
+.hidden-msg .strong,
+.unhidden-msg .strong {
+    color: #F44;
+    text-shadow:
+       -0.1em -0.1em 0 #000,
+        0.1em -0.1em 0 #000,
+       -0.1em  0.1em 0 #000,
+        0.1em  0.1em 0 #000,
+       -0.1em  0.0em 0 #000,
+        0.1em  0.0em 0 #000,
+        0.0em -0.1em 0 #000,
+        0.0em  0.1em 0 #000;
+}
 .button-like {
     text-align: center;
     background-color: #CCC;

diff --git a/public/games.html b/public/games.html
@@ -51,6 +51,7 @@
 </head>
 <body>
 <div id="hft-icons">
+    <div class="hft-icon"><a href="how.html"><img src="/hft/assets/question-icon.svg"></a></div>
     <div class="hft-icon"><a href="options.html"><img src="/hft/assets/gear-icon.svg"></a></div>
     <div class="hft-icon" id="quit"><img src="/hft/assets/power-icon.svg"></div>
 </div>

diff --git a/public/hft/assets/question-icon.svg b/public/hft/assets/question-icon.svg
diff --git a/public/how.html b/public/how.html
@@ -0,0 +1,85 @@
+<!--
+/*
+ * Copyright 2014, Gregg Tavares.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Gregg Tavares. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
+  <title>HappyFunTimes</title>
+  <link rel="stylesheet" href="css/menu.css">
+  <style>
+  </style>
+</head>
+<body>
+<div id="hft-icons">
+    <div class="hft-icon"><a href="how.html"><img src="/hft/assets/question-icon.svg"></a></div>
+    <div class="hft-icon"><a href="options.html"><img src="/hft/assets/gear-icon.svg"></a></div>
+    <div class="hft-icon" id="quit"><img src="/hft/assets/power-icon.svg"></div>
+</div>
+<h1><span id="versionnum"></span><span>HappyFunTimes<span id="version">super-alpha</span></span></h1>
+<div class="unhidden-msg" target="games.html">
+  <div>
+    <div>
+      <p>How To Play</p>
+      <p>
+      All players must connect their phones to <span class="strong">
+      the same WiFi</span> as this computer then go to
+      <span class="strong">happyfuntimes.net</span>
+      </p>
+      <blockquote>
+        <div class="button-like">Got It!</div>
+      </blockquote>
+    </div>
+  </div>
+</div>
+<div id="disconnected" class="hft-hidden">
+  <div class="hft-fullscreencenter">
+     <div>Disconnected<br/>(please re-start HappyFunTimes)</div>
+  </div>
+</div>
+<div id="exited" class="hft-hidden">
+  <div class="hft-fullscreencenter">
+    <div>Exited<br/>(over and out!)<br/><a href="http://superhappyfuntimes.net">SuperHappyFunTimes</a></div>
+  </div>
+</div>
+</body>
+<script data-main="scripts/showavailablegames.js" src="3rdparty/require.js"></script>
+<script>
+requirejs.config({
+  paths: {
+    hft: '/hft/0.x.x/scripts',
+  },
+});
+</script>
+</html>
+
diff --git a/public/scripts/showavailablegames.js b/public/scripts/showavailablegames.js
@@ -231,8 +231,19 @@ requirejs(
     }
   };
 
-  client.addEventListener('availableGames', handleAvailableGames);
-  client.sendCmd('getAvailableGames');
+  if (gamemenu) {
+    client.addEventListener('availableGames', handleAvailableGames);
+    client.sendCmd('getAvailableGames');
+  }
+
+  (function() {
+    var elem = document.querySelector(".unhidden-msg");
+    if (elem) {
+      elem.addEventListener('click', function() {
+        window.location.href = elem.getAttribute("target");
+      }, false);
+    }
+  }());
 });