added draft of code orchestration

goldy1992 · Dec 2, 2023 · e6754bf · e6754bf
1 parent 13ff4e7
commit e6754bf
Show file tree

Hide file tree

Showing 14 changed files with 586 additions and 220 deletions.
diff --git a/app/components/code_block/ICodeState.tsx b/app/components/code_block/ICodeState.tsx
@@ -12,5 +12,6 @@ export const State = {
     ProfilePic: 4,
     VerticalCenter: 5,
     ProfileCenter: 6,
-    TextCenter: 7
+    TextCenter: 7,
+    FontSizeLarger: 8
   } as const;
diff --git a/app/components/code_block/code_block.tsx b/app/components/code_block/code_block.tsx
@@ -2,18 +2,17 @@
 import React, { useState, ReactNode } from "react"
 import MultiTypeWriter from "../typewriter/multi_typewriter"
 import CodeEditorTitleBar from "./header"
-import { ComposableAnnotation, KotlinDefaultText, KotlinKeyword, KotlinMethodName, background, colorScheme, column, comma, composableTag, dot, fillMaxSize, functionClose, functionOpen, materialTheme, methodName, methodSignatureClose, methodSignatureOpen, modifierDeclaration, modifierLower, paramModifier, previewTag, primaryContainer, privateFun, space, tab, tab2, tab3, textFun, textFunClose, paramText, textValue, KotlinFrameworkComposableOrObject, KotlinMethodParam, KotlinField, KotlinString, paramHorizontalAlignment, alignment, centerHorizontally, paramVerticalArrangement, arrangement, center } from "./code_text"
+import { composableTag, functionClose, methodName, methodSignatureClose, methodSignatureOpen, modifierDeclaration, privateFun, textFun, textFunClose, paramText, textValue } from "./code_text"
 import CodeRenderer from "./renderer"
-import { HelloWorldCodeBlock, InitialCodeBlock } from "./states/0_initialCodeBlock"
+import { InitialCodeBlock } from "./states/0_initialCodeBlock"
 import ICodeState from "./ICodeState"
-import HelloWorldCenteredBlock from "./states/greetingCentered"
-import ProfilePictureBlock from "./states/profile_picture"
 import TextNameBold from "./states/1_textNameBold"
 import TextJobItalics from "./states/2_textJobItalics"
 import VerticalCenter from "./states/4_verticalCenter"
 import ProfilePic from "./states/3_profilePic"
 import ProfilePicCenter from "./states/5_profilePic_center"
 import TextAlignCenter from "./states/6_textAlignCenter"
+import FontSizeLarger from "./states/7_fontSizeLarger"
 
 export function ModifierFillMaxSize({onComplete}: {onComplete? : () => void}) {
     const code_blocks = [ ""
@@ -89,9 +88,10 @@ export function TypingOrchestrator(
         (onComp: OnComplete) => (<TextNameBold onComplete={onComp}  />),
         (onComp: OnComplete) => (<TextJobItalics onComplete={onComp}  />),
         (onComp: OnComplete) => (<ProfilePic onComplete={onComp}  />),
-        // (onComp: OnComplete) => (<VerticalCenter onComplete={onComp}  />),
-        // (onComp: OnComplete) => (<ProfilePicCenter onComplete={onComp}  />),
-        // (onComp: OnComplete) => (<TextAlignCenter onComplete={onComp}  />),
+        (onComp: OnComplete) => (<VerticalCenter onComplete={onComp}  />),
+        (onComp: OnComplete) => (<ProfilePicCenter onComplete={onComp}  />),
+        (onComp: OnComplete) => (<TextAlignCenter onComplete={onComp}  />),
+        (onComp: OnComplete) => (<FontSizeLarger onComplete={onComp}  />),
     ]
 
 
@@ -103,7 +103,7 @@ export function TypingOrchestrator(
         let timeout = setTimeout(() => {
             let nextIdx = idx < (states.length - 1) ? idx + 1 : 0
             setCodeState({"currentIndex": nextIdx, "canRender": false})
-            }, 5000)  
+            }, 2000)  
         console.log("on complete returning")
         return () => clearTimeout(timeout); 
     }

diff --git a/app/components/code_block/code_text.tsx b/app/components/code_block/code_text.tsx
@@ -47,16 +47,20 @@ export const modifierUpper = "Modifier"
 export const modifierDeclaration = modifierLower + ": " + modifierUpper + " = " + modifierUpper
 export const paramModifier = modifierLower + " = "
 export const paramHorizontalAlignment = "horizontalAlignment = "
+export const paramFontSize = "fontSize ="
 export const paramFontStyle = "fontStyle ="
 export const paramFontWeight = "fontWeight ="
 export const paramStyle = "style ="
+export const paramTextAlign = "textAlign ="
 export const paramVerticalArrangement = "verticalArrangement = "
 export const previewTag = "@Preview"
 export const primaryContainer = "primaryContainer"
 export const privateFun = "private fun"
 export const paramText = "text = "
 export const sizeLower = "size"
+export const sp = "sp"
 export const spanStyle = "SpanStyle"
