-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
118 lines (108 loc) · 5.2 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EverDrive GBA Theme Editor</title>
<!-- <link rel="shortcut icon" type="image/png" href="img/favicon.png"/> -->
<meta name="description" content="EverDrive GBA Theme Editor is a tool to create custom themes for Krikzz's Game Boy Advance flashcart.">
<meta property="og:description" content="EverDrive GBA Theme Editor is a tool to create and share custom themes for Krikzz's Game Boy Advance flashcart." />
<meta property="og:image" content="https://orangeglo.github.io/everdrive-gba-editor/img/ogimage.png" />
<meta property="og:url" content="https://orangeglo.github.io/everdrive-gba-editor/" />
<meta property="og:site_name" content="EverDrive GBA Theme Editor" />
<meta property="og:type" content="website" />
<meta name="theme-color" content="#FF8800" />
<script src="script/vue.min.js"></script>
<script id="devload" src="script/devload.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<span class='font-loader'>.</span>
<noscript>
Looks like you have JS disabled. This tool needs javascript to function!
</noscript>
<div class='heading'>
<h1><span class='outline'>EverDrive GBA</span> Theme Editor 🇺🇦</h1>
<p>Create a custom color theme for your EverDrive GBA X5 flashcart!</p>
<p>Looking for the GB theme editor? <a href="https://orangeglo.github.io/everdrive-gb-editor/">Click here to switch</a></p>
</div>
<div id="app">
<div class='row'>
<div class='theme-controls'>
<h3> Edit Palette Entries </h3>
<div class='palettes'>
<palette-entry
v-for="palette in palettes"
:palette="palette"
@color-changed="colorChanged($event.value, $event.id)"
:disabled="disabledPalettes.includes(palette.id)"
></palette-entry>
</div>
<div
class='free-slot-controls'
:class="{disabled: freeSlotDisabled}"
>
<span>⤷</span>
<select v-model="freeSlot">
<option value=''>... and leave the free slot empty</option>
<option value='6'>... and also make 6. Background this color</option>
<option value='7'>... and also make 7. Menu Header Text this color</option>
</select>
</div>
<p class='short-text'>To edit these next colors, you need to override a palette entry from above. The overriden entry will become black.</p>
<palette-entry
v-for="extra in extras"
:palette="extra"
extra='true'
@color-changed="colorChanged($event.value, $event.id)"
@override-changed="overrideChanged($event.value, $event.id)"
:free-slot-color="freeSlotColor"
:disabled="disabledPalettes.includes(extra.id)"
></palette-entry>
<div class='form-controls'>
<button @click="reset">Reset to Default</button>
<div>
<button v-on:click="triggerIpsFileLabel" type="button">
<label for="ipsFileInput" ref="ipsFileLabel" v-on:click="e => e.stopPropagation()">Import an IPS Patch</label>
</button>
<input style="display: none" id="ipsFileInput" type="file" v-on:change="uploadIPS" accept=".ips">
</div>
</div>
<h3> Download, Patch, & Share </h3>
<a
:href='patchData'
class='download-link'
type="application/octet-stream"
download="everdrive_gba_v16_theme_patch.ips"
:class="{ disabled: !downloadEnabled }"
>
>>> Download IPS Patch <<<
</a>
<p class='short-text'>
Apply the patch to the <span class='bold'>GBASYS/GBAOS.gba</span> file on your EverDrive. This patch will only work with firmware version <span class='bold'>v1.16 (2022-01-11)!</span>
</p>
<p class='short-text'>
You can download the latest firmware from <a href="http://krikzz.com/pub/support/everdrive-gba/OS/">Krikzz's website</a>. I recommend using <a href="https://www.romhacking.net/patch/">ROMhacking.net's online patching tool</a> if you don't have a preferred patching method.
</p>
<p class='short-text'>
Share your theme by sharing the current URL! Your theme is encoded into the query parameters.
</p>
<p class='short-text'>
Please be aware that this tool is not officially supported, so use at your own risk!
</p>
</div>
<div class='live-preview'>
<live-preview :palettes="combinedPalettes" :fonts-loaded='fontsLoaded'></live-preview>
<live-preview :palettes="combinedPalettes" :show-menu='true' :fonts-loaded='fontsLoaded'></live-preview>
</div>
</div>
</div>
<footer>
<a href="https://github.com/orangeglo/everdrive-gba-editor">view this project on github</a>
-
by orangeglo (orangeglo#6197 on Discord)
-
<a href="https://orangeglo.github.io/">more tools @ orangeglo.github.io</a>
</footer>
<script src="script/app.js"></script>
</body>
</html>