diff --git a/web/css/main.css b/web/css/main.css index ab90a4a23..a1e936cd1 100644 --- a/web/css/main.css +++ b/web/css/main.css @@ -483,67 +483,10 @@ body { .menu-item__info { color: white; + opacity: .55; font-size: 30%; text-align: center; - padding-top: 1px; -} - -.text-move { - animation: horizontally 4s linear infinite alternate; -} - -@-moz-keyframes horizontally { - 0% { - transform: translateX(0%); - } - 25% { - transform: translateX(-20%); - } - 50% { - transform: translateX(0%); - } - 75% { - transform: translateX(20%); - } - 100% { - transform: translateX(0%); - } -} - -@-webkit-keyframes horizontally { - 0% { - transform: translateX(0%); - } - 25% { - transform: translateX(-20%); - } - 50% { - transform: translateX(0%); - } - 75% { - transform: translateX(20%); - } - 100% { - transform: translateX(0%); - } -} - -@keyframes horizontally { - 0% { - transform: translateX(0%); - } - 25% { - transform: translateX(-20%); - } - 50% { - transform: translateX(0%); - } - 75% { - transform: translateX(20%); - } - 100% { - transform: translateX(0%); - } + padding-top: 3px; } #noti-box { diff --git a/web/js/app.js b/web/js/app.js index 30c3c725b..106e12c5b 100644 --- a/web/js/app.js +++ b/web/js/app.js @@ -179,6 +179,7 @@ const startGame = () => { +playerIndex.value - 1, ) + gameList.disable() retropad.poll.disable(); gui.show(keyButtons[KEY.SAVE]); gui.show(keyButtons[KEY.LOAD]); diff --git a/web/js/gameList.js b/web/js/gameList.js index a1db9a1f5..bb92b34c8 100644 --- a/web/js/gameList.js +++ b/web/js/gameList.js @@ -1,8 +1,4 @@ -import { - sub, - MENU_PRESSED, - MENU_RELEASED -} from 'event'; +import {MENU_PRESSED, MENU_RELEASED, sub} from 'event'; import {gui} from 'gui'; const TOP_POSITION = 102 @@ -85,6 +81,39 @@ const ui = (() => { let items = [] + const marque = (() => { + const speed = 1 + const sep = ' '.repeat(10) + + let el = null + let raf = 0 + let txt = null + let w = 0 + + const move = () => { + const shift = parseFloat(getComputedStyle(el).left) - speed + el.style.left = w + shift < 1 ? `0px` : `${shift}px` + raf = requestAnimationFrame(move) + } + + return { + reset() { + cancelAnimationFrame(raf) + el && (el.style.left = `0px`) + }, + enable(cap) { + txt && (el.textContent = txt) // restore the text + el = cap + txt = el.textContent + el.textContent += sep + w = el.scrollWidth // keep the text width + el.textContent += txt + cancelAnimationFrame(raf) + raf = requestAnimationFrame(move) + } + } + })() + const item = (parent) => { const title = parent.firstChild.firstChild const desc = parent.children[1] @@ -100,15 +129,17 @@ const ui = (() => { const isOverflown = () => title.scrollWidth > title.clientWidth const _title = { - animate: () => isOverflown() && title.classList.add('text-move'), - pick: () => title.classList.add('pick'), - reset: () => title.classList.remove('pick', 'text-move'), + pick: () => { + title.classList.add('pick') + isOverflown() && marque.enable(title) + }, + reset: () => { + title.classList.remove('pick') + isOverflown() && marque.reset() + } } - const clear = () => { - _title.reset() - // _desc.hide() - } + const clear = () => _title.reset() return { get description() { @@ -186,10 +217,7 @@ scroll.onShift = (delta) => select(games.index + delta) scroll.onStop = () => { const item = ui.selected - if (item) { - item.title.pick() - item.title.animate() - } + item && item.title.pick() } sub(MENU_PRESSED, (position) => { @@ -211,6 +239,7 @@ sub(MENU_RELEASED, (position) => { * Game list module. */ export const gameList = { + disable: () => ui.selected?.clear(), scroll: (x) => { if (games.empty()) return scroll.scroll(x)