change caching add help

vincentwoo · Jun 7, 2011 · b669820 · b669820
1 parent 4f26fcd
commit b669820
Show file tree

Hide file tree

Showing 17 changed files with 152 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ public/*.js
 public/*.css
 public/*.html
 *.gz
-*.tmproj
+*.tmproj
+*.DS_Store
diff --git a/client/game.html b/client/game.html
@@ -97,6 +97,12 @@ <h1>Connecting</h1>
     </div>
     <div id="footer">
       <form>
+        <div style="position: absolute; left: 215px; top: 10px;">
+          Did you forget the <a href=""
+            onclick="window.open('/help', 'help',
+                      'menubar=0,status=0,scrollbars=1,toolbar=0,menubar=0,resizeable=1,width=680,height=600'); return false;">
+          rules</a>?
+        </div>
         <h3></h3><label for="input">Type here to chat</label>
         <textarea wrap="hard" autocomplete="off" spellcheck="false" id="input"></textarea>
       </form>

diff --git a/client/help.html b/client/help.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="description" content="Intellectual card game online with your friends in realtime"/>
+    <title>MultiplayerSet - realtime online card game</title>
+    <link rel="stylesheet" href="/style.css"/>
+    <link rel="shortcut icon" href="/favicon.ico"/>
+  </head>
+  <body>
+
+<ul id="explanation">
+  <li class="message cornered full">
+  <p>
+  MultiplayerSet is a game in which you try to find <b>sets</b> of three cards
+  out of a board of twelve cards. Which cards form sets depends on the <b>four
+  traits</b> that each card has:
+  </p>
+  <ul>
+    <li><b>Shape</b>: oval, diamond, or squiggle</li>
+    <li><b>Color</b>: red, blue, or green</li>
+    <li><b>Amount</b> of shapes: one, two, or three</li>
+    <li><b>Shading</b>: solid, hollow, or striped</li>
+  </ul>
+  </li>
+  <li><h2>Sets</h2></li>
+  <li class="message cornered">
+  <div class="sidebar">
+    <div class="set">
+      <div class="cardwrap" number="0" color="0" shape="0" shading="0"></div>
+      <div class="cardwrap" number="0" color="0" shape="0" shading="0"></div>
+      <div class="cardwrap" number="0" color="0" shape="0" shading="0"></div>
+    </div>
+  </div>
+  <p>
+    A set is three cards where all the traits on the three cards are either
+    <b>all the same</b>&hellip;
+  </p>
+  <div class="clear"></div>
+  <div class="sidebar">
+    <div class="set">
+      <div class="cardwrap" number="0" color="0" shape="0" shading="0"></div>
+      <div class="cardwrap" number="1" color="1" shape="1" shading="1"></div>
+      <div class="cardwrap" number="2" color="2" shape="2" shading="2"></div>
+    </div>
+  </div>
+  <p>
+    or <b>all different</b>&hellip;
+  </p>
+  <div class="clear"></div>
+  <div class="sidebar">
+    <div class="set">
+      <div class="cardwrap" number="0" color="0" shape="1" shading="0"></div>
+      <div class="cardwrap" number="0" color="1" shape="1" shading="1"></div>
+      <div class="cardwrap" number="0" color="2" shape="1" shading="2"></div>
+    </div>
+  </div>
+  <p>
+    or <b>any mixture of same and different traits</b>. Here the cards have 
+    number and shape <b>in common</b> with <b>different</b> color and shading.
+  </p>
+  <div class="clear"></div>
+  </li>
+  <li><h2>The rule of thumb</h2></li>
+  <li class="message cornered">
+  <p>
+  If you're not sure if you've found a set, just ask yourself, <b>"Are there
+  only two of something?"</b> If so, then you don't have a set. Here are some
+  examples:
+  </p>
+  <div class="sidebar">
+    <div class="set">
+      <div class="cardwrap" number="2" color="2" shape="0" shading="0"></div>
+      <div class="cardwrap" number="2" color="1" shape="0" shading="1"></div>
+      <div class="cardwrap" number="2" color="1" shape="0" shading="2"></div>
+    </div>
+  </div>
+  <p>
+    This would be a set except that <b>two of the cards</b> are blue. If they
+    were all blue or there was one of each color, you would have a real set.
+  </p>
+  <div class="clear"></div>
+  <div class="sidebar">
+    <div class="set">
+      <div class="cardwrap" number="1" color="1" shape="1" shading="0"></div>
+      <div class="cardwrap" number="2" color="0" shape="0" shading="1"></div>
+      <div class="cardwrap" number="0" color="2" shape="2" shading="0"></div>
+    </div>
+  </div>
+  <p>
+    Similar problem here: <b>two of the cards</b> are solidly shaded. If all
+    three were solid or there were one of each shading, it'd be correct.
+  </p>
+  <div class="clear"></div>
+  </li>
+  <li><h2>Starting a game</h2></li>
+  <li class="message cornered full">
+  <p>
+  If you want to play with friends, hit <b>start a private game</b> in the top
+  left corner. You can use the URL of your game room to invite your friends.
+  </p>
+  <p>
+  If you want to get into a game quickly, hit <b>join a public game</b>. You will
+  be placed into a game that will start as soon as three people are present. While
+  the room fills up, you can warm up in an unscored practice game.
+  </p>
+  <p>
+  Click cards to build sets. To clear your current selection, click on any part
+  of the board. Type messages and hit enter to talk to the other players.
+  </p>
+  <h3>Hints</h3>
+  <p>
+  If you need a hint or don't see a set on the board (which can happen), use
+  the <b>HINT</b> button. If the majority of players do this, the
+  game will reveal one card of a set on the board. If there are none, the game
+  will deal three additional cards.
+  </p>
+  </li>
+</ul>
+<script src="/load.js"></script>
+<script>
+  head.js('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'
+  , '/client.js'
+  , function() {
+    $(parseCards);
+  });
+</script>
+</body>
+</html>
diff --git a/client/style.css b/client/style.css
@@ -317,6 +317,10 @@ textarea {
 }
 .centered { margin: 0 auto; }
 #menu { width: 260px; }
+#explanation {
+  width: 215px;
+  margin: 0 0 30px 30px;
+}
 #wrap #explanation {
   margin-left: 275px;
   padding-bottom: 25px;
@@ -328,6 +332,7 @@ textarea {
 p { margin-bottom: 10px; }
 #explanation h1 { margin: 0 0 10px 15px }
 #explanation h2 { margin: 25px 0 10px 15px }
+#explanation .full { width: 600px; }
 #wrap #explanation .full { width: 700px; }
 li ul { margin: 0 0 10px 25px; }
 li li { list-style: circle; }

diff --git a/public/BebasNeue-webfont.eot → public/perm/BebasNeue-webfont.eot b/public/BebasNeue-webfont.eot → public/perm/BebasNeue-webfont.eot
diff --git a/public/BebasNeue-webfont.svg → public/perm/BebasNeue-webfont.svg b/public/BebasNeue-webfont.svg → public/perm/BebasNeue-webfont.svg
diff --git a/public/BebasNeue-webfont.ttf → public/perm/BebasNeue-webfont.ttf b/public/BebasNeue-webfont.ttf → public/perm/BebasNeue-webfont.ttf
diff --git a/public/BebasNeue-webfont.woff → public/perm/BebasNeue-webfont.woff b/public/BebasNeue-webfont.woff → public/perm/BebasNeue-webfont.woff
diff --git a/public/DroidSans-webfont.eot → public/perm/DroidSans-webfont.eot b/public/DroidSans-webfont.eot → public/perm/DroidSans-webfont.eot
diff --git a/public/DroidSans-webfont.svg → public/perm/DroidSans-webfont.svg b/public/DroidSans-webfont.svg → public/perm/DroidSans-webfont.svg
diff --git a/public/DroidSans-webfont.ttf → public/perm/DroidSans-webfont.ttf b/public/DroidSans-webfont.ttf → public/perm/DroidSans-webfont.ttf
diff --git a/public/DroidSans-webfont.woff → public/perm/DroidSans-webfont.woff b/public/DroidSans-webfont.woff → public/perm/DroidSans-webfont.woff
diff --git a/public/ajax-loader.gif → public/perm/ajax-loader.gif b/public/ajax-loader.gif → public/perm/ajax-loader.gif
diff --git a/public/cards.png → public/perm/cards.png b/public/cards.png → public/perm/cards.png
diff --git a/public/favicon.ico → public/perm/favicon.ico b/public/favicon.ico → public/perm/favicon.ico
diff --git a/public/gradient.jpg → public/perm/gradient.jpg b/public/gradient.jpg → public/perm/gradient.jpg
diff --git a/server.js b/server.js
@@ -37,6 +37,10 @@ function niceifyURL(req, res, next){
     req.url = '/about.html';
     return next();
   }
+  if (/^\/help/.exec(req.url)) {
+    req.url = '/help.html';
+    return next();
+  }
   return next();
 }
 
@@ -45,7 +49,11 @@ server = connect.createServer(
   , nowww()
   , niceifyURL
   , gzip.staticGzip(publicDir, {
-        matchType: /text|javascript|image|font/
+        matchType: /text|javascript/
+      , maxAge: process.env.NODE_ENV === 'development' ? 0 : 86400000
+    })
+  , gzip.staticGzip(publicDir + '/perm', {
+        matchType: /image|font/
       , maxAge: process.env.NODE_ENV === 'development' ? 0 : 604800000
     })
 );
@@ -135,6 +143,7 @@ function buildStaticFiles() {
     .add(clientDir + '/index.html')
     .add(clientDir + '/game.html')
     .add(clientDir + '/about.html')
+    .add(clientDir + '/help.html')
     .add(clientDir + '/style.css')
     .add(depsDir + '/headjs/src/load.js')
     .process(options)