Assassin Angular

by Adam Doherty

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
<body ng-app="Zeus" ng-controller="GameController as g">
    <div id="step1" ng-show="step1">
        <div class="row">
            <div class="columns small-12">
                 <h3>{{title}}</h3>

            </div>
        </div>
        <div class="row" id="addPerson">
            <form ng-submit="addPerson()">
                <div class="columns small-6">
                    <input placeholder="Add person..." type="text" ng-model="playerText" required></input>
                    <span ng-show="duplicateDetected">Player already exists!</span>
                </div>
                <div class="columns small-6">
                    <button type="submit">Add Player</button>
                </div>
            </form>
        </div>
        <div class="row main">
            <div id="player-list" class="columns small-6">
                <div class="row">
                    <div class="playerButton columns small-6 medium-4 end" ng-repeat="p in players">
                        <input type="checkbox" class="checkbox" ng-model="p.remove" id="{{p.id}}"></input>
                        <label for="{{p.id}}">{{p.name}}</label>
                    </div>
                </div>
            </div>
            <div class="columns small-6 options">
                <button ng-click="removePlayers()">Remove selected</button>
                <button ng-click="removeAll()">Remove all</button>
                <button ng-click="buildGame()">Build game</button>
            </div>
        </div>
    </div>
    <div id="step2" ng-show="step2">
        <div class="row">
            <div class="columns small-12">
                 <h3>{{title}}</h3>

            </div>
        </div>
        <div class="row main">
            <div id="game-list" class="columns small-6">
                <div class="row">
                    <table class="chaseTable columns small-12"...

CSS

body {
    margin-top: 25px;
    background: rgba(240, 240, 240, 0.4);
}
#addPerson {
    border-bottom: 1px solid black;
}
.main {
    margin-top: 20px;
}
.playerButton {
    display: inline-block;
    padding-bottom: 5px;
}
button {
    font-size: inherit;
    padding: 0.2em;
    /*margin: 0.1em 0.2em;*/
    /* the following ensures they're all using the same box-model for rendering */
    -moz-box-sizing: content-box;
    /* or `border-box` */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 32px;
    width: 100%;
    border-radius: 3px;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label, input[type="checkbox"] + label:after {
    padding: 6px 9px;
    display: inline-block;
    width: 100%;
    text-align: center;
}
input[type="checkbox"] + label {
    position: relative;
    /* style */
    background-color: rgba(255, 255, 255, 0.4);
    color: #444;
    border: 1px solid black;
    margin: 1px;
}
input[type="checkbox"] + label:after {
    position: absolute;
    /* style */
    top: -22%;
    left: -3px;
    font-size: 180%;
}
/* style */
 input[type="checkbox"].checkbox + label:hover:after {
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.1);
    color: rgba(0, 0, 0, 0);
}
input[type="checkbox"].checkbox:checked + label:hover:after {
    text-shadow: none;
    color: inherit;
}
input[type="checkbox"].checkbox + label:hover, input[type="checkbox"].checkbox:checked + label:hover {
    border: 1px solid red;
}
input[type="checkbox"].checkbox:checked + label {
    color: rgba(0, 0, 0, 0.9);
    border: 1px solid #888;
    background-color: rgba(204, 204, 204, 0.4);
}
.strikeout {
    text-decoration: line-through;
    opacity: 0.6;
}

JavaScript

angular.module('Zeus', [])
    .controller('GameController', ['$scope', function ($scope) {
    $scope.title = "My App";
    $scope.step1 = true;
    $scope.step2 = false;
    $scope.players = [{
        id: 1,
        name: "Adam",
        remove: false,
        alive: true
    }, {
        id: 2,
        name: "John",
        remove: false,
        alive: true
    }, {
        id: 3,
        name: "Bill",
        remove: false,
        alive: true
    }, {
        id: 4,
        name: "Steve",
        remove: false,
        alive: true
    }, {
        id: 5,
        name: "Mark",
        remove: false,
        alive: true
    }, {
        id: 6,
        name: "Dan",
        remove: false,
        alive: true
    }];
    $scope.count = $scope.players.length;
    $scope.gameArray = [];
    $scope.duplicateDetected = false;

    $scope.addPerson = function () {
        $scope.duplicateDetected = false;
        angular.forEach($scope.players, function (p) {
            if (angular.lowercase($scope.playerText) == angular.lowercase(p.name)) {
                $scope.duplicateDetected = true;
            }
        });
        if (!$scope.duplicateDetected) {
            $scope.count++;
            $scope.players.push({
                id: $scope.count,
                name: $scope.playerText,
                remove: false,
                alive: true
            });

            $scope.playerText = '';
            //$scope.shuffleArray($scope.players);
        }
    };

    $scope.removePlayers = function () {
        var oldArray = $scope.players;
        $scope.players = [];
        angular.forEach(oldArray, function (p) {
            if (!p.remove) $scope.players.push(p);
        });
        //$scope.shuffleArray($scope.players);
    };

    $scope.removeAll = function () {
        $scope.players = [];
    };

    $scope.shuffleArray = function (array) {
        var m = array.length,
            t, i;

        // While there remain elements to shuffle
        while...