Choose your own adventure MVP/React skeleton

.gitignore

@@ -141,7 +141,6 @@ frontend/node_modules
 # production
 build/
 static/
-assets/
 
 # misc
 .DS_Store

assets/img/README.md

@@ -0,0 +1 @@
+Images go here!

backend/config/settings/base.py

@@ -133,6 +133,7 @@
 # where collectstatic looks for static files
 STATICFILES_DIRS = (
     os.path.join(PROJECT_ROOT, 'build'),
+    os.path.join(PROJECT_ROOT, 'assets'),
 )
 
 REST_FRAMEWORK = {

backend/config/urls.py

@@ -55,6 +55,7 @@ def edx_path(route, component_name):
     # React views
     path('', render_react_view, {'component_name': 'IndexView'}),
     path('all_view/', render_react_view, {'component_name': 'AllView'}),
+    path('adventure/', render_react_view, {'component_name': 'ChooseAdventureView'}),
     edx_path('map_quiz/', 'MapQuiz'),
     edx_path('budget_voting_simulation/', 'BudgetVotingSimViz'),
     edx_path('heat_map/', 'DemocracyViz'),

frontend/src/UILibrary/styles.scss

@@ -6,5 +6,6 @@
 @import '../democracyViz/democracyViz';
 @import '../budgetSimulation/budgetSimulation';
 @import './edx.scss';
+@import "../chooseAdventure/chooseAdventure";
 
 

frontend/src/app.js

@@ -14,6 +14,7 @@ import { BudgetVotingSimViz } from './budgetSimulation/budgetSimulation.js';
 import { DemocracyViz } from './democracyViz/democracyViz.js';
 import { CampaignView } from "./campaign/campaignView";
 import { EdXView } from "./UILibrary/components";
+import { ChooseAdventureView } from "./chooseAdventure/chooseAdventure.js";
 
 // Import all styles
 import './UILibrary/styles.scss';
@@ -30,4 +31,5 @@ window.app_modules = {
     DemocracyViz,
     CampaignView,
     EdXView,
+    ChooseAdventureView,
 };

frontend/src/chooseAdventure/chooseAdventure.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import IntroView from './introView.js';
+import StageView from './stageView.js';
+import EndView from './endView.js';
+
+
+/**
+ * Component for displaying choose your own adventure skeleton
+ */
+export class ChooseAdventureView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            view: 'intro',
+            history: [],
+            successTotal: 0,
+        };
+    }
+
+    componentDidMount() {
+        // do your fetch and set initial state
+    }
+
+    setView = (view) => {
+        this.setState({ view: view, });
+    };
+
+    updateHistory = (option) => {
+        this.setState((prevState) => ({
+            history: prevState.history.concat(option),
+        }));
+    };
+
+    updateSuccess = (successFactor) => {
+        this.setState((prevState) => ({
+            successTotal: prevState.successTotal + successFactor,
+        }));
+    };
+
+    resetProgress = () => {
+        this.setState({
+            successTotal: 0,
+            history: [],
+        });
+    };
+
+
+    render() {
+        const desc = 'example paragraph: Paragraphs are the building blocks of papers. Many ' +
+            'students ' +
+            'define paragraphs in terms of length: a paragraph is a group of at least five ' +
+            'sentences, ' +
+            'a paragraph is half a page long, etc. In reality, though, the unity and coherence ' +
+            'of ' +
+            'ideas among sentences is what constitutes a paragraph. A paragraph is defined as ' +
+            '“a ' +
+            'group of sentences or a single sentence that forms a unit” (Lunsford and Connors ' +
+            '116). ' +
+            'Length and appearance do not determine whether a section in a paper is a paragraph. ' +
+            'For instance, in some styles of writing, particularly journalistic styles, a ' +
+            'paragraph ' +
+            'can be just one sentence long. Ultimately, a paragraph is a sentence or group of ' +
+            'sentences that support one main idea. In this handout, we will refer to this as the ' +
+            '“controlling idea,” because it controls what happens in the rest of the paragraph.';
+        console.log("rerendering");
+        return (
+            <div>
+                {this.state.view === 'intro' && <IntroView desc={desc} setView={this.setView} />}
+                {this.state.view === 'stage' &&
+                    <StageView setView={this.setView}
+                        updateSuccess={this.updateSuccess}
+                        updateHistory={this.updateHistory}
+                    />}
+                {this.state.view === 'end' && <EndView
+                    successTotal={this.state.successTotal}
+                    history={this.state.history}
+                    setView={this.setView}
+                    resetProgress={this.resetProgress}
+                />}
+            </div>
+        );
+
+    }
+}

frontend/src/chooseAdventure/chooseAdventure.scss

@@ -0,0 +1,7 @@
+.intro_desc{
+
+}
+
+.cyoa-button{
+    position: center;
+}

