-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (146 loc) · 6.56 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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SAO by Light Yugen</title>
<script src="https://olado.github.io/doT/doT.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="src/dedalus.js"></script>
<script src="src/dedalus-web.js"></script>
<script src="src/music.js"></script>
<script src="src/combat.js"></script>
<link rel="stylesheet" href="src/html/themes/plain/story.css">
</head>
<body>
<div id="story">
<initscript>
</initscript>
<beforeEveryThing>
</beforeEveryThing>
<beforeEveryPageTurn>
</beforeEveryPageTurn>
<beforeEveryParagraphShown>
</beforeEveryParagraphShown>
<afterEveryThing>
</afterEveryThing>
<afterEveryPageTurn>
</afterEveryPageTurn>
<afterEveryParagraphShown>
</afterEveryParagraphShown>
<!-- Novel -->
<title>Sword Art Online by Light Yugen</title>
<!-- Objects -->
<obj id="dummyObject" inventoryName="An object">
<action id="Examine">
Something happens... who knows what?!
</action>
<action id="Get">
<when>!story.isInInventory('dummyObject')</when>
As you try to get it... It is clear that the inventory works!
{{ story.putInInventory('dummyObject'); }}
</action>
</obj>
<!-- Pages -->
<page id="intro">
The world of Sword Art Online is an interesting and amazing place,
for people that want to explore every inch of the floor, for seeking explorers going deep in unknown dungeons, to brave swordsmen fighting for honor!
How long will you survive in Sword Art Online?
</page>
<page id="enter" class="first">
<p id="enter">Taking a deep breathe, you <turn to="main">put on your nervegear!</turn></p>
</page>
<page id="main">
<img src="src/html/images/aincrad.jpg" alt="Aincrad" height="auto" width="900">
Welcome new player, you are about to embark on probably the most epic journey across the Aincread realm.
The SAO players must beat all 100 floors of this steel castle, if they wish to be free.
On the right hand side is the inventory for whatever precious items you may find, certain items have actives which may be helpful.
Luckily we didn't disable the log out button and saving the game is possible in the lower right corner.
Spawn into the game?
<p id="main">Taking a deep breathe you <turn to="floor1">enter the game</turn></p>
<p>You decide to return to the <turn to="enter">main menu</turn></p>
</page>
<page id="floor1">
<img src="src/html/images/floor1.png" alt="Aincrad" height="auto" width="900">
Welcome to Sword Art Online!
You spawn on floor 1:Town of Beginnings.
You are given clothes and a wooden sword.
Where do you go?
<p id="floor1">Visit the <turn to="tavern1">tavern</turn></p>
<p>Check out the <turn to="market1">market</turn></p>
<p>Enter the <turn to="forest1">forest</turn></p>
</page>
<page id="tavern1">
<img src="src/html/images/tavern1.jpg" alt="tavern" height="auto" width="900">
You enter the tavern.
<p id="tavern1">Fight a <turn to="boar1">boar</turn></p>
<p>Return to the <turn to="floor1">town</turn></p>
</page>
<page id="market1">
<img src="src/html/images/market1.png" alt="market" height="auto" width="900">
You enter the busy market street and look around for:
<p id="market1">Fight a <turn to="boar1">boar</turn></p>
<p>Return to the <turn to="floor1">town</turn></p>
</page>
<page id="forest1">
<img src="src/html/images/forest1.jpg" alt="forest" height="auto" width="900">
You enter the forest.
You look around you and see other players in beginner gear running around and hunting animals.
What do you do?
<p id="forest1">Fight a <turn to="boar1">boar</turn></p>
<p>Return to the <turn to="floor1">town</turn></p>
</page>
<page id="boar1">
<img src="src/html/images/boar.jpg" alt="Boar" height="auto" width="900">
A <strong>(Lv.1 Boar)</strong> is charging towards you. What do you do?
<p id="boar1" class="combatlog"></p>
<p><a href="#">Charge attack (60% chance)</a></p>
<p"><a href="#">Stab (80%chance)</a></p>
</page>
<page id="dummyPage">
You are in an empty page except for a <show paragraph="dummyParagraph">paragraph</show>.
<p>Quite unsurprisingly, there is even an <interact with="dummyObject">object</interact> lying around.</p>
<p>Looking around with more attention, you notice <turn to="otherPage">another page</turn></p>
<paragraph id="dummyParagraph">
Seiously, What did you expect?
</paragraph>
</page>
<page id="otherPage">
Plot twist! The story ends abruptly.
{{ story.endGame(); }}
</page>
</div>
<div id="wrapper">
<div id="title"></div>
<div id="inventoryHostWrapper">
<h2>Inventory</h2>
<div id="inventoryHost"></div>
</div>
<!-- health bar self put in -->
<div id=health>
<strong>Health: 100</strong>
</div>
<div id="host"></div>
</div>
<div id="interactionHost"></div>
<div id="undoStageHost"></div>
<div id="footer">
<a id="undoHost" href="#">Undo</a> • <a id="saveHost" href="#">Save</a> • <a id="restoreHost" href="#">Restore</a> • <a id="resetHost" href="#">Reset</a>
</div>
<script>
$(function () {
new DedalusWeb({
domSource : $('#story'),
domTarget : $('#host'),
titleTarget : $('#title'),
inventoryTarget : $('#inventoryHost'),
interactionTarget : $('#interactionHost'),
undoTarget : $('#undoHost'),
undoStageTarget : $('#undoStageHost'),
saveTarget : $('#saveHost'),
restoreTarget : $('#restoreHost'),
resetTarget : $('#resetHost'),
});
});
</script>
</body>
</html>