Make max slider bar work for GCF

src/app.tsx

@@ -18,7 +18,7 @@ export function App() {
       <Navbar maxNum={maxNum} onMaxNumChanged={onMaxNumSet} />
       <Routes>
         <Route path="/" element={<Navigate to="/gcf" />} />
-        <Route path="/gcf" element={<GCF />} />
+        <Route path="/gcf" element={<GCF maxNum={maxNum} />} />
         <Route path="/times" element={<TimesPractice maxNum={12} />} />
         <Route path="/lcm" element={<LCM />} />
       </Routes>

src/gcf.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks'
+import { useState, useEffect } from 'preact/hooks'
 import './gcf.css'
 import { gcf } from './lib'
 import type { JSX } from 'preact'
@@ -37,15 +37,17 @@ function Solution({rows}:SolutionParams) {
   </div>
 }
 
+const DEFAULT_MAXNUM = 200
 
-export function GCF() {
+
+export function GCF({ maxNum } : { maxNum? : number }) {
   // choose number between 2 and max inclusive
   const getRandomInt = (max : number) : number => Math.floor(Math.random() * (max - 1) + 2)
 
-  const chooseFactorsRandom = () : [number, number] => [ getRandomInt(200), getRandomInt(200) ]
+  const chooseFactorsRandom = () : [number, number] => [ getRandomInt(maxNum || DEFAULT_MAXNUM), getRandomInt(maxNum || DEFAULT_MAXNUM) ]
 
   const _chooseMultiplesOf = (f : number) : [number, number] => {
-    const max = Math.floor(200 / f)
+    const max = Math.floor((maxNum || DEFAULT_MAXNUM) / f)
     return [ f * getRandomInt(max), f * getRandomInt(max) ]
   }
 
@@ -54,7 +56,7 @@ export function GCF() {
   }
 
   const chooseMultiples = () : [number, number] => {
-    const f = getRandomInt(50)
+    const f = getRandomInt(Math.min(50, Math.floor((maxNum || DEFAULT_MAXNUM) / 2)))
     return _chooseMultiplesOf(f)
   }
 
@@ -135,6 +137,16 @@ export function GCF() {
   const [feedback, setFeedback] = useState(false)
   const [solution, setSolution] = useState<JSX.Element|null>(null)
 
+  useEffect(()=>{
+    if (maxNum) {
+      if ((factors[0] > maxNum) || (factors[1] > maxNum)) {
+        // don't change unless new constraint violated
+        setFactors(chooseFactors())
+      }
+    }
+  }, [ maxNum ])
+
+
   return (
       <div className="px-4 py-5 my-5 text-center">
         <h1 className="my-5 d-none d-sm-block">Greatest Common Factor Practice</h1>

src/navbar.tsx

@@ -46,7 +46,7 @@ function Navbar({maxNum, onMaxNumChanged} : NavbarSettings) {
           <div className="nav-item ms-auto me-6 g-3 row align-items-center">
             <label className="col-form-label col-sm-4 col-form-label-sm ge-2 flex-shrink-0" for="maxNum">Max:</label>
             <div className="col-sm-4 flex-shrink-0">
-              <input className="form-range" type="range" id="maxNum" step={10} value={maxNum} max={200} min={50} onInput={handleSliderInput} onChange={onSliderChange} />
+              <input className="form-range" type="range" id="maxNum" step={10} value={displayedMax} max={200} min={50} onMouseUp={handleSliderInput} onKeyUp={handleSliderInput} onChange={onSliderChange} />
             </div>
             <label className="col-form-label col-sm-2 ms-auto">{displayedMax}</label>
           </div>