Taskmaster
Gaming the System
by Dan Shahin
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>
<script src="https://rawgit.com/Hendrixer/ngFx/master/dist/ngFx.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="http://goodoldfashioned.com/js/angular-youtube-embed.min.js"></script>
<body ng-app="taskApp" ng-controller="TaskListController as taskListCtrl" ng-init="debug=false">
<div class="container">
<h1 class="slugline"><img class="bullet" src="{{taskListCtrl.theme.iconUrl}}" alt=""><span ng-if="taskListCtrl.possible > 0" class="victory-{{taskListCtrl.victory}}">{{taskListCtrl.score}} / {{taskListCtrl.possible}}</span></h1>
<h1 class="slugline">{{taskListCtrl.theme.slugline}}</h1>
<i class="icon fa fa-plus slugline" title="add a task" ng-if="!taskListCtrl.showNew" ng-click="taskListCtrl.showNew= !taskListCtrl.showNew"></i> <i class="icon fa fa-minus slugline" title="hide task entry" ng-if="taskListCtrl.showNew" ng-click="taskListCtrl.showNew= !taskListCtrl.showNew"></i>
<i title="settings" class="icon fa fa-gear slugline" ng-click="taskListCtrl.openPrefs()"></i>
<!-- <i title="listen to me" class="icon fa fa-microphone-slash slugline" ng-if="!taskListCtrl.listening" ng-click='taskListCtrl.recognize("start")'></i>
<i title="stop listening" class="icon fa fa-microphone slugline" ng-if="taskListCtrl.listening" ng-click='taskListCtrl.recognize("stop")'></i> -->
<i ng-if="taskListCtrl.mute" title="unmute" class="icon fa fa-volume-off slugline" ng-click="taskListCtrl.toggleMute()"></i>
<i title="mute" class="icon fa fa-volume-up slugline" ng-if="!taskListCtrl.mute" ng-click="taskListCtrl.toggleMute()"></i>
<!-- <i title="themes" class="icon fa fa-eye"></i> ...
CSS
body {
font-size: 3vw;
background : url(data:image/gif;base64,R0lGODlhAQABAPAAAP8REf///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==)
no-repeat top right;
}
background-color: white;
.slugline {
font-size: 1wv;
text-shadow: 1px 2px 3px #666;
}
h1 {
font-size: 5vw;
}
h2 {
font-size: 1.5vw;
}
.done-true {
color: grey;
text-decoration: line-through;
}
input.price {
width: 15vw;
}
img.bullet {
width: 5vw;
height: 5vw;
margin-right: 1vw;
}
table.table {
margin-bottom:0px;
width: 50%;
}
td.points {
text-align: left;
}
.victory-true {
color: orange;
}
.icon {
cursor: pointer;
}
.fa-volume-off {
color:gray;
}
.fa-microphone {
color:red;
}
.fa-microphone-slash {
color:gray;
}
.fa-plus {
/* font-size: 1.5vw; */
}
.task {
color: green;
}
JavaScript
(function () {
var app = angular.module('taskApp', ['ngFx', 'youtube-embed']);
app.controller('TaskListController', TaskListController);
function TaskListController($scope, $timeout, $q, $log, $sce, orderByFilter) {
var taskList = this;
taskList.playVictoryVideo = false;
taskList.listening = false;
taskList.$inject = ['$scope', '$timeout', '$q', '$log', '$sce', 'orderByFilter'];
taskList.currentTheme = localStorage.getItem("currentTheme") || 'taskmaster';
taskList.showNew = false;
taskList.voices = [];
taskList.voice = 0;
taskList.showVoices = false;
taskList.score = 0;
taskList.victory = false;
var tasks = angular.fromJson(localStorage.getItem("tasks"));
if (tasks) {
for (var i = 0; i < tasks.length; i++) {
var task = tasks[i];
task.created = moment(task.created);
}
taskList.tasks = tasks
} else {
taskList.tasks = [{
text: 'Get Milk',
points: 5,
done: false,
created: moment('1/1/2014')
},
{
text: 'Kill Spider-Man',
points: 100,
done: false,
created: moment('1/1/1986')
}];
}
taskList.deleteTask = function (idx) {
taskList.tasks = orderByFilter(taskList.tasks, ['done', '-points', '-created']);
taskList.tasks.splice(idx, 1);
localStorage.setItem("tasks", angular.toJson(taskList.tasks));
taskList.tally();
}
taskList.changeTheme = function (theme) {
taskList.currentTheme = theme;
if (taskList.currentTheme !== null) {
localStorage.setItem("currentTheme", taskList.currentTheme);
taskList.theme = taskList.themes[taskList.currentTheme];
}
...