-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (146 loc) · 10.4 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CCD</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/stylesheet.min.css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="row" id="title">
<div class="col-xs-4 col-sm-4 col-md-4 titlerow">
<h2 align="right" id="help" data-toggle="modal" data-target="#myModal">How to Play</h2>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 titlerow">
<a href="https://en.wikipedia.org/wiki/Colony_collapse_disorder" target="_blank">
<h1>C C D</h1></a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 titlerow">
<a href="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/bthomas2622/bee-game" target="_blank">
<h2 align="left">GitHub</h2></a>
</div>
</div>
<div class="container">
<div class="row statRow">
<div class="col-md-4 col-sm-4 col-xs-4 leftStats stats">
<ul data-bind="foreach: bee">
<li>Species: <span data-bind="text: species"></span></li>
</ul>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 stats">
<ul data-bind="foreach: bee">
<li>Day: <span data-bind="text: age"></span> / 120</li>
<li>Energy: <span data-bind="text: maxEnergy"></span> / <span data-bind="text: maxEnergyCapacity"></span></li>
<li>Pollen Collected: <span data-bind="text: pollenCount"></span></li>
<li>Royal Pollen Collected: <span data-bind="text: royalPollenCount"></span></li>
</ul>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 rightStats stats">
<ul data-bind="foreach: bee">
<li>Honey Reserves: <span data-bind="text: honeyCount"></span></li>
<li>Royal Jelly Count: <span data-bind="text: royalJellyCount"></span></li>
<li>Queens Produced: <span data-bind="text: queenCount"></span></li>
</ul>
</div>
</div>
<div class="row field" data-bind="with: bee">
<div class="col-md-12" id="flowerfield" data-bind="event: {onload: $parent.listClick()}">
</div>
</div>
<div class="row" id="eventPicRow">
<div class="col-md-12" id="eventPic">
</div>
</div>
<div class="row gameData">
<div class="col-md-4 col-sm-4 col-xs-4 stats leftStats">
<h3>Last Flower Visited</h3>
<span id="lastflower"></span>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 stats">
<h3>Game Dialogue</h3>
<div id="dialogueWindow"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 stats rightStats">
<h3 id="weatherCond">Current Oakland Weather</h3>
<span id="currentWeather"></span>
</div>
</div>
</div>
<script src="dist/js/knockout-3.2.0.min.js"></script>
<script src="dist/js/app.min.js"></script>
<script async defer src="dist/js/weather.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1 class="modal-title" id="myModalLabel">How to Play</h1>
</div>
<div class="modal-body">
<div>
<p>The average lifespan of the Western honey bee is 1 to 10 months. Since this is quite a large range, and the type of bee varies in this game… your lifespan is approximated to be 4 months or 120 days. This means you must maximize your precious, average amount of bee time producing royal jelly in order to produce as many Queens as possible!</p>
</div>
<div>
<h2>The Map</h2>
<p>
What you see before your 5 bee eyes is a majestic Oakland flower field. The green hexagons represent grassy patches. The yellow hexagons represent pollen coated flowers that yield 1 pollen per visit. And the purplish hexagons represent special flowers that yield 1 gamified “royal jelly pollen” per visit. This special pollen is the only pollen able to produce royal jelly.
</p>
<div id="hexDemo">
<div style="background-color: yellow;" class="hexagonDummy"></div>
<div style="background-color: green;" class="hexagonDummy"></div>
<div style="background-color: purple;" class="hexagonDummy"></div>
</div>
<p>
Click a hexagonal space to fly to it! The distance from your current location will be subtracted from your energy reserves. Previously visited flowers will turn a shade of brown.
</p>
<p style="margin-bottom:0px">
You will start and end every day at the white “home hive” position. There you will deliver pollen, replenish energy, and regenerate the flower field for a new day of feasting.
</p>
<div id="hexDemo2">
<div style="background-color: white;" class="hexagonDummy"></div>
</div>
<p style="margin-bottom:0px;">
The black hexagon represents your current position!
</p>
<div id="hexDemo2">
<div style="background-color: black;" class="hexagonDummy"></div>
</div>
</div>
<div>
<h2>Attributes</h2>
<ul>
<li><span class="emphasis">Species</span> – Not all bees are alike.</li>
<li><span class="emphasis">Day</span> – Each time you return to home hive a day has passed, and you are one day closer to bee heaven.</li>
<li><span class="emphasis">Energy</span> – <span class="callout">Energy</span> is expended flying from flower to flower. Each hexagonal space traversed expends precisely 1 <span class="callout">energy</span>. <span class="callout">Energy</span> is fully replenished upon return to home hive. If you completely run out of <span class="callout">energy</span> you perish.</li>
<li><span class="emphasis">Pollen Collected</span> – Think of this as your <span class="callout">“pollen backback”</span>. This statistic keeps track of how much <span class="callout">pollen</span> you have collected on a flight. Regular <span class="callout">pollen</span> translates 1 to 1 with <span class="callout">honey produced</span> upon return to home hive.</li>
<li><span class="emphasis">Royal Pollen Collected</span> – Your separate <span class="callout">“royal pollen backpack”</span> tracks how much <span class="callout">royal pollen</span> you have collected on a flight. <span class="callout">Royal pollen</span> translates 1 to 1 with <span class="callout">royal jelly</span> produced upon return to home hive.</li>
<li><span class="emphasis">Honey Produced</span> – <span class="callout">Honey</span> is created by bringing regular <span class="callout">pollen</span> back to home hive. <span class="callout">Honey</span> is your sole energy source! 5 <span class="callout">honey</span> is expended to replenish your energy upon return to home hive. Run out of <span class="callout">honey</span> and you will no longer be able to continue!</li>
<li><span class="emphasis">Royal Jelly Produced</span> – <span class="callout">Royal Jelly</span> is fed to all the larvae in the colony, but it is most important because the only way to make a new <span class="callout">queen</span> is to feed chosen larvae copious amounts of <span class="callout">royal jelly</span> to trigger development of “queen morphology”. Every 10 <span class="callout">royal jelly</span> produced results in creation of a new <span class="callout">queen</span>!</li>
<li><span class="emphasis">Queens Produced</span> – Your most important attribute! Collect <span class="callout">royal jelly</span>, produce as many <span class="callout">queens</span> as possible in 120 days, resist the evil Colony Collapse Disorder scourge!</li>
</ul>
</div>
<div>
<h2>Game Dialogue</h2>
<p>
The life of a bee is dangerous work. Flying to new locations presents possible dangers. All these dangers combined represent “Colony Collapse Disorder” contributors.
</p>
<p>
Whenever an encounter takes place a decision must be made before proceeding. RISK gives you a 50% chance at riches and reward, but beware of the damages defeat can inflict. RUN to buzz another day. You avoid the event and do not collect the fruits of the selected flower.
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" style="font-weight:bold;">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>