/
index.html
176 lines (172 loc) · 8.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>
<title>Toytown</title>
</head>
<body>
<div id="all" ng-controller="GameCtrl as ctrl">
<canvas id="canvas" width="500" height="300"></canvas>
<div class="triangle topleft"></div>
<div class="triangle topright"></div>
<div class="triangle bottomleft"></div>
<div class="triangle bottomright"></div>
<div class="corner topleft ng-cloak">
<h1>TOYTOWN</h1>
<div class="buttongroup topline1">
<label class="button build house" ng-class="{selected: build == 'HOUSE'}" title="Build houses (Ŧ {{ctrl.buildCost('HOUSE')}})" ng-click="ctrl.assets.click.play()" offable>
<input type="radio" name="build" value="HOUSE" ng-model="build"/>
</label>
<label class="button build office" ng-class="{selected: build == 'OFFICE'}" title="Build offices (Ŧ {{ctrl.buildCost('OFFICE')}})" ng-click="ctrl.assets.click.play()" offable>
<input type="radio" name="build" value="OFFICE" ng-model="build"/>
</label>
<label class="button build road" ng-class="{selected: build == 'ROAD'}" title="Build roads (Ŧ {{ctrl.buildCost('ROAD')}})" ng-click="ctrl.assets.click.play()" offable>
<input type="radio" name="build" value="ROAD" ng-model="build"/>
</label>
<label class="button build destroy" ng-class="{selected: build == 'GRASS'}" title="Destroy buildings (Ŧ {{ctrl.buildCost('GRASS')}})" ng-click="ctrl.assets.click.play()" offable>
<input type="radio" name="build" value="GRASS" ng-model="build"/>
</label>
</div>
<div class="buttongroup topline2">
<label class="button speed speed0" ng-class="{selected: speed == 0}" title="Pause">
<input type="radio" name="speed" value="0" ng-model="speed"/>
</label>
<label class="button speed speed1" ng-class="{selected: speed == 1}" title="Turtle speed">
<input type="radio" name="speed" value="1" ng-model="speed"/>
</label>
<label class="button speed speed2" ng-class="{selected: speed == 2}" title="Llama speed">
<input type="radio" name="speed" value="2" ng-model="speed"/>
</label>
<label class="button speed speed3" ng-class="{selected: speed == 3}" title="Cheetah speed">
<input type="radio" name="speed" value="3" ng-model="speed"/>
</label>
</div>
<div class="big date">
{{ctrl.city.month()}} {{ctrl.city.year()}}
</div>
<a class="restart" href="" ng-click="ctrl.reset()">Restart</a>
</div>
<div class="corner topright ng-cloak" ng-if="ctrl.highlightedCell">
<h2 class="celltype">{{ ['?', 'Grass', 'House', 'Office', 'Road', 'Trees'][ctrl.highlightedCell.type] }}</h2>
<dl>
<dt>Traffic</dt>
<dd>{{ctrl.highlightedCell.traffic / 250 * 100 | number:0}}%</dd>
<dt>Pollution</dt>
<dd>{{ctrl.highlightedCell.pollution * 100 | number:0}}%</dd>
<dt>Housing desirability</dt>
<dd>{{ctrl.highlightedCell.houseDesirability * 100 | number:0}}%</dd>
<dt>Office desirability</dt>
<dd>{{ctrl.highlightedCell.officeDesirability * 100 | number:0}}%</dd>
</dl>
<div class="spacetop" ng-switch="ctrl.highlightedCell.type">
<dl ng-switch-when="2">
<dt>Inhabitants</dt>
<dd>{{ctrl.highlightedCell.population | number}}</dd>
<dt>Capacity</dt>
<dd>{{ctrl.highlightedCell.maxPopulation() | number}}</dd>
<dt>Employed</dt>
<dd>{{ctrl.highlightedCell.employers | number}}</dd>
<dt>Commute</dt>
<dd>{{ctrl.highlightedCell.commuteTime | number:0}} min</dd>
</dl>
<dl ng-switch-when="3">
<dt>Employees</dt>
<dd>{{ctrl.highlightedCell.employees | number}}</dd>
<dt>Jobs offered</dt>
<dd>{{ctrl.highlightedCell.maxJobs() | number}}</dd>
<dt>Jobs filled</dt>
<dd>{{ctrl.highlightedCell.employees | number}}</dd>
</dl>
</div>
</div>
<div class="corner bottomleft ng-cloak" ng-hide="ctrl.city.tutorialStep != null && ctrl.city.tutorialStep < 3">
<div ng-click="ctrl.steal()" class="big">
Cash:<br>
<span ng-class="{'cash-flashing': ctrl.cashFlashing}">Ŧ {{ctrl.city.cash | number}}</span>
</div>
<br>
<div>
Tax rate:
<input type="number" ng-model="ctrl.city.taxRate" min="5" max="50" step="1" value="20"></input>%
</div>
<dl>
<dt>Tax income</dt>
<dd>Ŧ {{ctrl.city.taxIncome | number}}</dd>
<dt>Road maintenance</dt>
<dd>Ŧ {{-ctrl.city.roadMaintenanceCost | number}}</dd>
<dt class="sumline">Cashflow</dt>
<dd class="sumline">Ŧ {{ctrl.city.cashflow | number}}</dd>
</dl>
<h2>Demand <small>(hover for desirability overlay)</small></h2>
<dl>
<dt overlay="HOUSING_DESIRABILITY">Housing demand</dt>
<dd overlay="HOUSING_DESIRABILITY">{{ctrl.city.housingDemand * 100 | number:0}}%</dd>
<dt overlay="OFFICE_DESIRABILITY">Offices demand</dt>
<dd overlay="OFFICE_DESIRABILITY">{{ctrl.city.officesDemand * 100 | number:0}}%</dd>
</dl>
</div>
<div class="corner bottomright ng-cloak" ng-hide="ctrl.city.tutorialStep != null && ctrl.city.tutorialStep < 5">
<dl class="big jobspop">
<dt>Jobs</dt>
<dd>{{ctrl.city.jobs | number}}</dd>
<dt>Population</dt>
<dd>{{ctrl.city.population | number}}</dd>
</dl>
<h2>Statistics <small>(hover for data overlay)</small></h2>
<dl>
<dt overlay="OCCUPANCY">Occupancy</dt>
<dd overlay="OCCUPANCY">{{ctrl.city.occupancy * 100 | number:0}}%</dd>
<dt overlay="EMPLOYMENT">Employment</dt>
<dd overlay="EMPLOYMENT">{{ctrl.city.employment * 100 | number:0}}%</dd>
<dt overlay="VACANCY">Jobs filled</dt>
<dd overlay="VACANCY">{{ctrl.city.jobsFilled * 100 | number:0}}%</dd>
<dt overlay="TRAFFIC">Traffic</dt>
<dd overlay="TRAFFIC">{{ctrl.city.traffic / 250 * 100 | number:0}}%</dd>
<dt overlay="COMMUTE">Commute time</dt>
<dd overlay="COMMUTE">{{ctrl.city.commuteTime | number:0}} min</dd>
<dt overlay="POLLUTION">Pollution</dt>
<dd overlay="POLLUTION">{{ctrl.city.pollution * 100 | number:0}}%</dd>
</dl>
</div>
<div class="tutorial" ng-if="ctrl.city.tutorialStep != null" ng-switch="ctrl.city.tutorialStep">
<div ng-switch-when="0">
<strong>Welcome to Toytown!</strong><br>
Let's start by building some houses. Next to the forest would be a nice place to live!
</div>
<div ng-switch-when="1">
Everyone in Toytown wants to work, but they don't want to live next to office buildings. Build two offices, about three blocks away.
</div>
<div ng-switch-when="2">
Watch how the people and businesses trickle in. Build a road to speed up the commute.
</div>
<div ng-switch-when="3">
Note the demand meters in the bottom left. Let's lower the tax rate to 15% to attract more people.
</div>
<div ng-switch-when="4">
Looking good! We still have some cash, so we can build a few more houses.
</div>
<div ng-switch-when="5">
Observe how unemployment grew when new people moved in. Build another office block to provide more jobs.
</div>
<div ng-switch-when="6">
Find out where the long commutes are and build roads to shorten them. Build next to trees if you can; they clean up the pollution from the traffic.
</div>
<div ng-switch-when="7">
Road maintenance costs money. Take care at all times to keep a healthy cashflow going. Set the tax rate back to 20%.
</div>
<div ng-switch-when="8">
Reach a population of 50 to conclude the tutorial. Then, keep going and see how big your Toytown can get!
</div>
</div>
</div>
<footer>
Toytown is an <a href="http://www.ludumdare.com/compo/ludum-dare-31/?action=preview&uid=7882">entry</a> for the <a href="http://ludumdare.com/compo/">Ludum Dare</a> <a href="http://www.ludumdare.com/compo/ludum-dare-31/">31</a> Compo by <a href="http://twitter.com/frozenfractal">@frozenfractal</a>.
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="howler.min.js"></script>
<script src="main.js"></script>
</body>
</html>