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'}),
+    edx_path('adventure/', 'ChooseAdventureView'),
     edx_path('map_quiz/', 'MapQuiz'),
     edx_path('budget_voting_simulation/', 'BudgetVotingSimViz'),
     edx_path('heat_map/', 'DemocracyViz'),

frontend/src/UILibrary/styles.scss

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

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: 1,
+        };
+    }
+
+    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: 1,
+            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,44 @@
+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) => (
+            <div key={k}>
+                Choosing to {option.text} has a {option.successFactor} chance of success.
+                <br />
+                {option.successDetail}
+            </div>
+        ));
+        return (
+            <div>
+                <div>You had {this.props.successTotal} chance of succeeding.</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;