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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Manavis</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="js/dc/test/dc.css" />
<body onload="mv.init();">
<div id="vis" class="vis-hide">
<div id="connection-warning"><b>Connection error! Refresh the page to reload.</b></div>
<div class="side med col3">
<div id="connect-status">
<h3>Manavis users</h3>
<p class="info">These are the other users currently online on manavis. If you find something interesting to show, create a channel and get people to join to take a look!</p>
<div id="users-status"></div>
</div>
<div id="blvl-chart">
<h3>Character base level <a class="reset" style="display: none;" href="javascript:mv.charts.blvl.filterAll();dc.redrawAll();">clear</a></h3>
<div class="axis-label y-axis-label">XP instances</div>
<div class="axis-label x-axis-label">Base level</div>
</div>
<div id="stat-chart">
<h3>Stat allocation</h3>
<p class="info">The more intense the color, the more XP instances.<br/>
Each subchart relates one attribute to another. This is redundant in places, such as with the str-agi chart and the agi-str chart, so the chart is symmetric.<br/>
To get an idea of how this works, try filtering a range of low levels above, then slide the filter right, watching how the stats increase as people gain more levels and can get more stats.<p>
</div>
</div>
<div class="side thin col2">
<div id="type-chart">
<h3>Experience type <a class="reset" style="display: none;" href="javascript:mv.charts.type.filterAll();dc.redrawAll();">clear</a></h3>
</div>
<div id="killxp-charts">
<div id="target-chart">
<h3>Target <a class="reset" style="display: none;" href="javascript:mv.charts.target.filterAll();dc.redrawAll();">clear</a></h3>
</div>
<div id="wpn-chart">
<h3>Weapon <a class="reset" style="display: none;" href="javascript:mv.charts.wpn.filterAll();dc.redrawAll();">clear</a></h3>
</div>
<div id="num-attackers-chart">
<h3>Number of attackers <a class="reset" style="display: none;" href="javascript:mv.charts.numAttackers.filterAll();dc.redrawAll();">clear</a><h3>
<p class="info">The number of characters responsible for attacking the mob. One character attacking a mob directly, and another attacking it with a dozen summons, would count as two attackers.</p>
<div class="axis-label y-axis-label">XP instances</div>
<div class="axis-label x-axis-label">Characters</div>
</div>
</div>
</div>
<div id="main" class="col1">
<div id="date-chart">
<h3>Date <a class="reset" style="display: none;" href="javascript:mv.charts.date.filterAll();dc.redrawAll();">clear</a></h3>
<div class="axis-label y-axis-label">XP instances</div>
<div class="axis-label x-axis-label">Date</div>
</div>
<div id="map-chart">
<h3>Map <a class="reset" style="display: none;" href="javascript:mv.charts.map.filterAll();dc.redrawAll();">clear</a></h3>
<p class="info">The larger the bubble, the more XP instances for that map.</p>
<div class="axis-label y-axis-label">Total job XP gain</div>
<div class="axis-label x-axis-label">Total level XP gain</div>
</div>
</div>
</div>
<div id="mask"><noscript><h1>Javascript is required for this website.</h1></noscript>
<div id="loadinfo" class="fader">
<h1>Manavis</h1>
<p>Manavis shows experience gain from combat logs generated by The Mana World's server, tmwAthena.<p>
<p>Manavis can operate in two modes, offline and online, depending on the selection of the checkbox below.</p>
<p>While offline, you can still analyse everything yourself as you would normally.</p>
<p>
In online mode, active filters are made public, similar to multiplayer notepad or etherpad. This can help others understand manavis and the logs, and could be used to improve manavis and the game.
</p>
<input id="connect-option" name="connect" type="checkbox" checked></input>
<label for="connect">Online mode</label>
<h2>Select records to load and display</h2>
<p>Manavis will need records on your local file system. These files can be quite large, so the browser's local storage isn't sufficient. :)</p>
<p>Both raw server logs (.log) and scrubbed datasets (.scrubbed) will work fine. If using the latter, make sure it has .scrubbed in the file name!</p>
<p>You can load any number of files at once.</p>
<p>Please note that this is very js intensive. The tab may briefly lock up as it loads everything.</p>
<input type="file" id="input" name="records[]" multiple />
<output id="list"></output>
<div id="filesbar" class="progressbar fader">
<div class="percent">0%</div>
</div>
<div id="loadbar" class="progressbar fader">
<div class="percent">0%</div>
</div>
</div>
</div>
</body>
<!-- Libs -->
<script src="js/util/memoize.js"></script>
<script src="js/util/progress.js"></script>
<script src="js/d3/d3.js"></script>
<script src="js/crossfilter/crossfilter.js"></script>
<script src="js/dc/dc.js"></script>
<script src="socket.io/socket.io.js"></script>
<!-- Components -->
<script src="js/comp/item.js"></script>
<script src="js/comp/map.js"></script>
<script src="js/comp/mob.js"></script>
<script src="js/comp/stat.js"></script><!-- Depends on crossfilter for crossfilter.bisect -->
<!-- Processing -->
<script src="js/mv/chart.js"></script>
<script src="js/mv/connect.js"></script>
<script src="js/mv/heap.js"></script>
<script src="js/mv/load.js"></script>
<script src="js/mv/main.js"></script>
<script src="js/mv/parse.js"></script>
<script src="js/util/trellis-chart.js"></script>
|
