Wordplay example, in progress

meteor · Apr 10, 2012 · 13e494c · 13e494c
1 parent 133338a
commit 13e494c
Show file tree

Hide file tree

Showing 11 changed files with 174,326 additions and 0 deletions.
diff --git a/examples/wordplay/.meteor/.gitignore b/examples/wordplay/.meteor/.gitignore
@@ -0,0 +1 @@
+local
diff --git a/examples/wordplay/.meteor/packages b/examples/wordplay/.meteor/packages
@@ -0,0 +1,4 @@
+# Skybreak packages used by this project, one per line.
+#
+# 'skybreak add' and 'skybreak remove' will edit this file for you,
+# but you can also edit it by hand.
diff --git a/examples/wordplay/TODO b/examples/wordplay/TODO
@@ -0,0 +1,16 @@
+TODOS
+strip spaces on input box
+focus input on game start
+styling
+eliminate extra divs
+lobby isn't working quite right.
+when player returns to lobby after game, don't remove their score from
+  the other screens.
+need a way to expire old lingering Player records from lobby
+
+POSSIBLE EXTENSIONS
+publish remaining words at end of game
+UI that works on touch devices sans keyboard
+spinny while word is getting scored
+support clicking on board instead of text box
+
diff --git a/examples/wordplay/client/wordplay.css b/examples/wordplay/client/wordplay.css
@@ -0,0 +1,166 @@
+body {
+    margin: 0px;
+    background-color: #f4f4f4;
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+/* base styles */
+
+input {
+    height: 50px;
+    width: 300px;
+    font-size: 2em;
+    border: 2px solid black;
+    padding: 5px;
+}
+
+button {
+    position: relative;
+    bottom: 3px;
+    margin: 10px;
+    height: 50px;
+    background-color:#E6EFC2;
+    border:1px solid #dedede;
+    font-weight:bold;
+    cursor:pointer;
+    font-size: 1.5em;
+}
+
+button:hover {
+    background-color:#D6DFb2;
+    border:1px solid #C6D880;
+}
+
+button:active {
+    background-color:#529214;
+    border:1px solid #529214;
+    color:#fff;
+}
+
+/*******/
+
+#main {
+    margin: 20px;
+}
+
+#left {
+    float: left;
+    width: 40%;
+}
+
+#right {
+    float: left;
+    width: 50%;
+}
+
+#clock {
+    width: 100%;
+    height: 100px;
+    text-align: center;
+    font-size: 3em;
+}
+
+#board {
+    margin: auto;
+    border:4px solid #999999;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    padding:2px;
+
+    width:400px;
+    height:400px;
+    background-color:#999999;
+}
+
+.square {
+    width:84px;
+    height:84px;
+    border:4px solid #eeeee8;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    margin: 4px;
+    float:left;
+    text-align: center;
+    background-color:#eeeee8;
+    font-size: 65px;
+}
+
+.square.last_in_path {
+    color: #ff0000;
+}
+
+.square.in_path {
+    color: #990000;
+}
+
+#login {
+    margin: 100px auto;
+    text-align: center;
+}
+
+#login .error {
+    color: red;
+}
+
+#lobby {
+    margin: 100px auto;
+    text-align: center;
+}
+
+#postgame {
+    height: 100px;
+    text-align: center;
+}
+
+#scratchpad {
+    height: 100px;
+}
+
+#scratchpad input {
+    width: 70%;
+}
+
+#scratchpad h1 {
+    float: left;
+}
+
+#scores {
+    float: left;
+    width: 100%;
+    background-color: #eeeee8;
+    border: 1px solid black;
+    padding: 0.5em;
+}
+
+#scores .player {
+    float: left;
+    width: 100%;
+}
+
+#scores .header {
+    font-size: 1.25em;
+}
+
+#scores .word {
+    float: left;
+    font-size: 1.25em;
+    padding: 0.25em;
+    margin: 0.5em;
+    border: 1px solid #030;
+}
+
+#scores .word.good {
+    background-color: #0a0;
+}
+
+#scores .word.bad {
+    text-decoration: line-through;
+}
+
+#scores .word span.score {
+    width: 1em;
+}
+
+#scores .word.bad span.score {
+    background-image: 'circle-ball-dark-antialiased.gif';
+}
diff --git a/examples/wordplay/client/wordplay.html b/examples/wordplay/client/wordplay.html
@@ -0,0 +1,115 @@
+<head>
+  <title>Word play!</title>
+</head>
+
+<body>
+  <div id="main">
+    <div id="left">
+      {{> board }}
+    </div>
+    <div id="right">
+      {{> lobby }}
+      {{> scratchpad }}
+      {{> postgame }}
+      {{> scores }}
+    </div>
+  </div>
+</body>
+
+<template name="board">
+  <div id="clock">
+    {{ clock }}
+  </div>
+  <div id="board">
+    <div>
+      <div class="square {{ selected 0 }}">{{ square 0 }}</div>
+      <div class="square {{ selected 1 }}">{{ square 1 }}</div>
+      <div class="square {{ selected 2 }}">{{ square 2 }}</div>
+      <div class="square {{ selected 3 }}">{{ square 3 }}</div>
+    </div>
+    <div>
+      <div class="square {{ selected 4 }}">{{ square 4 }}</div>
+      <div class="square {{ selected 5 }}">{{ square 5 }}</div>
+      <div class="square {{ selected 6 }}">{{ square 6 }}</div>
+      <div class="square {{ selected 7 }}">{{ square 7 }}</div>
+    </div>
+    <div>
+      <div class="square {{ selected 8 }}">{{ square 8 }}</div>
+      <div class="square {{ selected 9 }}">{{ square 9 }}</div>
+      <div class="square {{ selected 10 }}">{{ square 10 }}</div>
+      <div class="square {{ selected 11 }}">{{ square 11 }}</div>
+    </div>
+    <div>
+      <div class="square {{ selected 12 }}">{{ square 12 }}</div>
+      <div class="square {{ selected 13 }}">{{ square 13 }}</div>
+      <div class="square {{ selected 14 }}">{{ square 14 }}</div>
+      <div class="square {{ selected 15 }}">{{ square 15 }}</div>
+    </div>
+  </div>
+</template>
+
+<template name="lobby">
+  <div>
+    {{#if show }}
+    <div id="lobby">
+      <h1>What's your name?</h1>
+      <input id="myname" type="text" />
+      {{#if count}}
+      <h1>{{count}} other players are in the lobby:</h1>
+      {{#each waiting }}
+      <div class="player">{{name}}</div>
+      {{/each}}
+      {{/if}}
+      <button class="startgame">It's on!</button>
+    </div>
+    {{/if}}
+  </div>
+</template>
+
+<template name="scratchpad">
+  {{#if show}}
+  <div id="scratchpad">
+    <input id="scratchpad_input" type="text" />
+    <button class="submit">Submit</button>
+  </div>
+  {{/if}}
+</template>
+
+<template name="postgame">
+  <div>
+    {{#if show}}
+    <div id="postgame">
+      <button class="lobby">Back to lobby</button>
+    </div>
+    {{/if}}
+  </div>
+</template>
+
+<template name="scores">
+  <div>
+    {{#if show}}
+    <div id="scores">
+      {{#each players}}
+      <div class="player">
+        <div class="header">{{name}}</div>
+        {{> words}}
+      </div>
+      {{/each}}
+    </div>
+    {{/if}}
+  </div>
+</template>
+
+<template name="words">
+  <div class="words">
+    <div class="score">{{total_score}}</div>
+    {{#each words}}
+    <div id="word_{{_id}}" class="word {{state}}">
+      <span class="score">
+        {{score}}
+      </span>
+      {{word}}
+    </div>
+    {{/each}}
+  </div>
+</template>