(
20 | null
21 | );
22 |
23 | return (
24 |
30 | {"Guides"}
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | );
46 | };
47 |
48 | export default Guides;
49 |
--------------------------------------------------------------------------------
/src/guides/Accessibility.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Section from "../Section";
3 | import Dialog from "../Dialog";
4 | import Frog from "../performers/Frog";
5 | import { Emphasis } from "../Char";
6 | import CodeExample from "../CodeExample";
7 |
8 | const REDUCED_MOTION_EXAMPLE = `import { useWindupString } from "windups";
9 | import { usePrefersReducedMotion } from "../a11y-hooks";
10 | // Good example at https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
11 |
12 | const SkipForReducedMotion = () => {
13 | const prefersReducedMotion = usePrefersReducedMotion();
14 | const [text] = useWindupString("Respect user preferences!", {
15 | skipped: prefersReducedMotion,
16 | });
17 |
18 | return {text}
;
19 | };`;
20 |
21 | const SCREENREADER_EXAMPLE = `import { useWindupString } from "windups";
22 | import { VisuallyHidden } from "@reach/visually-hidden";
23 |
24 | const AccessibleWindupString = ({ text }) => {
25 | const [windupText] = useWindupString(text);
26 |
27 | return (
28 | <>
29 | {text}
30 | {windupText}
31 |
32 | )
33 | }
34 | `;
35 |
36 | const SCREENREADER_CHILDREN_EXAMPLE = `import { WindupChildren, textFromChildren } from "windups";
37 | import { VisuallyHidden } from "@reach/visually-hidden";
38 |
39 | const AccessibleWindupChildren = ({ children }) => {
40 | const text = textFromChildren(children);
41 |
42 | return (
43 | <>
44 | {text}
45 |
46 |
47 | {text}
48 |
49 |
50 |
51 | )
52 | }
53 | `;
54 |
55 | const Accessibility: React.FC = () => {
56 | return (
57 |
58 |
121 |
122 | );
123 | };
124 |
125 | export default Accessibility;
126 |
--------------------------------------------------------------------------------
/src/guides/ChangingValues.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from "react";
2 | import Section from "../Section";
3 | import Frog, { MadExpression, HappyExpression } from "../performers/Frog";
4 | import CodeExample from "../CodeExample";
5 | import { Emphasis } from "../Char";
6 | import Dialog, { DialogChildContext } from "../Dialog";
7 | import { WindupChildren, Pause } from "windups";
8 | import Example from "../Example";
9 | import { TEXT_PINK } from "../colours";
10 | import SmashEffect from "../SmashEffect";
11 |
12 | const TRICKY_EXAMPLE = `const TrickyWindup = () => {
13 | const [isPink, setIsPink] = useState(false);
14 |
15 | return (
16 | <>
17 |
18 |
19 |
20 | {"Click the button to turn this pink! Or not?!"}
21 |
22 |
23 |
24 | );
25 | };
26 | `;
27 |
28 | const TrickyWindup = () => {
29 | const { proceed } = useContext(DialogChildContext);
30 | const [isPink, setIsPink] = useState(false);
31 |
32 | return (
33 | <>
34 |
35 |
36 |
37 | {"Click the button to turn this pink! Or not?!"}
38 |
39 |
40 |
41 | );
42 | };
43 |
44 | const FIXED_EXAMPLE = `const FixedWindup = () => {
45 | const [isPink, setIsPink] = useState(false);
46 |
47 | return (
48 | <>
49 |
50 |
51 |
55 | {"Click the button to turn this pink! Or not?!"}
56 |
57 |
58 |
59 | );
60 | };
61 | `;
62 |
63 | const FixedWindup = () => {
64 | const { proceed } = useContext(DialogChildContext);
65 | const [isPink, setIsPink] = useState(false);
66 |
67 | return (
68 | <>
69 |
70 |
71 |
75 | {"Click the button to turn this pink! Or not?!"}
76 |
77 |
78 |
79 | );
80 | };
81 |
82 | const ChangingValues: React.FC = () => {
83 | return (
84 |
85 |
172 |
173 | );
174 | };
175 |
176 | export default ChangingValues;
177 |
--------------------------------------------------------------------------------
/src/guides/Effects.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import Section from "../Section";
3 | import Dialog, { DialogChildContext } from "../Dialog";
4 | import Frog, { HappyExpression } from "../performers/Frog";
5 | import SmashEffect from "../SmashEffect";
6 | import { useWindupString, WindupChildren, OnChar } from "windups";
7 | import Example from "../Example";
8 | import CodeExample from "../CodeExample";
9 | import { Emphasis } from "../Char";
10 | import { SFXContext } from "../App";
11 |
12 | const ON_FINISH_HOOK_EXAMPLE = `import { useWindupString } from "windups";
13 |
14 | const OnFinishHookExample = () => {
15 | const [text] = useWindupString(
16 | "When this text finishes, I'll alert you. I'm sorry.",
17 | {
18 | onFinished: () => {
19 | alert("Finished!");
20 | }
21 | }
22 | );
23 |
24 | return {text}
;
25 | }
26 | `;
27 |
28 | const OnFinishHookExample = () => {
29 | const { proceed } = useContext(DialogChildContext);
30 |
31 | const [text] = useWindupString(
32 | "When this text finishes, I'll alert you. I'm sorry.",
33 | {
34 | onFinished: () => {
35 | alert("Finished!");
36 | proceed();
37 | },
38 | }
39 | );
40 |
41 | return {text}
;
42 | };
43 |
44 | const EFFECT_EXAMPLE = `import { useWindupString } from "windups";
45 | import { smash } from 'gratuitous-fx';
46 |
47 | const EffectExample = () => {
48 | return (
49 |
50 | {"I carefully steadied my aim... and "}
51 |
52 | {"struck! The carrot was cut clean in half."}
53 |
54 | );
55 | };
56 | `;
57 |
58 | const EffectExample = () => {
59 | const { proceed } = useContext(DialogChildContext);
60 |
61 | return (
62 |
63 | {"I carefully steadied my aim... and "}
64 |
65 | {"struck! The carrot was cut clean in half."}
66 |
67 | );
68 | };
69 |
70 | const ON_CHAR_EXAMPLE = `import { WindupChildren } from "windups";
71 |
72 | const ContrivedOnCharExample = () => {
73 | const [count, setCount] = React.useState(0);
74 | const [text] = useWindupString(
75 | "You'll probably want to do something more interesting than this!",
76 | {
77 | onChar: () => setCount(prev => prev + 1),
78 | }
79 | );
80 |
81 | return (
82 |
83 |
{text}
84 |
{"Characters printed: "}{count}
85 |
103 |
{text}
104 |
{`Characters printed: ${count}`}
105 |
{text}
;
19 | };`;
20 |
21 | const StringyWindup = () => {
22 | const { proceed } = useContext(DialogChildContext);
23 |
24 | const [text] = useWindupString("Hello world!", {
25 | onFinished: proceed,
26 | });
27 |
28 | return {text}
;
29 | };
30 |
31 | const HookIntro: React.FC = () => {
32 | return (
33 |
34 |
74 |
75 | );
76 | };
77 |
78 | export default HookIntro;
79 |
--------------------------------------------------------------------------------
/src/guides/Install.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Section from "../Section";
3 | import Dialog from "../Dialog";
4 | import Frog, { ShameExpression, HappyExpression } from "../performers/Frog";
5 | import CodeExample from "../CodeExample";
6 | import { Emphasis } from "../Char";
7 |
8 | const Install: React.FC = () => {
9 | return (
10 |
11 |
50 |
51 | );
52 | };
53 |
54 | export default Install;
55 |
--------------------------------------------------------------------------------
/src/guides/Linebreaking.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import Section from "../Section";
3 | import Dialog, { DialogChildContext } from "../Dialog";
4 | import Frog, { ShameExpression } from "../performers/Frog";
5 | import { useWindupString, WindupChildren, Linebreaker, Pace } from "windups";
6 | import Example from "../Example";
7 | import CodeExample from "../CodeExample";
8 | import SmashEffect from "../SmashEffect";
9 | import { Emphasis } from "../Char";
10 | import useSize from "@rehooks/component-size";
11 |
12 | const BadlyBreakingLine = () => {
13 | const { proceed } = useContext(DialogChildContext);
14 | const [text] = useWindupString("Is line-breaking necessary?", {
15 | pace: () => 200,
16 | onFinished: proceed,
17 | });
18 |
19 | return {text}
;
20 | };
21 |
22 | const FULL_EXAMPLE = `import { Linebreaker, WindupChildren } from "windups";
23 |
24 | const GoodBreakingLine = () => {
25 | return (
26 |
27 |
28 |
29 | {"Is line-breaking necessary?"}
30 |
31 |
32 |
33 | );
34 | }
35 | `;
36 |
37 | const GoodBreakingLine = () => {
38 | const divRef = React.useRef(null);
39 | const { width } = useSize(divRef);
40 | const { proceed } = useContext(DialogChildContext);
41 |
42 | return (
43 |
44 |
45 |
46 | {"Is line-breaking necessary?"}
47 |
48 |
62 |
63 | {"Is line-breaking necessary?"}
64 |
65 |
66 |
67 | `;
68 |
69 | const Linebreaking = () => {
70 | return (
71 |
72 |
163 |
164 | );
165 | };
166 |
167 | export default Linebreaking;
168 |
--------------------------------------------------------------------------------
/src/guides/LinebreakingWithStyle.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import Section from "../Section";
3 | import Dialog, { DialogChildContext } from "../Dialog";
4 | import Frog, {
5 | ShameExpression,
6 | MadExpression,
7 | HappyExpression,
8 | } from "../performers/Frog";
9 | import { WindupChildren, Linebreaker, Pace, Pause, StyledText } from "windups";
10 | import Example from "../Example";
11 | import CodeExample from "../CodeExample";
12 | import SmashEffect from "../SmashEffect";
13 | import { Emphasis, Thinking } from "../Char";
14 | import useSize from "@rehooks/component-size";
15 |
16 | const BROKEN_EXAMPLE = `
17 |
18 | {"Let's talk about the "}
19 | {"elephant"}
20 | {" in the room..."}
21 |
22 | `;
23 |
24 | const FIXED_EXAMPLE = `
25 |
26 | {"Let's talk about the "}
27 |
28 | {"elephant"}
29 |
30 | {" in the room..."}
31 |
32 | `;
33 |
34 | const VanillaBreakingLine = () => {
35 | const divRef = React.useRef(null);
36 | const { width } = useSize(divRef);
37 | const { proceed } = useContext(DialogChildContext);
38 |
39 | return (
40 |
41 |
42 |
43 | {"Let's talk about the elephant in the room..."}
44 |
45 |
58 |
59 |
60 | {"Let's talk about the "}
61 | {"elephant"}
62 | {" in the room..."}
63 |
64 |
65 |
78 |
79 |
80 | {"Let's talk about the "}
81 |
82 | {"elephant"}
83 |
84 | {" in the room..."}
85 |
86 |
87 |
108 |
109 | {"SEVERAL HOURS LATER..."}
110 |
111 |
112 |
24 |
{text}
25 |
26 |
43 |
{text}
44 |
45 |
64 |
65 | {"Why, if one would lie on a fly it would assuredly die."}
66 |
67 |
83 |
84 | {"Why, if one would lie on a fly it would assuredly die."}
85 |
86 |
{text}
;
22 | };`;
23 |
24 | const UnstyledExample: React.FC = () => {
25 | const { proceed } = useContext(DialogChildContext);
26 | const [text] = useWindupString(
27 | "This club admits only those wearing bright pink hats.",
28 | {
29 | onFinished: proceed
30 | }
31 | );
32 |
33 | return {text}
;
34 | };
35 |
36 | const STYLED_EXAMPLE = `import React from "react";
37 | import { WindupChildren } from "windups";
38 |
39 | const StyledExample = () => {
40 | return (
41 |
42 | {"This club admits only those wearing "}
43 | {"bright pink"}
44 | {" hats."}
45 |
46 | );
47 | };`;
48 |
49 | const StyledExample = () => {
50 | const { proceed } = useContext(DialogChildContext);
51 |
52 | return (
53 |
54 | {"This club admits only those wearing "}
55 | {"bright pink"}
56 | {" hats."}
57 |
58 | );
59 | };
60 |
61 | const GuideName = () => {
62 | return (
63 |
64 |
122 |
123 | );
124 | };
125 |
126 | export default GuideName;
127 |
--------------------------------------------------------------------------------
/src/guides/StylingCharacters.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import Section from "../Section";
3 | import Dialog, { DialogChildContext } from "../Dialog";
4 | import Frog, { ShockExpression, ShameExpression } from "../performers/Frog";
5 | import CodeExample from "../CodeExample";
6 | import { useWindupString, CharWrapper, WindupChildren, Pace } from "windups";
7 | import SmashEffect from "../SmashEffect";
8 | import { Emphasis } from "../Char";
9 | import { css } from "linaria";
10 | import Example from "../Example";
11 |
12 | const BORING_EXAMPLE = `import React from "react";
13 | import { useWindupString } from "windups";
14 |
15 | const VanillaWindup = () => {
16 | const [text] = useWindupString("Baked Beans On Toast");
17 |
18 | return {text}
;
19 | };`;
20 |
21 | const STRING_EXAMPLE = `import React from "react";
22 | import { useWindupString, CharWrapper } from "windups";
23 | import { css } from "unnamed-styling-library";
24 |
25 | // Our animation CSS. A slow fade in.
26 | const fadeInAnimationStyle = css\`
27 | @keyframes fadeIn {
28 | from {
29 | opacity: 0;
30 | }
31 | to {
32 | opacity: 1;
33 | }
34 | }
35 | animation-name: fadeIn;
36 | animation-duration: 3s;
37 | animation-iteration-count: 1;
38 | \`;
39 |
40 | // A component to wrap around each character.
41 | const SpookyChar = ({children}) => {
42 | return {children}
43 | }
44 |
45 | // Our windup
46 | const GhostlyWindup = () => {
47 | const [text] = useWindupString("Baked Beans On Toast");
48 |
49 | return {text}
;
50 | };`;
51 |
52 | const WITHOUT_CHARWRAPPER_EXAMPLE = `return (
53 |
54 | {text.split("").map(char => (
55 | {char}
56 | ))}
57 |
58 | );`;
59 |
60 | const WINDUP_CHILDREN_EXAMPLE = `import React from "react";
61 | import { WindupChildren, CharWrapper } from "windups";
62 | import { SpookyChar } from "./that-last-example";
63 |
64 | const SpookyEmphasisedWindup = () => {
65 | return (
66 |
67 |
68 | {"Baked "}
69 | {"beans"}
70 | {" on toast"}
71 |
72 |
73 | )
74 | }
75 | `;
76 |
77 | // Our animation CSS. A simple fade.
78 | const fadeInAnimationStyle = css`
79 | @keyframes fadeIn {
80 | from {
81 | opacity: 0;
82 | }
83 | to {
84 | opacity: 1;
85 | }
86 | }
87 | animation-name: fadeIn;
88 | animation-duration: 3s;
89 | animation-iteration-count: 1;
90 | `;
91 |
92 | const VanillaWindup = () => {
93 | const { proceed } = useContext(DialogChildContext);
94 | const [text] = useWindupString("Baked Beans On Toast", {
95 | onFinished: proceed
96 | });
97 |
98 | return {text}
;
99 | };
100 |
101 | const SpookyChar: React.FC = ({ children }) => {
102 | return {children};
103 | };
104 |
105 | const GhostlyWindup = () => {
106 | const { proceed } = useContext(DialogChildContext);
107 |
108 | const [text] = useWindupString("Baked Beans On Toast", {
109 | onFinished: proceed,
110 | pace: () => 200
111 | });
112 |
113 | return (
114 |
115 | {text}
116 |
117 | );
118 | };
119 |
120 | const SpookyEmphasisedWindup = () => {
121 | const { proceed } = useContext(DialogChildContext);
122 |
123 | return (
124 |
125 |
126 |
127 | {"Baked "}
128 | {"beans"}
129 | {" on toast"}
130 |
131 |
132 |
133 | );
134 | };
135 |
136 | const StylingCharacters: React.FC = () => {
137 | return (
138 |
142 |
234 |
235 | );
236 | };
237 |
238 | export default StylingCharacters;
239 |
--------------------------------------------------------------------------------
/src/guides/Timing.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import Section from "../Section";
3 | import Dialog, { DialogChildContext } from "../Dialog";
4 | import Frog, { ShameExpression, HappyExpression } from "../performers/Frog";
5 | import CodeExample from "../CodeExample";
6 | import { Pause, useWindupString, WindupChildren, Pace } from "windups";
7 | import Example from "../Example";
8 | import { Emphasis } from "../Char";
9 |
10 | const PACE_HOOK_EXAMPLE = `import React from "react";
11 | import { useWindupString } from "windups";
12 |
13 | const ThinkingHard = () => {
14 | const [text] = useWindupString("I'm thinking really hard.", {
15 | pace: (char) => (char === " " ? 600 : 40),
16 | });
17 |
18 | return {text}
;
19 | };`;
20 |
21 | const PACE_COMPONENT_EXAMPLE = `import React from "react";
22 | import { Pace, WindupChildren } from "windups";
23 |
24 | const SassyThinkingHard = () => {
25 | return (
26 |
27 | {"Didn't you hear me the first time? "}
28 | (char === " " ? 600 : 40)}>
29 | {"I'm thinking really hard."}
30 |
31 |
32 | );
33 | };`;
34 |
35 | const RobotExample = () => {
36 | const { proceed } = useContext(DialogChildContext);
37 | const [text] = useWindupString(
38 | "Hello friend. I am definitely a living thing and not a computer. Ha ha ha",
39 | {
40 | pace: () => 70,
41 | onFinished: proceed
42 | }
43 | );
44 |
45 | return {text}
;
46 | };
47 |
48 | const BetterExample = () => {
49 | const { proceed } = useContext(DialogChildContext);
50 | const [text] = useWindupString(
51 | "Hello friend. I am definitely a living thing and not a computer. Ha ha ha",
52 | {
53 | onFinished: proceed
54 | }
55 | );
56 |
57 | return {text}
;
58 | };
59 |
60 | const PaceStringExample = () => {
61 | const { proceed } = useContext(DialogChildContext);
62 |
63 | const [text] = useWindupString("I'm thinking really hard.", {
64 | onFinished: proceed,
65 | pace: char => (char === " " ? 600 : 40)
66 | });
67 |
68 | return {text}
;
69 | };
70 |
71 | const PaceComponentExample = () => {
72 | const { proceed } = useContext(DialogChildContext);
73 |
74 | return (
75 |
76 | {"Didn't you hear me the first time? "}
77 | (char === " " ? 600 : 40)}>
78 | {"I'm thinking really hard."}
79 |
80 |
81 | );
82 | };
83 |
84 | const PAUSED_CODE_EXAMPLE = `import { WindupChildren, Pause } from "windups";
85 |
86 | const PausedExample = () => {
87 | return (
88 |
89 |
90 | {
91 | "I asked her: why did you do it?
92 | Why did you tear apart the only lily pad I'd ever know as home?"
93 | }
94 |
95 |
96 |
97 | {
98 | "She looked back at me with those
99 | froggy little eyes of hers and croaked one word:"
100 | }
101 |
102 |
103 |
104 | {"Pleasure."}
105 |
106 |
107 | );
108 | };`;
109 |
110 | const UntimedExample = () => {
111 | const { proceed } = useContext(DialogChildContext);
112 |
113 | return (
114 |
115 |
116 | {
117 | "I asked her: why did you do it? Why did you tear apart the only lily pad I'd ever know as home?"
118 | }
119 |
120 |
121 | {
122 | "She looked back at me with those froggy little eyes of hers and croaked one word:"
123 | }
124 |
125 |
126 | {"Pleasure."}
127 |
128 |
129 | );
130 | };
131 |
132 | const PausedExample = () => {
133 | const { proceed } = useContext(DialogChildContext);
134 |
135 | return (
136 |
137 |
138 | {
139 | "I asked her: why did you do it? Why did you tear apart the only lily pad I'd ever know as home?"
140 | }
141 |
142 |
143 |
144 | {
145 | "She looked back at me with those froggy little eyes of hers and croaked one word:"
146 | }
147 |
148 |
149 |
150 | {"Pleasure."}
151 |
152 |
153 | );
154 | };
155 |
156 | const PacingPausing = () => {
157 | return (
158 |
159 |
258 |
259 | );
260 | };
261 |
262 | export default PacingPausing;
263 |
--------------------------------------------------------------------------------
/src/guides/WindupsWithAnything.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import Section from "../Section";
3 | import Dialog, { DialogChildContext } from "../Dialog";
4 | import Frog, { HappyExpression } from "../performers/Frog";
5 | import CodeExample from "../CodeExample";
6 | import Example from "../Example";
7 | import { WindupChildren } from "windups";
8 | import Auntie from "../images/auntie.svg";
9 |
10 | const PIC_EXAMPLE = `import React from "react";
11 | import { WindupChildren } from "windups";
12 |
13 | const AuntieWindup = () => {
14 | return (
15 |
16 |
17 | {"My dear auntie"}
18 |
19 | ![]({"auntie.jpg"}/)
20 |
21 | {"The world's kindest frog"}
22 |
23 |
24 | );
25 | };`;
26 |
27 | const COMPOSED_EXAMPLE = `import React from "react";
28 | import { WindupChildren } from "windups";
29 |
30 | const ComponentWithInlineText = ({children}) => {
31 | return (
32 | <>
33 | {"This text will render immediately!"}
34 | {children}
35 |
36 | )
37 | }
38 |
39 | const ComposedWindup = () => {
40 | return (
41 |
42 |
43 | {"This text will become part of the windup."}
44 |
45 |
46 | );
47 | };`;
48 |
49 | // Real stuff starts here
50 |
51 | const AuntieWindup = () => {
52 | const { proceed } = useContext(DialogChildContext);
53 | return (
54 |
55 | {"My dear auntie"}
56 | 
57 | {"The world's kindest frog"}
58 |
59 | );
60 | };
61 |
62 | const ComponentWithInlineText: React.FC = ({ children }) => {
63 | return (
64 | <>
65 | {"This text will render immediately!"}
66 | {children}
67 |
68 | );
69 | };
70 |
71 | const ComposedWindup = () => {
72 | const { proceed } = useContext(DialogChildContext);
73 |
74 | return (
75 |
76 |
77 | {"This text will become part of the windup."}
78 |
79 |
80 | );
81 | };
82 |
83 | const WindupsWithAnything: React.FC = () => {
84 | return (
85 |
86 |
148 |
149 | );
150 | };
151 |
152 | export default WindupsWithAnything;
153 |
--------------------------------------------------------------------------------
/src/images/auntie.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/images/compass-menu.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/images/forks.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/images/frog-menu.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/images/frog/Group 12-1.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/images/frog/Group 12-2.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/images/frog/Group 12.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/images/frog/Group 13-1.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/images/frog/Group 13-2.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/images/frog/Group 13.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/images/frog/f-cool-open-1.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/images/frog/f-cool-open-2.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/images/frog/f-cool-resting.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/images/frog/f-laff-open-1.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/images/frog/f-laff-open-2.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/images/frog/f-laff-resting.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/images/frog/f-mad-open-1.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/src/images/frog/f-mad-open-2.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/src/images/frog/f-mad-resting.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/images/frog/f-norm-open-1.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/images/frog/f-norm-open-2.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/images/frog/f-norm-resting.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/images/frog/f-shame-open-1.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/images/frog/f-shame-open-2.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/images/frog/f-shame-resting.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/images/frog/f-shock-open-1.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/images/frog/f-shock-open-2.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/images/frog/f-shock-resting.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/images/frog/f-smug-open-1.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/images/frog/f-smug-open-2.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/images/frog/f-smug-resting.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/images/gwilco.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/images/key-a.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/images/key-b.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/images/key-c.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/images/key-d.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/images/key-menu.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/images/keyboard-menu.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/images/little-hand.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/images/nexters.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/images/point.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/images/repo-menu.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/images/ruffle-pizza.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/images/snowman-kebab.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 | import * as serviceWorker from "./serviceWorker";
5 |
6 | ReactDOM.render(, document.getElementById("root"));
7 |
8 | // If you want your app to work offline and load faster, you can change
9 | // unregister() to register() below. Note this comes with some pitfalls.
10 | // Learn more about service workers: https://bit.ly/CRA-PWA
11 | serviceWorker.unregister();
12 |
--------------------------------------------------------------------------------
/src/performers/Frog.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext, createContext } from "react";
2 | import Performer, { PerformerContext } from "../Performer";
3 | import { DialogElementProps } from "../DialogElement";
4 | import AvNormResting from "../images/frog/f-norm-resting.svg";
5 | import AvNorm1 from "../images/frog/f-norm-open-1.svg";
6 | import AvNorm2 from "../images/frog/f-norm-open-2.svg";
7 | import AvLaffResting from "../images/frog/f-laff-resting.svg";
8 | import AvLaff1 from "../images/frog/f-laff-open-1.svg";
9 | import AvLaff2 from "../images/frog/f-laff-open-2.svg";
10 | import AvMadResting from "../images/frog/f-mad-resting.svg";
11 | import AvMad1 from "../images/frog/f-mad-open-1.svg";
12 | import AvMad2 from "../images/frog/f-mad-open-2.svg";
13 | import AvSmugResting from "../images/frog/f-smug-resting.svg";
14 | import AvSmug1 from "../images/frog/f-smug-open-1.svg";
15 | import AvSmug2 from "../images/frog/f-smug-open-2.svg";
16 | import AvShameResting from "../images/frog/f-shame-resting.svg";
17 | import AvShame1 from "../images/frog/f-shame-open-1.svg";
18 | import AvShame2 from "../images/frog/f-shame-open-2.svg";
19 | import AvShockResting from "../images/frog/f-shock-resting.svg";
20 | import AvShock1 from "../images/frog/f-shock-open-1.svg";
21 | import AvShock2 from "../images/frog/f-shock-open-2.svg";
22 | import AvCoolResting from "../images/frog/f-cool-resting.svg";
23 | import AvCool1 from "../images/frog/f-cool-open-1.svg";
24 | import AvCool2 from "../images/frog/f-cool-open-2.svg";
25 | import { FrameSet } from "../Performer";
26 |
27 | import { Effect } from "windups";
28 |
29 | const normFrames = [AvNorm1, AvNorm2];
30 | const normRestingFrames = [AvNormResting];
31 | const laffFrames = [AvLaff1, AvLaff2];
32 | const laffRestingFrames = [AvLaffResting];
33 | const madFrames = [AvMad1, AvMad2];
34 | const madRestingFrames = [AvMadResting];
35 | const smugFrames = [AvSmug1, AvSmug2];
36 | const smugRestingFrames = [AvSmugResting];
37 | const shameFrames = [AvShame1, AvShame2];
38 | const shameRestingFrames = [AvShameResting];
39 | const shockFrames = [AvShock1, AvShock2];
40 | const shockRestingFrames = [AvShockResting];
41 | const coolFrames = [AvCool1, AvCool2];
42 | const coolRestingFrames = [AvCoolResting];
43 |
44 | type SetExpressionProps = {
45 | expression: FrogEmotion;
46 | };
47 |
48 | const SetExpression: React.FC = ({ expression }) => {
49 | const { setExpression } = useContext(FrogContext);
50 | const { setAvatarFrames } = useContext(PerformerContext);
51 | return (
52 | {
54 | setExpression(expression);
55 | setAvatarFrames(frogFrameSets[expression]);
56 | }}
57 | />
58 | );
59 | };
60 |
61 | function makeExpression(expr: FrogEmotion) {
62 | return () => ;
63 | }
64 |
65 | export const HappyExpression = makeExpression("HAPPY");
66 | export const SmugExpression = makeExpression("SMUG");
67 | export const ShameExpression = makeExpression("SHAME");
68 | export const ShockExpression = makeExpression("SHOCK");
69 | export const MadExpression = makeExpression("MAD");
70 |
71 | type FrogEmotion =
72 | | "NORMAL"
73 | | "HAPPY"
74 | | "MAD"
75 | | "SMUG"
76 | | "SHAME"
77 | | "SHOCK"
78 | | "COOL";
79 |
80 | type FrogFrameMap = Record;
81 |
82 | const frogFrameSets: FrogFrameMap = {
83 | NORMAL: { normal: normFrames, resting: normRestingFrames },
84 | HAPPY: { normal: laffFrames, resting: laffRestingFrames },
85 | MAD: { normal: madFrames, resting: madRestingFrames },
86 | SMUG: { normal: smugFrames, resting: smugRestingFrames },
87 | SHAME: { normal: shameFrames, resting: shameRestingFrames },
88 | SHOCK: { normal: shockFrames, resting: shockRestingFrames },
89 | COOL: { normal: coolFrames, resting: coolRestingFrames },
90 | };
91 |
92 | interface FrogProps extends DialogElementProps {
93 | expression?: FrogEmotion;
94 | silent?: boolean;
95 | }
96 |
97 | const FrogContext = createContext<{
98 | setExpression: React.Dispatch>;
99 | currentExpression: FrogEmotion;
100 | }>({
101 | setExpression: () => {},
102 | currentExpression: "NORMAL",
103 | });
104 |
105 | const Frog: React.FC = ({
106 | children,
107 | autoProceed,
108 | expression: initialExpression = "NORMAL",
109 | silent,
110 | }) => {
111 | const [currentExpression, setCurrentExpression] = useState(initialExpression);
112 |
113 | return (
114 |
117 |
122 |
123 | {children}
124 |
125 |
126 | );
127 | };
128 |
129 | export const usePreloadFrogFrames = () => {
130 | const frames = [
131 | ...normFrames,
132 | ...normRestingFrames,
133 | ...laffFrames,
134 | ...laffRestingFrames,
135 | ...madFrames,
136 | ...madRestingFrames,
137 | ...smugFrames,
138 | ...smugRestingFrames,
139 | ...shameFrames,
140 | ...shameRestingFrames,
141 | ...shockFrames,
142 | ...shockRestingFrames,
143 | ...coolFrames,
144 | ...coolRestingFrames,
145 | ];
146 |
147 | frames.forEach((source) => {
148 | const image = new Image();
149 | image.src = source;
150 | });
151 | };
152 |
153 | export default Frog;
154 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | type Config = {
24 | onSuccess?: (registration: ServiceWorkerRegistration) => void;
25 | onUpdate?: (registration: ServiceWorkerRegistration) => void;
26 | };
27 |
28 | export function register(config?: Config) {
29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
30 | // The URL constructor is available in all browsers that support SW.
31 | const publicUrl = new URL(
32 | (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
33 | window.location.href
34 | );
35 | if (publicUrl.origin !== window.location.origin) {
36 | // Our service worker won't work if PUBLIC_URL is on a different origin
37 | // from what our page is served on. This might happen if a CDN is used to
38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
39 | return;
40 | }
41 |
42 | window.addEventListener('load', () => {
43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
44 |
45 | if (isLocalhost) {
46 | // This is running on localhost. Let's check if a service worker still exists or not.
47 | checkValidServiceWorker(swUrl, config);
48 |
49 | // Add some additional logging to localhost, pointing developers to the
50 | // service worker/PWA documentation.
51 | navigator.serviceWorker.ready.then(() => {
52 | console.log(
53 | 'This web app is being served cache-first by a service ' +
54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
55 | );
56 | });
57 | } else {
58 | // Is not localhost. Just register service worker
59 | registerValidSW(swUrl, config);
60 | }
61 | });
62 | }
63 | }
64 |
65 | function registerValidSW(swUrl: string, config?: Config) {
66 | navigator.serviceWorker
67 | .register(swUrl)
68 | .then(registration => {
69 | registration.onupdatefound = () => {
70 | const installingWorker = registration.installing;
71 | if (installingWorker == null) {
72 | return;
73 | }
74 | installingWorker.onstatechange = () => {
75 | if (installingWorker.state === 'installed') {
76 | if (navigator.serviceWorker.controller) {
77 | // At this point, the updated precached content has been fetched,
78 | // but the previous service worker will still serve the older
79 | // content until all client tabs are closed.
80 | console.log(
81 | 'New content is available and will be used when all ' +
82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
83 | );
84 |
85 | // Execute callback
86 | if (config && config.onUpdate) {
87 | config.onUpdate(registration);
88 | }
89 | } else {
90 | // At this point, everything has been precached.
91 | // It's the perfect time to display a
92 | // "Content is cached for offline use." message.
93 | console.log('Content is cached for offline use.');
94 |
95 | // Execute callback
96 | if (config && config.onSuccess) {
97 | config.onSuccess(registration);
98 | }
99 | }
100 | }
101 | };
102 | };
103 | })
104 | .catch(error => {
105 | console.error('Error during service worker registration:', error);
106 | });
107 | }
108 |
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 | // Check if the service worker can be found. If it can't reload the page.
111 | fetch(swUrl)
112 | .then(response => {
113 | // Ensure service worker exists, and that we really are getting a JS file.
114 | const contentType = response.headers.get('content-type');
115 | if (
116 | response.status === 404 ||
117 | (contentType != null && contentType.indexOf('javascript') === -1)
118 | ) {
119 | // No service worker found. Probably a different app. Reload the page.
120 | navigator.serviceWorker.ready.then(registration => {
121 | registration.unregister().then(() => {
122 | window.location.reload();
123 | });
124 | });
125 | } else {
126 | // Service worker found. Proceed as normal.
127 | registerValidSW(swUrl, config);
128 | }
129 | })
130 | .catch(() => {
131 | console.log(
132 | 'No internet connection found. App is running in offline mode.'
133 | );
134 | });
135 | }
136 |
137 | export function unregister() {
138 | if ('serviceWorker' in navigator) {
139 | navigator.serviceWorker.ready.then(registration => {
140 | registration.unregister();
141 | });
142 | }
143 | }
144 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "noEmit": true,
20 | "jsx": "react"
21 | },
22 | "include": [
23 | "src"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
36 |