Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

jdh
jdh
12,334 Points
Posted by jdh
jdh
12,334 Points

AngularJS Game using ngStorage (Local Storage)

I'm trying build a simple game using ngStorage which allows me to store the game JSON into Local Storage.

I've got the addToLevel function working but I can't seem to get the total variable to update once the points are added.

Additionally, I added a second function to the ng-click directive so that when you add points to a level - you also re-calculate the total score. The issue here is that the total must be looping too many times or something because the score is getting exponentially larger every time you click it.

Can someone help point out my mistakes to fix this?

Summary

  1. Need to find a way to update the $localStorage.total ($scope.total) when the points for a level is updated.
  2. The JSON in the ngStorage gets updated whenever the page refreshes which defeats the point of using the local storage

Heres a plunker if someone would like to check: http://plnkr.co/edit/ufH7K2NP1NaoSFfDnJxn?p=preview

skipping module and controller initialization ...

$scope.total = 0;

    var gameData = [
      {
        "level": "Level One",
        "points": 30,
        "max": 100,
        "completed": false
      },
      {
        "level": "Level Two",
        "points": 50,
        "max": 100,
        "completed": false   
      }
    ];

    // tie the game JSON to the view
    $scope.gameData = gameData; 

    // tie the view to ngModule which saves the JSON to localStorage
    $localStorage.gameData = gameData;

    console.log("Your current score is: " + $scope.total)
    $localStorage.total = $scope.total;

    $scope.addToLevel = function(level, num){
       $scope.levelPoints = gameData[level].points += num;
       console.log("You have " + $scope.levelPoints + " points in Level");
    }

   // loop through the gameData JSON and sum all the values were key is 
    $scope.calcTotal = function(){
        for (var i in $scope.gameData){
          var level = $scope.gameData[i];
          $scope.total += level.points;
      }
      $localStorage.total = $scope.total;
    };


    $scope.calcTotal();

...

  <div class='container'>
    <div class='row' >
      <button class='btn btn-primary' ng-click="addToLevel(0, 20); calcTotal();">+20 Points Lvl 1</button>
      <button class='btn btn-primary' ng-click='addToLevel(1, 40); calcTotal();'>+30 Points Lvl 2</button>

      <br>

      <table class='table table-hover'>
        <thead>
          <tr>
            <td>Level</td>
            <td>Points</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat='data in gameData'>
            <td>{{ data.level }}</td>
            <td>{{ data.points }}</td>
          </tr>
          <tr>
            <td>Total Points</td>
            <td>{{total}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Dave McFarland Andrew Chalkley