-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathviewer.html
120 lines (108 loc) · 4.36 KB
/
viewer.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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Arcade Sprite Viewer</title>
<link rel="shortcut icon" type="image/x-icon" href="res/favicon.ico">
<style>
div {
cursor: default;
}
img,
div,
canvas {
image-rendering: pixelated;
}
</style>
<script type="text/javascript" src="lib/bytebuffer.js"></script>
<script type="text/javascript" src="lib/inflate.js"></script>
</head>
<body style="overflow:hidden;overflow-y:hidden;margin:0;">
<canvas id="canvas" width="272" height="400" style="margin:0px;position:absolute;left:0px;top:0px;"></canvas>
<canvas id="canvasBack" width="800" height="600" style="margin:0px;position:absolute;left:0px;top:0px;"></canvas>
<div id="canvas2div"
style="position:absolute;top:0px;left:550px;width:1000px;height:512px;overflow: hidden;">
<canvas id="canvas2" width="480" height="240"
style="margin:0px;position:absolute;left:0px;top:0px;width:960;height:480"></canvas>
</div>
<div id="seltile"
style="position:absolute;width:34px;height:34px;border:2px solid red;left:520px;top:0px;pointer-events: none;">
</div>
<div id="moving"
style="position:absolute;margin:0px;border:0px;padding:0px;width:64;height:64;top:0px;left:550px;pointer-events:none;display:none;">
<canvas id="canvas3" width="64" height="64"
style="position:absolute;margin:0px;padding:0px;width:64;height:64;"></canvas>
</div>
<div id="pages" style="position:absolute;left:550px;top:550px;cursor:pointer;">
<div style="display:none;">
<div id="framePrev" style="border:1px solid black;padding:2px;float:left;"
onmouseover="this.style.background='yellow';" onmouseout="this.style.background='';">Prev</div>
<div style="padding:2px;float:left;margin-left:5px;">Frame = <span id="frameNumSpan"></span></div>
<div id="frameNext" style="border:1px solid black;padding:2px;float:left;margin-left:5px;"
onmouseover="this.style.background='yellow';" onmouseout="this.style.background='';">Next</div>
<a style="margin-left:10px;padding:2px;border:1px solid black;" id="downloadAnchorElem"
href="javascript:void(0)" onclick="downloadJson()">Download</a>
</div>
mode=<select id="comboMode" onchange="switchmode(this.selectedIndex);this.blur();">
<option value ="0">tiles</option>
<option value ="1">sprite</option>
<option value="2">bg layer</option>
<option value="3">bg2</option>
<option value="4">player</option>
<option value="5">animation</option>
</select>
<span id="inputsprite" style="display:none">sprite=<input id="nFrame" size="5" onchange="drawRomFrame(parseInt(this.value, 16));this.blur();"></span>
<span id="inputanim" style="display:none">animation=<input size="5" id="anim" onchange='drawAnimation(parseInt(this.value, 16));this.blur();'></span>
<span id="inputtile" style="display:none">
x=<span id="labelx"></span>,
y=<span id="labely"></span>,
tile=<input id="labeltn" size="4" onchange="movetoTile(parseInt(this.value,16));this.blur();">
</span>
</div>
<div id="labelInfo" style="position:absolute;left:550px;top:520px;"></div>
<div id="labelInfo2" style="position:absolute;left:850px;top:520px;"></div>
<script src="viewer.js"></script>
<script id="machinejs"></script>
<script id="romjs"></script>
<script>
var name = window.location.search.substr(1);
romjs.onload = function () {
init(name);
};
romjs.onerror = function () {
labelInfo.innerHTML = '<font color="red">Unsupported yet</font>';
}
var machineType = ['cps', 'psi', 'neo'];
var machines = new Map([
['punisher',{ type: 0 }],
['1945ii', { type: 1 }],
['1945iii', { type: 1 }],
['gunbird2',{ type: 1 }],
['kof97', { type: 2 }],
['kof98', { type: 2 }],
['kof2000', { type: 2 }],
['kof2002', { type: 2 }],
['samsho2', { type: 2 }],
['mslug', { type: 2 }],
['mslug2', { type: 2 }],
['mslug3', { type: 2 }],
['mslug4', { type: 2 }],
['mslug5', { type: 2 }],
['dino', { type: 0 }],
['varth', { type: 0 }],
['wof', { type: 0 }],
['captcomm',{ type: 0 }],
['sf2ce', { type: 0 }],
['mvsc', { type: 0 }],
]);
var machine = machines.get(name);
if(machine) {
var machineType = machineType[machine.type];
machinejs.src = machineType + '/' + machineType + '.js';
romjs.src = machineType + '/' + name + '.js';
} else {
labelInfo.innerHTML = '<font color="red">Unsupported</font>';
}
</script>
</body>
</html>