The Thunderstorm

Fork Your Own Adventure

by phollott

HTML

<div ng-app="pager" ng-controller="pageController">
    <div ng-show="pageId == '1'" class="body">
         <h1>The Thunderstorm</h1>

        <p>You are stuck in a thunderstorm. You were travelling to your friend's house, when lightning flashed across the sky. And then... your car got a flat tire.</p>
        <p>Your friend's house <i>is</i> still many miles away, and walking in the rain does not sound like fun. You could wait in the car and listen to the radio.</p>
        <div class="footer">
            <choice page="2" desc="walk to your friend's house" mojo="-1" money="-2"></choice>
            <choice page="4" desc="stay in the car"></choice>
        </div>
    </div>
    <div ng-show="pageId == '2'" class="body">
        <p>You get out of the car, and start to walk down the lonely highway. Soon, you see a gas station nearby. It looks like it might be deserted. It is hard to tell.</p>
        <div class="footer">
            <choice page="5" desc="keep walking" mojo="-1"></choice>
            <choice page="8" desc="investigate the gas station"></choice>
        </div>
    </div>
    <div ng-show="pageId == '3'" class="body">
        <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>
        <p>And that was your only quarter.</p>
        <div class="footer">
            <choice page="1" desc="go back to the beginning"></choice>
        </div>
    </div>
    <div ng-show="pageId == '4'" class="body">
        <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>
        <div class="footer">
            <choice page="1" desc="go back to the beginning"></choice>
            <choice page="6" desc="listen to the radio" moxie="+1"></choice>
        </div>
    </div>
    <div ng-show="pageId...

CSS

.body {
    padding:10px;
    padding-bottom:60px;
}
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
}
.footer2 {
    position:absolute;
    bottom:0;
    width:100%;
    height:30px;
    background:#6cf;
}

JavaScript

var mod = angular.module('pager', []);

mod.controller('pageController', function ($scope) {
    $scope.pageId = "1"
    $scope.moxie = 3
    $scope.mojo = 3
    $scope.money = 3

    $scope.turnPage = function (in_pageId) {
        $scope.pageId = in_pageId
    }

    $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.directive('choice', function () {
    return {
        restrict: 'E',
        transclude: false,
        scope: {
            page: '@page',
            desc: '@desc',
            mojo: '@mojo',
            moxie: '@moxie',
            money: '@money'
        },
        template: '<button ng-click="$parent.turnPage(page);$parent.alterMojo(mojo);$parent.alterMoxie(moxie);$parent.alterMoney(money)">{{desc}} - go to page {{page}}</button>',
        replace: true
    }
});