1
0
Fork 0
mirror of https://github.com/jugeeya/UltimateTrainingModpack.git synced 2024-11-27 20:34:03 +00:00

Change from remote to local resource files (#315)

* Extract css into standalone file

* Move images to static folder

* Add fonts, fix focus animation

* Remove Nintendo JS dependencies

* Remove unused sliders templating

* Fix shadows

* Fix back button

* Work on Sound Effects

* Change htdocs folder

* Move fonts to a folder

* Refactor JS to remove jquery as a dependency

* Fix broken JS

* Update rust.yml
This commit is contained in:
asimon-1 2022-03-05 16:55:13 -05:00 committed by GitHub
parent 720f904985
commit e2a5620ee3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 1361 additions and 1056 deletions

View file

@ -47,11 +47,11 @@ jobs:
with:
name: plugin
path: target/aarch64-skyline-switch/release/libtraining_modpack.nro
- name: Upload menu icons
- name: Upload static files
uses: actions/upload-artifact@v2
with:
name: svg
path: src/templates/*.svg
name: static
path: src/static
plugin_outside_training_mode:
if: github.ref == 'refs/heads/master'
runs-on: ubuntu-latest
@ -81,7 +81,7 @@ jobs:
env:
SKYLINE_DIR: atmosphere/contents/01006A800016E000
SMASH_PLUGIN_DIR: atmosphere/contents/01006A800016E000/romfs/skyline/plugins
SMASH_WEB_DIR: atmosphere/contents/01006A800016E000/manual_html/html-document/contents.htdocs
SMASH_WEB_DIR: atmosphere/contents/01006A800016E000/manual_html/html-document/training_modpack.htdocs
run: |
mkdir -p ${{env.SKYLINE_DIR}}
mkdir -p ${{env.SMASH_PLUGIN_DIR}}
@ -96,7 +96,8 @@ jobs:
cp libparam_hook.nro ${{env.SMASH_PLUGIN_DIR}}/libparam_hook.nro
cp libnro_hook.nro ${{env.SMASH_PLUGIN_DIR}}/libnro_hook.nro
cp libnn_hid_hook.nro ${{env.SMASH_PLUGIN_DIR}}/libnn_hid_hook.nro
ls -1 svg/*.svg | xargs -n 1 basename | xargs -L1 -I{} cp svg/{} ${{env.SMASH_WEB_DIR}}/{}
cp -r static/* ${{env.SMASH_WEB_DIR}}
rm ${{env.SMASH_WEB_DIR}}/fonts -r
zip -r training_modpack_beta.zip atmosphere
- name: Update Release
uses: meeDamian/github-release@2.0

View file

@ -141,39 +141,44 @@ SD Card Root
└── 01006A800016E000
├── manual_html
│ └── html-document
│ └── contents.htdocs
│ ├── aerial_delay.svg
│ ├── air_dodge_dir.svg
│ ├── attack_angle.svg
│ ├── buff_state.svg
│ ├── check.svg
│ ├── defensive_state.svg
│ ├── di_state.svg
│ ├── falling_aerials.svg
│ ├── fast_fall.svg
│ ├── fast_fall_delay.svg
│ ├── follow_up.svg
│ ├── frame_advantage.svg
│ ├── full_hop.svg
│ ├── input_delay.svg
│ ├── ledge_delay.svg
│ ├── ledge_state.svg
│ ├── mash_in_neutral.svg
│ ├── mash_state.svg
│ ├── miss_tech_state.svg
│ ├── oos_offset.svg
│ ├── pummel_delay.svg
│ ├── reaction_time.svg
│ ├── save_damage.svg
│ ├── save_state_mirroring.svg
│ ├── sdi_state.svg
│ ├── sdi_strength.svg
│ ├── shield_state.svg
│ ├── shield_tilt.svg
│ ├── stage_hazards.svg
│ ├── tech_state.svg
│ ├── throw_delay.svg
│ └── throw_state.svg
│ └── training_modpack.htdocs
│ ├── css
│ │ └── training_modpack.css
│ ├── img
│ │ ├── aerial_delay.svg
│ │ ├── air_dodge_dir.svg
│ │ ├── attack_angle.svg
│ │ ├── buff_state.svg
│ │ ├── check.svg
│ │ ├── defensive_state.svg
│ │ ├── di_state.svg
│ │ ├── falling_aerials.svg
│ │ ├── fast_fall.svg
│ │ ├── fast_fall_delay.svg
│ │ ├── follow_up.svg
│ │ ├── frame_advantage.svg
│ │ ├── full_hop.svg
│ │ ├── input_delay.svg
│ │ ├── ledge_delay.svg
│ │ ├── ledge_state.svg
│ │ ├── mash_in_neutral.svg
│ │ ├── mash_state.svg
│ │ ├── miss_tech_state.svg
│ │ ├── oos_offset.svg
│ │ ├── pummel_delay.svg
│ │ ├── reaction_time.svg
│ │ ├── save_damage.svg
│ │ ├── save_state_mirroring.svg
│ │ ├── sdi_state.svg
│ │ ├── sdi_strength.svg
│ │ ├── shield_state.svg
│ │ ├── shield_tilt.svg
│ │ ├── stage_hazards.svg
│ │ ├── tech_state.svg
│ │ ├── throw_delay.svg
│ │ └── throw_state.svg
│ └── js
│ └── training_modpack.js
└── romfs
└── skyline
└── plugins

View file

@ -573,7 +573,7 @@ pub unsafe fn write_menu() {
// Now that we have the html, write it to file
// From skyline-web
let program_id = get_program_id();
let htdocs_dir = "contents";
let htdocs_dir = "training_modpack";
let path = Path::new("sd:/atmosphere/contents")
.join(&format!("{:016X}", program_id))
.join(&format!("manual_html/html-document/{}.htdocs/", htdocs_dir))
@ -593,7 +593,7 @@ pub fn spawn_menu() {
let params = unsafe { MENU.to_url_params() };
let page_response = Webpage::new()
.background(Background::BlurredScreenshot)
.htdocs_dir("contents")
.htdocs_dir("training_modpack")
.boot_display(BootDisplay::BlurredScreenshot)
.boot_icon(true)
.start_page(&format!("{}{}", fname, params))

View file

@ -0,0 +1,356 @@
@-moz-document url-prefix() {
@font-face {
font-family: "nintendo_udsgr_std_003";
src: url("../fonts/nintendo_udsgr_std_003.ttf");
}
@font-face {
font-family: "nintendo_ext_003";
src: url("../fonts/nintendo_ext_003.ttf");
}
}
@keyframes background-slide {
0% {
background-position-x: 0px;
}
100% {
background-position-x: 422.4px;
}
}
.answer-border-outer {
margin-top: 5px;
}
.button-icon {
height: 53px;
margin-left: 4px;
width: 53px;
}
.button-icon-wrapper {
align-items: center;
background: #000000;
display: flex;
height: 58px;
margin-left: -1px;
width: 80px;
}
.button-msg-wrapper {
width: 259px;
}
.checkbox-display {
margin: 10px 70px;
}
.checkbox-display::after {
/* Displayed Checkbox (unchecked) */
color: white;
content: "\E14C";
}
.defaults-checkbox-container {
/* Save Defaults Container */
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 10px;
position: fixed;
right: 50px;
}
.flex-button {
align-items: center;
display: inline-flex;
flex: 1;
justify-content: center;
text-align: center;
vertical-align: middle;
}
.footer {
align-items: center;
background: #000000;
display: flex;
height: 73px;
justify-content: center;
position: fixed;
z-index: 10;
}
.header {
align-items: center;
background: #000000;
border-bottom: 7px solid #000000;
display: flex;
height: 65px;
}
.header-decoration {
align-items: center;
background: #a80114;
display: inline-flex;
height: 65px;
padding-left: 21px;
width: 101px;
}
.header-desc {
color: white;
}
.header-title {
color: #f46264;
font-size: 26px;
line-height: 2.5;
}
.is-appear {
opacity: 1;
}
.is-focused .question-border::before {
background: #000000;
box-shadow: none;
}
.is-focused .question-message {
color: #FFFFFF;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.is-focused .question.scuffle-thema {
background: #df1624;
}
.is-focused .scuffle-thema {
background: #df1624;
}
.is-hidden {
display: none;
}
.is-opened .question {
bottom: 11px;
}
.is-opened .question-border::before {
background: #000000;
bottom: 5px;
}
.is-opened .question-outer {
height: 86px;
width: 100%;
}
.keyword-button {
background: #d9e4ea;
border: solid 4px #2e3c45;
box-shadow: 1px 1px 6px rgba(24, 24, 24, 0.6);
box-sizing: border-box;
height: 66px;
justify-content: flex-start;
position: relative;
z-index: 0;
}
.keyword-button-outer {
border: 5px solid transparent;
will-change: transform;
}
.keyword-message {
color: #2b3940;
font-size: 22px;
padding: 0px 5px;
}
.l-footer {
bottom: 0px;
left: 0px;
width: 100%;
}
.l-grid {
display: flex;
flex-wrap: wrap;
}
.l-header {
box-shadow: 0px 1px 1px #000000;
display: flex;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 100;
}
.l-header-title {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
left: 0px;
position: absolute;
top: 0px;
width: 1280px;
}
.l-item {
margin: 0px 13px;
}
.l-main-content {
/* Overwrite padding from keyword stuff. */
padding: 0px 0px 0px;
}
.l-qa {
/* Column size */
flex-basis: 33%;
}
.l-qa:last-child .qa {
/* Overwrite margin on the last child to avoid overlap with footer */
margin-bottom: 75px;
}
.l-qa:last-child .qa.is-opened {
margin-bottom: 0px;
}
.qa {
display: block;
will-change: scroll-position;
}
.is-focused {
background: linear-gradient(90deg, rgb(255, 109, 0) 0%, rgb(255, 255, 0) 65%, rgb(255, 109, 0) 70%);
will-change: animation;
animation: background-slide 650ms linear infinite normal;
}
.question {
align-items: center;
background: #d9e4ea;
bottom: 11px;
display: flex;
left: 11px;
padding: 0px 30px 0px 94px;
position: absolute;
right: 28px;
top: 11px;
}
.question-border::before {
background: #2e3c45;
bottom: 6px;
box-shadow: 3px 3px 3px rgba(24, 24, 24, 0.5);
content: '';
left: 6px;
position: absolute;
right: 6px;
top: 6px;
}
.question-icon {
bottom: 0px;
height: 60px;
left: 2px;
position: absolute;
top: 2px;
transition: opacity 0.2s ease;
width: 60px;
}
.question-message {
color: #2b3940;
font-size: 23px;
width: 100%;
z-index: 0;
}
.question-message span {
display: block;
letter-spacing: normal;
}
.question-outer {
height: 86px;
position: relative;
}
.question::before {
width: 70px;
background: #000000;
bottom: 0px;
content: '';
left: 0px;
position: absolute;
top: 0px;
}
.ret-icon {
display: inline-block;
height: 58px;
transition: opacity 0.2s ease;
width: 58px;
}
.ret-icon-wrapper {
margin-left: -4px;
position: relative;
will-change: transform;
}
#saveDefaults {
/* Checkbox element (hidden) */
left: -100vw;
position: absolute;
}
#saveDefaults:checked~.checkbox-display::after {
/* Displayed Checkbox (checked) */
content: "\E14B";
}
a {
text-decoration: none;
}
body {
background: none;
width: 1280px;
}
body, div, th, td, p, ul, ol, dl, dt, dd, img, h1, h2, h3, h4, h5, h6, footer, header, nav, p, section, span, figure {
margin: 0px;
overflow-wrap: break-word;
padding: 0px;
word-break: normal;
font-family: "nintendo_ext_003", "nintendo_udsgr_std_003";
}
img, svg {
opacity: 0;
}
img.question-icon:not(.toggle) {
/* Fade icons slightly */
opacity: 0.75;
}
span {
letter-spacing: 0.01px;
}
ul, ol {
list-style-type: none;
}

