From e50dc102bb21d48cb7f87c7c5b99e4728ce89499 Mon Sep 17 00:00:00 2001
From: Sergey Stepanov <sergystepanov@gmail.com>
Date: Thu, 27 Apr 2023 14:49:28 +0300
Subject: [PATCH] Make game pick time consistent

---
 web/css/main.css   |  1 +
 web/js/gameList.js | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/css/main.css b/web/css/main.css
index 3b49e59a..bf2ddf6d 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -467,6 +467,7 @@ body {
 
     background-image: url('/static/img/screen_background5.png');
     background-size: cover;
+    z-index: 1;
 }
 
 #menu-item-choice {
diff --git a/web/js/gameList.js b/web/js/gameList.js
index dcc21c01..3408d4f9 100644
--- a/web/js/gameList.js
+++ b/web/js/gameList.js
@@ -33,6 +33,8 @@ const gameList = (() => {
         pickGame();
     };
 
+    const pickDelayMs = 150
+
     const pickGame = (index, hold) => {
         let idx = undefined !== index ? index : gameIndex;
 
@@ -42,7 +44,7 @@ const gameList = (() => {
         if (idx >= games.length) idx = 0;
 
         // transition menu box
-        listBox.style['transition'] = 'top 0.2s';
+        listBox.style['transition'] = `top ${pickDelayMs}ms`;
         menuTop = MENU_TOP_POSITION - idx * 36;
         listBox.style['top'] = `${menuTop}px`;
 
@@ -57,7 +59,7 @@ const gameList = (() => {
             listBox.querySelectorAll(`.menu-item span`)[idx].classList.add(cl);
         }, 50)
 
-            gameIndex = idx;
+        gameIndex = idx;
     };
 
     const startGamePickerTimer = (upDirection) => {
@@ -69,18 +71,19 @@ const gameList = (() => {
         // keep rolling the game list if the button is pressed
         gamePickTimer = setInterval(() => {
             pickGame(gameIndex + shift, true);
-        }, 150);
+        }, pickDelayMs);
     };
 
     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 pick = listBox.querySelectorAll('.menu-item .pick-over')[0];
+        if (pick) {
+            pick.classList.remove('pick-over');
+            pick.classList.add('pick');
+        }
     };
 
     const onMenuPressed = (newPosition) => {