-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
184 lines (175 loc) · 11 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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Porings</title>
<link rel="stylesheet" href="./code/main.css">
<link rel="stylesheet" href="./code/colors.css">
<!-- <script src="https://d3js.org/d3.v5.min.js" type="text/JavaScript"></script> -->
<script src="./code/d3.min.js" type="text/JavaScript"></script>
<script src="./code/utils.js" type="text/JavaScript"></script>
<script src="./code/poring_selector.js" type="text/JavaScript"></script>
<script src="./code/stats_diagram.js" type="text/JavaScript"></script>
<script src="./code/properties_diagram.js" type="text/JavaScript"></script>
<script src="./code/damage_diagram.js" type="text/JavaScript"></script>
<script src="./code/dist_diagram.js" type="text/JavaScript"></script>
<script src="./code/facts_box.js" type="text/JavaScript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:100, 400" rel="stylesheet">
</head>
<body>
<div class='main-wrapper'>
<header>
<div class='header-wrapper'>
<div class="header-text-wrapper">
<h1>Porings <img src="./images/mobs/Poporing.gif"></h1>
<h2>Visual Analysis of Poring-like Creatures from Ragnarok Online</h2>
<p class='intro'> Porings are gelatinous monsters from the game Ragnarok Online.
For many players, small pink cute porings are the first creatures that they encounter in the game.
It appears that there are many other poring-like monsters scattered around the world of Rune Midgard.
All of them have a drop shape and move by bouncing but drastically vary in their behaviour and characteristics.
On this page, the features and attributes of porings are summarized and visualized.<br><br><a href="#howto">How to read?</a>
</p>
</div>
<div class="distDiagram-wrapper">
<div id="distDiagram-container"></div>
<div class="distButtons-wrapper">
<form id="dist-buttons"></form>
</div>
</div>
</div>
</header>
<section class='content'>
<div class="content-wrapper">
<!-- <div class="mobFacts-wrapper"> -->
<div id="mobFacts-container">
<p class="factText">
Explore the variety of porings! <br>
Each genus of the poring family includes certain species. But even creatures of one species have slightly
different characteristics!
Poring 'types' (denoted by the smallest dots) combine creatures of one species sharing the same
characteristics.
</p>
</div>
<!-- </div> -->
<div class="selector-wrapper">
<!-- <div class="selector-drop2"></div> -->
<div class="selector-drop"></div>
<div id="selector-container"></div>
</div>
<div class="statsDiagram-wrapper">
<!-- <div class="statsDiagram-drop2"></div> -->
<div class="statsDiagram-drop"></div>
<div id="statsDiagram-container"></div>
</div>
<div class="propsDiagram-wrapper">
<!-- <div class="propsDiagram-drop2"></div> -->
<div class="propsDiagram-drop"></div>
<div id="propsDiagram-container"></div>
</div>
<div class="damageDiagram-wrapper">
<!-- <div class="damageDiagram-drop2"></div> -->
<div class="damageDiagram-drop"></div>
<div id="damageDiagram-container"></div>
</div>
</div>
</section>
<section id='howto'>
<div class='howto-wrapper'>
<div class="about">
<img class='annotation selector-annotation' src="./images/selector_annotated.png" alt ='Explanation of the selector diagram'>
<h3>About Ragnarok Online</h3>
Ragnarok Online is a Korean MMORPG game based on the manhwa Ragnarok by Lee Myung-jin.
The game was released by Gravity in 2002.<sup>◯<span class = 'ref_text'>Read more on <a href="https://ragnarok.gamepedia.com/Ragnarok_Wiki"> Ragnarök Wiki</a></span></sup><br>
Ragnarok is set in the World of Midgard consisting of three countries: Rune-Midgarts, the Schwarzwald
Republic, and the Arunafeltz States.<br>
Players are invited to create characters and explore the World through quests and events.<br><br>
On their journey, players encounter various demons and creatures, porings among them.
Since there is no systematization of monsters in the game,
this visualization is just a personal attempt to structure the variety of porings.
By analogy with the biological classification, all the porings could be combined into the Poring Family.
This Family includes genera (poporings, porings, ghostrings) consisting of species (golder porings, bomb
porings).
According to databases, some species have several types. The difference between them could be seen on the
charts.
<br><br>
To advance through the game, players have to level up their characters, upgrade their skills as
well as choose wisely their equipment. In general, stats and elements show combat abilities and features of
characters and creatures.
</div>
<div class='stats'>
<img class='annotation stats-annotation' src="./images/stats_annotated.png" alt ='Explanation of the stats diagram'>
<h3>Stats</h3>
There are six basic stats that describe combat abilities:
<sup>◯<span class = 'ref_text'>Read more on <a href="https://strategywiki.org/wiki/Ragnarok_Online/Leveling_Stats_and_Skills">StrategyWiki</a></span></sup><br>
<ul>
<li><span class="span-bold"> Strength</span> increases attack strength in melee combat and weight limit.<br>
<li><span class="span-bold">Agility</span> increases attack speed and dodge rate.<br>
<li><span class="span-bold">Vitality</span> increases physical defense, maximum HP and HP recovery rate.<br>
<li><span class="span-bold">Intelligence</span> increases magic attack, magic defense and maximum SP.<br>
<li><span class="span-bold">Dexterity</span> increases accuracy, ranged attack strength and minimum damage
dealt, and lowers the cast time for some skills and spells.<br>
<li> <span class="span-bold">Luck</span> increases critical hits and perfect dodge rate.<br>
</ul>
...there are many more details about their effects in Ragnarok databases.<br>
All the creatures have these stats fixed on different levels. Here, they are illustrated in the radial
diagram.
</div>
<div class="element">
<img class='annotation elem-annotation' src="./images/elem_annotated.png" alt ='Explanation of the element diagram'>
<h3>Elements</h3>
Elements are properties that can strengthen, weaken, or nullify attacks when they interact.
<sup>◯<span class = 'ref_text'>Read more on <a href="https://irowiki.org/wiki/Element">iRO wiki</a></span></sup>
<br>
There are ten different elements: <span class="span-bold">Neutral, Water, Earth, Fire, Wind, Poison, Holy, Shadow, Ghost, Undead</span>.
All the elements, except the Neutral one, possess both strengths and weaknesses to other elements.
<br>
<br>
Every player and creature is assigned with elements modifying defence and attack capacities.
Some attacks, such as the melee attacks of monsters, have no element and are completely unaffected by
elemental modifiers.<br><br>
Elements can be grouped into two types: attacking and defending. Defending elements are separated into four
levels; the resistances and weaknesses of a defending element are amplified relative to its level. Attacking
elements are not separated into levels.<br>
Players have both an attacking and defending element but a player's defending element is always Level 1.<br>
Monsters have only a defending element but can inflict elemental attacks using skills.<br><br>
Here, the central part of the diagram contains elemental data <span class="span-bold">about creatures</span>
of a species, while the outer part demonstrates how effective elemental attacks are <span class="span-bold">against these
creatures</span>.
The numbers in the diagram are in percentage; they show how much damage is dealt with a particular elemental attack to a creature.<br>
</div>
<div class="combat">
<img class='annotation combat-annotation' src="./images/damage_annotated.png" alt ='Explanation of the combat diagram'>
<h3>Derived Stats</h3>
Derived stats are functions of basic stats.
<sup>◯<span class = 'ref_text'>Read more on <a href="https://strategywiki.org/wiki/Ragnarok_Online/Leveling_Stats_and_Skills">StrategyWiki</a></span></sup>
<br>
There are many of them in the game, for example, Maximum Hit Points (health),
Maximum Spell Points (stamina), Attack Power (Atk), Magical Attack Power (MAtk), Degence (Def), Magical
Degence (MDef), Accuracy, Dodge, Attack Speed etc.
<br><br>
The derived stats are direct measures of combat abilities.<br>
The diagram represents a basic rough model of a monster where the key variables are displayed:
defense,attack, and health (hit points, HP).<br>
Because attack power is usually somehow distributed between minimal and maximal limits,
it is shown as an outer arc of variable thickness. In this regard, the defense is more straightforward: just one number shows a creature's 'toughness' against damage.
Defense intensity is also represented as an arc but growing inwards from borders. Health levels are denoted by central circles.
<br><br>
The charts presented on this page give approximation of characteristics and should not be used as a reference.
</div>
</div>
</section>
<footer>
All the data and images of monsters are from <a href="http://ratemyserver.net/">ratemyserver.net</a>,
<a href="http://db.irowiki.org">iRO wiki</a>, <a href="https://ragnarok.gamepedia.com/Ragnarok_Wiki">Ragnarök
Wiki</a>,
and <a href="https://www.roguard.net/">ROGuard </a> Ragnarok Databases.<br>
Some creatures' descriptions are taken from <a href="https://forums.warpportal.com/index.php?/topic/106898-encyclopaedia-ragnarok-monster-lore-mitten/">The Ragnarok Monster Lore</a>, a fan made encyclopedia.<br>
The code and visualization are by Alisa Korinevskaya, 2019
(<a href="https://github.com/kor-al/porings" class = 'git'>GitHub Repo</a>)<img class="poring_icon" src="./images/porings.svg">
</footer>
<script src="./code/script.js"></script>
</div>
</body>
</html>