Initial commit
This commit is contained in:
Kai Moseley
parent
feb91c8122
commit
2577d56f90
4
.babelrc
4
.babelrc
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"presets": ["es2015", "react"],
|
||||
"plugins": ["transform-object-rest-spread", "transform-flow-strip-types"]
|
||||
"presets": ["react"],
|
||||
"plugins": ["transform-es2015-modules-commonjs", "transform-object-rest-spread", "transform-flow-strip-types"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
[ignore]
|
||||
.*/node_modules/fbjs/*
|
||||
.*/node_modules/react-motion/*
|
||||
[ignore]
|
||||
|
|
@ -2,12 +2,10 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Shell game</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||
</head>
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="react-shell-game"></div>
|
||||
</body>
|
||||
|
||||
<script src="./shell-game.bundle.js"></script>
|
||||
</body>
|
||||
<script src="test.bundle.js"></script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,587 @@
|
|||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ var parentHotUpdateCallback = this["webpackHotUpdate"];
|
||||
/******/ this["webpackHotUpdate"] = function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars
|
||||
/******/ hotAddUpdateChunk(chunkId, moreModules);
|
||||
/******/ if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
|
||||
/******/ }
|
||||
|
||||
/******/ function hotDownloadUpdateChunk(chunkId) { // eslint-disable-line no-unused-vars
|
||||
/******/ var head = document.getElementsByTagName("head")[0];
|
||||
/******/ var script = document.createElement("script");
|
||||
/******/ script.type = "text/javascript";
|
||||
/******/ script.charset = "utf-8";
|
||||
/******/ script.src = __webpack_require__.p + "" + chunkId + "." + hotCurrentHash + ".hot-update.js";
|
||||
/******/ head.appendChild(script);
|
||||
/******/ }
|
||||
|
||||
/******/ function hotDownloadManifest(callback) { // eslint-disable-line no-unused-vars
|
||||
/******/ if(typeof XMLHttpRequest === "undefined")
|
||||
/******/ return callback(new Error("No browser support"));
|
||||
/******/ try {
|
||||
/******/ var request = new XMLHttpRequest();
|
||||
/******/ var requestPath = __webpack_require__.p + "" + hotCurrentHash + ".hot-update.json";
|
||||
/******/ request.open("GET", requestPath, true);
|
||||
/******/ request.timeout = 10000;
|
||||
/******/ request.send(null);
|
||||
/******/ } catch(err) {
|
||||
/******/ return callback(err);
|
||||
/******/ }
|
||||
/******/ request.onreadystatechange = function() {
|
||||
/******/ if(request.readyState !== 4) return;
|
||||
/******/ if(request.status === 0) {
|
||||
/******/ // timeout
|
||||
/******/ callback(new Error("Manifest request to " + requestPath + " timed out."));
|
||||
/******/ } else if(request.status === 404) {
|
||||
/******/ // no update available
|
||||
/******/ callback();
|
||||
/******/ } else if(request.status !== 200 && request.status !== 304) {
|
||||
/******/ // other failure
|
||||
/******/ callback(new Error("Manifest request to " + requestPath + " failed."));
|
||||
/******/ } else {
|
||||
/******/ // success
|
||||
/******/ try {
|
||||
/******/ var update = JSON.parse(request.responseText);
|
||||
/******/ } catch(e) {
|
||||
/******/ callback(e);
|
||||
/******/ return;
|
||||
/******/ }
|
||||
/******/ callback(null, update);
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/ }
|
||||
|
||||
|
||||
/******/ // Copied from https://github.com/facebook/react/blob/bef45b0/src/shared/utils/canDefineProperty.js
|
||||
/******/ var canDefineProperty = false;
|
||||
/******/ try {
|
||||
/******/ Object.defineProperty({}, "x", {
|
||||
/******/ get: function() {}
|
||||
/******/ });
|
||||
/******/ canDefineProperty = true;
|
||||
/******/ } catch(x) {
|
||||
/******/ // IE will fail on defineProperty
|
||||
/******/ }
|
||||
|
||||
/******/ var hotApplyOnUpdate = true;
|
||||
/******/ var hotCurrentHash = "1bc1531991c33fda3a04"; // eslint-disable-line no-unused-vars
|
||||
/******/ var hotCurrentModuleData = {};
|
||||
/******/ var hotCurrentParents = []; // eslint-disable-line no-unused-vars
|
||||
|
||||
/******/ function hotCreateRequire(moduleId) { // eslint-disable-line no-unused-vars
|
||||
/******/ var me = installedModules[moduleId];
|
||||
/******/ if(!me) return __webpack_require__;
|
||||
/******/ var fn = function(request) {
|
||||
/******/ if(me.hot.active) {
|
||||
/******/ if(installedModules[request]) {
|
||||
/******/ if(installedModules[request].parents.indexOf(moduleId) < 0)
|
||||
/******/ installedModules[request].parents.push(moduleId);
|
||||
/******/ if(me.children.indexOf(request) < 0)
|
||||
/******/ me.children.push(request);
|
||||
/******/ } else hotCurrentParents = [moduleId];
|
||||
/******/ } else {
|
||||
/******/ console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
|
||||
/******/ hotCurrentParents = [];
|
||||
/******/ }
|
||||
/******/ return __webpack_require__(request);
|
||||
/******/ };
|
||||
/******/ for(var name in __webpack_require__) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(__webpack_require__, name)) {
|
||||
/******/ if(canDefineProperty) {
|
||||
/******/ Object.defineProperty(fn, name, (function(name) {
|
||||
/******/ return {
|
||||
/******/ configurable: true,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: function() {
|
||||
/******/ return __webpack_require__[name];
|
||||
/******/ },
|
||||
/******/ set: function(value) {
|
||||
/******/ __webpack_require__[name] = value;
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/ }(name)));
|
||||
/******/ } else {
|
||||
/******/ fn[name] = __webpack_require__[name];
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ function ensure(chunkId, callback) {
|
||||
/******/ if(hotStatus === "ready")
|
||||
/******/ hotSetStatus("prepare");
|
||||
/******/ hotChunksLoading++;
|
||||
/******/ __webpack_require__.e(chunkId, function() {
|
||||
/******/ try {
|
||||
/******/ callback.call(null, fn);
|
||||
/******/ } finally {
|
||||
/******/ finishChunkLoading();
|
||||
/******/ }
|
||||
|
||||
/******/ function finishChunkLoading() {
|
||||
/******/ hotChunksLoading--;
|
||||
/******/ if(hotStatus === "prepare") {
|
||||
/******/ if(!hotWaitingFilesMap[chunkId]) {
|
||||
/******/ hotEnsureUpdateChunk(chunkId);
|
||||
/******/ }
|
||||
/******/ if(hotChunksLoading === 0 && hotWaitingFiles === 0) {
|
||||
/******/ hotUpdateDownloaded();
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ if(canDefineProperty) {
|
||||
/******/ Object.defineProperty(fn, "e", {
|
||||
/******/ enumerable: true,
|
||||
/******/ value: ensure
|
||||
/******/ });
|
||||
/******/ } else {
|
||||
/******/ fn.e = ensure;
|
||||
/******/ }
|
||||
/******/ return fn;
|
||||
/******/ }
|
||||
|
||||
/******/ function hotCreateModule(moduleId) { // eslint-disable-line no-unused-vars
|
||||
/******/ var hot = {
|
||||
/******/ // private stuff
|
||||
/******/ _acceptedDependencies: {},
|
||||
/******/ _declinedDependencies: {},
|
||||
/******/ _selfAccepted: false,
|
||||
/******/ _selfDeclined: false,
|
||||
/******/ _disposeHandlers: [],
|
||||
|
||||
/******/ // Module API
|
||||
/******/ active: true,
|
||||
/******/ accept: function(dep, callback) {
|
||||
/******/ if(typeof dep === "undefined")
|
||||
/******/ hot._selfAccepted = true;
|
||||
/******/ else if(typeof dep === "function")
|
||||
/******/ hot._selfAccepted = dep;
|
||||
/******/ else if(typeof dep === "object")
|
||||
/******/ for(var i = 0; i < dep.length; i++)
|
||||
/******/ hot._acceptedDependencies[dep[i]] = callback;
|
||||
/******/ else
|
||||
/******/ hot._acceptedDependencies[dep] = callback;
|
||||
/******/ },
|
||||
/******/ decline: function(dep) {
|
||||
/******/ if(typeof dep === "undefined")
|
||||
/******/ hot._selfDeclined = true;
|
||||
/******/ else if(typeof dep === "number")
|
||||
/******/ hot._declinedDependencies[dep] = true;
|
||||
/******/ else
|
||||
/******/ for(var i = 0; i < dep.length; i++)
|
||||
/******/ hot._declinedDependencies[dep[i]] = true;
|
||||
/******/ },
|
||||
/******/ dispose: function(callback) {
|
||||
/******/ hot._disposeHandlers.push(callback);
|
||||
/******/ },
|
||||
/******/ addDisposeHandler: function(callback) {
|
||||
/******/ hot._disposeHandlers.push(callback);
|
||||
/******/ },
|
||||
/******/ removeDisposeHandler: function(callback) {
|
||||
/******/ var idx = hot._disposeHandlers.indexOf(callback);
|
||||
/******/ if(idx >= 0) hot._disposeHandlers.splice(idx, 1);
|
||||
/******/ },
|
||||
|
||||
/******/ // Management API
|
||||
/******/ check: hotCheck,
|
||||
/******/ apply: hotApply,
|
||||
/******/ status: function(l) {
|
||||
/******/ if(!l) return hotStatus;
|
||||
/******/ hotStatusHandlers.push(l);
|
||||
/******/ },
|
||||
/******/ addStatusHandler: function(l) {
|
||||
/******/ hotStatusHandlers.push(l);
|
||||
/******/ },
|
||||
/******/ removeStatusHandler: function(l) {
|
||||
/******/ var idx = hotStatusHandlers.indexOf(l);
|
||||
/******/ if(idx >= 0) hotStatusHandlers.splice(idx, 1);
|
||||
/******/ },
|
||||
|
||||
/******/ //inherit from previous dispose call
|
||||
/******/ data: hotCurrentModuleData[moduleId]
|
||||
/******/ };
|
||||
/******/ return hot;
|
||||
/******/ }
|
||||
|
||||
/******/ var hotStatusHandlers = [];
|
||||
/******/ var hotStatus = "idle";
|
||||
|
||||
/******/ function hotSetStatus(newStatus) {
|
||||
/******/ hotStatus = newStatus;
|
||||
/******/ for(var i = 0; i < hotStatusHandlers.length; i++)
|
||||
/******/ hotStatusHandlers[i].call(null, newStatus);
|
||||
/******/ }
|
||||
|
||||
/******/ // while downloading
|
||||
/******/ var hotWaitingFiles = 0;
|
||||
/******/ var hotChunksLoading = 0;
|
||||
/******/ var hotWaitingFilesMap = {};
|
||||
/******/ var hotRequestedFilesMap = {};
|
||||
/******/ var hotAvailibleFilesMap = {};
|
||||
/******/ var hotCallback;
|
||||
|
||||
/******/ // The update info
|
||||
/******/ var hotUpdate, hotUpdateNewHash;
|
||||
|
||||
/******/ function toModuleId(id) {
|
||||
/******/ var isNumber = (+id) + "" === id;
|
||||
/******/ return isNumber ? +id : id;
|
||||
/******/ }
|
||||
|
||||
/******/ function hotCheck(apply, callback) {
|
||||
/******/ if(hotStatus !== "idle") throw new Error("check() is only allowed in idle status");
|
||||
/******/ if(typeof apply === "function") {
|
||||
/******/ hotApplyOnUpdate = false;
|
||||
/******/ callback = apply;
|
||||
/******/ } else {
|
||||
/******/ hotApplyOnUpdate = apply;
|
||||
/******/ callback = callback || function(err) {
|
||||
/******/ if(err) throw err;
|
||||
/******/ };
|
||||
/******/ }
|
||||
/******/ hotSetStatus("check");
|
||||
/******/ hotDownloadManifest(function(err, update) {
|
||||
/******/ if(err) return callback(err);
|
||||
/******/ if(!update) {
|
||||
/******/ hotSetStatus("idle");
|
||||
/******/ callback(null, null);
|
||||
/******/ return;
|
||||
/******/ }
|
||||
|
||||
/******/ hotRequestedFilesMap = {};
|
||||
/******/ hotAvailibleFilesMap = {};
|
||||
/******/ hotWaitingFilesMap = {};
|
||||
/******/ for(var i = 0; i < update.c.length; i++)
|
||||
/******/ hotAvailibleFilesMap[update.c[i]] = true;
|
||||
/******/ hotUpdateNewHash = update.h;
|
||||
|
||||
/******/ hotSetStatus("prepare");
|
||||
/******/ hotCallback = callback;
|
||||
/******/ hotUpdate = {};
|
||||
/******/ var chunkId = 0;
|
||||
/******/ { // eslint-disable-line no-lone-blocks
|
||||
/******/ /*globals chunkId */
|
||||
/******/ hotEnsureUpdateChunk(chunkId);
|
||||
/******/ }
|
||||
/******/ if(hotStatus === "prepare" && hotChunksLoading === 0 && hotWaitingFiles === 0) {
|
||||
/******/ hotUpdateDownloaded();
|
||||
/******/ }
|
||||
/******/ });
|
||||
/******/ }
|
||||
|
||||
/******/ function hotAddUpdateChunk(chunkId, moreModules) { // eslint-disable-line no-unused-vars
|
||||
/******/ if(!hotAvailibleFilesMap[chunkId] || !hotRequestedFilesMap[chunkId])
|
||||
/******/ return;
|
||||
/******/ hotRequestedFilesMap[chunkId] = false;
|
||||
/******/ for(var moduleId in moreModules) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
|
||||
/******/ hotUpdate[moduleId] = moreModules[moduleId];
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(--hotWaitingFiles === 0 && hotChunksLoading === 0) {
|
||||
/******/ hotUpdateDownloaded();
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ function hotEnsureUpdateChunk(chunkId) {
|
||||
/******/ if(!hotAvailibleFilesMap[chunkId]) {
|
||||
/******/ hotWaitingFilesMap[chunkId] = true;
|
||||
/******/ } else {
|
||||
/******/ hotRequestedFilesMap[chunkId] = true;
|
||||
/******/ hotWaitingFiles++;
|
||||
/******/ hotDownloadUpdateChunk(chunkId);
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ function hotUpdateDownloaded() {
|
||||
/******/ hotSetStatus("ready");
|
||||
/******/ var callback = hotCallback;
|
||||
/******/ hotCallback = null;
|
||||
/******/ if(!callback) return;
|
||||
/******/ if(hotApplyOnUpdate) {
|
||||
/******/ hotApply(hotApplyOnUpdate, callback);
|
||||
/******/ } else {
|
||||
/******/ var outdatedModules = [];
|
||||
/******/ for(var id in hotUpdate) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(hotUpdate, id)) {
|
||||
/******/ outdatedModules.push(toModuleId(id));
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ callback(null, outdatedModules);
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ function hotApply(options, callback) {
|
||||
/******/ if(hotStatus !== "ready") throw new Error("apply() is only allowed in ready status");
|
||||
/******/ if(typeof options === "function") {
|
||||
/******/ callback = options;
|
||||
/******/ options = {};
|
||||
/******/ } else if(options && typeof options === "object") {
|
||||
/******/ callback = callback || function(err) {
|
||||
/******/ if(err) throw err;
|
||||
/******/ };
|
||||
/******/ } else {
|
||||
/******/ options = {};
|
||||
/******/ callback = callback || function(err) {
|
||||
/******/ if(err) throw err;
|
||||
/******/ };
|
||||
/******/ }
|
||||
|
||||
/******/ function getAffectedStuff(module) {
|
||||
/******/ var outdatedModules = [module];
|
||||
/******/ var outdatedDependencies = {};
|
||||
|
||||
/******/ var queue = outdatedModules.slice();
|
||||
/******/ while(queue.length > 0) {
|
||||
/******/ var moduleId = queue.pop();
|
||||
/******/ var module = installedModules[moduleId];
|
||||
/******/ if(!module || module.hot._selfAccepted)
|
||||
/******/ continue;
|
||||
/******/ if(module.hot._selfDeclined) {
|
||||
/******/ return new Error("Aborted because of self decline: " + moduleId);
|
||||
/******/ }
|
||||
/******/ if(moduleId === 0) {
|
||||
/******/ return;
|
||||
/******/ }
|
||||
/******/ for(var i = 0; i < module.parents.length; i++) {
|
||||
/******/ var parentId = module.parents[i];
|
||||
/******/ var parent = installedModules[parentId];
|
||||
/******/ if(parent.hot._declinedDependencies[moduleId]) {
|
||||
/******/ return new Error("Aborted because of declined dependency: " + moduleId + " in " + parentId);
|
||||
/******/ }
|
||||
/******/ if(outdatedModules.indexOf(parentId) >= 0) continue;
|
||||
/******/ if(parent.hot._acceptedDependencies[moduleId]) {
|
||||
/******/ if(!outdatedDependencies[parentId])
|
||||
/******/ outdatedDependencies[parentId] = [];
|
||||
/******/ addAllToSet(outdatedDependencies[parentId], [moduleId]);
|
||||
/******/ continue;
|
||||
/******/ }
|
||||
/******/ delete outdatedDependencies[parentId];
|
||||
/******/ outdatedModules.push(parentId);
|
||||
/******/ queue.push(parentId);
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ return [outdatedModules, outdatedDependencies];
|
||||
/******/ }
|
||||
|
||||
/******/ function addAllToSet(a, b) {
|
||||
/******/ for(var i = 0; i < b.length; i++) {
|
||||
/******/ var item = b[i];
|
||||
/******/ if(a.indexOf(item) < 0)
|
||||
/******/ a.push(item);
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ // at begin all updates modules are outdated
|
||||
/******/ // the "outdated" status can propagate to parents if they don't accept the children
|
||||
/******/ var outdatedDependencies = {};
|
||||
/******/ var outdatedModules = [];
|
||||
/******/ var appliedUpdate = {};
|
||||
/******/ for(var id in hotUpdate) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(hotUpdate, id)) {
|
||||
/******/ var moduleId = toModuleId(id);
|
||||
/******/ var result = getAffectedStuff(moduleId);
|
||||
/******/ if(!result) {
|
||||
/******/ if(options.ignoreUnaccepted)
|
||||
/******/ continue;
|
||||
/******/ hotSetStatus("abort");
|
||||
/******/ return callback(new Error("Aborted because " + moduleId + " is not accepted"));
|
||||
/******/ }
|
||||
/******/ if(result instanceof Error) {
|
||||
/******/ hotSetStatus("abort");
|
||||
/******/ return callback(result);
|
||||
/******/ }
|
||||
/******/ appliedUpdate[moduleId] = hotUpdate[moduleId];
|
||||
/******/ addAllToSet(outdatedModules, result[0]);
|
||||
/******/ for(var moduleId in result[1]) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(result[1], moduleId)) {
|
||||
/******/ if(!outdatedDependencies[moduleId])
|
||||
/******/ outdatedDependencies[moduleId] = [];
|
||||
/******/ addAllToSet(outdatedDependencies[moduleId], result[1][moduleId]);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ // Store self accepted outdated modules to require them later by the module system
|
||||
/******/ var outdatedSelfAcceptedModules = [];
|
||||
/******/ for(var i = 0; i < outdatedModules.length; i++) {
|
||||
/******/ var moduleId = outdatedModules[i];
|
||||
/******/ if(installedModules[moduleId] && installedModules[moduleId].hot._selfAccepted)
|
||||
/******/ outdatedSelfAcceptedModules.push({
|
||||
/******/ module: moduleId,
|
||||
/******/ errorHandler: installedModules[moduleId].hot._selfAccepted
|
||||
/******/ });
|
||||
/******/ }
|
||||
|
||||
/******/ // Now in "dispose" phase
|
||||
/******/ hotSetStatus("dispose");
|
||||
/******/ var queue = outdatedModules.slice();
|
||||
/******/ while(queue.length > 0) {
|
||||
/******/ var moduleId = queue.pop();
|
||||
/******/ var module = installedModules[moduleId];
|
||||
/******/ if(!module) continue;
|
||||
|
||||
/******/ var data = {};
|
||||
|
||||
/******/ // Call dispose handlers
|
||||
/******/ var disposeHandlers = module.hot._disposeHandlers;
|
||||
/******/ for(var j = 0; j < disposeHandlers.length; j++) {
|
||||
/******/ var cb = disposeHandlers[j];
|
||||
/******/ cb(data);
|
||||
/******/ }
|
||||
/******/ hotCurrentModuleData[moduleId] = data;
|
||||
|
||||
/******/ // disable module (this disables requires from this module)
|
||||
/******/ module.hot.active = false;
|
||||
|
||||
/******/ // remove module from cache
|
||||
/******/ delete installedModules[moduleId];
|
||||
|
||||
/******/ // remove "parents" references from all children
|
||||
/******/ for(var j = 0; j < module.children.length; j++) {
|
||||
/******/ var child = installedModules[module.children[j]];
|
||||
/******/ if(!child) continue;
|
||||
/******/ var idx = child.parents.indexOf(moduleId);
|
||||
/******/ if(idx >= 0) {
|
||||
/******/ child.parents.splice(idx, 1);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ // remove outdated dependency from module children
|
||||
/******/ for(var moduleId in outdatedDependencies) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)) {
|
||||
/******/ var module = installedModules[moduleId];
|
||||
/******/ var moduleOutdatedDependencies = outdatedDependencies[moduleId];
|
||||
/******/ for(var j = 0; j < moduleOutdatedDependencies.length; j++) {
|
||||
/******/ var dependency = moduleOutdatedDependencies[j];
|
||||
/******/ var idx = module.children.indexOf(dependency);
|
||||
/******/ if(idx >= 0) module.children.splice(idx, 1);
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ // Not in "apply" phase
|
||||
/******/ hotSetStatus("apply");
|
||||
|
||||
/******/ hotCurrentHash = hotUpdateNewHash;
|
||||
|
||||
/******/ // insert new code
|
||||
/******/ for(var moduleId in appliedUpdate) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) {
|
||||
/******/ modules[moduleId] = appliedUpdate[moduleId];
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ // call accept handlers
|
||||
/******/ var error = null;
|
||||
/******/ for(var moduleId in outdatedDependencies) {
|
||||
/******/ if(Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)) {
|
||||
/******/ var module = installedModules[moduleId];
|
||||
/******/ var moduleOutdatedDependencies = outdatedDependencies[moduleId];
|
||||
/******/ var callbacks = [];
|
||||
/******/ for(var i = 0; i < moduleOutdatedDependencies.length; i++) {
|
||||
/******/ var dependency = moduleOutdatedDependencies[i];
|
||||
/******/ var cb = module.hot._acceptedDependencies[dependency];
|
||||
/******/ if(callbacks.indexOf(cb) >= 0) continue;
|
||||
/******/ callbacks.push(cb);
|
||||
/******/ }
|
||||
/******/ for(var i = 0; i < callbacks.length; i++) {
|
||||
/******/ var cb = callbacks[i];
|
||||
/******/ try {
|
||||
/******/ cb(outdatedDependencies);
|
||||
/******/ } catch(err) {
|
||||
/******/ if(!error)
|
||||
/******/ error = err;
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ // Load self accepted modules
|
||||
/******/ for(var i = 0; i < outdatedSelfAcceptedModules.length; i++) {
|
||||
/******/ var item = outdatedSelfAcceptedModules[i];
|
||||
/******/ var moduleId = item.module;
|
||||
/******/ hotCurrentParents = [moduleId];
|
||||
/******/ try {
|
||||
/******/ __webpack_require__(moduleId);
|
||||
/******/ } catch(err) {
|
||||
/******/ if(typeof item.errorHandler === "function") {
|
||||
/******/ try {
|
||||
/******/ item.errorHandler(err);
|
||||
/******/ } catch(err) {
|
||||
/******/ if(!error)
|
||||
/******/ error = err;
|
||||
/******/ }
|
||||
/******/ } else if(!error)
|
||||
/******/ error = err;
|
||||
/******/ }
|
||||
/******/ }
|
||||
|
||||
/******/ // handle errors in accept handlers and self accepted module load
|
||||
/******/ if(error) {
|
||||
/******/ hotSetStatus("fail");
|
||||
/******/ return callback(error);
|
||||
/******/ }
|
||||
|
||||
/******/ hotSetStatus("idle");
|
||||
/******/ callback(null, outdatedModules);
|
||||
/******/ }
|
||||
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId])
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ exports: {},
|
||||
/******/ id: moduleId,
|
||||
/******/ loaded: false,
|
||||
/******/ hot: hotCreateModule(moduleId),
|
||||
/******/ parents: hotCurrentParents,
|
||||
/******/ children: []
|
||||
/******/ };
|
||||
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
|
||||
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.loaded = true;
|
||||
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
|
||||
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
|
||||
/******/ // __webpack_hash__
|
||||
/******/ __webpack_require__.h = function() { return hotCurrentHash; };
|
||||
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return hotCreateRequire(0)(0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
|
||||
|
||||
/***/ }
|
||||
/******/ ]);
|
||||
17
package.json
17
package.json
|
|
@ -5,17 +5,18 @@
|
|||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --progress --content-base dist/",
|
||||
"build": "webpack --progress --prod",
|
||||
"build": "webpack --progress",
|
||||
"test": "jest"
|
||||
},
|
||||
"author": "Kai Moseley",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.18.2",
|
||||
"babel-eslint": "^6.1.2",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
|
||||
"babel-plugin-transform-flow-strip-types": "^6.14.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.8.0",
|
||||
"babel-preset-es2015": "^6.14.0",
|
||||
"babel-preset-react": "^6.11.1",
|
||||
"css-loader": "^0.24.0",
|
||||
"eslint": "^3.2.2",
|
||||
|
|
@ -24,12 +25,14 @@
|
|||
"eslint-plugin-flowtype": "^2.18.1",
|
||||
"eslint-plugin-react": "^6.0.0",
|
||||
"node-sass": "^3.8.0",
|
||||
"react": "^15.3.1",
|
||||
"react-dom": "^15.3.1",
|
||||
"react-motion": "^0.4.4",
|
||||
"sass-loader": "^4.0.0",
|
||||
"style-loader": "^0.13.1",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-server": "^1.16.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"global": "^4.3.1",
|
||||
"lodash": "^4.17.2",
|
||||
"redux": "^3.6.0",
|
||||
"webpack": "^1.13.3",
|
||||
"webpack-dev-server": "^1.16.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
.board {
|
||||
box-shadow: 0 0 3px 1px rgba(0,0,0,0.4);
|
||||
background-color: #efefef;
|
||||
margin: 0 auto 1rem;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.play {
|
||||
background-color: #295e80;
|
||||
padding: 0.75rem 1rem;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 5px 0 rgba(0,0,0,0.7), inset 60px 0 50px -50px rgba(33, 199, 255, 0.48), inset -60px 0 50px -50px rgba(33, 199, 255, 0.48);
|
||||
transition-property: box-shadow;
|
||||
transition-duration: 350ms;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 3px 0 rgba(0,0,0,0.7), inset 75px 0 50px -50px rgba(33, 199, 255, 0.48), inset -75px 0 50px -50px rgba(33, 199, 255, 0.48);
|
||||
transition-property: box-shadow;
|
||||
transition-duration: 350ms;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.output {
|
||||
border-top: 1px solid #295e80;
|
||||
border-bottom: 1px solid #295e80;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
//@flow
|
||||
import React from 'react';
|
||||
import { Shell as ShellComponent } from '../Shell';
|
||||
import styles from './game.scss';
|
||||
|
||||
type Shell = {
|
||||
id: number,
|
||||
}
|
||||
|
||||
type GameProps = {
|
||||
shells: Shell[],
|
||||
shellClickHandler: (id: number) => void,
|
||||
startGameClickHandler: () => void,
|
||||
output: string,
|
||||
ballShellId: number,
|
||||
inProgress: boolean,
|
||||
shuffled: boolean,
|
||||
}
|
||||
|
||||
export const Game = (props: GameProps) => (
|
||||
<div>
|
||||
<div className={ styles.board } style={{ width: 10 + (props.shells.length * 110) }}>
|
||||
{ props.shells.map((shell, idx) =>
|
||||
<ShellComponent
|
||||
key={ shell.id }
|
||||
onClick={ () => props.shellClickHandler(shell.id) }
|
||||
position={ 10 + (idx * 110) }
|
||||
containsBall={ props.ballShellId === shell.id }
|
||||
displayBall={ !props.shuffling && !props.shuffled }
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className={ styles.play }
|
||||
onClick={ props.startGameClickHandler }
|
||||
disabled={ props.inProgress }
|
||||
>
|
||||
Play!
|
||||
</button>
|
||||
<p className={ styles.output }>{ props.output }</p>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
//@flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
createRandomNumberFn,
|
||||
createShells,
|
||||
randomizeArrayOrder,
|
||||
} from '../utils/gameUtils';
|
||||
import { Game } from './Game';
|
||||
import { isEqual } from 'lodash';
|
||||
|
||||
//=====================
|
||||
// Flow types
|
||||
//=====================
|
||||
type GameContainerState = {
|
||||
ballShellId: number,
|
||||
shells: Shell[],
|
||||
output: string,
|
||||
shuffleCount: number,
|
||||
shuffled: boolean,
|
||||
shuffling: boolean,
|
||||
inProgress: boolean,
|
||||
};
|
||||
|
||||
type GameContainerProps = {
|
||||
numberOfShells: number,
|
||||
shuffles: number,
|
||||
};
|
||||
|
||||
type Shell = {
|
||||
id: number,
|
||||
};
|
||||
|
||||
//======================
|
||||
// Game component
|
||||
//======================
|
||||
export class GameContainer extends Component {
|
||||
//Flow types
|
||||
state: GameContainerState;
|
||||
props: GameContainerProps;
|
||||
selectRandomShell: ?() => number;
|
||||
shufflingTimeout: ?number;
|
||||
_initializeGame: (numberOfShells: number) => void;
|
||||
_startGame: () => void;
|
||||
_setWinningShell: () => void;
|
||||
_shellClickHandler: (shellId: number) => void;
|
||||
_shuffleShells: () => Promise<boolean>;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
ballShellId: 0,
|
||||
shells: [],
|
||||
inProgress: false,
|
||||
shuffleCount: 0,
|
||||
shuffled: false,
|
||||
shuffling: false,
|
||||
output: `Click on 'Play' to begin!`,
|
||||
};
|
||||
this.selectRandomShell = null;
|
||||
this.shufflingTimeout = null;
|
||||
|
||||
//In general it's a good idea to bind methods which refer to this in the
|
||||
//constructor. It means, amongst other things, that the functions can be
|
||||
//used as direct event handlers rather than wrapping them in a function.
|
||||
this._initializeGame = this._initializeGame.bind(this);
|
||||
this._startGame = this._startGame.bind(this);
|
||||
this._setWinningShell = this._setWinningShell.bind(this);
|
||||
this._shellClickHandler = this._shellClickHandler.bind(this);
|
||||
this._shuffleShells = this._shuffleShells.bind(this);
|
||||
}
|
||||
|
||||
_initializeGame(numberOfShells: number): void {
|
||||
//This is designed to initialize the game whenever the component first mounts, or
|
||||
//whenever a new set of options are passed in via props.
|
||||
this.setState({
|
||||
ballShellId: 0,
|
||||
shells: createShells(numberOfShells),
|
||||
output: `Click on 'Play' to begin!`,
|
||||
shuffleCount: 0,
|
||||
shuffling: false,
|
||||
shuffled: false,
|
||||
inProgress: false,
|
||||
});
|
||||
this.selectRandomShell = createRandomNumberFn(0, numberOfShells - 1);
|
||||
}
|
||||
|
||||
_startGame(): void {
|
||||
this._setWinningShell();
|
||||
this.setState({
|
||||
inProgress: true,
|
||||
shuffleCount: 0,
|
||||
output: 'Keep an eye on the ball!',
|
||||
shuffling: false,
|
||||
shuffled: false,
|
||||
});
|
||||
setTimeout(() => this._shuffleShells().then(() =>
|
||||
this.setState({
|
||||
output: 'Pick a shell!',
|
||||
})), 1000);
|
||||
}
|
||||
|
||||
_setWinningShell(): void {
|
||||
//Randomly determine the winning shell (this is the shell which has the ball at the beginning of a round)
|
||||
if (!this.selectRandomShell) throw new Error('selectRandomShell not properly initialized!');
|
||||
this.setState({
|
||||
ballShellId: this.selectRandomShell(),
|
||||
});
|
||||
}
|
||||
|
||||
_shellClickHandler(shellId: number): void {
|
||||
//We only need to check if the shell is a winning shell if it is in progress and has been shuffled
|
||||
if (!this.state.inProgress) return this.setState({ output: `Click on 'Play' to begin!`});
|
||||
if (this.state.shuffling) return this.setState({ output: `Wait a second, I'm still shuffling!`});
|
||||
this.setState({
|
||||
output: this.state.ballShellId === shellId ? `You won! Click 'Play' to play again` : `Better luck next time! Click 'Play' to play again`,
|
||||
inProgress: false,
|
||||
shuffled: false,
|
||||
});
|
||||
}
|
||||
|
||||
_shuffleShells(): Promise<boolean> {
|
||||
//Shuffle the shells in a time based loop (the animation functionality uses springs, so there's no strict timer
|
||||
//on how long the animation plays for).
|
||||
this.setState({
|
||||
shuffling: true,
|
||||
output: 'Shuffling...',
|
||||
});
|
||||
|
||||
//Return a promise as this is an async operation
|
||||
return new Promise(res => {
|
||||
const shuffle = () => {
|
||||
const shuffleCount = this.state.shuffleCount + 1;
|
||||
this.setState({
|
||||
shells: randomizeArrayOrder(this.state.shells),
|
||||
shuffled: shuffleCount == this.props.shuffles,
|
||||
shuffleCount,
|
||||
shuffling: shuffleCount < this.props.shuffles,
|
||||
});
|
||||
if (this.state.shuffled) return res(true);
|
||||
this.shufflingTimeout = setTimeout(shuffle, 1000);
|
||||
};
|
||||
this.shufflingTimeout = setTimeout(shuffle, 1000);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this._initializeGame(this.props.numberOfShells);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(newProps: GameContainerProps) {
|
||||
if(!isEqual(newProps, this.props)) {
|
||||
//If the input properties change mid shuffle, cancel the shuffling function
|
||||
if (this.shufflingTimeout) clearTimeout(this.shufflingTimeout);
|
||||
this._initializeGame(newProps.numberOfShells);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Game
|
||||
shells={ this.state.shells }
|
||||
output={ this.state.output }
|
||||
ballShellId={ this.state.ballShellId }
|
||||
inProgress={ this.state.inProgress }
|
||||
shuffling={ this.state.shuffling }
|
||||
shuffled={ this.state.shuffled }
|
||||
shellClickHandler={ this._shellClickHandler }
|
||||
startGameClickHandler={ this._startGame }
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
//@flow
|
||||
import React from 'react';
|
||||
import styles from './options.scss';
|
||||
|
||||
type OptionsProps = {
|
||||
numberOfShells: number,
|
||||
shuffles: number,
|
||||
onInputChange: (event: Object) => void,
|
||||
};
|
||||
|
||||
export const Options = (props: OptionsProps) => (
|
||||
<div>
|
||||
<div className={ styles.input }>
|
||||
<label htmlFor="numberOfShells">Number of shells: </label>
|
||||
<select
|
||||
name="numberOfShells"
|
||||
value={ props.numberOfShells }
|
||||
onChange={ props.onInputChange }
|
||||
>
|
||||
<option value={3}>3</option>
|
||||
<option value={4}>4</option>
|
||||
<option value={5}>5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className={ styles.input }>
|
||||
<label htmlFor="shuffles">Number of shuffles: </label>
|
||||
<select
|
||||
name="shuffles"
|
||||
value={ props.shuffles }
|
||||
onChange={ props.onInputChange }
|
||||
>
|
||||
<option value={3}>3</option>
|
||||
<option value={5}>5</option>
|
||||
<option value={7}>7</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.input {
|
||||
|
||||
margin-bottom: 1rem;
|
||||
|
||||
select {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
//@flow
|
||||
import React from 'react';
|
||||
import styles from './shell.scss';
|
||||
import { Motion, spring } from 'react-motion';
|
||||
|
||||
type ShellProps = {
|
||||
onClick: () => void,
|
||||
position: number,
|
||||
containsBall: boolean,
|
||||
displayBall: boolean,
|
||||
}
|
||||
|
||||
export const Shell = (props: ShellProps) =>
|
||||
<Motion style={{x: spring(props.position, { stiffness: 276, damping: 26 })}}>
|
||||
{ ({ x }) => (
|
||||
<div>
|
||||
<div
|
||||
style={ {
|
||||
left: x
|
||||
} }
|
||||
className={ styles.shell }
|
||||
onClick={ props.onClick }
|
||||
>
|
||||
{ props.containsBall && props.displayBall &&
|
||||
<div className={ styles.ball } /> }
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Motion>;
|
||||
|
||||
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.shell {
|
||||
background-color: #295e80;
|
||||
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4), inset 0 60px 50px -50px rgba(33, 199, 255, 0.48), inset 0 -60px 50px -50px rgba(33, 199, 255, 0.48);
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
transition: 350ms;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4), inset 0 90px 50px -50px rgba(33, 199, 255, 0.48), inset 0 -90px 50px -50px rgba(33, 199, 255, 0.48);
|
||||
transition: 350ms;
|
||||
}
|
||||
}
|
||||
|
||||
.ball {
|
||||
background-color: #b00000;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 0 10px 3px rgba(0,0,0,0.4), inset 0 0 20px 2px rgba(255,255,255,0.4);
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 25px
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
//@flow
|
||||
import React from 'react';
|
||||
import { GameContainer } from '../GameContainer';
|
||||
import { Options } from '../Options';
|
||||
import styles from './shellGameApp.scss';
|
||||
|
||||
type ShellGameAppProps = {
|
||||
numberOfShells: number,
|
||||
shuffles: number,
|
||||
onInputChange: (event: Object) => void,
|
||||
};
|
||||
|
||||
export const ShellGameApp = (props: ShellGameAppProps) => (
|
||||
<div className={ styles.app }>
|
||||
<h1>The game of shells</h1>
|
||||
<GameContainer
|
||||
numberOfShells={ props.numberOfShells }
|
||||
shuffles={ props.shuffles }
|
||||
/>
|
||||
<Options
|
||||
numberOfShells={ props.numberOfShells }
|
||||
shuffles={ props.shuffles }
|
||||
onInputChange={ props.onInputChange }
|
||||
/>
|
||||
<p className={ styles.info }>Built using React, and React-motion for the shuffling animations.</p>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.app {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
width: 700px;
|
||||
margin: 5rem auto;
|
||||
box-shadow: 0 0 3px 1px rgba(0,0,0,0.4);
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
//@flow
|
||||
import React, { Component } from 'react';
|
||||
import { ShellGameApp } from './ShellGameApp';
|
||||
|
||||
type ShellGameAppContainerState = {
|
||||
numberOfShells: number,
|
||||
shuffles: number,
|
||||
}
|
||||
|
||||
export class ShellGameAppContainer extends Component {
|
||||
state: ShellGameAppContainerState;
|
||||
_handleInputUpdate: (event: Object) => void;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
numberOfShells: 3,
|
||||
shuffles: 5,
|
||||
};
|
||||
this._handleInputUpdate = this._handleInputUpdate.bind(this);
|
||||
}
|
||||
|
||||
//Simple form handler (takes the name and value of an input and adds it to the state if preset).
|
||||
_handleInputUpdate(e: Object): void {
|
||||
if (!this.state.hasOwnProperty(e.target.name)) throw new Error('Form input name should be on the GameShellAppContainer state');
|
||||
this.setState({
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ShellGameApp
|
||||
numberOfShells={ this.state.numberOfShells }
|
||||
shuffles={ this.state.shuffles }
|
||||
onInputChange={ this._handleInputUpdate }
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { Game } from './Game';
|
||||
import { GameContainer } from './GameContainer';
|
||||
import { ShellGameApp } from './ShellGameApp';
|
||||
import { ShellGameAppContainer } from './ShellGameAppContainer';
|
||||
import { Shell } from './Shell';
|
||||
import { Options } from './Options';
|
||||
|
||||
export {
|
||||
Game,
|
||||
GameContainer,
|
||||
ShellGameApp,
|
||||
ShellGameAppContainer,
|
||||
Shell,
|
||||
Options,
|
||||
}
|
||||
28
src/index.js
28
src/index.js
|
|
@ -1,9 +1,21 @@
|
|||
//@flow
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { ShellGameAppContainer } from './components';
|
||||
import { generateReducer } from './redux-arg/generateReducer';
|
||||
import { createStore, compose } from 'redux';
|
||||
|
||||
const config = {
|
||||
anObject: {
|
||||
lowerLevelStuff: '',
|
||||
moreLowerLevelStuff: '',
|
||||
},
|
||||
anotherObject: {
|
||||
more: '',
|
||||
andAgain: '',
|
||||
},
|
||||
};
|
||||
|
||||
createStore(
|
||||
generateReducer(config),
|
||||
compose(window.devToolsExtension ? window.devToolsExtension() : f => f)
|
||||
);
|
||||
|
||||
|
||||
|
||||
ReactDOM.render(
|
||||
<ShellGameAppContainer />,
|
||||
document.getElementById('react-shell-game'
|
||||
));
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
//@flow
|
||||
import { combineReducers } from 'redux';
|
||||
import { reduce } from 'lodash';
|
||||
|
||||
export function generateReducer(reducerMap: Object): (Object) => Object {
|
||||
return combineReducers(reduce(reducerMap, (memo, propValue, propName) => ({
|
||||
...memo,
|
||||
[propName]: objectReducer(propValue),
|
||||
}), reducerMap));
|
||||
}
|
||||
|
||||
function objectReducer(initialState: Object): (Object) => (Object, Object) => Object {
|
||||
return (state = initialState, { type } = {} ) => {
|
||||
switch(type) {
|
||||
case 'BLARG!':
|
||||
return state;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
//@flow
|
||||
type Shell = {
|
||||
id: number,
|
||||
};
|
||||
//======================
|
||||
// Utility functions
|
||||
//======================
|
||||
//Generate a random number generator which will return values within a given range.
|
||||
export function createRandomNumberFn(minimum: number, maximum: number): () => number {
|
||||
return () => minimum + Math.floor(Math.random() * ((maximum-minimum) + 1));
|
||||
}
|
||||
|
||||
|
||||
//Create a randomized array based on an input array.
|
||||
export function randomizeArrayOrder(array: []): [] {
|
||||
let oldArray = [ ...array ];
|
||||
let newArr = [];
|
||||
|
||||
while(oldArray.length) {
|
||||
newArr = [...newArr, ...oldArray.splice(createRandomNumberFn(0, oldArray.length)(), 1)];
|
||||
}
|
||||
|
||||
return newArr;
|
||||
}
|
||||
|
||||
|
||||
export function createShells(numberOfShells: number): Shell[] {
|
||||
/* The shell containing the ball will be tracked independently of shells, but
|
||||
in order to properly keep track of components (particularly useful with certain animation libraries),
|
||||
a fixed id is desirable. */
|
||||
let newShellArr = [];
|
||||
for (let i=0; i<numberOfShells; i++) {
|
||||
newShellArr = [ ...newShellArr, {
|
||||
id: i,
|
||||
}];
|
||||
}
|
||||
return newShellArr;
|
||||
}
|
||||
|
|
@ -4,21 +4,10 @@ const path = require('path');
|
|||
const PATH_ESLINT = path.join(__dirname, '.eslintrc.js');
|
||||
const PATH_SRC = path.join(__dirname, 'src');
|
||||
|
||||
const isProd = process.argv.indexOf('--prod') >= 0;
|
||||
const envPlugins = isProd ? [
|
||||
new webpack.optimize.OccurrenceOrderPlugin(true),
|
||||
new webpack.optimize.DedupePlugin(),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: { warnings: false, unused: true, dead_code: true },
|
||||
output: { comments: false }
|
||||
}),
|
||||
] : [];
|
||||
const envOptions = isProd ? {} : { devtool: 'inline-source-map' };
|
||||
|
||||
module.exports = Object.assign(envOptions, {
|
||||
module.exports = {
|
||||
context: __dirname,
|
||||
entry: {
|
||||
'shell-game': PATH_SRC
|
||||
'test': PATH_SRC
|
||||
},
|
||||
devServer: {
|
||||
inline: true,
|
||||
|
|
@ -38,18 +27,6 @@ module.exports = Object.assign(envOptions, {
|
|||
exclude: [],
|
||||
loader: "babel-loader",
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loaders: ['style', 'css', 'sass']
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loaders: [
|
||||
'style',
|
||||
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
|
||||
'sass'
|
||||
]
|
||||
}
|
||||
],
|
||||
preLoaders: [ { test: /\.js$/, include: [PATH_SRC], loader: 'eslint-loader' } ]
|
||||
},
|
||||
|
|
@ -60,7 +37,6 @@ module.exports = Object.assign(envOptions, {
|
|||
],
|
||||
},
|
||||
plugins: [
|
||||
...envPlugins,
|
||||
function () {
|
||||
this.plugin('done', () =>
|
||||
setTimeout(() => console.log('\nFinished at ' + (new Date).toLocaleTimeString() + '\n'), 10)
|
||||
|
|
@ -68,4 +44,4 @@ module.exports = Object.assign(envOptions, {
|
|||
},
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
]
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue