Skip to content

Commit

Permalink
Added plan for code animation orchestration
Browse files Browse the repository at this point in the history
  • Loading branch information
@goldy1992
goldy1992 committed Dec 2, 2023
1 parent 9291ee7 commit 1c03507
Show file tree
Hide file tree
Showing 16 changed files with 405 additions and 209 deletions.
11 changes: 9 additions & 2 deletions app/components/code_block/ICodeState.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@

export default interface ICodeState {
currentIndex : number,
currentIndex : number
canRender: boolean
}
}


export const State = {
Initial: 1,
Center: 2,
Image: 3
} as const;
186 changes: 7 additions & 179 deletions app/components/code_block/code_block.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ 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 ICodeState from "./ICodeState"
import CodeRenderer from "./renderer"
import { HelloWorldCodeBlock, InitialCodeBlock } from "./states/0_initialCodeBlock"
import ICodeState from "./ICodeState"
import HelloWorldCenteredBlock from "./states/greetingCentered"
import ProfilePictureBlock from "./states/profile_picture"

export function ModifierFillMaxSize({onComplete}: {onComplete? : () => void}) {
const code_blocks = [ ""
Expand All @@ -28,182 +31,6 @@ export function ModifierFillMaxSize({onComplete}: {onComplete? : () => void}) {
}


export function HelloWorldCodeBlock({onComplete}:
{
onComplete? : () => void
}) {
const code_blocks = [
composableTag,
privateFun,
space + methodName,
methodSignatureOpen,
tab + modifierDeclaration,
methodSignatureClose + space + functionOpen,
tab + column,
methodSignatureOpen,
tab2 + paramModifier,
modifierLower + dot,
fillMaxSize,
methodSignatureOpen + methodSignatureClose,
tab3 + dot,
background,
methodSignatureOpen + materialTheme + dot,
colorScheme,
dot,
primaryContainer,
methodSignatureClose,
comma,
tab + methodSignatureClose + space + functionOpen,
tab2 + textFun,
methodSignatureOpen,
tab3 + paramText,
textValue,
tab2 + methodSignatureClose,
tab + functionClose,
functionClose + 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) {
return <CodeBlock numberOfLines={16} >
</CodeBlock>
}
return (
<CodeBlock numberOfLines={16} >
<ComposableAnnotation currentText={blocks[0]} cursorVisible={showCursorArray[0]} />
<br/>
<KotlinKeyword currentText={blocks[1]} cursorVisible={showCursorArray[1]} />
<KotlinMethodName currentText={blocks[2]} cursorVisible={showCursorArray[2]}/>
<KotlinDefaultText currentText={blocks[3]} cursorVisible={showCursorArray[3]} />
<br/>
<KotlinDefaultText currentText={blocks[4]} cursorVisible={showCursorArray[4]} />
<br/>
<KotlinDefaultText currentText={blocks[5]} cursorVisible={showCursorArray[5]} />
<br />
<KotlinFrameworkComposableOrObject currentText={blocks[6]} cursorVisible={showCursorArray[6]} />
<KotlinDefaultText currentText={blocks[7]} cursorVisible={showCursorArray[7]} />
<br />
<KotlinMethodParam currentText={blocks[8]} cursorVisible={showCursorArray[8]} />
<KotlinDefaultText currentText={blocks[9]} cursorVisible={showCursorArray[9]} />
<KotlinMethodName currentText={blocks[10]} cursorVisible={showCursorArray[10]}/>
<KotlinDefaultText currentText={blocks[11]} cursorVisible={showCursorArray[11]} />
<br />
<KotlinDefaultText currentText={blocks[12]} cursorVisible={showCursorArray[12]} />
<KotlinMethodName currentText={blocks[13]} cursorVisible={showCursorArray[13]}/>
<KotlinDefaultText currentText={blocks[14]} cursorVisible={showCursorArray[14]} />
<KotlinField currentText={blocks[15]} cursorVisible={showCursorArray[15]} />
<KotlinDefaultText currentText={blocks[16]} cursorVisible={showCursorArray[16]} />
<KotlinField currentText={blocks[17]} cursorVisible={showCursorArray[17]} />
<KotlinDefaultText currentText={blocks[18]} cursorVisible={showCursorArray[18]} />
<KotlinKeyword currentText={blocks[19]} cursorVisible={showCursorArray[19]}/>
<br />
<KotlinDefaultText currentText={blocks[20]} cursorVisible={showCursorArray[20]} />
<br />
<KotlinFrameworkComposableOrObject currentText={blocks[21]} cursorVisible={showCursorArray[21]}/>
<KotlinDefaultText currentText={blocks[22]} cursorVisible={showCursorArray[22]} />
<br />
<KotlinMethodParam currentText={blocks[23]} cursorVisible={showCursorArray[23]} />
<KotlinString currentText={blocks[24]} cursorVisible={showCursorArray[24]} />
<br />
<KotlinDefaultText currentText={blocks[25]} cursorVisible={showCursorArray[25]} />
<br />
<KotlinDefaultText currentText={blocks[26]} cursorVisible={showCursorArray[26]} />
<br />
<KotlinDefaultText currentText={blocks[27]} cursorVisible={showCursorArray[27]} />
</CodeBlock>
)
}


export function HelloWorldCenteredBlock({onComplete}:
{
onComplete? : () => void
}) {
const code_blocks = [
tab2 + paramHorizontalAlignment,
alignment + dot,
centerHorizontally,
comma,
tab2 + paramVerticalArrangement,
arrangement + dot,
center,
comma
]
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) {
return <CodeBlock numberOfLines={16} >
</CodeBlock>
}
return (
<CodeBlock numberOfLines={16} >
<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]} />
<KotlinKeyword currentText={blocks[3]} cursorVisible={showCursorArray[3]}/>
<br />
<KotlinMethodParam currentText={blocks[4]} cursorVisible={showCursorArray[4]} />
<KotlinDefaultText currentText={blocks[5]} cursorVisible={showCursorArray[5]} />
<KotlinField currentText={blocks[6]} cursorVisible={showCursorArray[6]} />
<KotlinKeyword currentText={blocks[7]} cursorVisible={showCursorArray[7]}/>
<br />
<KotlinDefaultText currentText={ tab + methodSignatureClose + space + functionOpen} cursorVisible={false} />
<br />
<KotlinFrameworkComposableOrObject currentText={tab2 + textFun} cursorVisible={false}/>
<KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
<br />
<KotlinMethodParam currentText={tab3 + paramText} cursorVisible={false} />
<KotlinString currentText={textValue} cursorVisible={false} />
<br />
<KotlinDefaultText currentText={tab2 + methodSignatureClose} cursorVisible={false} />
<br />
<KotlinDefaultText currentText={tab + functionClose} cursorVisible={false} />
<br />
<KotlinDefaultText currentText={functionClose + space} cursorVisible={false} />
</CodeBlock>
)
}


