-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (92 loc) · 4.35 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottle Adventure Documentation</title>
<meta name="description" content="Bottle Adventure Documentation (BAD)">
<meta name="og:description" content="Bottle Adventure Documentation (BAD)">
<meta property="og:image" content="preview.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="32">
<meta property="og:image:height" content="32">
<meta name="theme-color" content="#ab00ff">
<link rel="stylesheet" href="variables.css">
<link rel="stylesheet" href="styles.css">
<link href="favicon.ico" type="image/x-icon" rel="icon">
</head>
<body>
<div id="ba" :style="'display: flex'"> <!-- prevent FOUC -->
<div id="ba-table-container">
<table id="ba-table" class="monospace">
<thead>
<tr>
<th></th>
<th v-for="i in 16"> {{(i - 1).toString(16)}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in rows">
<td>{{(i * 16 + hexStart).toString(16)}}</td>
<td v-for="(col, j) in row" :class="{hit: col !== 'ff' && col !== '--', lone: col === '01', time: col.endsWith('x'), zero: col === '00', unreachable: col === '--', byte: col !== '--', selected: !extra && i === cell.i && j === cell.j}" @click="setByte(i, j)">{{col.substr(0,2)}}</td>
</tr>
<tr>
<td colspan="17" class="separator"></td>
</tr>
<tr v-for="(row, i) in extraRows">
<td>{{(i * 16 + hexStart + 2032).toString(16)}}</td>
<td v-for="(col, j) in row" :class="{hit: col !== 'ff' && col !== '--', lone: col === '01', time: col.endsWith('x'), zero: col === '00', unreachable: col === '--', byte: col !== '--', selected: extra && i === cell.i && j === cell.j}" @click="setByte(i, j, true)">{{col.substr(0,2)}}</td>
</tr>
</tbody>
</table>
</div>
<div id="ba-controls">
<div id="top-controls">
<div>
<div>
<button v-for="(v, k) in versions" class="ba-button" :class="{selected: version === k}" @click="version = k">{{v}}</button>
</div>
<div class="bottom-row">
<button v-for="(v, k) in endians" class="ba-button" :class="{selected: endian === k}" @click="endian = k">{{v}}</button>
</div>
</div>
<div id="sun-switch" title="Toggle Dark Mode" @click="dark = !dark">
<img :src="dark ? 'sun.png' : 'moon.png'">
</div>
</div>
<div id="ba-start">
<span>Start: <span class="monospace">0x</span></span>
<div id="ba-start-controls">
<input id="ba-start-input" v-model="start" class="monospace">
<button @click="resetStart">Reset</button>
</div>
</div>
<div id="timestamp">Timestamp: <span class="monospace">0x<span class="timestamp">{{timestamp.join('')}}</span></span></div>
<table id="ba-items">
<tr v-for="i in 8">
<td v-for="j in 6" :class="{selected: item === getIndex(i, j)}" @click="setItem(i, j)">
<div :style="{background: `url(spritesheet.png) ${(j - 1) * -32}px ${(i - 1) * -32}px`, width: '32px', height: '32px'}"></div>
</td>
</tr>
<tr>
<td :class="{selected: item === 'empty'}" @click="item = (item === 'empty' ? null : 'empty')">
<img src="empty.png">
</td>
<td colspan="5" class="item-name"><small>{{item === 'empty' ? 'Empty C/Transformation B' : itemNames[item]}}</small></td>
</tr>
</table>
<div id="ba-info" v-show="address">
<span id="ba-address">{{address}}</span>
<div id="ba-description" v-html="description"></div>
</div>
<small id="credit">
Bottle Adventure Documentation page by <a href="https://twitter.com/kaztalek" target="_blank" rel="noopener">@Kaztalek</a><br>
Information written by <a href="https://twitter.com/exodus_122" target="_blank" rel="noopener">@exodus_122</a><br>
</small>
</div>
</div>
<script src="data.js"></script>
<script src="vue.min.js"></script>
<script src="main.js"></script>
</body>
</html>