Add skeleton files for scratch paper

Author: 64json

src/frontend/common/config.js

@@ -1,19 +1,20 @@
+import { CODE_JS, CODE_JAVA, CODE_CPP } from '/skeletons';
+
 const languages = [{
   name: 'JavaScript',
   ext: 'js',
   mode: 'javascript',
+  skeleton: CODE_JS,
 }, {
   name: 'C++',
   ext: 'cpp',
   mode: 'c_cpp',
+  skeleton: CODE_CPP,
 }, {
   name: 'Java',
   ext: 'java',
   mode: 'java',
-}, {
-  name: 'Python',
-  ext: 'py',
-  mode: 'python',
+  skeleton: CODE_JAVA,
 }];
 
 const exts = languages.map(language => language.ext);

src/frontend/components/App/index.jsx

@@ -22,9 +22,8 @@ import { CategoryApi, GitHubApi } from '/apis';
 import { tracerManager } from '/core';
 import { actions } from '/reducers';
 import { extension, refineGist } from '/common/util';
-import { exts, us } from '/common/config';
-import README from '/static/README.md';
-import SCRATCH_PAPER from '/static/SCRATCH_PAPER.md';
+import { languages, exts, us } from '/common/config';
+import { README_MD, SCRATCH_PAPER_MD } from '/skeletons';
 import styles from './stylesheet.scss';
 
 loadProgressBar();
@@ -135,15 +134,16 @@ class App extends React.Component {
       fetchPromise = CategoryApi.getAlgorithm(categoryKey, algorithmKey)
         .then(({ algorithm }) => algorithm);
     } else if (gistId === 'new') {
+      const language = languages.find(language => language.ext === ext);
       fetchPromise = Promise.resolve({
         titles: ['Scratch Paper', 'Untitled'],
         files: [{
           name: 'README.md',
-          content: SCRATCH_PAPER,
+          content: SCRATCH_PAPER_MD,
           contributors: undefined,
         }, {
           name: `code.${ext}`,
-          content: '', // TODO: put import statements as default
+          content: language ? language.skeleton : '', // TODO: put import statements as default
           contributors: undefined,
         }],
       });
@@ -156,7 +156,7 @@ class App extends React.Component {
       .then(algorithm => this.props.setCurrent(categoryKey, algorithmKey, gistId, algorithm.titles, algorithm.files))
       .catch(() => this.props.setCurrent(undefined, undefined, undefined, ['Algorithm Visualizer'], [{
         name: 'README.md',
-        content: README,
+        content: README_MD,
         contributors: [us],
       }]))
       .finally(() => {
@@ -245,7 +245,6 @@ class App extends React.Component {
       <FontAwesomeIcon fixedWidth icon={faPlus} />,
     );
 
-    // TODO: let google search within algorithm-visualizer.org
     return (
       <div className={styles.app}>
         <Helmet>
@@ -268,7 +267,7 @@ class App extends React.Component {
           <TabContainer className={styles.editor_tab_container} titles={editorTitles} tabIndex={editorTabIndex}
                         onChangeTabIndex={tabIndex => this.handleChangeEditorTabIndex(tabIndex)}>
             {
-              files.map((file, i) => (
+              files.map((file, i) => ( // TODO: editor cursor should stay when moved to scratch paper
                 <CodeEditor key={[...titles, i].join('--')} file={file}
                             onDeleteFile={file => this.handleDeleteFile(file)} />
               ))

src/frontend/components/Header/index.jsx

@@ -102,6 +102,7 @@ class Header extends React.Component {
     const { gistId, titles } = this.props.current;
     const { ext, user } = this.props.env;
 
+    // TODO: remove the 'run' button and add 'build' and 'play' buttons
     return (
       <header className={classes(styles.header, className)}>
         <div className={styles.row}>

src/frontend/static/README.md renamed to src/frontend/skeletons/README.md

@@ -0,0 +1,9 @@
+#include "LogTracer.h"
+
+int main() {
+    LogTracer logTracer = LogTracer("Scratch Paper");
+
+    logTracer.print("Visualize your own algorithm here!");
+
+    return 0;
+}

src/frontend/static/SCRATCH_PAPER.md renamed to src/frontend/skeletons/SCRATCH_PAPER.md

@@ -0,0 +1,9 @@
+import org.algorithm_visualizer.tracers.*;
+
+class Main {
+    public static void main(String[] args) {
+        LogTracer logTracer = new LogTracer("Scratch Paper");
+
+        logTracer.print("Visualize your own algorithm here!");
+    }
+}

src/frontend/skeletons/code.cpp

@@ -0,0 +1,5 @@
+import { LogTracer } from 'algorithm-visualizer';
+
+const logTracer = new LogTracer('Scratch Paper');
+
+logTracer.print('Visualize your own algorithm here!');

src/frontend/skeletons/code.java

@@ -0,0 +1,5 @@
+export { default as CODE_CPP } from 'raw-loader!./code.cpp';
+export { default as CODE_JAVA } from 'raw-loader!./code.java';
+export { default as CODE_JS } from 'raw-loader!./code.js';
+export { default as README_MD } from 'raw-loader!./README.md';
+export { default as SCRATCH_PAPER_MD } from 'raw-loader!./SCRATCH_PAPER.md';

src/frontend/skeletons/code.js

@@ -44,8 +44,12 @@ module.exports = {
   },
   module: {
     rules: [
-      { test: /\.(js|jsx)$/, use: 'babel-loader', include: srcPath },
       {
+        test: /\.(js|jsx)$/,
+        use: 'babel-loader',
+        include: srcPath,
+        exclude: path.resolve(srcPath, 'skeletons'),
+      }, {
         test: /\.scss$/,
         use: filter([
           __DEV__ && 'css-hot-loader',
@@ -63,7 +67,6 @@ module.exports = {
         ]),
         exclude: srcPath,
       },
-      { test: /\.md$/, use: 'raw-loader' },
     ],
   },
   plugins: filter([
@@ -84,4 +87,4 @@ module.exports = {
     // new BundleAnalyzerPlugin(),
   ]),
   mode: __DEV__ ? 'development' : 'production',
-};
+};