Merge pull request #255 from fireweb/master

started learning meteor
bay6 · Nov 15, 2013 · b70a15b · b70a15b
2 parents be138a4 + 2c3495e
commit b70a15b
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 0 deletions.
diff --git a/meteor/leaderboard/.meteor/.gitignore b/meteor/leaderboard/.meteor/.gitignore
@@ -0,0 +1 @@
+local
diff --git a/meteor/leaderboard/.meteor/packages b/meteor/leaderboard/.meteor/packages
@@ -0,0 +1,9 @@
+# Meteor packages used by this project, one per line.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+standard-app-packages
+autopublish
+insecure
+preserve-inputs
diff --git a/meteor/leaderboard/.meteor/release b/meteor/leaderboard/.meteor/release
@@ -0,0 +1 @@
+0.6.6.3
diff --git a/meteor/leaderboard/leaderboard.css b/meteor/leaderboard/leaderboard.css
@@ -0,0 +1,62 @@
+body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 200;
+    margin: 50px 0;
+    padding: 0;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+#outer {
+    width: 600px;
+    margin: 0 auto;    
+}
+
+.player {
+    cursor: pointer;
+    padding: 5px;
+}
+
+.player .name {
+    display: inline-block;
+    width: 300px;
+    font-size: 1.75em;
+}
+
+.player .score {
+    display: inline-block;
+    width: 100px;
+    text-align: right;
+    font-size: 2em;
+    font-weight: bold;
+    color: #777;
+}
+
+.player.selected {
+    background-color: yellow;
+}
+
+.player.selected .score {
+    color: black;
+}
+
+.details, .none {
+    font-weight: bold;
+    font-size: 2em;
+    border-style: dashed none none none;
+    border-color: #ccc;
+    border-width: 4px;
+    margin: 50px 10px;
+    padding: 10px 0px;
+}
+
+.none {
+    color: #777;
+}
+
+.inc {
+  cursor: pointer;
+}
diff --git a/meteor/leaderboard/leaderboard.html b/meteor/leaderboard/leaderboard.html
@@ -0,0 +1,36 @@
+<head>
+  <title>Leaderboard</title>
+</head>
+
+<body>
+  <div id="outer">
+    {{> leaderboard}}
+  </div>
+</body>
+
+<template name="leaderboard">
+  <div class="leaderboard">
+    {{#each players}}
+      {{> player}}
+    {{/each}}
+  </div>
+
+  {{#if selected_name}}
+  <div class="details">
+    <div class="name">{{selected_name}}</div>
+    <input type="button" class="inc" value="Give 5 points" />
+  </div>
+  {{/if}}
+
+  {{#unless selected_name}}
+  <div class="none">Click a player to select</div>
+  {{/unless}}
+</template>
+
+<template name="player">
+  <div class="player {{selected}}">
+    <span class="name">{{name}}</span>
+    <span class="score">{{score}}</span>
+  </div>
+</template>
+
diff --git a/meteor/leaderboard/leaderboard.js b/meteor/leaderboard/leaderboard.js
@@ -0,0 +1,47 @@
+// Set up a collection to contain player information. On the server,
+// it is backed by a MongoDB collection named "players".
+
+Players = new Meteor.Collection("players");
+
+if (Meteor.isClient) {
+  Template.leaderboard.players = function () {
+    return Players.find({}, {sort: {score: -1, name: 1}});
+  };
+
+  Template.leaderboard.selected_name = function () {
+    var player = Players.findOne(Session.get("selected_player"));
+    return player && player.name;
+  };
+
+  Template.player.selected = function () {
+    return Session.equals("selected_player", this._id) ? "selected" : '';
+  };
+
+  Template.leaderboard.events({
+    'click input.inc': function () {
+      Players.update(Session.get("selected_player"), {$inc: {score: 5}});
+    }
+  });
+
+  Template.player.events({
+    'click': function () {
+      Session.set("selected_player", this._id);
+    }
+  });
+}
+
+// On server startup, create some players if the database is empty.
+if (Meteor.isServer) {
+  Meteor.startup(function () {
+    if (Players.find().count() === 0) {
+      var names = ["Ada Lovelace",
+                   "Grace Hopper",
+                   "Marie Curie",
+                   "Carl Friedrich Gauss",
+                   "Nikola Tesla",
+                   "Claude Shannon"];
+      for (var i = 0; i < names.length; i++)
+        Players.insert({name: names[i], score: Math.floor(Random.fraction()*10)*5});
+    }
+  });
+}