Successfully orquestrated typing

goldy1992 · Nov 15, 2023 · afbfc44 · afbfc44
1 parent 81c5c08
commit afbfc44
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 19 deletions.
diff --git a/app/components/code_block/code_block.tsx b/app/components/code_block/code_block.tsx
@@ -1,3 +1,4 @@
+import React, { useState, ReactNode } from "react"
 import MultiTypeWriter from "../typewriter/multi_typewriter"
 import CodeEditorTitleBar from "./header"
 
@@ -16,11 +17,11 @@ const textValue = "\"Hello world\""
 const textFunClose = "    )"
 const functionClose = "} "
 
-export function ModifierFillMaxSize() {
+export function ModifierFillMaxSize({onComplete}: {onComplete? : () => void}) {
     const code_blocks = [
         modifierFillMaxSize
     ]
-    const [typed_code_blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks)
+    const [typed_code_blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks, onComplete)
 
     return (
         <CodeBlock numberOfLines={9} >
@@ -38,7 +39,7 @@ export function ModifierFillMaxSize() {
 }
 
 
-export function HelloWorldCodeBlock() {
+export function HelloWorldCodeBlock({onComplete}: {onComplete? : () => void}) {
     const code_blocks = [
         "@Composable", 
         "private fun", 
@@ -53,7 +54,7 @@ export function HelloWorldCodeBlock() {
         "    )", 
         "} "
     ]
-    const [typed_code_blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks)
+    const [typed_code_blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks, onComplete)
 
     return (
         <CodeBlock numberOfLines={9} >
@@ -69,11 +70,14 @@ export function HelloWorldCodeBlock() {
     )
 }
 
+type OnCompleteFn = (idx: number) => void
+type OnComplete = () => void
+type ReactOnComplete = (oc: OnComplete) => ReactNode;
+type ReactOnCompleteArray = Array<ReactOnComplete>
+
 export function CodeBlock({children, numberOfLines}:{children: any, numberOfLines: number}) {
-    console.log("calling code block")
     var lineNumbers = ""
     for (let i=1; i < numberOfLines; i++) {
-        console.log("new line " + lineNumbers + ", " + i)
         lineNumbers += i + "\n"
     }
     lineNumbers += numberOfLines
@@ -92,12 +96,32 @@ export function CodeBlock({children, numberOfLines}:{children: any, numberOfLine
 }
 
 export default function CodeEditor() {
+    const currentCode = TypingOrchestrator()
+
+
     return (
         <div className="mt-10 pt-8 grid grid-cols-12 grid-rows-5 mt-4">
             <div className="border-b border-slate-500/30 col-start-2 col-span-10 row-start-1 rounded row-span-2" >
                 <CodeEditorTitleBar />
-                <ModifierFillMaxSize />
+                {currentCode}
             </div>
         </div>
     )
+}
+
+export function TypingOrchestrator() : React.ReactNode {
+    const [currentIndex, setCurrentIndex] = useState(0)
+
+    const states : ReactOnCompleteArray = [
+        (onComp: ()=> void) => (<HelloWorldCodeBlock onComplete={onComp}  />),
+        (onComp: ()=> void) => (<ModifierFillMaxSize onComplete={onComp}  />)
+    ]
+
+    const onComplete = (idx: number) => {
+        if (idx < (states.length-1)) {
+            setCurrentIndex(idx + 1)      
+        } 
+    }
+
+    return (states[currentIndex](() => {onComplete(currentIndex)}))
 }
diff --git a/app/components/typewriter/multi_typewriter.tsx b/app/components/typewriter/multi_typewriter.tsx
@@ -10,10 +10,10 @@ const text_cursor_delay = 700
 
 export default function MultiTypeWriter(
     strings : Array<string>, 
-    delay : number = default_type_delay,
-    endDelay: number = text_retype_delay,
-    infinite: boolean = true,
-    setComplete?: (complete: boolean) => void
+    onComplete?: () => void,
+        delay: number = default_type_delay,
+        endDelay: number = text_retype_delay,
+        infinite: boolean = false,
 ) : Array<any> {
     const [currentText, setCurrentText] = useState<Array<string>>([]);
     const [currentIndex, setCurrentIndex] = useState(0);
@@ -31,18 +31,25 @@ export default function MultiTypeWriter(
                 setCursorPosition(getIdxOfCurrentString(currentIndex, strings))
                 setCurrentIndex((prevIndex) => prevIndex + 1);
             }, delay);
-        } else if (infinite) {
+        } else {
             setIsTyping(false);
             // ADD THIS CHECK
             timeout = setTimeout(() => {
-                let toPush = []
-                for (let i = 0; i < strings.length; i++) {
-                    toPush.push("")
+
+                if (infinite) {
+                    let toPush = []
+                    for (let i = 0; i < strings.length; i++) {
+                        toPush.push("")
+                    }
+                    setCurrentText(toPush)
+                    setCurrentIndex(0)
+                    setCursorPosition(0)
+                } else {
+                    if (onComplete != null) {
+                        onComplete()
+                    }
                 }
-                setCurrentText(toPush)
-                setCurrentIndex(0);
-                setCursorPosition(0)
-            }, text_retype_delay);
+            }, endDelay);
         }
 
           return () => clearTimeout(timeout);