Skip to content

Commit

Permalink
Add manifest documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
gabber235 committed Apr 28, 2024
1 parent 385b802 commit 0c24706
Show file tree
Hide file tree
Showing 11 changed files with 3,457 additions and 12,053 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
47 changes: 42 additions & 5 deletions documentation/docs/docs/04-concepts/03-Manifest/index.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,42 @@
# Manifest
TODO: Add info about manifest entries
:::info
This page is currently being written! If you want to help us out with writing this page join the [Discord](https://discord.gg/HtbKyuDDBw) and create a question.
:::
import RiveBoard from "@site/src/components/RiveBoard";

# Manifest Entries

In Typewriter, there are multiple types of entries, the main one `Sequence Entries`, these are `Dialogue Entries`, `Event Entries`, and `Action Entries`. The next major type of entry is the `Manifest Entry`. While `Sequence Entries` are imperative, `Manifest Entries` are declarative. Let's explore the difference between these two approaches and how they work.

## Then vs When

### Then (`Sequence entries`)
The "Then" logic, represented by `Sequence Entries`, works like a set of instructions: "Do this, then do that, then do this other thing." It's like a sideways directed graph, where each step leads to the next in a linear fashion.

Example: Let's consider a Minecraft boss bar that needs to be displayed and updated as a player moves through a village.

With the "Then" logic, you would:
1. Show the boss bar when the player enters the village
2. Update the boss bar text to "Welcome to the village!"
3. Update the boss bar text to "Check out the blacksmith!" when the player enters the blacksmith's building
4. Update the boss bar text back to "Welcome to the village!" when the player exits the blacksmith's building
5. Hide the boss bar when the player leaves the village

### When (`Manifest Entries`)
The "When" logic, represented by `Manifest Entries`, defines conditions and specifies what should happen when those conditions are met. It's like a tree structure, where different branches represent different conditions and their corresponding actions.

Example: Using the same village scenario, with the "When" logic, you would:
- When the player is in the village
- Show the boss bar with the text "Welcome to the village!"
- When the player is in the blacksmith's building
- Update the boss bar text to "Check out the blacksmith!"

In this approach, you define the conditions under which an action should occur, rather than specifying a linear sequence of steps.
Suppose you wanted to add more buildings to the village and have different messages displayed when the player enters each building.
Doing this with the "Then" logic would incur a lot of repetitive entries, while with the "When" logic, you can simply add more conditions and actions and Typewriter will figure out what to display based on the player's location.

## Interactive Visualization

To better understand the difference between "Then" and "When" logic, let's explore an interactive visualization.
Try moving your cursor over the village and blacksmith's building to see how the boss bar changes based on the player's location.

On the bottom you will see how the "Then" and "When" logic is represented in a directed graph and a tree structure respectively.

<RiveBoard stateMachines="State Machine" src={require('./assets/manifest.riv').default}
/>
14,821 changes: 2,780 additions & 12,041 deletions documentation/package-lock.json

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions documentation/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
"typecheck": "tsc"
},
"dependencies": {
"@docusaurus/core": "^3.1.1",
"@docusaurus/preset-classic": "^3.1.1",
"@docusaurus/core": "^3.2.1",
"@docusaurus/preset-classic": "^3.2.1",
"@mdx-js/react": "^3.0.0",
"@rive-app/react-canvas": "^4.7.1",
"@rive-app/react-canvas": "^4.9.0",
"clsx": "^2.1.0",
"prism-react-renderer": "^2.3.1",
"react": "^18.2.0",
Expand All @@ -27,9 +27,9 @@
"rive-loader": "file:plugins/rive-loader"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "^3.0.1",
"@docusaurus/tsconfig": "3.0.0",
"@docusaurus/types": "3.0.0",
"@docusaurus/module-type-aliases": "^3.2.1",
"@docusaurus/tsconfig": "^3.2.1",
"@docusaurus/types": "^3.2.1",
"@types/react": "^18.2.29",
"typescript": "^5.2.2"
},
Expand Down
2 changes: 1 addition & 1 deletion documentation/src/components/HomepageFeatures/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const FeatureList: FeatureItem[] = [
},
];

function Feature({title, RiveConfig, description}: FeatureItem) {
function Feature({ title, RiveConfig, description }: FeatureItem) {
return (
<div className={clsx('col col--4', styles.feature)}>
<div className="text--center">
Expand Down
57 changes: 57 additions & 0 deletions documentation/src/components/RiveBoard/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import Rive, { useRive } from '@rive-app/react-canvas';
import { useEffect, useRef, useState } from 'react';

interface RiveBoardProps {
src: any;
artboard?: string;
stateMachines?: string | string[];
}

export default function RiveBoard(props: RiveBoardProps) {
const ref = useRef();
const { width } = useContainerDimensions(ref);
const { rive, RiveComponent } = useRive({
src: props.src,
artboard: props.artboard,
stateMachines: props.stateMachines,
autoplay: true,
});
const usedWidth = width * 0.8;
return (
<div ref={ref} style={{ width: "100%", height: "100%", display: "flex", justifyContent: "center" }} >
<div style={{
width: usedWidth,
height: usedWidth,
}}>
<RiveComponent />
</div >
</div>
);
}

export const useContainerDimensions = myRef => {
const [dimensions, setDimensions] = useState({ width: 0, height: 0 })

useEffect(() => {
const getDimensions = () => ({
width: myRef.current.offsetWidth,
height: myRef.current.offsetHeight
})

const handleResize = () => {
setDimensions(getDimensions())
}

if (myRef.current) {
setDimensions(getDimensions())
}

window.addEventListener("resize", handleResize)

return () => {
window.removeEventListener("resize", handleResize)
}
}, [myRef])

return dimensions;
};

0 comments on commit 0c24706

Please sign in to comment.