+export const textAlign = "TextAlign"
 export const textFun = "Text"
 export const textFunClose = tab2 + methodSignatureClose
 export const textValue = "\"Hello world\""

diff --git a/app/components/code_block/renderer.tsx b/app/components/code_block/renderer.tsx
@@ -49,22 +49,59 @@ export default function CodeRenderer({codeState} : {codeState: ICodeState}) :  R
                     </span>
                 </div>
             )
-        // case State.Center: return (
-        //     <div key={2} className='flex h-full flex-col justify-center'>
-        //     <div className='w-full flex flex-row justify-center'>
-        //         <span className='text-gray-800 dark:text-gray-200'>{initialGreeting}</span>
-        //     </div>
-        // </div>
-        // )
-        // case State.Image: return (
-        //     <div key={2} className='flex h-full flex-col justify-center items-center'>
-        //            <img src='profile_pic.jpg' className='w-32 h-32 rounded-full border border-white' />
-        //     <div className='w-full flex flex-row justify-center'>
-
-        //         <span className='text-gray-800 dark:text-gray-200'>{initialGreeting}</span>
-        //     </div>
-        // </div>
-        // )
-
+        case State.VerticalCenter:
+            return (
+                <div className='flex h-full flex-col justify-center'>
+                    <img src='profile_pic.jpg' className='w-32 h-32 rounded-full border border-white' />
+                    <span className='text-gray-800 dark:text-gray-200'>
+                        {initialGreetingStart}
+                        <span className='font-bold'>{name}</span>
+                        {initialGreetingMiddle}
+                        <span className='italic'>{job}</span>
+                    </span>
+                </div>
+            )
+        case State.ProfileCenter:
+            return (
+                <div className='flex h-full flex-col justify-center items-center'>
+                    <img src='profile_pic.jpg' className='w-32 h-32 rounded-full border border-white' />
+                    <div className='flex w-full'>
+                        <span className='flex-grow text-gray-800 dark:text-gray-200'>
+                            {initialGreetingStart}
+                            <span className='font-bold'>{name}</span>
+                            {initialGreetingMiddle}
+                            <span className='italic'>{job}</span>
+                        </span>
+                    </div>
+                </div>
+            )
+        case State.TextCenter:
+            return (
+                <div className='flex h-full flex-col justify-center items-center'>
+                    <img src='profile_pic.jpg' className='w-32 h-32 rounded-full border border-white' />
+                    <div className='flex w-full'>
+                        <span className='flex-grow text-center text-gray-800 dark:text-gray-200'>
+                            {initialGreetingStart}
+                            <span className='font-bold'>{name}</span>
+                            {initialGreetingMiddle}
+                            <span className='italic'>{job}</span>
+                        </span>
+                    </div>
+                </div>
+            )
+        case State.FontSizeLarger:
+            return (
+                <div className='flex h-full flex-col justify-center items-center'>
+                    <img src='profile_pic.jpg' className='w-32 h-32 rounded-full border border-white' />
+                    <div className='flex w-full'>
+                        <span className='flex-grow text-center text-2xl text-gray-800 dark:text-gray-200'>
+                            {initialGreetingStart}
+                            <span className='font-bold'>{name}</span>
+                            {initialGreetingMiddle}
+                            <span className='italic'>{job}</span>
+                        </span>
+                    </div>
+                </div>
+            )
     }
 }
