Thursday July 30, 2015

Brocfile.js

@@ -22,6 +22,14 @@ var appJs = concat(templatesAndScripts, {outputFile: 'app.js', inputFiles: [
     'js/cagematch.js'
   ]});
 
-var compiledSass = sass(['assets/scss', 'bower_components/reset-css'], 'cagematch.scss', 'app.css');
+var includePaths = [
+    'assets/scss',
+    'bower_components/reset-css',
+    'bower_components/bourbon/app/assets/stylesheets',
+    'bower_components/fontawesome/scss',
+    'bower_components/neat/app/assets/stylesheets'
+];
+
+var compiledSass = sass(includePaths, 'cagematch.scss', 'app.css');
 
 module.exports = mergeTrees(['public', appJs, compiledSass, bowerStuff]);

assets/js/cagematch.js

@@ -0,0 +1,84 @@
+castorTroy = new Character({name: 'Castor Troy', weapons: {dualGoldenGuns: 40}, weaponName: 'Dual Golden Guns', hitPoints: 100, imgUrl: 'nic.png'});
+memphisRaines = new Character({name: 'Memphis Raines', weapons: {eleanor: 60}, weaponName: 'Eleanor', hitPoints: 100, imgUrl: 'nic.png'});
+benjaminGates = new Character({name: 'Benjamin Gates', weapons: {declarationOfIndependence: 50}, weaponName: 'Declaration of Independence', hitPoints: 100, imgUrl: 'nic.png'});
+johhnyBlaze = new Character({name: 'Johnny Blaze', weapons: {chain: 30}, weaponName: 'Chain', hitPoints: 100, imgUrl: 'nic.png'});
+
+var heros = [castorTroy, memphisRaines, benjaminGates, johhnyBlaze];
+
+$('.game-target').html(AppTemplates.start(heros));
+
+function Game(hero) {
+  this.hero = hero;
+  this.enemy = johhnyBlaze;
+  this.turnNumber = 0;
+  this.gameOver = false;
+}
+
+var selectCharacterEl = $('.select-character');
+
+var heroTargetEl = [];
+var enemyTargetEl = [];
+
+var renderHero = function(hero) {
+  heroTargetEl.html(AppTemplates.character(hero));
+};
+
+var renderEnemy = function(enemy) {
+  enemyTargetEl.html(AppTemplates.character(enemy));
+};
+
+var attackButtonEl = [];
+
+var healthBar = [];
+
+var newBattle = function() {
+  $('.game-target').html(AppTemplates.battle());
+
+  heroTargetEl = $('.hero-target');
+  enemyTargetEl = $('.enemy-target');
+  renderHero(currentHero);
+  renderEnemy(currentEnemy);
+
+  healthBar = $('.hpbar');
+  healthBar.width(currentHero.getHealth + '%');
+
+  attackButtonEl = $('.attack');
+  attackButtonEl.html(currentHero.weaponName);
+
+  attackButtonEl.on('click', function() {
+    currentHero.attack(currentEnemy, 'dualGoldenGuns');
+    renderHero(currentHero);
+    renderEnemy(currentEnemy);
+
+    healthBar.width(currentEnemy.getHealth + '%');
+    turn++;
+  });
+
+  if (turn % 2 === 1) {
+    currentEnemy.attack(currentHero, 'chain');
+    renderHero(currentHero);
+    renderEnemy(currentEnemy);
+
+    healthBar.width(currentEnemy.getHealth + '%');
+    turn++;
+  }
+
+  if (currentHero.getHealth <= 0 || currentEnemy.getHealth <= 0) {
+    $('.game-target').html(AppTemplates.gameover());
+  }
+};
+
+var currentHero = {};
+var currentEnemy = {};
+var turn = 0;
+
+selectCharacterEl.on('click', function() {
+  var indexSelected = $(this).data('index');
+  var hero = heros[indexSelected];
+  var game = new Game(hero);
+  currentHero = game.hero;
+  currentEnemy = game.enemy;
+  turn = game.turnNumber;
+
+  newBattle();
+});

assets/js/character.js

@@ -0,0 +1,33 @@
+function Character(options) {
+  options = options || {};
+  var hitPoints = options.hitPoints || 100;
+  this.weapons = options.weapons || {};
+  this.weaponName = options.weaponName;
+  this.name = options.name;
+  this.imgUrl = options.imgUrl;
+
+  this.takeDamage = function(damage) { hitPoints -=  damage; };
+
+  this.getAttackStrength = function(weaponName) {
+    if (this.weapons[weaponName]) {
+      return this.weapons[weaponName];
+    }
+
+    return 5;
+  };
+
+  this.on('attacked', function(amount) {
+    this.takeDamage(amount);
+  });
+
+  this.getHealth = function() {return hitPoints;};
+}
+
+Character.prototype = _.extend({
+  constructor: Character,
+
+  attack: function(hostile, weapon) {
+    hostile.trigger('attacked', this.getAttackStrength(weapon));
+  }
+
+}, Backbone.Events);

