From 6b3eb8f6881c0a5bfc879b9e4620b3a5ccddff9c Mon Sep 17 00:00:00 2001 From: Marc Robledo Date: Sun, 11 Aug 2024 21:35:47 +0200 Subject: [PATCH] Updated Embedding Rom Patcher JS (markdown) --- Embedding-Rom-Patcher-JS.md | 45 ++++++++++++++++++++++++++++++++----- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/Embedding-Rom-Patcher-JS.md b/Embedding-Rom-Patcher-JS.md index 4de8f4c..d721fbd 100644 --- a/Embedding-Rom-Patcher-JS.md +++ b/Embedding-Rom-Patcher-JS.md @@ -3,12 +3,9 @@ If you are self-hosting your own translations and/or hack patches, you can embed Take a look at [`index_template.html`](https://github.com/marcrobledo/RomPatcher.js/blob/master/index_template.html) for a template. Basically you need to: 1. [Download the latest version](https://github.com/marcrobledo/RomPatcher.js/releases) and copy the entire `rom-patcher-js/` folder to your site -2. Include **all** file imports from the `
` into yours: +2. Include the CSS and JS file imports from the `
` into yours: ```html - - ... - ``` 3. Copy the needed HTML structure from `index_template.html`: @@ -29,7 +26,7 @@ Take a look at [`index_template.html`](https://github.com/marcrobledo/RomPatcher }); ``` - +5. Customize `style.css` at your own   # Providing additional patch information @@ -86,6 +83,10 @@ const myPatcherSettings={ /* this event is triggered after ROM is validated */ /* can be used to show a custom error message if provided ROM is not valid */ }, + onloadpatch: function (patchFile, embededPatchInformation) { + /* this event is triggered when user selects a patch from the dropdown */ + /* can be used to toggle HTML elements in your site depending on the selected patch */ + }, onpatch: function (romFile) { /* this event is triggered a ROM is patched */ /* can be used to modify it before the patched ROM file is saved */ @@ -206,3 +207,37 @@ SNES ROM files are usually stored in `.sfc` (headerless) or `.smc` (headered) fo } ); ``` + +  +## Example: Detect selected patch +By detecting which patch the user selected, you can do cool things in your site like showing different screenshots. +```js + RomPatcher.initialize( + { + onloadpatch: function (patchFile, embededPatchInformation) { + if (patchFile.getName() === 'legend_of_mana_sword_amanda') { + document.getElementById('screenshots_amanda').style.display = 'block'; + document.getElementById('screenshots_duke').style.display = 'none'; + }else if(patchFile.getName() === 'legend_of_mana_sword_duke'){ + document.getElementById('screenshots_amanda').style.display = 'none'; + document.getElementById('screenshots_duke').style.display = 'block'; + } + } + }, { + file: 'legend_of_mana_sword.zip', + name: 'Legend of the Mana sword', + patches: [ + { + file: 'legend_of_mana_sword_amanda.ips', + description: 'With this patch, you will play as Amanda', + outputName: 'Legend of Mana sword (Amanda version)' + }, + { + file: 'legend_of_mana_sword_duke.ips', + description: 'With this patch, you will play as Duke', + outputName: 'Legend of Mana sword (Duke version)' + } + ] + } + ); +```