From 30584b3faa74e89941f185968f5fddeb13d87a82 Mon Sep 17 00:00:00 2001
From: Sergey Stepanov <sergystepanov@gmail.com>
Date: Thu, 27 Apr 2023 14:25:45 +0300
Subject: [PATCH] Make game picking less ugly

---
 web/css/main.css   |  4 ++++
 web/js/gameList.js | 30 +++++++++++++++++++-----------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/web/css/main.css b/web/css/main.css
index 6026cfef..3b49e59a 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -534,6 +534,10 @@ body {
     animation: horizontally 4s linear infinite alternate;
 }
 
+.menu-item div .pick-over {
+    overflow: unset;
+}
+
 
 @-moz-keyframes horizontally {
     0% {
diff --git a/web/js/gameList.js b/web/js/gameList.js
index d0c1ec9c..dcc21c01 100644
--- a/web/js/gameList.js
+++ b/web/js/gameList.js
@@ -33,7 +33,7 @@ const gameList = (() => {
         pickGame();
     };
 
-    const pickGame = (index) => {
+    const pickGame = (index, hold) => {
         let idx = undefined !== index ? index : gameIndex;
 
         // check boundaries
@@ -43,18 +43,21 @@ const gameList = (() => {
 
         // transition menu box
         listBox.style['transition'] = 'top 0.2s';
-
         menuTop = MENU_TOP_POSITION - idx * 36;
         listBox.style['top'] = `${menuTop}px`;
 
-        // overflow marquee
-        let pick = document.querySelectorAll('.menu-item .pick')[0];
-        if (pick) {
-            pick.classList.remove('pick');
-        }
-        document.querySelectorAll(`.menu-item span`)[idx].classList.add('pick');
+        const cl = hold ? 'pick-over' : 'pick'
+        let pick = listBox.querySelectorAll('.menu-item .pick, .menu-item .pick-over')[0];
 
-        gameIndex = idx;
+        setTimeout(() => {        // overflow marquee
+            if (pick) {
+                pick.classList.remove('pick');
+                pick.classList.remove('pick-over')
+            }
+            listBox.querySelectorAll(`.menu-item span`)[idx].classList.add(cl);
+        }, 50)
+
+            gameIndex = idx;
     };
 
     const startGamePickerTimer = (upDirection) => {
@@ -65,14 +68,19 @@ const gameList = (() => {
         // velocity?
         // keep rolling the game list if the button is pressed
         gamePickTimer = setInterval(() => {
-            pickGame(gameIndex + shift);
-        }, 200);
+            pickGame(gameIndex + shift, true);
+        }, 150);
     };
 
     const stopGamePickerTimer = () => {
         if (gamePickTimer === null) return;
         clearInterval(gamePickTimer);
         gamePickTimer = null;
+        let pick = listBox.querySelectorAll('.menu-item .pick-over')[0];
+
+        pick.classList.remove('pick-over');
+        pick.classList.add('pick');
+
     };
 
     const onMenuPressed = (newPosition) => {