frontend/src/chooseAdventure/endView.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+
+/**
+ * Component for displaying choose your own adventure skeleton
+ */
+
+class EndView extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    resetAdventure = () => {
+        this.props.setView('stage');
+        this.props.resetProgress();
+    };
+
+    render() {
+        const choices = this.props.history.map((option, k) => (
+            <p key={k}>Choosing {option.text} increased success by {option.successFactor}</p>
+        ));
+        return (
+            <div>
+                <div>Your success total was {this.props.successTotal}</div>
+                {choices}
+                <button onClick={() => this.resetAdventure()}>Try again</button>
+            </div>
+        );
+    }
+}
+
+EndView.propTypes = {
+    setView: PropTypes.func,
+    history: PropTypes.array,
+    successTotal: PropTypes.number,
+    resetProgress: PropTypes.func,
+};
+
+
+export default EndView;

frontend/src/chooseAdventure/introView.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import * as PropTypes from "prop-types";
+
+
+/**
+ * Component for displaying choose your own adventure skeleton
+ */
+
+class IntroView extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+                <div className='row'>
+                    <div className={'col-6'}>
+                        {this.props.desc}
+                    </div>
+                    <img className= 'col-6' src='/static/img/sample.jpg' alt="Sample" />
+
+                </div>
+
+                <button className='col-5 cyoa-button' onClick={() => this.props.setView('stage')}>
+                    Get started
+                </button>
+            </div>
+
+
+
+
+
+        );
+
+    }
+}
+
+IntroView.propTypes = {
+    desc: PropTypes.string,
+    setView: PropTypes.func,
+};
+
+export default IntroView;

frontend/src/chooseAdventure/stageView.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+
+// TODO: hardcode data structure here, add a reference with dictionary
+
+const START_STAGE = {
+    'text': 'Your school district\'s budget was cut!',
+    'options': [{
+        'text': 'Start a media campaign',
+        'stageName': 'MEDIA_STAGE',
+        'successFactor': 20,
+    },
+    {
+        'text': 'Take direct action',
+        'stageName': 'DIRECT_STAGE',
+        'successFactor': 10,
+    }],
+};
+
+const MEDIA_STAGE = {
+    'text': 'You chose to start a media campaign.',
+    'options': [{
+        'text': 'Twitter',
+        'stageName': null,
+        'successFactor': 420,
+    },
+    {
+        'text': 'Facebook',
+        'stageName': null,
+        'successFactor': 0,
+    },
+    {
+        'text': 'Radio',
+        'stageName': null,
+        'successFactor': 30,
+    }],
+};
+
+const DIRECT_STAGE = {
+    'text': 'You chose to take direct action against the school.',
+    'options': [{
+        'text': 'Sue the principal',
+        'stageName': null,
+        'successFactor': 10,
+    },
+    {
+        'text': 'Ask the principal nicely',
+        'stageName': null,
+        'successFactor': 5,
+    }],
+};
+
+const NAME_TO_STAGE = {
+    'START_STAGE' : START_STAGE,
+    'MEDIA_STAGE' : MEDIA_STAGE,
+    'DIRECT_STAGE' : DIRECT_STAGE
+};
+
+const getStageFromName = (stageName) => {
+    return NAME_TO_STAGE[stageName];
+};
+
+class Option extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        let stage = getStageFromName(this.props.option.stageName);
+        let option = this.props.option;
+        return (
+            <button
+                onClick={() =>
+                    this.props.setStage(stage, option)}
+            >{this.props.option.text}</button>
+        );
+    }
+}
+Option.propTypes = {
+    option: PropTypes.object,
+    setStage: PropTypes.func,
+};
+
+/**
+ * Component for displaying choose your own adventure skeleton
+ */
+
+class StageView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            stage: getStageFromName("START_STAGE"),
+        };
+    }
+
+    setStage = (stage, option) => {
+        this.props.updateHistory(option);
+        this.props.updateSuccess(option.successFactor);
+        if (option.stageName) {
+            this.setState({stage: getStageFromName(option.stageName)});
+        } else {
+            this.props.setView('end');
+        }
+        this.setState({ stage: stage });
+    };
+
+    render() {
+        let optionComponents = <div>Loading...</div>;
+        if (this.state.stage.options) {
+            optionComponents = this.state.stage.options.map((option, k) =>
+                <Option key={k} option={option}
+                    setStage={this.setStage}
+                />);
+        }
+        return (
+            <div className={"wrapper"}>
+                <p>{this.state.stage.text}</p>
+                {optionComponents}
+            </div>
+        );
+    }
+}
+StageView.propTypes = {
+    stageName: PropTypes.string,
+    updateHistory: PropTypes.func,
+    setView: PropTypes.func,
+    updateSuccess: PropTypes.func,
+};
+
+export default StageView;