allow specifying custom gecko codes
This commit is contained in:
Matteias Collet
GitHub
parent
303a3b85ce
commit
6f4044d812
8 changed files with 376 additions and 17 deletions
|
|
@ -1,16 +1,32 @@
|
|||
<template>
|
||||
<div :class="disabled ? 'button-wrapper disabled' : 'button-wrapper'">
|
||||
<button @click="onClick" :disabled="disabled">{{ label }}</button>
|
||||
<div
|
||||
:class="
|
||||
disabled
|
||||
? `button-wrapper disabled ${className ? className : ''}`
|
||||
: `button-wrapper ${className ? className : ''}`
|
||||
"
|
||||
>
|
||||
<button :class="small ? 'small' : ''" @click="handleClick" :disabled="disabled">
|
||||
{{ label }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
small: { type: Boolean, required: false },
|
||||
className: { type: String, required: false },
|
||||
disabled: { type: Boolean },
|
||||
onClick: { type: Function },
|
||||
label: { type: String },
|
||||
},
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
e.stopPropagation();
|
||||
this.onClick();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -28,6 +44,10 @@ export default {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.small {
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<CustomCodeModal
|
||||
v-if="customCodeInEditMode"
|
||||
:onCancel="closeCustomClodeModal"
|
||||
:onSave="saveCustomCode"
|
||||
:identifier="customCodeInEditMode.identifier"
|
||||
:initialValue="customCodeInEditMode.value"
|
||||
:initialTitle="customCodeInEditMode.title"
|
||||
/>
|
||||
<div class="preset-select">
|
||||
<SelectComponent
|
||||
:options="getPresetOptions()"
|
||||
|
|
@ -9,16 +17,37 @@
|
|||
/>
|
||||
</div>
|
||||
<div v-for="category in codeCategories" v-bind:key="category.identifier" class="code-group">
|
||||
<div class="category-title">{{ getCategoryTitle(category) }}</div>
|
||||
<div class="category-title">
|
||||
<span>{{ getCategoryTitle(category) }}</span>
|
||||
<ButtonComponent
|
||||
:small="true"
|
||||
v-if="category.identifier === 'custom'"
|
||||
className="btn-add-custom-code"
|
||||
label="+"
|
||||
:onClick="initCustomCodeModal"
|
||||
/>
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(code, idx) in availableCodes.filter((c) => c.category === category.identifier)"
|
||||
v-bind:key="idx"
|
||||
v-bind:key="code.identifier ? code.identifier : idx"
|
||||
:class="code.selected ? 'checked' : code.disabled ? 'disabled' : ''"
|
||||
@click="toggle(code)"
|
||||
@mouseover="inspect(code)"
|
||||
>
|
||||
{{ getCodeTitle(code) }}
|
||||
<span>
|
||||
{{ getCodeTitle(code) }}
|
||||
</span>
|
||||
<div class="code-menu">
|
||||
<button
|
||||
v-if="code.identifier != null && code.category === 'custom'"
|
||||
type="button"
|
||||
class="btn-edit-custom-code"
|
||||
@click="(e) => deleteCustomCode(e, code.identifier)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="category.identifier === 'loader'"
|
||||
|
|
@ -40,6 +69,7 @@ import presetCategories from '../data/presetCategories.json';
|
|||
|
||||
export default {
|
||||
props: {
|
||||
version: { type: String },
|
||||
codes: { type: Array },
|
||||
onSelectionChanged: { type: Function },
|
||||
onInspect: { type: Function },
|
||||
|
|
@ -57,6 +87,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
customCodes: [],
|
||||
customCodeInEditMode: null,
|
||||
availableCodes: [],
|
||||
codeCategories,
|
||||
presetCategories,
|
||||
|
|
@ -138,6 +170,64 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
initCustomCodeModal() {
|
||||
this.customCodeInEditMode = {
|
||||
identifier: btoa(new Date().toISOString()),
|
||||
title: undefined,
|
||||
value: undefined,
|
||||
};
|
||||
},
|
||||
closeCustomClodeModal() {
|
||||
this.customCodeInEditMode = null;
|
||||
},
|
||||
deleteCustomCode(e, identifier) {
|
||||
e.stopPropagation();
|
||||
this.customCodes = this.customCodes.filter((c) => c.identifier !== identifier);
|
||||
localStorage.setItem('custom-codes', JSON.stringify(this.customCodes));
|
||||
this.availableCodes = this.availableCodes.filter((c) => c.identifier !== identifier);
|
||||
this.emitChangeEvent();
|
||||
},
|
||||
saveCustomCode(identifier, title, value) {
|
||||
const updatedCode = {
|
||||
identifier,
|
||||
author: '-',
|
||||
title: [
|
||||
{
|
||||
lang: 'en-US',
|
||||
content: title,
|
||||
},
|
||||
],
|
||||
description: [
|
||||
{
|
||||
lang: 'en-US',
|
||||
content: '-',
|
||||
html: '<p>-</p>',
|
||||
},
|
||||
],
|
||||
version: '-',
|
||||
date: new Date().toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: '2-digit',
|
||||
year: 'numeric',
|
||||
}),
|
||||
source: value,
|
||||
presets: [],
|
||||
category: 'custom',
|
||||
dependsOn: null,
|
||||
createdOnVersion: this.version,
|
||||
};
|
||||
this.customCodes = [
|
||||
...this.customCodes.filter((c) => c.identifier !== identifier),
|
||||
updatedCode,
|
||||
];
|
||||
|
||||
localStorage.setItem('custom-codes', JSON.stringify(this.customCodes));
|
||||
this.availableCodes = [
|
||||
...this.availableCodes.filter((c) => c.identifier !== identifier),
|
||||
{ ...updatedCode, selected: false },
|
||||
];
|
||||
this.closeCustomClodeModal();
|
||||
},
|
||||
toggle(code) {
|
||||
if (!code.selected && codeCategories.find((c) => c.identifier === code.category).exclusive) {
|
||||
for (const availableCode of this.availableCodes.filter(
|
||||
|
|
@ -157,7 +247,24 @@ export default {
|
|||
this.emitChangeEvent();
|
||||
},
|
||||
populate() {
|
||||
this.availableCodes = this.codes.map((c) => ({ ...c, selected: false }));
|
||||
const storedCustomCodes = localStorage.getItem('custom-codes');
|
||||
|
||||
if (storedCustomCodes) {
|
||||
try {
|
||||
const parsedCodes = JSON.parse(storedCustomCodes);
|
||||
this.customCodes = parsedCodes;
|
||||
} catch (err) {
|
||||
this.customCodes = [];
|
||||
}
|
||||
} else {
|
||||
this.customCodes = [];
|
||||
}
|
||||
|
||||
this.availableCodes = [
|
||||
...this.codes.map((c) => ({ ...c, selected: false })),
|
||||
...this.customCodes.map((c) => ({ ...c, selected: false })),
|
||||
];
|
||||
|
||||
this.refreshDisabledCodes();
|
||||
},
|
||||
inspect(code) {
|
||||
|
|
@ -172,13 +279,29 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.category-title {
|
||||
position: relative;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
background: #383838b5;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding: 2px;
|
||||
margin-bottom: 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto min-content;
|
||||
}
|
||||
|
||||
.btn-add-custom-code {
|
||||
min-width: unset;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.btn-edit-custom-code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.category-title ~ ul {
|
||||
|
|
@ -213,10 +336,20 @@ ul li {
|
|||
user-select: none;
|
||||
outline: none;
|
||||
display: block;
|
||||
min-width: 280px;
|
||||
white-space: nowrap;
|
||||
padding-right: 15px;
|
||||
overflow: hidden;
|
||||
padding-right: 5px;
|
||||
min-width: 260px;
|
||||
max-width: 260px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto min-content min-content;
|
||||
}
|
||||
|
||||
ul li > span {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul li:nth-child(odd) {
|
||||
|
|
@ -275,9 +408,9 @@ li.checked::before {
|
|||
background-color: #d85e55;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
@media screen and (max-width: 1100px) {
|
||||
ul li {
|
||||
min-width: 180px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
166
site/.vuepress/components/CustomCodeModal.vue
Normal file
166
site/.vuepress/components/CustomCodeModal.vue
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<div class="modal-mask">
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-container">
|
||||
<span @click="confirmCancel" class="btn-close">×</span>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<label>
|
||||
{{ getLabel('codeeditor.fields.title.label') }}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="getLabel('codeeditor.fields.title.placeholder')"
|
||||
v-model="title"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label> {{ getLabel('codeeditor.fields.value.label') }}* </label>
|
||||
<textarea
|
||||
@paste="onPaste"
|
||||
@blur="onTouch"
|
||||
v-model="customCode"
|
||||
:class="touched && !isCodeValid() ? 'invalid' : ''"
|
||||
:placeholder="getLabel('codeeditor.fields.value.placeholder')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ButtonComponent
|
||||
:disabled="!isCodeValid()"
|
||||
:label="getLabel('codeeditor.save')"
|
||||
:onClick="onSubmit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Util
|
||||
import { translate } from '../i18n/localeHelper';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
identifier: { type: String, required: false },
|
||||
initialTitle: { type: String, required: false },
|
||||
initialValue: { type: String, required: false },
|
||||
onCancel: { type: Function },
|
||||
onSave: { type: Function },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: this.initialTitle,
|
||||
customCode: this.initialValue,
|
||||
touched: this.initialValue != null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getLabel(key) {
|
||||
return translate(key, this.$lang);
|
||||
},
|
||||
isCodeValid() {
|
||||
if (!this.customCode) return false;
|
||||
const formattedCode = this.customCode.replace(/(?:\r|\n|\s)/g, '');
|
||||
return /^[a-fA-F0-9]+$/.test(formattedCode) && formattedCode.length % 16 === 0;
|
||||
},
|
||||
onTouch() {
|
||||
this.touched = true;
|
||||
},
|
||||
confirmCancel() {
|
||||
if (!confirm(translate('common.discard', this.$lang))) return;
|
||||
this.onCancel();
|
||||
},
|
||||
onSubmit() {
|
||||
this.onSave(
|
||||
this.identifier,
|
||||
this.title ? this.title : 'N/A',
|
||||
this.customCode.replace(/[^a-zA-Z0-9]/g, ''),
|
||||
);
|
||||
},
|
||||
onPaste(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const pasteContent =
|
||||
e.clipboardData?.getData?.('text') || window.clipboardData?.getData?.('text');
|
||||
|
||||
if (!pasteContent) return;
|
||||
|
||||
const newCode = `${this.customCode ? this.customCode : ''} ${pasteContent}`
|
||||
.replace(/(?:\t|\s)/g, '')
|
||||
.replace(/(.{8})(.{8})/g, '$1 $2\r\n');
|
||||
this.customCode = newCode;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: table;
|
||||
}
|
||||
.modal-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.modal-container {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
margin: 0px auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
|
||||
}
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
font-size: 1.2em;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.modal-body > div:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.modal-body > div > label {
|
||||
display: block;
|
||||
color: #727272;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.modal-body > div > input,
|
||||
.modal-body > div > textarea {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.modal-body > div > textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
.modal-body > div > textarea.invalid {
|
||||
border: 1px solid red;
|
||||
}
|
||||
.modal-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.modal-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.modal-enter .modal-container,
|
||||
.modal-leave-active .modal-container {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
<div v-if="codes && codes.length > 0">
|
||||
<h3>{{ getLabel('headers.codelist') }}</h3>
|
||||
<CodeList
|
||||
:version="selectedVersion"
|
||||
:onStageLoaderToggle="onStageLoaderToggle"
|
||||
:codes="codes"
|
||||
:onSelectionChanged="onCheatSelectionChanged"
|
||||
|
|
|
|||
|
|
@ -28,5 +28,10 @@
|
|||
"identifier": "cosmetic",
|
||||
"i18nKey": "generatorconfig.categories.cosmetic",
|
||||
"exclusive": false
|
||||
},
|
||||
{
|
||||
"identifier": "custom",
|
||||
"i18nKey": "generatorconfig.categories.custom",
|
||||
"exclusive": false
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -8,7 +8,21 @@
|
|||
"GMSJ0A": "GMSJ01 (NTSC-J 1.1)",
|
||||
"GMSP01": "GMSP01 (PAL)",
|
||||
"loadpresetplaceholder": "Lade eine Vorlage..",
|
||||
"selectionreset": "Deine Auswahl wird zurückgesetzt. Fortfahren?"
|
||||
"selectionreset": "Deine Auswahl wird zurückgesetzt. Fortfahren?",
|
||||
"discard": "Deine Änderungen werden zurückgesetzt, fortfahren?"
|
||||
},
|
||||
"codeeditor": {
|
||||
"fields": {
|
||||
"title": {
|
||||
"label": "Titel",
|
||||
"placeholder": "N/A"
|
||||
},
|
||||
"value": {
|
||||
"label": "Gecko Code",
|
||||
"placeholder": "Dein Gecko Code.."
|
||||
}
|
||||
},
|
||||
"save": "Speichern"
|
||||
},
|
||||
"headers": {
|
||||
"help": "Hilfe",
|
||||
|
|
@ -39,7 +53,8 @@
|
|||
"timer": "Timer",
|
||||
"misc": "Misc",
|
||||
"memcardpatch": "Memory Card Patches",
|
||||
"cosmetic": "Kosmetisch"
|
||||
"cosmetic": "Kosmetisch",
|
||||
"custom": "Benutzerdefiniert"
|
||||
},
|
||||
"presets": {
|
||||
"standard": "Standard",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,21 @@
|
|||
"GMSJ0A": "GMSJ01 (NTSC-J 1.1)",
|
||||
"GMSP01": "GMSP01 (PAL)",
|
||||
"loadpresetplaceholder": "Load a preset..",
|
||||
"selectionreset": "This will reset your selection, continue?"
|
||||
"selectionreset": "This will reset your selection, continue?",
|
||||
"discard": "This will discard all your changes, continue?"
|
||||
},
|
||||
"codeeditor": {
|
||||
"fields": {
|
||||
"title": {
|
||||
"label": "Title",
|
||||
"placeholder": "N/A"
|
||||
},
|
||||
"value": {
|
||||
"label": "Gecko Code",
|
||||
"placeholder": "Your Gecko Code.."
|
||||
}
|
||||
},
|
||||
"save": "Save"
|
||||
},
|
||||
"headers": {
|
||||
"codelist": "Available Codes",
|
||||
|
|
@ -39,7 +53,8 @@
|
|||
"timer": "Timers",
|
||||
"misc": "Misc",
|
||||
"memcardpatch": "Memory Card Patches",
|
||||
"cosmetic": "Cosmetic"
|
||||
"cosmetic": "Cosmetic",
|
||||
"custom": "Custom"
|
||||
},
|
||||
"presets": {
|
||||
"standard": "Standard",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
body
|
||||
min-height: 120vh;
|
||||
font-size: 15px;
|
||||
|
||||
body.fool
|
||||
transform: rotateY(-180deg);
|
||||
|
|
@ -24,3 +25,6 @@ footer.page-edit
|
|||
|
||||
aside.sidebar
|
||||
z-index: 18;
|
||||
|
||||
header
|
||||
z-index: 9991 !important;
|
||||
|
|
|
|||
Loading…
Reference in a new issue