assets/scss/cagematch.scss

@@ -0,0 +1,126 @@
+// imported and box sizing
+
+@import 'reset';
+
+$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts";
+@import 'font-awesome';
+@import url(http://fonts.googleapis.com/css?family=Press+Start+2P);
+
+@import 'bourbon';
+@import 'neat';
+
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+// variables
+
+$font-defaults: Helvetica, Arial, sans-serif;
+$video-game-font: 'Press Start 2P', cursive;
+$main-color: ;
+$alt-color: ;
+$main-border: 3px solid black;
+
+// starting styles
+body {
+    font-family: $video-game-font;
+}
+.center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    @include outer-container;
+    width: 980px;
+}
+.start {
+    h1 {
+        font-size: 3em;
+        text-align: center;
+        margin-bottom: 30px;
+    }
+    button {
+        font-family: inherit;
+        padding: 10px;
+    }
+    .characters {
+        @include outer-container;
+    }
+    .character {
+        @include span-columns(3);
+        @include omega(4n);
+        text-align: center;
+        p {
+            margin: 20px 0;
+        }
+        img {
+            width: 100%;
+        }
+    }
+
+}
+.battle {
+    .hero-target, .enemy-target {
+        @include span-columns(6 of 12);
+        text-align: center;
+        padding: 10px;
+        img {
+            width: 75%;
+        }
+        .hp {
+            margin: 10px;
+        }
+        .hpborder {
+            margin: 10px;
+            border: $main-border;
+            @include span-columns(10);
+            @include shift(1);
+            height: 10px;
+        }
+        .hpbar {
+            background: red;
+            height: 5px;
+        }
+    }
+    .messages {
+        @include span-columns(12);
+
+        border-radius: 5px;
+        border: $main-border;
+        padding: 1px;
+        .fight {
+        border-radius: 5px;
+        border: $main-border;
+        padding: 10px;
+        min-height: 100px;
+        position: relative;
+        }
+        .fa-play {
+            position: absolute;
+            top: 50%;
+            left: 30px;
+            transform: translateY(-50%);
+        }
+        button {
+            font-family: inherit;
+            padding: 10px;
+            position: absolute;
+            top: 50%;
+            left: 50px;
+            transform: translateY(-50%);
+            border: none;
+            background: none;
+        }
+    }
+}
+.gameover {
+    text-align: center;
+    h1 {
+        font-size: 3em;
+        margin-bottom: 20px;
+    }
+}

assets/templates/battle.hbs

@@ -0,0 +1,14 @@
+<div class="center">
+    <div class="battle">
+        <div class="characters">
+            <div class="hero-target"></div>
+            <div class="enemy-target"></div>
+        </div>
+        <div class="messages">
+            <div class="fight">
+                <i class="fa fa-play"></i>
+                <button class="attack">Attack</button>
+            </div>
+        </div>
+    </div>
+</div>

assets/templates/character.hbs

@@ -0,0 +1,8 @@
+<img src="{{ imgUrl }}" alt="{{ name }}">
+<p>{{ name }}</p>
+<div class="hp">
+    <p>HP: {{ getHealth }}</p>
+    <div class="hpborder">
+        <div class="hpbar"></div>
+    </div>
+</div>

assets/templates/gameover.hbs

@@ -0,0 +1,8 @@
+<div class="center">
+    <div class="gameover">
+        <h1>CAGE WINS!</h1>
+        <p>
+            "I don't think movies are the reason why this violence exists, I think it's going to happen whether movies are there or not." - Nicolas Cage
+        </p>
+    </div>
+</div>

assets/templates/start.hbs

@@ -0,0 +1,14 @@
+<div class="center">
+    <div class="start">
+        <h1>CAGE MATCH</h1>
+        <div class="characters">
+            {{#each this as |cage|}}
+                <div class="character">
+                    <img src="{{ cage.imgUrl }}" alt="{{ cage.name }}">
+                    <p>{{ cage.name }}</p>
+                    <button class="select-character" data-index="{{@index}}"> Select</button>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</div>

public/index.html

@@ -9,6 +9,8 @@
 </head>
 <body>
 
+<div class="game-target"></div>
+
 <script src="vendor.js"></script>
 <script src="app.js"></script>
 </body>