-
Notifications
You must be signed in to change notification settings - Fork 0
/
Scene.jsx
52 lines (43 loc) · 2.83 KB
/
Scene.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React, { useEffect, useState } from "react";
import Typewriter from 'typewriter-effect';
export default function Scene({ tags, classies, classState, story, choices }) {
const [content, setContent] = useState();
useEffect(() => {
if (classState == "start") setContent(startContent);
else if (classState == "bulletin") setContent(bulletinContent);
else if (classState == "choice") setContent(choiceContent);
else if (classState == "ending") setContent(endingContent);
}, [classState, choices]);
let startContent = <>
<img src="erin.png" className="rounded-full bg-center w-fit aspect-square bg-origin-content bg-auto p-8 self-center" />
<p className="text-4xl text-teal-900 headfont -mt-5 text-center">Erin Caldera</p>
<div className="text-2xl self-center w-10/12 px-4 mt-3 mb-2 py-1 rounded-xl bg-teal-300/30">
<Typewriter
options={{
strings: ['********************'],
autoStart: true,
delay: "natural",
loop: false,
pauseFor: 9999999,
}} />
</div>
{choices}
</>
let bulletinContent = <><nav className="headfont w-9/10 bg-teal-100/90 rounded-md p-2 text-md outline outline-offset-4 outline-2 outline-teal-200 flex flex-row"><span className="w-1/3">Hey, Erin!</span> <span className="text-center w-1/3">{(tags.today !== undefined) ? "Today is " + tags.today + " the " + tags.todate + "th" : "It's a great day to be a Mage."}</span> <span className="text-right w-1/3">{Array.from({ length: tags.spoons }, (_, i) => (<>🥄</>))}</span></nav>
<div className="w-9/10 mt-8 bg-teal-100/90 rounded-md p-2 text-md outline outline-offset-4 outline-2 outline-teal-200">{story}</div>
{choices}
</>
let choiceContent = <><nav className="headfont w-9/10 bg-teal-100/90 rounded-md p-2 text-md outline outline-offset-4 outline-2 outline-teal-200 flex flex-row"><span className="w-1/3">Hey, Erin!</span> <span className="text-center w-1/3">{(tags.today !== undefined) ? "Today is " + tags.today + " the " + tags.todate + "th" : "It's a great day to be a Mage."}</span> <span className="text-right w-1/3">{Array.from({ length: tags.spoons }, (_, i) => (<>🥄</>))}</span></nav>
<div className="w-9/10 mt-8 bg-teal-100/90 rounded-md p-2 text-md outline outline-offset-4 outline-2 outline-teal-200">{story}</div>
{choices}
</>
let endingContent = <>
<div className="headfont w-1/3 mx-auto bg-teal-100/90 rounded-md p-2 text-md outline outline-offset-4 outline-2 outline-teal-200 text-center">You've completed the week.</div>
<div className="w-1/3 mx-auto mt-8 bg-teal-100/90 rounded-md p-2 text-md outline outline-offset-4 outline-2 outline-teal-200">{tags.taskCount == 10 ? "You've completed your tasks too. Good work." : `You only completed ${tags.taskCount} tasks, though. \n How come?`}</div>
</>
return (
<section className={"scene " + classies}>
{ content }
</section>
)
}