From 1bde4043a5657a6c4a594a502511b806307ea3a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=96mercan=20K=C3=B6m=C3=BCr?= Date: Sat, 17 Aug 2019 19:25:18 +0300 Subject: [PATCH] Steps for web.libretro --- pkg/emscripten/libretro/embed.html | 24 +++- pkg/emscripten/libretro/index.html | 33 ++++- pkg/emscripten/libretro/steps.css | 188 +++++++++++++++++++++++++++++ pkg/emscripten/libretro/steps.js | 68 +++++++++++ 4 files changed, 309 insertions(+), 4 deletions(-) create mode 100644 pkg/emscripten/libretro/steps.css create mode 100644 pkg/emscripten/libretro/steps.js diff --git a/pkg/emscripten/libretro/embed.html b/pkg/emscripten/libretro/embed.html index 77afd33b65..11daaeaebe 100644 --- a/pkg/emscripten/libretro/embed.html +++ b/pkg/emscripten/libretro/embed.html @@ -13,15 +13,13 @@ + +
+
+
+ + RetroArch Logo +
+
+
+ +
+
+ + +
+
+ +
+ +
+ 1/5 +
+ +
+
@@ -131,6 +158,10 @@
+ + + +
diff --git a/pkg/emscripten/libretro/steps.css b/pkg/emscripten/libretro/steps.css new file mode 100644 index 0000000000..f01c040d7a --- /dev/null +++ b/pkg/emscripten/libretro/steps.css @@ -0,0 +1,188 @@ +*, +*:before, +*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +html, +body { + background: #ecf0f1; + color: #444; + font-family: Tahoma, Geneva, sans-serif; + font-size: 16px; + padding: 10px; +} +.how-to-guide { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + background: #34495e; + color: #ecf0f1; + margin: 0; + padding: 0 0 40px; + position: relative; + text-align: left; + width: 296px; +} +.how-to-guide:before { + border: 10px solid transparent; + border-right-color: #34495e; + content: ''; + height: 0; + left: -20px; + position: absolute; + top: 20px; + width: 0; +} +.how-to-guide .button-close { + -webkit-transition: color 0.25s ease-out 0.1s; + -moz-transition: color 0.25s ease-out 0.1s; + -o-transition: color 0.25s ease-out 0.1s; + transition: color 0.25s ease-out 0.1s; + background: none; + border: none; + color: #ecf0f1; + font-size: 1em; + position: absolute; + right: 0; + top: 0; + z-index: 99; +} +.how-to-guide .button-close:hover, +.how-to-guide .button-close:focus { + color: #3498db; + cursor: pointer; +} +.how-to-guide .navigation { + background: #2c3e50; + border-top: 1px solid #414141; + bottom: 0; + font-size: 0.8em; + height: 40px; + left: 0; + line-height: 1em; + padding: 13px; + position: absolute; + width: 100%; +} +.how-to-guide .navigation .nav-state { + font-weight: bold; + text-align: center; +} +.how-to-guide .navigation .button-nav { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + -webkit-transition: background 0.25s ease-out 0.1s; + -moz-transition: background 0.25s ease-out 0.1s; + -o-transition: background 0.25s ease-out 0.1s; + transition: background 0.25s ease-out 0.1s; + background: #34495e; + border: none; + color: #ecf0f1; + font-size: 0.9em; + padding: 5px 20px; + position: absolute; + top: 5px; +} +.how-to-guide .navigation .button-nav:hover, +.how-to-guide .navigation .button-nav:focus { + background: #3498db; + cursor: pointer; +} +.how-to-guide .navigation .button-nav.disabled { + color: #bdc3c7; +} +.how-to-guide .navigation .button-nav.disabled:hover, +.how-to-guide .navigation .button-nav.disabled:focus { + background: #34495e; + cursor: default; +} +.how-to-guide .navigation .button-nav[data-nav="prev"] { + left: 5px; +} +.how-to-guide .navigation .button-nav[data-nav="next"] { + right: 5px; +} +.how-to-guide .slide-view { + overflow: hidden; +} +.how-to-guide .slides { + -webkit-transition: -webkit-transform 0.25s ease-out 0.1s; + -moz-transition: -moz-transform 0.25s ease-out 0.1s; + -o-transition: -o-transform 0.25s ease-out 0.1s; + transition: transform 0.25s ease-out 0.1s; + width: 9999px; +} +.how-to-guide .slides[data-active-slide="1"] { + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); +} +.how-to-guide .slides[data-active-slide="1"] .step[data-slide="1"] { + opacity: 1; +} +.how-to-guide .slides[data-active-slide="2"] { + -webkit-transform: translate(-296px, 0); + -moz-transform: translate(-296px, 0); + -ms-transform: translate(-296px, 0); + -o-transform: translate(-296px, 0); + transform: translate(-296px, 0); +} +.how-to-guide .slides[data-active-slide="2"] .step[data-slide="2"] { + opacity: 1; +} +.how-to-guide .slides[data-active-slide="3"] { + -webkit-transform: translate(-592px, 0); + -moz-transform: translate(-592px, 0); + -ms-transform: translate(-592px, 0); + -o-transform: translate(-592px, 0); + transform: translate(-592px, 0); +} +.how-to-guide .slides[data-active-slide="3"] .step[data-slide="3"] { + opacity: 1; +} +.how-to-guide .slides[data-active-slide="4"] { + -webkit-transform: translate(-888px, 0); + -moz-transform: translate(-888px, 0); + -ms-transform: translate(-888px, 0); + -o-transform: translate(-888px, 0); + transform: translate(-888px, 0); +} +.how-to-guide .slides[data-active-slide="4"] .step[data-slide="4"] { + opacity: 1; +} +.how-to-guide .slides[data-active-slide="5"] { + -webkit-transform: translate(-1184px, 0); + -moz-transform: translate(-1184px, 0); + -ms-transform: translate(-1184px, 0); + -o-transform: translate(-1184px, 0); + transform: translate(-1184px, 0); +} +.how-to-guide .slides[data-active-slide="5"] .step[data-slide="5"] { + opacity: 1; +} +.how-to-guide .step { + -webkit-transition: opacity 0.25s ease-out 0.1s; + -moz-transition: opacity 0.25s ease-out 0.1s; + -o-transition: opacity 0.25s ease-out 0.1s; + transition: opacity 0.25s ease-out 0.1s; + display: inline-block; + opacity: 0; + padding: 10px; + width: 296px; + vertical-align: top; +} +.how-to-guide .step header { + cursor: default; + font-size: 1.25em; + margin: 0 0 20px; + padding: 0; +} +.how-to-guide .step .content { + cursor: default; + font-size: 0.85em; +} diff --git a/pkg/emscripten/libretro/steps.js b/pkg/emscripten/libretro/steps.js new file mode 100644 index 0000000000..aa1e39409e --- /dev/null +++ b/pkg/emscripten/libretro/steps.js @@ -0,0 +1,68 @@ +$(function () { + var data = [ + { + idx: 1, + title: 'Load Core', + content: 'Load your core by clicking first tab, scroll down until desired Core. We will use Nestopia for now. Do not forget; Content must be compatible with Core.' + }, + { + idx: 2, + title: 'Load Content', + content: 'After selecting Core, click Run. After RetroArch opens, click Add Content and select your compatible ROM.' + }, + { + idx: 3, + title: 'Load Content', + content: 'Select Load Content from the menu, and then enter Start Directory. You will see your Content, select it then select the Core' + }, + { + idx: 4, + title: 'Cleanup Storage', + content: 'The trash can erases your existing configuration and presets.' + }, + { + idx: 5, + title: 'Quick Menu', + content: 'If you click on the three line icons, the Quick Menu will open here as in RetroArch.' + } + ]; + + var template = + '
' + + '{{#slides}}' + + '
' + + '
{{title}}
' + + '
{{content}}
' + + '
' + + '{{/slides}}' + + '
'; + + $('.how-to-guide').append(Mustache.render(template, { slides: data })); + + var slidesCount = data.length; + var currentIdx = 1; + + $('body') + .off('click', '.js-nav:not(.disabled)') + .on('click', '.js-nav:not(.disabled)', function (event) { + var button = $(event.currentTarget).blur(); + var container = button.parents('.js-container'); + + var newIdx = currentIdx + (button.attr('data-nav') === 'prev' ? -1 : 1); + container + .find('.slides').attr('data-active-slide', newIdx).end() + .find('.js-slide-no').html(newIdx); + + /* enable/disable nav buttons */ + container.find('.js-nav').removeClass('disabled'); + if (newIdx <= 1) { + container.find('.js-nav[data-nav="prev"]').addClass('disabled'); + } else if (newIdx >= slidesCount) { + container.find('.js-nav[data-nav="next"]').addClass('disabled'); + } + + currentIdx = newIdx; + + return true; + }); +}); \ No newline at end of file