diff --git a/app/components/code_block/states/0_initialCodeBlock.tsx b/app/components/code_block/states/0_initialCodeBlock.tsx
@@ -25,7 +25,7 @@ export function InitialCodeBlock({onComplete}:
     }
 
     return (
-        <CodeBlock numberOfLines={20} >
+        <CodeBlock numberOfLines={24} >
             <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
             <br/>
             <KotlinKeyword currentText={privateFun} cursorVisible={false} />

diff --git a/app/components/code_block/states/1_textNameBold.tsx b/app/components/code_block/states/1_textNameBold.tsx
@@ -43,7 +43,7 @@ export default function TextNameBold({onComplete}:
     }
 
     return (
-        <CodeBlock numberOfLines={20} >
+        <CodeBlock numberOfLines={24} >
             <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
             <br/>
             <KotlinKeyword currentText={privateFun} cursorVisible={false} />

diff --git a/app/components/code_block/states/2_textJobItalics.tsx b/app/components/code_block/states/2_textJobItalics.tsx
@@ -37,7 +37,7 @@ export default function TextJobItalics({onComplete}:
     }
 
     return (
-        <CodeBlock numberOfLines={20} >
+        <CodeBlock numberOfLines={24} >
             <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
             <br/>
             <KotlinKeyword currentText={privateFun} cursorVisible={false} />

diff --git a/app/components/code_block/states/3_profilePic.tsx b/app/components/code_block/states/3_profilePic.tsx
@@ -31,7 +31,7 @@ export default function ProfilePic({onComplete}:
     }
 
     return (
-        <CodeBlock numberOfLines={20} >
+        <CodeBlock numberOfLines={24} >
             <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
             <br/>
             <KotlinKeyword currentText={privateFun} cursorVisible={false} />

diff --git a/app/components/code_block/states/4_verticalCenter.tsx b/app/components/code_block/states/4_verticalCenter.tsx
@@ -1,7 +1,123 @@
+import MultiTypeWriter from "@/components/typewriter/multi_typewriter"
+import { CodeBlock } from "../code_block"
+import { tab2, name, dot, comma, ComposableAnnotation, composableTag, KotlinKeyword, privateFun, KotlinMethodName, space, methodName, KotlinDefaultText, methodSignatureOpen, tab, modifierDeclaration, methodSignatureClose, functionOpen, KotlinFrameworkComposableOrObject, column, KotlinMethodParam, paramModifier, modifierLower, fillMaxSize, tab3, background, materialTheme, KotlinField, colorScheme, primaryContainer, textFun, paramText, KotlinString, functionClose, buildAnnotatedString, append, initialGreetingStart, tab4, withStyle, paramStyle, spanStyle, paramFontWeight, fontWeight, bold, tab5, initialGreetingMiddle, job, paramFontStyle, fontStyle, italic, profilePictureFunction, modifierUpper, sizeLower, dp, paramVerticalArrangement, arrangement, center } from "../code_text"
 
 export default function VerticalCenter({onComplete}: 
     {
         onComplete? : () => void
-    }) { 
-        return (<></>)
-}
+    }) {
+    const code_blocks = [
+        tab2 + paramVerticalArrangement,
+        arrangement + dot,
+        center,
+        comma + space
+    ]
+    const [blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks, onComplete)
+
+    let showCursorArray : Array<boolean> = []
+    for (let n = 0; n < blocks.length; n++) {
+        showCursorArray.push(cursor_visible && (cursorPosition == n))
+    }
+
+    // Fixes server side rendering undefined when the array is empty!
+    if (blocks.length <= 0) {
+        console.log("rendering empty code block")
+        return <CodeBlock numberOfLines={16} >
+            </CodeBlock>
+    }
+
+    return (
+        <CodeBlock numberOfLines={24} >
+            <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
+            <br/>
+            <KotlinKeyword currentText={privateFun} cursorVisible={false} />
+            <KotlinMethodName currentText={space + methodName} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={tab + modifierDeclaration} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab + column} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <br />
+            <KotlinMethodParam currentText={tab2 + paramModifier} cursorVisible={false} />
+            <KotlinDefaultText currentText={modifierLower + dot} cursorVisible={false} />
+            <KotlinMethodName currentText={fillMaxSize} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen + methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + dot} cursorVisible={false} />
+            <KotlinMethodName currentText={background} cursorVisible={false}/>
+            <KotlinDefaultText currentText={  methodSignatureOpen + materialTheme + dot} cursorVisible={false} />
+            <KotlinField currentText={colorScheme} cursorVisible={false} />
+            <KotlinDefaultText currentText={dot} cursorVisible={false} />
+            <KotlinField currentText={primaryContainer} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <KotlinKeyword currentText={comma} cursorVisible={false}/>
+            <br />
+            <KotlinMethodParam currentText={blocks[0]} cursorVisible={showCursorArray[0]} />
+            <KotlinDefaultText currentText={blocks[1]} cursorVisible={showCursorArray[1]} />
+            <KotlinField currentText={blocks[2]} cursorVisible={showCursorArray[2]} />
+            <KotlinDefaultText currentText={blocks[3]} cursorVisible={showCursorArray[3]} />
+            <br />
+            <KotlinDefaultText currentText={ tab + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab2 + profilePictureFunction} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen + modifierUpper + dot} cursorVisible={false}/>
+            <KotlinMethodName currentText={sizeLower} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false}/>
+            <KotlinMethodParam currentText={"100"} cursorVisible={false}/>
+            <KotlinDefaultText currentText={dot} cursorVisible={false}/>
+            <KotlinField currentText={dp} cursorVisible={false}/>
+            <KotlinDefaultText currentText={  methodSignatureClose + methodSignatureClose} cursorVisible={false}/>
+
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab2 + textFun} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramText} cursorVisible={false} />
+            <KotlinDefaultText currentText={buildAnnotatedString + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + initialGreetingStart + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinMethodName currentText={tab3 + withStyle} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + spanStyle + methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramFontWeight} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + fontWeight + dot} cursorVisible={false} />
+            <KotlinField currentText={bold} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab4 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + name + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + functionClose} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={tab3 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={ "\"" + initialGreetingMiddle + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinMethodName currentText={tab3 + withStyle} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + spanStyle + methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramFontStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + fontStyle + dot} cursorVisible={false} />
+            <KotlinField currentText={italic} cursorVisible={false} />
+            <KotlinDefaultText currentText={ methodSignatureClose + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab4 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + job + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + functionClose} cursorVisible={false} />
+          <br />
+            <KotlinDefaultText currentText={tab + functionClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={functionClose + space} cursorVisible={false} />
+        </CodeBlock>
+    )
+}