fibo

Author: bolanosdev

app/components/player/index.tsx

@@ -17,10 +17,12 @@ export type PlayerState = {
   timers: PlayerTimers;
   status: PlayerStatus;
   speed: PlayerSpeed;
+  iters: number;
 };
 
 type PlayerProps = {
   title: string;
+  enabled: boolean;
   children: ReactNode;
   done?: boolean;
   onChange: (state: PlayerState) => void;
@@ -29,12 +31,14 @@ type PlayerProps = {
 export const InitialPlayerState: PlayerState = {
   status: "not_started",
   speed: "4x",
+  iters: 0,
   timers: {
     start: "",
     end: "",
     duration: 0,
   },
 };
+
 const speed_map = {
   "1x": 2000,
   "2x": 1000,
@@ -48,6 +52,7 @@ export const Player: FC<PlayerProps> = ({
   title,
   children,
   done,
+  enabled,
   onChange,
 }) => {
   const [state, setState] = useState<PlayerState>(InitialPlayerState);
@@ -87,8 +92,10 @@ export const Player: FC<PlayerProps> = ({
     const timer = setInterval(() => {
       const new_state: PlayerState = {
         ...state,
+        iters: state.iters + 1,
         timers: { ...state.timers, duration: state.timers.duration + 100 },
       };
+
       setState(new_state);
       onChange(new_state);
     }, speed_map[state.speed]);
@@ -110,8 +117,7 @@ export const Player: FC<PlayerProps> = ({
           <Section>{title}</Section>
           <Section>
             {state.status && <Text>Status: {state.status}</Text>}
-            {state.timers.start && <Text>Start: {state.timers.start}</Text>}
-            {state.timers.end && <Text>End: {state.timers.end}</Text>}
+            <Text margin={{ left: "4" }}>iterations: {state.iters}</Text>
             <Text margin={{ left: "4" }}>
               Duration: {(state.timers.duration / 1000).toFixed(2)}
             </Text>
@@ -139,7 +145,10 @@ export const Player: FC<PlayerProps> = ({
             />
           </Button>
         )}
-        <Button onClick={handleOnPlay} disabled={state.status != "not_started"}>
+        <Button
+          onClick={handleOnPlay}
+          disabled={state.status != "not_started" || !enabled}
+        >
           <Icon
             figure="PlayIcon"
             colors={{ text: { color: "green", weight: "200" } }}

app/routes/interviews.fibonacci.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from "react";
+import { Text } from "@bennie-ui/text";
+import { Input } from "@bennie-ui/inputs";
+import { Section } from "@bennie-ui/section";
+import { Player, PlayerState, InitialPlayerState } from "../components/player";
+
+export default function Index() {
+  const [max_number, set_max_number] = useState(20);
+  const [state, setState] = useState<PlayerState>(InitialPlayerState);
+  const [enabled, is_enabled] = useState(max_number > 0);
+
+  const [data, setData] = useState<number[]>([1]);
+  const [done, is_done] = useState(false);
+
+  const onChange = (state: PlayerState) => {
+    setState(state);
+
+    if (data.length - 1 >= 100) {
+      is_done(true);
+      return;
+    }
+
+    let new_value = 1;
+
+    if (data.length >= 2) {
+      new_value = data[data.length - 1] + data[data.length - 2];
+    }
+
+    setData([...data, new_value]);
+  };
+
+  return (
+    <Player
+      title="fibonnacci"
+      onChange={onChange}
+      done={done}
+      enabled={enabled}
+    >
+      {state.status === "not_started" && (
+        <Section>
+          <Text>
+            Please enter a max-number (max: 1000) in the input field below, and
+            hit play
+          </Text>
+          <Input
+            name="max-number"
+            value={max_number.toString()}
+            onChange={(event) => {
+              let value = parseInt(event.target.value);
+
+              if (isNaN(value)) {
+                value = 0;
+              }
+
+              is_enabled(value != 0 && value <= 100);
+              set_max_number(value);
+            }}
+          />
+        </Section>
+      )}
+
+      {state.status === "running" && (
+        <Section padding={{ all: "4" }}>
+          <Text>Running...</Text>
+          <Section grid={{ templates: { columns: "5" }, gap: "3" }}>
+            {data.map((it, idx) => (
+              <Section
+                key={idx}
+                align="center"
+                rounding={{ all: "md" }}
+                border={{ style: "solid", width: { all: "1" } }}
+                colors={{ background: { color: "blue", weight: "400" } }}
+              >
+                {it}
+              </Section>
+            ))}
+          </Section>
+        </Section>
+      )}
+    </Player>
+  );
+}

app/routes/interviews.fizzbuzz.tsx

@@ -34,7 +34,7 @@ export default function Index() {
   };
 
   return (
-    <Player title="fizzbuzz" onChange={onChange} done={done}>
+    <Player title="fizzbuzz" onChange={onChange} done={done} enabled={true}>
       {state.status === "not_started" &&
         "I am just a fizzbuzz player, hit play to see me print."}
       {state.status === "running" && (

app/routes/interviews.tsx

@@ -1,11 +1,19 @@
 import React from "react";
-import { Page } from "../components/page";
 import { Outlet } from "@remix-run/react";
+import { Link } from "@bennie-ui/text";
+import { Page } from "../components/page";
+import { Section } from "@bennie-ui/section";
 
 export default function Index() {
   return (
     <Page>
-      <h1>Interviews</h1>
+      <Link href="/interviews" colors={{ text: { color: "white" } }}>
+        Interviews
+      </Link>
+      <Section grid={{ templates: { columns: "8" }, gap: "1" }}>
+        <Link href="/interviews/fizzbuzz">FizzBuzz</Link>
+        <Link href="/interviews/fibonacci">Fibonacci</Link>
+      </Section>
       <Outlet />
     </Page>
   );

bun.lockb

@@ -15,7 +15,8 @@
   },
   "workspaces": [
     "packages/bennie-ui/libraries/*",
-    "packages/bennie-ui/components/primitives/*"
+    "packages/bennie-ui/components/primitives/*",
+    "packages/bennie-ui/components/composites/forms/*"
   ],
   "dependencies": {
     "@heroicons/react": "^2.1.3",