Merge pull request #114 from code-dot-org/cpirich/export-demo-as-dist-main-with-urlloader-for-images

Export demo for consumption within Code Studio

Author: breville

package.json

@@ -1,10 +1,13 @@
 {
   "name": "@code-dot-org/ml-activities",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "dist/main.js",
   "jest": {
-    "testEnvironment": "node"
+    "testEnvironment": "node",
+    "moduleNameMapper": {
+      ".+\\.(jpg|jpeg|png)$": "identity-obj-proxy"
+    }
   },
   "scripts": {
     "build": "webpack -p",
@@ -19,7 +22,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/code-dot-org/dance-party.git"
+    "url": "git+ssh://git@github.com/code-dot-org/ml-activities.git"
   },
   "author": "",
   "license": "Apache-2.0",
@@ -45,6 +48,8 @@
     "css-loader": "^3.2.0",
     "eslint": ">=4.18.2",
     "eslint-plugin-react": "^7.11.0",
+    "idempotent-babel-polyfill": "6.26.0-1",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^15.0.0",
     "jquery": "1.12.1",
     "jquery-ui": "^1.12.1",
@@ -60,6 +65,7 @@
     "react-dom": "~15.4.0",
     "react-test-renderer": "~15.4.0",
     "style-loader": "^1.0.0",
+    "url-loader": "^2.2.0",
     "webpack": "4.19.1",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.1.4",

src/demo/helpers.js

@@ -1,6 +1,7 @@
 import queryString from 'query-string';
 import {Modes} from './constants';
 import {FishBodyPart} from '../utils/fishData';
+import underwaterBackground from '../../public/images/underwater-background.png';
 
 export const backgroundPathForMode = mode => {
   let imgName;
@@ -11,7 +12,8 @@ export const backgroundPathForMode = mode => {
   // Temporarily show background for every mode.
   imgName = 'underwater';
 
-  return imgName ? backgroundPath(imgName) : null;
+  // TODO: fix this
+  return imgName ? underwaterBackground : null;
 };
 
 export const backgroundPath = imgName => {

src/demo/models/loading.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import 'idempotent-babel-polyfill';
 import {initRenderer} from '../renderer';
 import {setState} from '../state';
 import {Modes} from '../constants';

src/demo/models/pond.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import 'idempotent-babel-polyfill';
 import _ from 'lodash';
 import {setState, getState} from '../state';
 import constants, {ClassType} from '../constants';

src/demo/models/predict.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import 'idempotent-babel-polyfill';
 import {setState} from '../state';
 import {generateOcean} from '../../utils/generateOcean';
 

src/demo/models/train.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import 'idempotent-babel-polyfill';
 import {setState, getState} from '../state';
 import {ClassType} from '../constants';
 import SimpleTrainer from '../../utils/SimpleTrainer';

src/demo/renderer.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import 'idempotent-babel-polyfill';
 import {getState, setState} from './state';
 import constants, {Modes, ClassType} from './constants';
 import CanvasCache from './canvasCache';

src/demo/ui.jsx

@@ -6,6 +6,7 @@ import {Modes, DataSet} from './constants';
 import {toMode} from './toMode';
 import {init as initModel} from './models';
 import {onClassifyFish} from './models/train';
+import aiBotClosed from '../../public/images/ai-bot-closed.png';
 
 const styles = {
   header: {
@@ -217,7 +218,7 @@ class ActivityIntro extends React.Component {
             Next, you’re going to teach A.I. a new word just by showing examples
             of that type of fish.
           </div>
-          <img style={styles.activityIntroBot} src="images/ai-bot-closed.png" />
+          <img style={styles.activityIntroBot} src={aiBotClosed} />
           <Footer>
             <Button
               style={styles.continueButton}
@@ -318,7 +319,7 @@ class TrainingIntro extends React.Component {
           Now let's teach A.I. what <b>{state.word.toUpperCase()}</b> fish look
           like.
         </div>
-        <img style={styles.trainingIntroBot} src="images/ai-bot-closed.png" />
+        <img style={styles.trainingIntroBot} src={aiBotClosed} />
         <Footer>
           <Button
             style={styles.continueButton}
@@ -344,7 +345,7 @@ class Train extends React.Component {
       <Body>
         <Header>A.I. Training</Header>
         <div style={trainQuestionTextStyle}>{questionText}</div>
-        <img style={styles.trainBot} src="images/ai-bot-closed.png" />
+        <img style={styles.trainBot} src={aiBotClosed} />
         <Button
           style={styles.trainButtonYes}
           onClick={() => onClassifyFish(true)}
@@ -377,7 +378,7 @@ class Predict extends React.Component {
     return (
       <Body>
         <Header>A.I. Sorting</Header>
-        <img style={styles.predictBot} src="images/ai-bot-closed.png" />
+        <img style={styles.predictBot} src={aiBotClosed} />
         <Footer>
           {state.canSkipPredict && (
             <Button
@@ -406,7 +407,7 @@ class Pond extends React.Component {
       <Body>
         <Header>A.I. Results</Header>
         <div style={styles.pondText}>{pondText}</div>
-        <img style={styles.pondBot} src="images/ai-bot-closed.png" />
+        <img style={styles.pondBot} src={aiBotClosed} />
       </Body>
     );
   }

src/index.js

@@ -0,0 +1,6 @@
+export {init as initModel} from './demo/models';
+export {default as constants} from './demo/constants';
+export {Modes} from './demo/constants';
+export * from './demo/state';
+export {render as renderCanvas} from './demo/renderer';
+export {default as UI} from './demo/ui';