Add marque titles

giongto35 · May 6, 2024 · 48a5167 · 48a5167
1 parent 30ffe31
commit 48a5167
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 75 deletions.
diff --git 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
@@ -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
@@ -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)