Skip to content

Commit

Permalink
even more progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@matiasperz
matiasperz committed Nov 30, 2022
1 parent 57de8a4 commit 4dcb6c8
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 41 deletions.
50 changes: 25 additions & 25 deletions public/data/ffflauta-script.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,13 +124,6 @@
"dialog-right": "It's been months since... forgive me. Bob asked me in January for some survival cans, you know, canned protein and sparking stones, I warned him that he didn't have the necessary equipment to go to the base...",
"text": ""
},
"scene-18": {
"char-left": "A-indoor-4",
"dialog-left": "was?",
"char-right": "B-indoor-1",
"dialog-right": "It's been months since... forgive me. Bob asked me in January for some survival cans, you know, canned protein and sparking stones, I warned him that he didn't have the necessary equipment to go to the base...",
"text": ""
},
"scene-19": {
"char-left": "A-indoor-2",
"dialog-left": "base? what is he talking about?",
Expand Down Expand Up @@ -177,129 +170,136 @@
"char-left": "A-indoor-3",
"dialog-left": "... a mermaid but from the forest. What is that about?",
"char-right": "B-indoor-1",
"dialog-right": "She is much more than that, she is a creature that must be taken care of... the most beautiful woman that has ever been seen, intoxicates men with her charms, loses them in the labyrinth of her own obsessions... only one thing matters to those who have made the mistake of following the trail of the ciguapa: to see it again, everything else is erased forever from their minds.",
"dialog-right": "She is much more than that, she is a creature that must be taken care of... the most beautiful woman that has ever been seen, intoxicates men with her charms, loses them in the labyrinth of her own obsessions...",
"text": ""
},
"scene-25": {
"char-left": "A-indoor-3",
"dialog-left": "...",
"char-right": "B-indoor-1",
"dialog-right": "...only one thing matters to those who have made the mistake of following the trail of the ciguapa: to see it again, everything else is erased forever from their minds.",
"text": ""
},
"scene-26": {
"char-left": "A-indoor-3",
"dialog-left": "",
"char-right": "B-indoor-3",
"dialog-right": "I'm afraid this has happened to your brother!",
"text": ""
},
"scene-26": {
"scene-27": {
"char-left": "A-indoor-1",
"dialog-left": "the cold froze your brain? let's leave tomorrow for the base, I'm not for stories...",
"char-right": "B-indoor-4",
"dialog-right": "...right...",
"text": ""
},
"scene-27": {
"scene-28": {
"char-left": "",
"dialog-left": "",
"char-right": "",
"dialog-right": "",
"text": "already in the cabin"
},
"scene-28": {
"scene-29": {
"char-left": "A-outdoor-5",
"dialog-left": "so cold... bob... I hope you are well...",
"char-right": "",
"dialog-right": "",
"text": ""
},
"scene-27": {
"scene-30": {
"char-left": "",
"dialog-left": "",
"char-right": "",
"dialog-right": "",
"text": "4:11 am"
},
"scene-28": {
"scene-31": {
"char-left": "A-end-1",
"dialog-left": "Who's there!?",
"char-right": "",
"dialog-right": "",
"text": ""
},
"scene-29": {
"scene-32": {
"char-left": "A-end-1",
"dialog-left": "hey!!!!",
"char-right": "",
"dialog-right": "",
"text": ""
},
"scene-30": {
"scene-33": {
"char-left": "A-end-1",
"dialog-left": "footprints in the snow!",
"char-right": "",
"dialog-right": "",
"text": ""
},
"scene-31": {
"scene-34": {
"char-left": "A-end-2",
"dialog-left": "bob is that you?!",
"char-right": "",
"dialog-right": "",
"text": ""
},
"scene-31": {
"scene-35": {
"char-left": "A-end-3",
"dialog-left": "oh! I'm sorry, I shouldn't have shouted so much, I'm so nervous...",
"char-right": "G",
"dialog-right": "...",
"text": ""
},
"scene-32": {
"scene-36": {
"char-left": "A-end-3",
"dialog-left": "you are beautiful... I lack words for...",
"char-right": "G",
"dialog-right": "...",
"text": ""
},
"scene-33": {
"scene-37": {
"char-left": "A-end-2",
"dialog-left": "Wait! come back!",
"char-right": "",
"dialog-right": "",
"text": ""
},
"scene-34": {
"scene-38": {
"char-left": "",
"dialog-left": "",
"char-right": "",
"dialog-right": "",
"text": "8:35 am"
},
"scene-35": {
"scene-39": {
"char-left": "",
"dialog-left": "",
"char-right": "B-end-1",
"dialog-right": "Good Morning! I already have everything to go to the base!",
"text": ""
},
"scene-36": {
"scene-40": {
"char-left": "",
"dialog-left": "",
"char-right": "B-end-5",
"dialog-right": "If I may, you city dwellers are not used to getting up early?",
"text": ""
},
"scene-37": {
"scene-41": {
"char-left": "",
"dialog-left": "",
"char-right": "B-end-2",
"dialog-right": "hello?",
"text": ""
},
"scene-38": {
"scene-42": {
"char-left": "",
"dialog-left": "",
"char-right": "B-end-4",
"dialog-right": "wow, there's no one here...",
"text": ""
},
"scene-39": {
"scene-43": {
"char-left": "",
"dialog-left": "",
"char-right": "B-end-3",
Expand Down
4 changes: 3 additions & 1 deletion public/experiments.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -828,7 +828,9 @@
"filename": "39.ffflauta-scene.js",
"title": "FFFlauta Scene",
"href": "/experiments/39.ffflauta-scene.js",
"tags": [],
"tags": [
"private"
],
"number": 39,
"contributors": [
{
Expand Down
Binary file modified public/images/ffflauta-scene/misc/flauta-tv.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/video/ffflauta-scene/tv-bg.mp4
View file
Binary file not shown.
54 changes: 39 additions & 15 deletions src/experiments/39.ffflauta-scene.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { FullHeightWrapper } from '~/components/common/aspect-canvas'
import { AspectBox } from '~/components/layout/aspect-box'
import { HTMLLayout } from '~/components/layout/html-layout'
import flautaTv from '~/public/images/ffflauta-scene/misc/flauta-tv.png'
import flautaTvBg from '~/public/images/ffflauta-scene/misc/flauta-tv-bg.png'

import script from '../../public/data/ffflauta-script.json'

Expand Down Expand Up @@ -82,7 +81,7 @@ const Dialog = ({ text }) => {
minWidth: 120,
maxWidth: 160,
width: 'max-content',
minHeight: 60,
minHeight: 30,
height: 'auto',
position: 'relative',
color: 'black'
Expand Down Expand Up @@ -138,16 +137,17 @@ const Dialog = ({ text }) => {
style={{
position: 'relative',
display: 'block',
padding: '8px 10px 11px 10px',
padding: '8px 10px 8px 10px',
minHeight: '100%',
height: '100%'
}}
>
<p
style={{
fontSize: 10,
fontSize: 9,
height: '100%',
userSelect: 'none'
userSelect: 'none',
textTransform: 'lowercase'
}}
>
{text}
Expand All @@ -157,11 +157,21 @@ const Dialog = ({ text }) => {
)
}

const Background = () => {
const Background = ({ muted }) => {
return (
<div style={{ position: 'absolute', inset: 0 }}>
<div style={{ width: '100%', height: '100%' }}>
<Image src={flautaTvBg} layout="fill" objectFit="cover" />
<video
onLoadStart={(e) => {
e.target.volume = 0.5
}}
style={{ width: '100%' }}
playsInline
autoPlay
src="/video/ffflauta-scene/tv-bg.mp4"
muted={muted}
loop
/>
</div>
</div>
)
Expand Down Expand Up @@ -201,6 +211,7 @@ const TV = ({ children }) => {
}

const FFFlautaScene = () => {
const [hasInteracted, setHasInteracted] = useState(false)
const [scene, setScene] = useState(0)

const parsedScript = useMemo(() => Object.entries(script), [])
Expand All @@ -226,20 +237,33 @@ const FFFlautaScene = () => {
<AspectBox
style={{ fontFamily: 'Ffflauta', fontWeight: 500 }}
ratio={21 / 9}
onClick={handleNextScene}
onClick={() => {
handleNextScene()
setHasInteracted(true)
}}
>
<TV>
<Background />
<Background muted={!hasInteracted} />
<div style={{ position: 'absolute', top: '10%', right: '10%' }}>
<p>
{scene + 1}/{parsedScript.length}
</p>
</div>
{isCurtain ? (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%'
width: '100%',
position: 'absolute',
inset: 0,
background: '#373737'
}}
>
<p style={{ fontSize: 14 }}>{curtainText}</p>
<p style={{ fontSize: 12, textTransform: 'lowercase' }}>
{curtainText}
</p>
</div>
) : (
<div
Expand All @@ -253,7 +277,7 @@ const FFFlautaScene = () => {
padding: '10% 5%'
}}
>
{dialogLeft && (
{dialogLeftAvatar && (
<div
style={{
display: 'flex',
Expand All @@ -262,13 +286,13 @@ const FFFlautaScene = () => {
gridColumn: 1
}}
>
<Dialog text={dialogLeft} />
{dialogLeft && <Dialog text={dialogLeft} />}
<div style={{ marginTop: 10 }}>
<Avatar src={dialogLeftAvatar} />
</div>
</div>
)}
{dialogRight && (
{dialogRightAvatar && (
<div
style={{
display: 'flex',
Expand All @@ -277,7 +301,7 @@ const FFFlautaScene = () => {
gridColumn: 2
}}
>
<Dialog text={dialogRight} />
{dialogRight && <Dialog text={dialogRight} />}
<div style={{ marginTop: 10 }}>
<Avatar src={dialogRightAvatar} />
</div>
Expand Down

1 comment on commit 4dcb6c8

@vercel
Copy link

@vercel vercel bot commented on 4dcb6c8 Nov 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

experiments – ./

lab.basement.studio
experiments-basement.vercel.app
experiments-git-main-basement.vercel.app
experiments.basement.studio
experiments-nu.vercel.app

Please sign in to comment.