5. Setup MongoDb and Server side Components - lynnaloo/fireball GitHub Wiki

Using the MongoDb database, we can save "high scores." Then we can show these high scores even after the game has been restarted.

Edit fireball.html to add a list of high scores:

<head>
  <title>Fireball</title>
</head>
<body>
  <div class="container">
    <h1 class="page-header">Feed the Dragon</h1>
    {{> feed}}
    {{> scores}}
    {{> reset}}
  </div>
</body>
...
...
<template name="scores">
  <div class="page-header">
    <h2>High Scores</h2>
  </div>
  <div>
    {{#if scores}}
      {{#each scores}}
        <p>{{name}}</p>
        <p>{{score}}</p>
      {{/each}}
    {{else}}
      <p>No High Scores</p>
    {{/if}}
  </div>
</template>

Edit fireball.js to add a game timer and a collection of high scores:

Add a new MongoDb collection at the start of the file before if (Meteor.isClient) {:

Scores = new Mongo.Collection('scores');

In the start function, add a start and end time and an insert to the Mongo database:

var start = function () {
    var startTime = new Date().getTime();
    Session.set("counter", 10);
    timer = Meteor.setInterval(function () {
      // every 10 seconds (10 * 1000), subtract 1 from the counter
      var currentCounter = Session.get("counter");
      if (currentCounter > 0) {
        Session.set("counter", currentCounter - 1);
      } else {
        Meteor.clearInterval(timer);
        alert("Game over!");
        var endTime = new Date().getTime();
        Scores.insert({
          score: endTime - startTime
        });
      }
    }, 10 * 1000);
  }
Template.scores.helpers({
    scores: function () {
      return Scores.find({}, { sort: { score: -1 }});
    }
  });
⚠️ **GitHub.com Fallback** ⚠️