From 4f62a594b320400034939e990b8dbe3474fb84b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 13 Nov 2023 21:41:37 -0600
Subject: [PATCH] feat: button page turning exception

---
 .../tools/ratings/components/PageTurner.tsx   |  7 ++++---
 src/app/tools/ratings/page.tsx                | 21 +++++++++++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/app/tools/ratings/components/PageTurner.tsx b/src/app/tools/ratings/components/PageTurner.tsx
index ec25ba8aa..850b89ba5 100644
--- a/src/app/tools/ratings/components/PageTurner.tsx
+++ b/src/app/tools/ratings/components/PageTurner.tsx
@@ -5,7 +5,7 @@ import { useEffect, useRef } from 'react';
 interface PageTurnerProps {
   page: number;
   pages: number;
-  onPageChange: (page: number) => void;
+  onPageChange: (page: number, isButtonClick: boolean) => void;
 }
 
 export function PageTurner({ page, onPageChange, pages }: PageTurnerProps) {
@@ -20,7 +20,7 @@ export function PageTurner({ page, onPageChange, pages }: PageTurnerProps) {
       <Flex gap="2">
         <Button
           variant="soft"
-          onClick={() => onPageChange(Math.max(page - 1, 0))}
+          onClick={() => onPageChange(Math.max(page - 1, 0), true)}
           disabled={page === 0}
         >
           <CaretLeftIcon />
@@ -37,6 +37,7 @@ export function PageTurner({ page, onPageChange, pages }: PageTurnerProps) {
                   0,
                   Math.min(pages - 1, event.target.valueAsNumber - 1),
                 ),
+                false,
               );
             }}
             onKeyDown={(event) => {
@@ -50,7 +51,7 @@ export function PageTurner({ page, onPageChange, pages }: PageTurnerProps) {
         <Button
           variant="soft"
           onClick={() => {
-            onPageChange(Math.min(page + 1, pages - 1));
+            onPageChange(Math.min(page + 1, pages - 1), true);
           }}
           disabled={page === pages - 1}
         >
diff --git a/src/app/tools/ratings/page.tsx b/src/app/tools/ratings/page.tsx
index e101ae15b..9b0b1326b 100644
--- a/src/app/tools/ratings/page.tsx
+++ b/src/app/tools/ratings/page.tsx
@@ -289,7 +289,6 @@ export default function Page() {
 
     return neighbors;
   }
-
   async function jumpToPosition(position: number) {
     if (!ratingsInfo || ratingsInfo?.detail) return;
 
@@ -367,7 +366,7 @@ export default function Page() {
       }
     }
   }
-  async function handleJumpToScore() {
+  async function jumpToScore() {
     if (!ratingsInfo || ratingsInfo?.detail) return;
 
     const targetScore = scoreInput.current!.valueAsNumber;
@@ -393,6 +392,11 @@ export default function Page() {
 
       if (closestPlayer === null || closestScore === null) return;
 
+      if (closestScoreDistance === 0) {
+        setHighlightedPlayer({ type: 'id', id: closesIndex });
+        setPage(Math.floor(closesIndex / ROWS_PER_PAGE));
+      }
+
       const loadingDirection = Math.sign(closestScore - targetScore);
       let targetPlayer: RatingsPlayer;
       let scoreAcquired = false;
@@ -523,7 +527,7 @@ export default function Page() {
                   placeholder="Type a score..."
                   onKeyDown={(event) => {
                     if (event.key === 'Enter') {
-                      handleJumpToScore();
+                      jumpToScore();
                       setJumpToScoreOpen(false);
                     }
                   }}
@@ -534,7 +538,7 @@ export default function Page() {
                     <Button color="red">Cancel</Button>
                   </Dialog.Close>
                   <Dialog.Close>
-                    <Button onClick={handleJumpToScore}>Jump</Button>
+                    <Button onClick={jumpToScore}>Jump</Button>
                   </Dialog.Close>
                 </Flex>
               </Flex>
@@ -862,7 +866,9 @@ export default function Page() {
       <PageTurner
         page={page}
         pages={pages}
-        onPageChange={(page) => jumpToPosition(page * ROWS_PER_PAGE)}
+        onPageChange={(page, isButtonClick) =>
+          isButtonClick ? setPage(page) : jumpToPosition(page * ROWS_PER_PAGE)
+        }
       />
 
       <Leaderboard.Root>
@@ -905,7 +911,9 @@ export default function Page() {
       <PageTurner
         page={page}
         pages={pages}
-        onPageChange={(page) => jumpToPosition(page * ROWS_PER_PAGE)}
+        onPageChange={(page, isButtonClick) =>
+          isButtonClick ? setPage(page) : jumpToPosition(page * ROWS_PER_PAGE)
+        }
       />
 
       {loadingProgress !== null && (
@@ -938,6 +946,7 @@ export default function Page() {
               maxWidth: 256,
               borderRadius: 8,
               backgroundColor: orangeDark.orange2,
+              overflow: 'hidden',
             }}
           >
             <div