Merge pull request #14 from p-code-magazine/develop

8 tracks, tweaks for scroll
p-code-magazine · May 1, 2021 · 3d698d4 · 3d698d4 · vercel · May 1, 2021
2 parents 8bc5a8f + 5a6444d
commit 3d698d4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/components/ServerLogList.jsx b/components/ServerLogList.jsx
@@ -25,21 +25,21 @@ export default function ServerLogList(props) {
           i == 0 ? (
             <li className="flex items-start log-item-first" ref={logStartRef} onClick={_ => jumpAction(Math.max(replState.serverSeekIndex, 0) + i)}>
               <span className="w-10 flex-shrink-0 text-gray-500">{Math.max(replState.serverSeekIndex, 0) + i}</span>
-              <span className="mr-4 flex-shrink-0" style={{ color: getUsernameColor(el.username) }}>{el.username}[{el.bus}]</span>
+              <span className="mr-4 flex-shrink-0" style={{ color: getUsernameColor(el.username) }}>{el.username} [{el.bus}]</span>
               <mark className="flex-shrink bg-transparent hover:bg-gray-400">{el.message}</mark>
             </li>
           ) : (
               (replState.serverLog.length > 1 && i == (Math.min(replState.serverLog.length, 30) - 1)) ? (
                 <li className="flex items-start log-item-last" ref={logEndRef} onClick={_ => jumpAction(Math.max(replState.serverSeekIndex, 0) + i)}>
                   <span className="w-10 flex-shrink-0 text-gray-500">{Math.max(replState.serverSeekIndex, 0) + i}</span>
-                  <span className="mr-4 flex-shrink-0" style={{ color: getUsernameColor(el.username) }}>{el.username}[{el.bus}]</span>
+                  <span className="mr-4 flex-shrink-0" style={{ color: getUsernameColor(el.username) }}>{el.username} [{el.bus}]</span>
                   <mark className="flex-shrink bg-transparent hover:bg-gray-400">{el.message}</mark>
                 </li>
 
               ) : (
                   <li className="flex items-start" onClick={_ => jumpAction(Math.max(replState.serverSeekIndex, 0) + i)}>
                     <span className="w-10 flex-shrink-0 text-gray-500">{Math.max(replState.serverSeekIndex, 0) + i}</span>
-                    <span className="mr-4 flex-shrink-0" style={{ color: getUsernameColor(el.username) }}>{el.username}[{el.bus}]</span>
+                    <span className="mr-4 flex-shrink-0" style={{ color: getUsernameColor(el.username) }}>{el.username} [{el.bus}]</span>
                     <mark className="flex-shrink bg-transparent hover:bg-gray-400">{el.message}</mark>
                   </li>
                 )

diff --git a/pages/playground/index.jsx b/pages/playground/index.jsx
@@ -32,7 +32,7 @@ export default function IndexPage() {
   const logAreaRef = useRef();
   const logListRef = useRef();
   const slogListRef = useRef();
-  const pCodeRef = useRef([false, false, false, false, false, false]);
+  const pCodeRef = useRef([false, false, false, false, false, false, false, false]);
   const requestRef = useRef();
   const previousTimeRef = useRef();
 
@@ -355,6 +355,14 @@ export default function IndexPage() {
             }
           });
 
+          // TODO:
+          const ll = document.querySelectorAll('.log-item-last');
+          if (ll) {
+            ll.forEach((el) => {
+              el.scrollIntoView();
+            });
+          }
+
           replDispatch({ type: 'server-run' });
         }
       }
@@ -412,26 +420,27 @@ export default function IndexPage() {
   return (
     <>
       <main
-        className="absolute left-0 top-0 flex w-full max-h-screen overflow-y-scroll"
+        className="absolute left-0 top-0 flex w-full max-h-screen"
         ref={logAreaRef}>
 
         {/* history: local */}
         <div
-          className="px-5 pt-5 py-24 overscroll-y-none w-1/2"
+          className="px-5 pt-5 py-24 w-1/2 overflow-y-scroll max-h-screen"
           {...bindWheel(0)}
           ref={logListRef}>
           <LogList replState={replState} logStartRef={logStartRef} logEndRef={logEndRef} jumpAction={jumpAction} />
         </div>
 
         {/* history: server */}
         <div
-          className="px-5 pt-5 py-24 overscroll-y-none w-1/2"
+          className="px-5 pt-5 py-24 w-1/2 overflow-y-scroll max-h-screen "
           {...bindWheel(1)}
           ref={slogListRef}>
           <ServerLogList replState={replState} logStartRef={logStartRef} logEndRef={logEndRef} jumpAction={serverJumpAction} />
         </div>
       </main>
 
+      {/* command help */}
       <CommandHelp show={showCmdhelp} />
 
       <footer className="fixed bottom-0 w-full bg-white overscroll-y-none max-h-screen">