While creating a project to learn AngularJS and Firebase, I decided to build a replica of ESPN's Streak for the Cash. My motivation behind this was to experience real-time data handling and expand my knowledge. I felt that starting with this project would be easier than diving straight into Node/Mongo for backend development.
For those unfamiliar with Streak for the Cash, it involves answering questions related to sporting events on a daily basis to establish a Win/Loss record based on accuracy.
During the process, I encountered a specific question: How do I structure "props" (questions), "choices," answers, and comments within the game? For instance, a prop could ask, "Who will score more points?" with Derrick Rose and Lebron James as options. The correct answer would be associated with the prop, along with user comments for interaction.
As I dove deeper into the coding aspect, I began pondering how to manage options, answers, and comments efficiently without overloading the Games controller. At what point should these elements get their own dedicated controller or service? While contemplating different strategies like adding options under props using unique identifiers and retrieving necessary data from URLs, I found myself exploring various possibilities to optimize the code structure.
/controllers/gameview.js
'use strict';
app.controller('GameViewCtrl', function($scope, $routeParams, Game) {
$scope.game = Game.find($routeParams.gameId);
$scope.addProp = function () {
Game.addProp($routeParams.gameId, $scope.prop);
$scope.prop = '';
};
$scope.deleteProp = function(prop, propId) {Game.deleteProp($scope.game, prop, propId);};
$scope.addOption = function () {Game.addOption($routeParams.propId, $scope.option);};});
/services/Game.js
'use strict';
app.factory('Game',
function ($firebase, FIREBASE_URL) {
var ref = new Firebase(FIREBASE_URL + 'games');
var games = $firebase(ref);
var Game = {
all: games,
create: function(game) {return games.$add(game);},
find: function(gameId) {return games.$child(gameId);},
delete: function(gameId) {return games.$remove(gameId);},
addProp: function(gameId, prop) {
prop.gameId = gameId;
games.$child(gameId).$child('props').$add(prop);},
deleteProp: function(game, prop, propId) {game.$child('props').$remove(propId);},
addOption: function(propId, option) {
option.propId = propId;
games.$child(propId).$child('options').$add(option);}};
return Game;});/views/showgame.html
<div>
<strong>{{ game.home }}</strong>
<span class="vs">vs</span>
<strong>{{ game.away }} </strong>
<div ng-repeat="(propId, prop) in game.props">
<span>{{ prop.text }}</span>
<button ng-click="deleteProp(game,propId)" type="button" class="btn btn-danger">Delete Prop</button>
</div><!--
<div ng-rpeat="optionId, option) in prop.options">
<span>{{ option.text }}</span>
</div>
</div>
<form ng-submit="addProp()">
<textarea ng-model="prop.text" placeholder="Enter Prop Here" class="form-control"></textarea>
<input type="submit" value="Add Prop" class="btn btn-primary" />
</form>
<form ng-submit="addOption()">
<textarea ng-model="option.text" placeholder="Enter Prop Option Here" class="form-control"></textarea>
<input type="submit" value="Add Option" class="btn btn-primary" />
</form>
<a href="#/games">Back to Games</a>
I must mention that although I specialize in front-end development, my recent exploration into JavaScript frameworks has been quite enlightening after going through tutorials on www.thinkster.io. It has been an incredible learning experience so far!