CODEWITHSUNDEEP
javascriptmeteorleaderboard
user1359267
user1359267

Reputation: 11

Meteor Leaderboard app

I am a newbie trying to learn and Love the leaderboard app. How do I find resources to learn how to do the suggestions:

Make a button that toggles between sorting by score and sorting by name. Hint: use a Session variable to hold the current sort choice.

Make a button that resets everyone's score to a random number. (There is already code to do this in the server startup code. Can you factor some of this code out and have it run on both the client and the server?)

Implement a way to add and remove scientists from the leaderboard.

I would love to learn how to do this stuff.

Upvotes: 0

Views: 2601

Answers (5)

hakan
hakan

Reputation: 3534

I found this site. I think it is explained here very good.

meteor-tutorial-for-fellow-noobs

Upvotes: 0

user2296554
user2296554

Reputation: 19

I'm new to Meteor, but got this working by doing the following:

* In the HTML

<template name="leaderboard">
  <div class="sort">
    <input type="button" class="sortByName" value="name" />
    <input type="button" class="sortByScore" value="score" />
  </div>
  <div class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </div>
...

* In the leaderboard.js file

Template.leaderboard.players = function () {
  //if sortByName === true
  if (Session.get("sortByName")) {
    return Players.find({}, {sort: {name: 1, score: -1}});    
  } else {
  // if score
    return Players.find({}, {sort: {score: -1, name: 1}});
  }
};

Template.leaderboard.events({
  'click input.inc': function () {
    Players.update(Session.get("selected_player"), {$inc: {score: 5}});
  },
  // if name button is clicked
  'click input.sortByName': function () {
    Session.set("sortByName", true);
  },
  // if score button is clicked
  'click input.sortByScore': function () {
    Session.set("sortByName", false);
  }
});

Upvotes: 0

JZ.
JZ.

Reputation: 21877

I used the latest demonstration, Parties which includes exactly the code you are looking for. Check out how a user can create a Party. The examples are very good.

You are able to pull the application, and view the code by running:

meteor create --example parties

Specifically focus on the model.js file:

 createParty: function (options) {
    options = options || {};
      throw new Meteor.Error(400, "Required parameter missing");
    if (options.title.length > 100)
      throw new Meteor.Error(413, "Title too long");
    if (options.description.length > 1000)
      throw new Meteor.Error(413, "Description too long");
    if (! this.userId)
      throw new Meteor.Error(403, "You must be logged in");

    return Parties.insert({
      owner: this.userId,
      title: options.title,
      description: options.description,
    });

You'll need a good IDE to follow how each of the methods are called. I use Sublime Text2 to search for instances of "createParty" and so on. You can pull the application apart; Try to see if you can add additional fields to the party app to test your knowledge. Bring your own beer checkbox?

Focus your reading on Meteor.methods, Meteor.publish, Meteor.subscribe in the Meteor Docs. Template events really helped me out too.

Upvotes: 0

Stuart Rackham
Stuart Rackham

Reputation: 900

I've implemented the sort plus a few other enhancements in my port of Leaderboard to CoffeeScript + Less + Bootstrap.

Blog: https://srackham.wordpress.com/2012/04/22/meteor-leaderboard-with-coffeescript-less-and-bootstrap/

Code: https://github.com/srackham/leaderboard-coffeescript

Upvotes: 1

greggreg
greggreg

Reputation: 12085

Meteor is very new. Unfortunately there isn't a wealth of information online and very few tutorials exist. Your best source of information and learning is the docs.

Meteor docs: http://docs.meteor.com/

Tutoial: http://www.skalb.com/2012/04/16/creating-a-document-sharing-site-with-meteor-js/

Video on how to make a chat: http://vimeo.com/40300075

Upvotes: 2

Related Questions