/
index.js
105 lines (91 loc) · 3.76 KB
/
index.js
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React, { Component } from 'react';
import styled from 'styled-components';
import StoryScene from '../shared/StoryScene';
import { TextBox, Backdrop } from '../shared/Common';
import ScoreBoard from '../shared/ScoreBoard';
import { Quiz, Question, Choice } from '../shared/Quiz';
import BackgroundImage from './background.png';
const Background = styled(Backdrop)`
background-image: url(${BackgroundImage});
`;
export default class ValleyScene extends StoryScene {
decideNextSubScene(currentScene) {
switch(currentScene) {
case 'init': return 'tantalizing';
case 'tantalizing' : return 'head-down';
case 'head-down': return 'quiz-gate-name';
case 'quiz-gate-name' : return 'quiz-gate-name';
case 'quiz-drawbridge' : return 'over-the-bridge';
case 'quiz-moat' :
case 'quiz-portcullis' :
return 'quiz-gate-name';
case 'over-the-bridge' : return 'next-scene';
default: return 'init';
}
}
handleQuizAnswer = (next, isCorrect) => {
if (isCorrect) {
this.props.onCompleted('valley');
}
this.changeSubScene(next);
}
render() {
const { SubScene, SceneWrapper, ChangeScene } = this;
return (
<SceneWrapper>
<Background />
<ScoreBoard progress={this.props.progress} />
<SubScene name="init">
<TextBox>
As you reach the top of the hill, Houndville appears beneath you
in the next valley
</TextBox>
</SubScene>
<SubScene name="tantalizing">
<TextBox>
For some reason it seems a tantalizing place
</TextBox>
</SubScene>
<SubScene name="head-down">
<TextBox>
You head down towards a bridge. As you get closer you
can see a special kind of gate
</TextBox>
</SubScene>
<SubScene name="quiz-gate-name">
<Quiz onAnswer={this.handleQuizAnswer}>
<Question>What is the name of a gate that drops down
over water?</Question>
<Choice correct next="quiz-drawbridge">Drawbridge</Choice>
<Choice next="quiz-moat">Moat</Choice>
<Choice next="quiz-portcullis">Portcullis</Choice>
</Quiz>
</SubScene>
<SubScene name="quiz-drawbridge">
<TextBox>
Correct! It's called this because it has to be drawn up by
chains to close it
</TextBox>
</SubScene>
<SubScene name="quiz-moat">
<TextBox>
Sorry, that's wrong. The moat is the name for the water
surrounding a fortification
</TextBox>
</SubScene>
<SubScene name="quiz-portcullis">
<TextBox>
Sorry, that's wrong. A portcullis is a gate that comes down
from above, usually from the ceiling of a gatehouse entrance
</TextBox>
</SubScene>
<SubScene name="over-the-bridge">
<TextBox>
You go over the bridge and stand before the drawbridge...
</TextBox>
</SubScene>
<ChangeScene name="next-scene" to="entrance" />
</SceneWrapper>
);
}
}