Binary file not shown.

Binary file not shown.

View file

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

View file

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View file

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View file

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View file

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

View file

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

View file

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View file

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View file

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View file

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View file

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

View file

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="レイヤー_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M41.5,69.9V51.5h7.2c2.4-0.1,4.3-2.1,4.3-4.5c0-2.4-2-4.5-4.4-4.6l-14.9,0v13.9L8,33.1L33.7,10v13.9l15.3,0
c12.6,0.3,22.8,10.7,22.8,23.1c0,12.6-10,22.7-22.7,23l-0.1,0H41.5z"/>
</g>
</svg>

View file

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View file

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View file

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

View file

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

View file

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View file

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View file

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

View file

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

View file

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

View file

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

View file

@ -0,0 +1,304 @@
var isNx = (typeof window.nx !== 'undefined');
var prevQuestionMsg = null;
var prevFocusedElm = null;
if (isNx) {
window.nx.footer.setAssign('B', '', goBackHook, {se: ''});
window.nx.footer.setAssign('X', '', resetSubmenu, {se: ''});
window.nx.footer.setAssign('L', '', resetAllSubmenus, {se: ''});
window.nx.footer.setAssign('R', '', toggleSaveDefaults, {se: ''});
} else {
document.getElementById("body").addEventListener('keypress', (event) => {
switch (event.key) {
case "b":
console.log("b");
goBackHook();
break;
case "x":
console.log("x");
resetSubmenu();
break;
case "l":
console.log("l");
resetAllSubmenus();
break;
case "r":
console.log("r");
toggleSaveDefaults();
break;
}
});
}
window.onload = setSettings;
function isTextNode(node) {
return node.nodeType == Node.TEXT_NODE
}
function closestClass(elem, class_) {
// Returns the closest anscestor (including self) with the given class
if (!elem) {
// Reached the end of the DOM
return null
} else if (elem.classList.contains(class_)) {
// Found it
return elem
} else {
// Didn't find it, go up a level
return closestClass(elem.parentElement, class_);
}
}
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
function focusQA(e) {
playSound("SeSelectUncheck");
prevFocusedElm = e;
e.classList.add("is-focused");
}
function defocusQA(e) {
if (prevFocusedElm) {
prevFocusedElm.classList.remove('is-focused');
}
if (prevQuestionMsg) {
prevQuestionMsg.remove();
prevQuestionMsg = null;
}
}
function toggleAnswer(e) {
playSound("SeToggleBtnOn");
e.classList.toggle("is-opened");
// Toggle visibility of child answers
[].forEach.call(e.childNodes, function (child) {
if (!isTextNode(child) && child.classList.contains("answer-border-outer")) {
child.classList.toggle("is-hidden");
}
});
// Toggle visibility of sibling answers
var sibling = e.nextElementSibling;
if (sibling.classList.contains("answer-border-outer")) {
sibling.classList.toggle("is-hidden");
}
}
function playSound(label) {
// Valid labels:
// SeToggleBtnFocus
// SeToggleBtnOn
// SeToggleBtnOff
// SeCheckboxFocus
// SeCheckboxOn
// SeCheckboxOff
// SeRadioBtnFocus
// SeRadioBtnOn
// SeSelectCheck
// SeSelectUncheck
// SeBtnDecide
// SeTouchUnfocus
// SeBtnFocus
// SeKeyError
// SeDialogOpen
// SeWebZoomOut
// SeWebZoomIn
// SeWebNaviFocus
// SeWebPointerFocus
// SeFooterFocus
// SeFooterDecideBack
// SeFooterDecideFinish
// SeWebChangeCursorPointer
// SeWebTouchFocus
// SeWebLinkDecide
// SeWebTextboxStartEdit
// SeWebButtonDecide
// SeWebRadioBtnOn
// SeWebCheckboxUncheck
// SeWebCheckboxCheck
// SeWebMenuListOpen
if (isNx) {
window.nx.playSystemSe(label);
} else {
console.log("Sound Effect: " + label);
}
}
function goBackHook() {
// If any submenus are open, close them
// Otherwise if all submenus are closed, exit the menu and return to the game
if (document.querySelectorAll(".qa.is-opened").length == 0) {
// If all submenus are closed, exit and return through localhost
playSound("SeFooterDecideBack");
var url = "http://localhost/";
var settings = new Map();
// Collect settings for toggles
[].forEach.call(document.querySelectorAll("ul.l-grid"), function (toggle) {
var section = toggle.id;
var val = "";
[].forEach.call(toggle.childNodes, function (child) {
if (!isTextNode(child) && child.querySelectorAll(".is-appear").length) {
val += child.getAttribute("val") + ",";
};
});
settings.set(section,val);
});
// Collect settings for OnOffs
[].forEach.call(document.querySelectorAll("div.onoff"), function (onoff) {
var section = onoff.id;
var val = "";
if (onoff.querySelectorAll(".is-appear").length) {
val = "1";
} else {
val = "0";
}
settings.set(section,val);
});
url += "?";
settings.forEach((val, section) => { url += section + "=" + val + "&" } );
if (document.getElementById("saveDefaults").checked) {
url += "save_defaults=1";
} else {
url = url.slice(0, -1);
}
if (isNx) {
window.location.href = url;
} else {
console.log(url);
}
} else {
// Close any open submenus
[].forEach.call(document.querySelectorAll(".qa.is-opened"), function (submenu) { toggleAnswer(submenu); });
}
}
function clickToggle(e) {
playSound("SeCheckboxOn");
var toggleOptions = e.querySelector(".toggle");
if (e.querySelector(".is-single-option")) { // Single-option submenu
// Deselect all submenu options
closestClass(e, "l-qa").querySelector(".toggle").classList.remove("is-appear");
closestClass(e, "l-qa").querySelector(".toggle").classList.add("is-hidden");
// Then set the current one as the active setting
toggleOptions.classList.add("is-appear");
toggleOptions.classList.remove("is-hidden");
} else { // Multi-option submenu
toggleOptions.classList.toggle("is-appear");
toggleOptions.classList.toggle("is-hidden");
}
}
function getParams(url) {
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while (match = regex.exec(url)) {
params[match[1]] = match[2];
}
return params;
}
function setSettings() {
// Get settings from the URL GET parameters
const settings = getParams(document.URL);
// Set Toggles
[].forEach.call(document.querySelectorAll("ul.l-grid"), function (toggle) {
var section = toggle.id;
var section_setting = decodeURIComponent(settings[section]);
[].forEach.call(toggle.querySelectorAll("li"), function (child) {
var e = child.querySelector("img.toggle");
if (section_setting.split(",").includes(child.getAttribute("val"))) {
e.classList.add("is-appear");
e.classList.remove("is-hidden");
} else {
e.classList.remove("is-appear");
e.classList.add("is-hidden");
};
});
});
// Set OnOffs
[].forEach.call(document.querySelectorAll("div.onoff"), function (onOff) {
var section = onOff.id;
var section_setting = decodeURIComponent(settings[section]);
var e = onOff.querySelector("img.toggle");
if (section_setting == "1") {
e.classList.add("is-appear");
e.classList.remove("is-hidden");
} else {
e.classList.remove("is-appear");
e.classList.add("is-hidden");
};
});
}
function resetSubmenu() {
// Resets any open or focused submenus to the default values
playSound("SeToggleBtnOff");
[].forEach.call(document.querySelectorAll("[default*='is-appear']"), function (item) {
if (isSubmenuFocused(item)) {
item.classList.add("is-appear");
item.classList.remove("is-hidden");
}
});
[].forEach.call(document.querySelectorAll("[default*='is-hidden']"), function (item) {
if (isSubmenuFocused(item)) {
item.classList.remove("is-appear");
item.classList.add("is-hidden");
}
});
}
function isSubmenuFocused(elem) {
// Return true if the element is in a submenu which is either focused or opened
return (
closestClass(elem, "l-qa").querySelectorAll(".is-opened, .is-focused").length
|| closestClass(elem, "is-focused")
)
}
function resetAllSubmenus() {
// Resets all submenus to the default values
if (confirm("Are you sure that you want to reset all menu settings to the default?")) {
playSound("SeToggleBtnOff");
[].forEach.call(document.querySelectorAll("[default*='is-appear']"), function (item) {
item.classList.add("is-appear");
item.classList.remove("is-hidden");
});
[].forEach.call(document.querySelectorAll("[default*='is-hidden']"), function (item) {
item.classList.remove("is-appear");
item.classList.add("is-hidden");
});
}
}
function setHelpText(text) {
// Modify the help text in the footer
document.getElementById("help-text").innerText = text;
}
function toggleSaveDefaults() {
// Change the status of the Save Defaults checkbox
playSound("SeCheckboxOn");
var saveDefaultsCheckbox = document.getElementById("saveDefaults");
saveDefaultsCheckbox.checked = !saveDefaultsCheckbox.checked;
}

