// define a module called 'pager'
var mod = angular.module('pager', []);
// define an element custom directive called 'choose'
mod.directive('choose', function () {
return {
restrict: 'E', // only allow element
scope: {
page: '@page', // attributed scope
desc: '@desc'
},
template: '<button ng-click="$parent.turnPage(page)">{{desc}} - go to page {{page}}</button>',
transclude: false, // I'll be honest, I don't like
replace: false // transclusion and replacement
}
});
// define a controller for page behavior
mod.controller('pageController', function ($scope) {
$scope.pageId = "1"
$scope.fade = false;
var test1 = {
"level": 0,
"pitch": [{
"swing": "BLOCK!",
"hit": "BLOCKED!",
"seal": "B"
}, {
"swing": "Attack Attack!",
"hit": "SMASH!!!",
"seal": "A"
}, {
"swing": "Channeling!",
"hit": "Channel",
"seal": "C"
}]
}
var test2 = {
"level": 0,
"pitch": [{
"swing": "Attack!",
"hit": "DAMAGE!",
"seal": "A"
}, {
"swing": "Block, Block Block",
"hit": "Defend",
"seal": "B"
}]
}
$scope.selectPitch = function (pitches) {
var p = Math.floor(Math.random() * pitches.length)
var pitch = pitches[p]
return pitch
}
$scope.reset = function () {
test1.level = test1.pitch.length
test2.level = test2.pitch.length
}
$scope.pitch = function () {
var pitch1 = $scope.selectPitch(test1.pitch)
var pitch2 = $scope.selectPitch(test2.pitch)
var melee;
if (pitch1.seal === pitch2.seal) {
melee = [pitch1.swing, pitch2.swing] //shuffle?
} else {
var winner, loser;
var seals = pitch1.seal + pitch2.seal
if ('ABCA'.indexOf(seals) > -1) {
winner = pitch2
loser = pitch1
--test1.level
} else {
winner = pitch1
loser = pitch2
--test2.level
}
melee = [loser.swing, winner.swing, winner.hit]
}
melee = melee.concat([test1.level + ' ' + test2.level])
var result = melee.join('\n')
alert(result);
}
// the main function here sets the page id for show/hide
$scope.turnPage = function (in_page, in_href) {
if (in_href) {
window.open(in_href + in_page, '_self', false)
} else {
$scope.pageId = in_page
}
}
$scope.moxie = 3
$scope.mojo = 3
$scope.money = 3
$scope.alterMojo = function (n) {
if (n !== undefined) {
$scope.mojo += parseInt(n)
if ($scope.mojo < 0) $scope.mojo = 0
}
}
$scope.alterMoxie = function (n) {
if (n !== undefined) {
$scope.moxie += parseInt(n)
if ($scope.moxie < 0) $scope.moxie = 0
}
}
$scope.alterMoney = function (n) {
if (n !== undefined) {
$scope.money += parseInt(n)
if ($scope.money < 0) $scope.money = 0
}
}
});
mod.filter('voldemort', function () {
return function (input, scope) {
if (input.length > 10) {
return 'aaaqa';
}
return ''; //input.substring(0, 1).toUpperCase() + input.substring(1);
}
});
mod.directive('choice', function () {
return {
restrict: 'E',
transclude: false,
scope: {
page: '@page',
href: '@href',
desc: '@desc',
mojo: '@mojo',
moxie: '@moxie',
money: '@money'
},
template: '<button ng-click="$parent.turnPage(page,href);$parent.alterMojo(mojo);$parent.alterMoxie(moxie);$parent.alterMoney(money)">{{desc}} - go to page {{page}}</button>',
replace: true
}
});
<div ng-app="pager" ng-controller="pageController">
<div ng-show="pageId == '1'" class="body container">
<section>
<h1>Beginning...</h1>
<p>Your friend's house <i>is</i> still many miles away, and the rain is falling harder as each moment passes. You could wait in the car and listen to the radio, and perhaps the storm would let up.</p>
<p>The sky splits into two skies as it opens up in lighting sheets, lighting first itself and then the ground, and it seems that the sky divides but increases in size with each flash.</p>
<aside>Can sounds actually be deafening?</aside>
</section>
<div class="footer">
<choose page="2" desc="walk to your friend's house"></choose>
<choose page="4" desc="stay in the car"></choose>
</div>
</div>
<div ng-show="pageId == '2'" class="body container">
<section>
<p>You get out of the car, and start to walk down the lonely highway. It is a while, but soon you see a gas station nearby. It looks like it might be deserted. It is hard to tell.</p>
<p>The storm has lessened now, and the clouds have abandoned the moon to prying eyes. The moon is white and very cold in the evening sky in the wake of the storm.</p>
<p>When the storm has passed, never forget, you may be still in its eye. The storm is not blind; the storm has one eye.</p>
</section>
<div class="footer">
<choose page="5" desc="keep walking"></choose>
<choose page="8" desc="investigate the gas station"></choose>
</div>
</div>
<div ng-show="pageId == '3'" class="body container">
<section>
<p>You insert your quarter into the payphone, and dial the number for the cab company. Beep. Ring. A message comes over the receiver... telling you that no cabs are available, due to the thunderstorm.</p>
<aside>And that was your only quarter.</aside>
</section>
<div class="footer">
<choose page="1" desc="go back to the beginning"></choose>
</div>
</div>
<div ng-show="pageId == '4'" class="body container">
<section>
<p>You stay in your car. The radio allows you to listen for weather updates. It sounds like this storm will go on for a long time. But... now... your battery is running out.</p>
</section>
<div class="footer">
<choose page="1" desc="go back to the beginning"></choose>
<choice page="6" desc="listen to the radio" moxie="+1"></choice>
</div>
</div>
<div ng-show="pageId == '5' && mojo != 0" class="body container">
<section>
<p>You keep walking to your friend's house, but you have no snacks and you are very hungry...</p>
<p>It's going to be a long walk.</p>
</section>
<div class="footer">
<choose page="5" desc="keep walking" mojo="-1"></choose>
</div>
</div>
<div ng-show="pageId == '5' && mojo == 0" class="body container">
<section>
<p>You cannot walk any further. If you had only had some snacks, you might have made it, but sadly you just can't bear to walk another step. Better luck next time.</p>
</section>
<div class="footer">
<choose page="1" desc="go back to the beginning"></choose>
</div>
</div>
<div ng-show="pageId == '6'" class="body container">
<section>
<p>Listening to the radio is not so bad, actually. Eventually your battery will run out, but it's not like you were going anywhere with a flat tire anyway.</p>
</section>
<div class="footer">
<choice page="6" desc="keep listening to the radio" moxie="+1" money="-1"></choice>
<choose page="2" desc="get out of the car">
</choice>
</div>
</div>
<div ng-show="pageId == '8'" class="body container">
<section>
<p>As you approach the gas station, you realize that it probably is deserted. You cannot see anyone inside, and all of the lights are off. Maybe this is because of the thunderstorm. But, at least you might find some shelter there from the driving rain.</p>
<p>As you hide from the rain under the shelter of the gas station, you look around, and you spy a telephone. Perhaps you could make a call?</p>
<p>Who will you call? And what are the odds... this abandoned filling station, miles from anywhere, miles from <i>nowhere</i>. Will you even hear a ring tone?</p>
<p>Can silences be deafening?</p>
</section>
<div class="footer">
<choice page="9" desc="call your friend" money="-1"></choice>
<choice page="3" desc="call a cab" money="-1"></choice>
</div>
</div>
<div ng-show="pageId == '9'" class="body container">
<section>
<p>Your friend is very happy to pick you up and you have a really good night, and make popcorn and watch a scary movie. The thunderstorm makes the movie pretty scary.</p>
<p>The next day you go back to pick up your car. It would have been a very long walk in the rain if you had not found that gas station.</p>
<p>Congratulations!</p>
</section>
<div class="footer">
<!-- <choice page="Section 1" href="http://newnormanirl.blogspot.ca/search/label/" desc="Keep reading"></choice> -->
<choice page="1" desc="go back to the beginning"></choice>
</div>
</div>
<div ng-show="pageId == '10'">
<div class="body" ng-switch="moxie">
<h1>The Gymnasium</h1>
<p>This is the gymnasium. You can lift weights here or do pushups.</p>
<p ng-switch-when="4">You are really starting to feel stronger. Actually, you feel terrible, but perhaps you are ready to lift the big weights now.</p>
<p ng-switch-when="5">They don't call them the big weights for nothing. You can barely lift them, but you actually are starting to feel pretty good about yourself now.</p>
</div>
<div class="footer" ng-switch="moxie">
<choice ng-switch-when="4" page="10" desc="lift some weights" moxie="+1" mojo="-1"></choice>
<choice ng-switch-when="5" page="11" desc="go get your car"></choice>
<choice page="1" desc="give up"></choice>
<choice page="10" desc="do some pushups" moxie="+1" mojo="-2"></choice>
</div>
</div>
<div ng-show="pageId == '11'" class="body">
<p>You leave the gym and you are tired, so you get in your car to drive to your friend's house. There is a flash of lightning in the distance.</p>
<p>In the beginning: in the beginning, there was a spark, and then it turned out that there was another that had been there before, before the spark had lighted.</p>
<div class="footer">
<choice page="1" desc="go back to the beginning"></choice>
</div>
</div>
<!-- <div class="footer2"> Mojo: {{mojo}} Moxie: {{moxie}} Money: {{money}}</div> -->
.body {
padding:10px;
padding-bottom:60px;
font: 75% georgia, sans-serif;
line-height: 1.88889;
color: #555753;
}
h1 {
font: italic normal 1.4em georgia, sans-serif;
letter-spacing: 1px;
color: #7D775C;
}
button {
font: italic normal 0.8em georgia, sans-serif;
letter-spacing: 1px;
color: #7D775C;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
.footer2 {
position:absolute;
bottom:0;
width:100%;
height:30px;
background:#6cf;
}
.container {
width: 660px;
}
section {
float: left;
margin: 10px;
width: 420px;
}
aside {
float: right;
margin: 10px;
width: 200px;
}
.sample-show-hide {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.sample-show-hide.ng-hide {
opacity:0;
}