【WIP】Flux Architecture

.eslintignore

@@ -0,0 +1,4 @@
+js/build/*
+bower_components/
+node_modules/
+

.eslintrc.js

@@ -0,0 +1,216 @@
+module.exports = {
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true,
+    "mocha": true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": [
+    "react"
+  ],
+  "settings": {
+    "react": {
+      "pragma": "React",  // Pragma to use, default to "React"
+      "version": "15.0" // React version, default to the latest React stable release
+    }
+  },
+  "rules": {
+    "accessor-pairs": "error",
+    "array-bracket-spacing": ["warn", "never"],
+    "array-callback-return": "error",
+    "block-scoped-var": "error",
+    "block-spacing": ["error", "always"],
+    "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+    "camelcase": ["off", { "properties": "always" }],
+    "comma-dangle": "error",
+    "comma-spacing": ["error", {
+      "before": false,
+      "after": true
+    }],
+    "comma-style": ["error", "last", {
+      "exceptions": {}
+    }],
+    "complexity": ["warn", 3],
+    "computed-property-spacing": ["error", "never"],
+    "consistent-this": "off",
+    "consistent-return": "error",
+    "curly": "error",
+    "default-case": "error",
+    "dot-location": ["error", "property"],
+    "dot-notation": "off",
+    "eol-last": "error",
+    "eqeqeq": ["error", "smart"],
+    "func-names": "off",
+    "func-style": ["off", "expression"],
+    "guard-for-in": "error",
+    "indent": ["error", 2],
+    "init-declarations": "off",
+    "key-spacing": ["error", {
+      "beforeColon": false,
+      "afterColon": true
+    }],
+    "keyword-spacing": ["error", {
+      "before": false,
+      "after": true,
+      "overrides": {
+        "else": { "before": true },
+        "throw": { "before": true }
+      }
+    }],
+    "linebreak-style": ["error", "unix"],
+    "lines-around-comment": "error",
+    "max-depth": ["warn", 4],
+    "max-len": ["error", 80, 4, { "ignoreUrls": true }],
+    "max-nested-callbacks": ["warn", 3],
+    "max-statements-per-line": ["warn", {
+      "max": 3
+    }],
+    "new-cap": "error",
+    "new-parens": "error",
+    "newline-after-var": ["off", "always"],
+    "newline-before-return": "warn",
+    "newline-per-chained-call": ["error", {
+      "ignoreChainWithDepth": 3
+    }],
+    "no-alert": "warn",
+    "no-array-constructor": "error",
+    "no-bitwise": "warn",
+    "no-catch-shadow": "error",
+    "no-continue": "warn",
+    "no-underscore-dangle": ["error", {
+      "allowAfterThis": true
+    }],
+    "no-inline-comments": "warn",
+    "no-extra-semi": "error",
+    "no-extra-boolean-cast": "error",
+    "no-extra-parens": "error",
+    "no-ex-assign": "error",
+    "no-fallthrough": "warn",
+    "no-floating-decimal": "error",
+    "no-func-assign": "error",
+    "no-inner-declarations": "warn",
+    "no-implicit-coercion": "error",
+    "no-implicit-globals": "warn",
+    "no-implied-eval": "error",
+    "no-invalid-this": "error",
+    "no-invalid-regexp": "error",
+    "no-irregular-whitespace": "error",
+    "no-iterator": "error",
+    "no-label-var": "error",
+    "no-lone-blocks": "error",
+    "no-lonely-if": "error",
+    "no-loop-func": "error",
+    "no-magic-numbers": ["warn", {
+      "ignoreArrayIndexes": true,
+      "detectObjects": true
+    }],
+    "no-mixed-spaces-and-tabs": "error",
+    "no-multiple-empty-lines": ["error", {
+      "max": 2
+    }],
+    "no-multi-spaces": "error",
+    "no-multi-str": "error",
+    "no-negated-condition": "warn",
+    "no-negated-in-lhs": "warn",
+    "no-native-reassign": "error",
+    "no-new": "error",
+    "no-new-func": "error",
+    "no-new-object": "error",
+    "no-octal": "error",
+    "no-octal-escape": "error",
+    "no-param-reassign": "error",
+    "no-plusplus": ["warn", {
+      "allowForLoopAfterthoughts": true
+    }],
+    "no-proto": "error",
+    "no-labels": "error",
+    "no-obj-calls": "error",
+    "no-redeclare": "error",
+    "no-restricted-globals": "off",
+    "no-return-assign": "error",
+    "no-script-url": "error",
+    "no-self-assign": "error",
+    "no-self-compare": "error",
+    "no-sequences": "error",
+    "no-shadow": ["error", {
+      "builtinGlobals": false,
+      "hoist": "functions",
+      "allow": []
+    }],
+    "no-shadow-restricted-names": "error",
+    "no-sparse-arrays": "error",
+    "no-spaced-func": "error",
+    "no-ternary": "off",
+    "no-throw-literal": "error",
+    "no-trailing-spaces": "error",
+    "no-undef": "error",
+    "no-undef-init": "error",
+    "no-undefined": "error",
+    "no-unexpected-multiline": "error",
+    "no-unmodified-loop-condition": "error",
+    "no-unneeded-ternary": "error",
+    "no-unused-expressions": ["error", {
+      "allowTernary": true,
+      "allowShortCircuit": true
+    }],
+    "no-unreachable": "error",
+    "no-unused-labels": "error",
+    "no-unused-vars": "warn",
+    "no-use-before-define": ["error", {
+      "functions": false,
+      "classes": false
+    }],
+    "no-useless-call": "error",
+    "no-useless-concat": "error",
+    "no-useless-escape": "error",
+    "no-var": "warn",
+    "no-void": "error",
+    "no-warning-comments": "off",
+    "no-whitespace-before-property": "error",
+    "no-with": "error",
+    "object-curly-spacing": ["error", "always"],
+    "one-var": "off",
+    "one-var-declaration-per-line": ["warn", "always"],
+    "operator-assignment": ["warn", "always"],
+    "operator-linebreak": ["error", "after"],
+    "padded-blocks": ["off", "never"],
+    "quote-props": ["error", "consistent-as-needed", {
+      "keywords": true
+    }],
+    "quotes": ["error", "double"],
+    "radix": ["error", "as-needed"],
+    "react/jsx-uses-vars": 1,
+    "spaced-comment": ["error", "always"],
+    "semi": ["error", "always"],
+    "semi-spacing": ["warn", {
+      "before": false, "after": true
+    }],
+    "sort-vars": ["off", {
+      "ignoreCase": true
+    }],
+    "space-before-blocks": ["error", {
+      "functions": "always",
+      "keywords": "always"
+    }],
+    "space-infix-ops": "error",
+    "space-in-parens": ["error", "never"],
+    "space-unary-ops": "error",
+    "use-isnan": "warn",
+    "wrap-iife": ["error", "any"],
+    "wrap-regex": "error",
+    "valid-typeof": "warn",
+    "vars-on-top": "error",
+    "yoda": ["error", "never", {
+      "exceptRange": true
+    }]
+  }
+};
+

.gitignore

@@ -122,4 +122,4 @@ sftp-config.json
 
 ### others
 js/build/
-
+bower_components/

bower.json

@@ -0,0 +1,20 @@
+{
+  "name": "sphero-maze-editor",
+  "description": "",
+  "main": "index.js",
+  "authors": [
+    "comozilla"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/comozilla/SpheroMazeEditor",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "font-awesome": "^4.6.2"
+  }
+}

css/style.css

@@ -0,0 +1,44 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+#block-field {
+  width: 100vw;
+  height: 100vh;
+  text-align: center;
+  margin: 0;
+  padding: 10px;
+}
+#block-field li  {
+  float: left;
+  width: 80px;
+  height: 80px;
+  list-style-type: none;
+  text-align: center;
+  line-height: 80px;
+  text-align: center;
+  background-color: #ecf0f1;
+  position: relative;
+  margin-left: 40px;
+  cursor: pointer;
+  border-radius: 20px;
+}
+
+
+#block-field li:after {
+  content: "";
+  position: absolute;
+  margin-top: -50%;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-left: 20px solid #ecf0f1;
+  right: -30px;
+  top: 70px;
+}
+#block-field li:first-child {
+  margin-left: 0;
+}
+#block-field li:last-child:after {
+  display: none;
+}

gulpfile.js

@@ -0,0 +1,50 @@
+"use strict";
+
+const gulp = require("gulp");
+const gutil = require("gulp-util");
+const webpack = require("webpack");
+const minimist = require("minimist");
+const browserSync = require("browser-sync");
+
+const config = require("./webpack.config.js");
+
+gulp.task("webpack", function() {
+  const env = minimist(process.argv.slice(2));
+  let options = Object.create(config);
+
+  if (env["min"]) {
+    options.output.filename = "./js/build/bundle.min.js";
+    options.plugins.push(new webpack.optimize.UglifyJsPlugin());
+  }
+
+  if (env["watch"] || env["browser-sync"]) {
+    options.watch = true;
+  }
+
+  if (env["browser-sync"]) {
+    browserSync({
+      server: {
+        baseDir: "./",
+        index: "index.html"
+      }
+    });
+  }
+
+  webpack(options, function(err, stats) {
+    if (err) {
+      throw new gutil.PluginError("webpack", err);
+    }
+    gutil.log("[webpack]", stats.toString());
+    if (env["browser-sync"]) {
+      browserSync.reload();
+    }
+  });
+});
+
+// Gulp コマンド
+// readme.mdに書いてもいいが、開発時はgulpをグローバルにインストールしたくないため、
+// npm run から叩くので、ここに書いておく。
+// gulp webpack -> 普通に1回ビルド
+// 引数:
+//  --min : UglifyJsPluginをかける。出力はbundle.min.jsなので注意
+//  --browser-sync : browser-syncで監視する。--watchもされる。

js/action-creators/BlockActions.js

@@ -0,0 +1,14 @@
+import AppDispatcher from "../dispatcher/AppDispatcher";
+import BlockConstants from "../constants/BlockConstants";
+
+const BlockActions = {
+  append: function(blockDetails) {
+    AppDispatcher.handleBlockAction({
+      actionType: BlockConstants.BLOCK_APPEND,
+      block: blockDetails
+    });
+  }
+};
+
+export default BlockActions;
+

js/components/Appender.react.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import BlockActions from "../action-creators/BlockActions";
+
+export default class Appender extends React.Component {
+  render() {
+    return (
+      <li className="appender" onClick={this._onClick}>
+        <i className="fa fa-plus"></i>
+      </li>
+    );
+  }
+  _onClick() {
+    BlockActions.append({
+      blockName: "move",
+      icon: "fa-arrows",
+      color: "#8e44ad"
+    });
+  }
+}