View file

@ -5,148 +5,23 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="./help/css/common.css" />
<link rel="stylesheet" href="./help/css/qa.css" />
<link rel="stylesheet" href="./help/css/top.css" />
<link id="font-stylesheet" rel="stylesheet" href="./help/css/font.css">
<link rel="stylesheet" href="./help/css/keyword.css">
<link href="./nouislider.min.css" rel="stylesheet">
<style>
@-moz-document url-prefix() {
@font-face {
font-family: '-webkit-standard';
src: url('nintendo_udsg-r_std_003.ttf');
}
}
body {
background: none;
}
/* Overwrite padding from keyword stuff. */
.l-main-content {
padding: 0px 0px 0px;
}
/* Somehow isn't getting passed through from default css. */
.ret-icon-shadow {
position: absolute;
z-index: -1;
top: 3px;
left: 2px;
display: inline-block;
width: 58px;
height: 58px;
opacity: 0;
transition: opacity 0.2s ease;
}
/* Column size */
.l-qa {
flex-basis: 33%;
}
/* Full width for opened lists */
.is-opened .question-outer {
width: 100%;
}
/* Overwrite margin on the last child to avoid overlap with footer */
.l-qa:last-child .qa {
margin-bottom: 75px;
}
.l-qa:last-child .qa.is-opened {
margin-bottom: 0px;
}
/* Fade icons slightly */
img.question-icon:not(.toggle) {
opacity: 0.75;
}
/* Override excessive question width on focus */
.is-focused .question-message span:nth-child(1) {
width: auto;
}
/* Handle alignment of items in the header */
.l-header {
display: flex;
}
/* Set menu description color */
.header-desc {
color: white;
}
/* Center Icons */
.question::before {
width: 70px;
}
/* Footer */
.footer {
position: fixed;
z-index: 10;
}
/* Save Defaults Container */
.defaults-checkbox-container {
position: fixed;
right: 50px;
margin-top: 10px;
display: flex;
justify-content: center;
flex-direction: column;
}
/* Checkbox element (hidden) */
#saveDefaults {
position: absolute;
left: -100vw;
}
.checkbox-display {
margin: 10px 70px;
}
/* Displayed Checkbox (unchecked) */
.checkbox-display::after {
content: "\E14C";
color: white;
}
/* Displayed Checkbox (checked) */
#saveDefaults:checked ~ .checkbox-display::after {
content: "\E14B";
}
</style>
<link rel="stylesheet" href="./css/training_modpack.css" />
</head>
<body>
<script src="./help/js/jquery-3.3.1.min.js"></script>
<script src="./help/common/js/wsnd.min.js"></script>
<script src="./help/common/js/keyhelp.js"></script>
<script src="./help/js/common.js"></script>
<script src="./help/js/qa.js"></script>
<script src="./nouislider.min.js"></script>
<body id="body">
<script defer src="./js/training_modpack.js"></script>
<div class="l-header">
<div class="l-header-title">
<div class="header-title f-u-bold"><span data-msgcom="true" data-msgid="textbox_id-10020">Ultimate
Training
Modpack Menu</span></div>
<div class="header-title"><span>Ultimate Training Modpack Menu</span></div>
</div>
<div class="header" style="flex-grow: 1;">
<a id="ret-button" tabindex="-1" class="header-decoration" href="javascript:goBackHook();" nx-se-disabled="">
<a id="ret-button" tabindex="-1" class="header-decoration" href="javascript:goBackHook();">
<div class="ret-icon-wrapper">
<img class="ret-icon-shadow is-appear" ref="./help/img/icon/m_retnormal.svg" src="./help/img/icon/m_retnormal.svg">
<img class="ret-icon is-appear" ref="./help/img/icon/m_retnormal.svg" src="./help/img/icon/m_retnormal.svg">
<img class="ret-icon is-appear" src="./img/m_retnormal.svg">
</div>
</a>
</div>
<div class="header f-u-bold" style="flex-direction: column; justify-content: center; align-items: end;">
<div class="header" style="flex-direction: column; justify-content: center; align-items: end; padding-right: 10px;">
<p class="header-desc">Reset Current Menu: &#xE0A2;</p>
<p class="header-desc">Reset All Menus: &#xE0A4;</p>
</div>
@ -174,29 +49,30 @@
{{#sub_menus}}
<div class="l-qa">
{{^onoffselector}}
<a id="qa-{{id}}" class="qa" tabindex="{{index}}" href="javascript:void(0);" onfocus="focusQA(this);setHelpText({{help_text}})" onblur="defocusQA(this)" onclick="openAnswer(this)" nx-se-disabled="">
<a id="qa-{{id}}" class="qa" tabindex="{{index}}" href="javascript:void(0);" onfocus="focusQA(this);setHelpText({{help_text}})" onblur="defocusQA(this)" onclick="toggleAnswer(this)">
<div class="question-outer">
<div class="question-border">
<div id="question-{{id}}" class="question scuffle-thema">
<img class="question-icon" ref="./{{id}}.svg" src="./{{id}}.svg" />
<p class="question-message f-u-bold">
<span data-msgid="textbox_id-7">{{title}}</span>
<img class="question-icon" src="./img/{{id}}.svg" />
<p class="question-message">
<span>{{title}}</span>
</p>
</div>
</div>
</div>
</a>
<div id="answer-border-{{id}}" class="answer-border-outer is-hidden">
<div class="l-main">
<ul class="l-grid" id="{{id}}">
{{#toggles}}
<li class="l-item" val="{{value}}">
<div class="keyword-button-outer">
<a tabindex="{{index}}" class="flex-button keyword-button scuffle-thema" href="javascript:void(0)" onclick="clickToggle(this);" nx-se-disabled="">
<a tabindex="{{index}}" class="flex-button keyword-button scuffle-thema" href="javascript:void(0)" onclick="clickToggle(this);">
<div class="button-icon-wrapper">
<img class="button-icon toggle {{checked}} {{#is_single_option}}is-single-option{{/is_single_option}}" ref="./check.svg" src="./check.svg" default="{{default}}">
<img class="button-icon toggle {{checked}} {{#is_single_option}}is-single-option{{/is_single_option}}" src="./img/check.svg" default="{{default}}">
</div>
<div class="button-msg-wrapper">
<div class="keyword-message f-u-bold">
<div class="keyword-message">
{{title}}
</div>
</div>
@ -204,56 +80,20 @@
</div>
</li>
{{/toggles}}
{{#sliders}}
<li class="l-item" val="{{value}}">
<div class="keyword-button-outer">
<a tabindex="{{index}}" class="flex-button keyword-button scuffle-thema" href="javascript:void(0)" onclick="clickToggle(this);" nx-se-disabled="">
<div class="button-icon-wrapper">
<img class="button-icon toggle {{checked}}" ref="./check.svg" src="./check.svg">
</div>
<div class="button-msg-wrapper">
<div class="keyword-message f-u-bold">
<div name='range_slider' oninput="this.nextElementSibling.value = this.value">
</div>
<output>{{value}}</output>
</div>
</div>
</a>
</div>
</li>
{{/sliders}}
{{#range_sliders}}
<li class="l-item" val="{{value}}">
<div class="keyword-button-outer">
<a tabindex="{{index}}" class="flex-button keyword-button scuffle-thema" href="javascript:void(0)" onclick="clickToggle(this);" nx-se-disabled="">
<div class="button-icon-wrapper">
<img class="button-icon toggle {{checked}}" ref="./check.svg" src="./check.svg">
</div>
<div class="button-msg-wrapper">
<div class="keyword-message f-u-bold">
<div name="{{id}}">
</div>
</div>
</div>
</a>
</div>
</li>
{{/range_sliders}}
</ul>
</div>
</div>
</a>
{{/onoffselector}}
{{#onoffselector}}
<a id="qa-{{id}}" class="qa" tabindex="{{index}}" href="javascript:void(0);" onfocus="focusQA(this);setHelpText({{help_text}})" onblur="defocusQA(this)" onclick="clickToggle(this)" nx-se-disabled="">
<a id="qa-{{id}}" class="qa" tabindex="{{index}}" href="javascript:void(0);" onfocus="focusQA(this);setHelpText({{help_text}})" onblur="defocusQA(this)" onclick="clickToggle(this)">
<div class="question-outer">
<div class="question-border">
<div id="question-{{id}}" class="question scuffle-thema">
<div id="{{id}}" class="onoff">
<img class="question-icon" style="z-index: 1;" ref="./{{id}}.svg" src="./{{id}}.svg" />
<div><img class="question-icon toggle {{checked}}" style="z-index: 2;" ref="./check.svg" src="./check.svg" default="{{default}}"/></div>
<p class="keyword-message f-u-bold">
{{title}}
<img class="question-icon" style="z-index: 1;" src="./img/{{id}}.svg" />
<div><img class="question-icon toggle {{checked}}" style="z-index: 2;" src="./img/check.svg" default="{{default}}"/></div>
<p class="question-message">
<span>{{title}}</span>
</p>
</div>
</div>
@ -264,21 +104,7 @@
</div>
{{/sub_menus}}
</div>
{{#sub_menus}}
{{#sliders}}
<script>
// todo: loop through
noUiSlider.create(document.getElementsByName('range_slider')[0], {
start: {{ value }},
range: {
'min': {{ min }},
'max': {{ max }}
}
});
</script>
{{/sliders}}
{{/sub_menus}}
<footer id="footer" class="footer l-footer f-u-bold">
<footer id="footer" class="footer l-footer">
<p id="help-text" class="header-desc"></p>
<div class="defaults-checkbox-container">
<label class="header-desc" for="saveDefaults">Save defaults: &#xE0A5;</label>
@ -286,202 +112,6 @@
<div class="checkbox-display"></div>
</div>
</footer>
<script>
if (isNx) {
window.nx.footer.setAssign('B', '', goBackHook, {
se: ''
})
window.nx.footer.setAssign('X', '', resetSubmenu, {
se: ''
})
window.nx.footer.setAssign('L', '', resetAllSubmenus, {
se: ''
})
window.nx.footer.setAssign('R', '', toggleSaveDefaults, {
se: ''
})
}
function goBackHook() {
// If any submenus are open, close them
// Otherwise if all submenus are closed, exit the menu and return to the game
if ($(".qa.is-opened").length == 0) {
// If all submenus are closed, exit and return through localhost
$('.is-focused').addClass('is-pause-anim')
$('#ret-button').addClass('is-focus')
disabledOtherLink()
playSound('cancel')
var url = "http://localhost/"
var settings = [];
// Collect settings for toggles
$("ul.l-grid").each(function () {
var section = this.id;
var val = "";
var children = this.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if ($(child).find(".is-appear").length) {
val += child.getAttribute("val") + ",";
};
}
settings.push({
name: section,
value: val
});
});
// Collect settings for OnOffs
$("div.onoff").each(function () {
var section = this.id;
var val = "";
if ($(this).find(".is-appear").length) {
val = "1"
} else {
val = "0"
}
settings.push({
name: section,
value: val
});
});
url += "?" + decodeURIComponent($.param(settings));
if ($("#saveDefaults").prop("checked")) {
url += "&save_defaults=1";
}
// console.log(url);
location.href = url;
fadeOutPage(function () {
window.history.back()
})
} else {
// Close any open submenus
$(".qa.is-opened").each(function () { openAnswer(this); });
}
}
function clickToggle(e) {
var toggleOptions = $(e).find(".toggle");
if ($(e).find(".is-single-option").length) { // Single-option submenu
// Deselect all submenu options
$(e).closest(".l-qa").find(".toggle").removeClass("is-appear");
$(e).closest(".l-qa").find(".toggle").addClass("is-hidden");
// Then set the current one as the active setting
toggleOptions.addClass("is-appear");
toggleOptions.removeClass("is-hidden");
} else { // Multi-option submenu
toggleOptions.toggleClass("is-appear");
toggleOptions.toggleClass("is-hidden");
}
}
function getParams(url) {
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while(match = regex.exec(url)) {
params[match[1]] = match[2];
}
return params;
}
function setSettings() {
// Get settings from the URL GET parameters
const settings = getParams(document.URL);
// Set Toggles
$("ul.l-grid").each(function () {
var section = this.id;
var section_setting = decodeURIComponent(settings[section]);
var children = $(this).children("li");
for (var i = 0; i < children.length; i++) {
var child = children[i];
var e = $(child).find("img.toggle");
if (section_setting.split(",").includes(child.getAttribute("val"))) {
e.addClass("is-appear");
e.removeClass("is-hidden");
} else {
e.removeClass("is-appear");
e.addClass("is-hidden");
};
}
});
// Set OnOffs
$("div.onoff").each(function () {
var section = this.id;
var section_setting = decodeURIComponent(settings[section]);
var e = $(this).find("img.toggle");
if (section_setting == "1") {
e.addClass("is-appear");
e.removeClass("is-hidden");
} else {
e.removeClass("is-appear");
e.addClass("is-hidden");
};
});
}
function resetSubmenu() {
// Resets any open or focused submenus to the default values
$("[default*='is-appear']").each(function () {
if (isSubmenuFocused(this)) {
$(this).addClass("is-appear");
$(this).removeClass("is-hidden");
}
});
$("[default*='is-hidden']").each(function() {
if (isSubmenuFocused(this)) {
$(this).removeClass("is-appear");
$(this).addClass("is-hidden");
}
});
}
function isSubmenuFocused(elem) {
// Return true if the element is in a submenu which is either focused or opened
return (
$(elem).closest(".l-qa").children(".is-opened, .is-focused").length
|| $(elem).closest(".is-focused").length
)
}
function resetAllSubmenus() {
// Resets all submenus to the default values
if (confirm("Are you sure that you want to reset all menu settings to the default?")) {
$("[default*='is-appear']").addClass("is-appear");
$("[default*='is-appear']").removeClass("is-hidden");
$("[default*='is-hidden']").removeClass("is-appear");
$("[default*='is-hidden']").addClass("is-hidden");
}
}
function setHelpText(text) {
// Modify the help text in the footer
$("#help-text").text(text);
}
function toggleSaveDefaults() {
// Change the status of the Save Defaults checkbox
var saveDefaultsCheckbox = $("#saveDefaults");
saveDefaultsCheckbox.prop(
"checked",
!saveDefaultsCheckbox.prop("checked")
);
}
</script>
<script>
window.onload = setSettings;
</script>
</body>
</html>

View file

@ -9,12 +9,12 @@ fn write_menu() {
use crate::common::menu::write_menu;
use std::process::Command;
let folder_path = "../contents.htdocs";
let path = "../contents.htdocs/training_menu.html";
let folder_path = "../training_modpack.htdocs";
let path = "../training_modpack.htdocs/training_menu.html";
assert!(
std::path::Path::new(folder_path).exists(),
"Needs required folder: ../contents.htdocs!"
"Needs required folder: ../training_modpack.htdocs!"
);
std::fs::write(path, write_menu()).unwrap();