export function CodeBlock({children, numberOfLines}:{children: any, numberOfLines: number}) {
var lineNumbers = ""
for (let i=1; i < numberOfLines; i++) {
Expand All @@ -212,7 +39,7 @@ export function CodeBlock({children, numberOfLines}:{children: any, numberOfLine
lineNumbers += numberOfLines
return (
<div className="dark:bg-slate-800 bg-slate-200 w-full flex-none">
<pre className="flex flex-no-wrap min-h-full text-sm leading-6 flex-none">
<pre className="flex flex-no-wrap min-h-full text-xs leading-3 flex-none">
<div aria-hidden="true" className="text-slate-600 py-4 pr-4 text-right select-none w-[50px]" >
{lineNumbers}
</div>
Expand Down Expand Up @@ -252,8 +79,9 @@ export function TypingOrchestrator(
setCodeState: React.Dispatch<React.SetStateAction<ICodeState>>) : React.ReactNode {

const states : ReactOnCompleteArray = [
(onComp: OnComplete) => (<HelloWorldCodeBlock onComplete={onComp} />),
(onComp: OnComplete) => (<InitialCodeBlock onComplete={onComp} />),
(onComp: OnComplete) => (<HelloWorldCenteredBlock onComplete={onComp} />),
(onComp: OnComplete) => (<ProfilePictureBlock onComplete={onComp} />),
]


Expand Down
33 changes: 20 additions & 13 deletions app/components/code_block/code_text.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,34 @@
'use client'


// compose semantics
// punctuation
export const comma = ","
export const dot = "."
export const functionClose = "}"
export const functionOpen = "{"
export const methodSignatureClose =")"
export const methodSignatureOpen = "("
export const space = " "
export const tab = " "
export const tab2 = tab + tab
export const tab3 = tab2 + tab
export const tab4 = tab2 + tab2
export const comma = ","
export const space = " "
export const dot = "."

export const initialGreeting = "Hello, I'm Mike, I work as a Full Stack Developer."
export const initialGreetingString = "\"" + initialGreeting + "\""
export const profilePictureFunction = "ProfilePicture"
// Compose semantics
export const alignment = "Alignment"
export const arrangement = "Arrangement"
export const background = "background"
export const center = "Center"
export const centerHorizontally = "CenterHorizontally"
export const column = "Column"
export const colorScheme = "colorScheme"
export const previewTag = "@Preview"
export const composableTag = "@Composable"
export const privateFun = "private fun"
export const dp = "dp"
export const fillMaxSize = "fillMaxSize"
export const methodName = "SayHello"
export const methodSignatureOpen = "("
export const primaryContainer = "primaryContainer"
export const materialTheme = "MaterialTheme"
export const modifierLower = "modifier"
Expand All @@ -30,14 +37,14 @@ export const modifierDeclaration = modifierLower + ": " + modifierUpper + " = "
export const paramModifier = modifierLower + " = "
export const paramHorizontalAlignment = "horizontalAlignment = "
export const paramVerticalArrangement = "verticalArrangement = "
export const methodSignatureClose =")"
export const textFun = "Text"
//export const textFunOpen = "("
export const previewTag = "@Preview"
export const privateFun = "private fun"
export const paramText = "text = "
export const textValue = "\"Hello world\""
export const sizeLower = "size"
export const textFun = "Text"
export const textFunClose = tab2 + methodSignatureClose
export const functionClose = "}"
export const functionOpen = "{"
export const textValue = "\"Hello world\""



export const cursor = "|"
Expand Down
33 changes: 21 additions & 12 deletions app/components/code_block/renderer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,37 @@
import React from 'react'
import ICodeState from './ICodeState'
import ICodeState, { State } from './ICodeState'
import { initialGreeting } from './code_text'


export default function CodeRenderer({codeState} : {codeState: ICodeState}) : React.ReactNode {

let rendererIdx = codeState.canRender ? codeState.currentIndex + 1 : codeState.currentIndex

switch(rendererIdx) {
case 0: return (
<></>
)
case 1: return (
<div>
<span className='text-gray-800 dark:text-gray-200'>
Hello World
</span>
default: // State.Initial
return (
<div>
<span className='text-gray-800 dark:text-gray-200'>
{initialGreeting}
</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>
)
default: return (
<div key={2} className='flex h-full flex-col justify-center'>
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'>Hello World</span>

<span className='text-gray-800 dark:text-gray-200'>{initialGreeting}</span>
</div>
</div>
)

}
}
Loading

0 comments on commit 1c03507

Please sign in to comment.