[ { "path": ".babelrc", "content": "{\n \"presets\": [\"react\", \"es2015\"]\n}\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n \"extends\": \"airbnb\",\n \"installedESLint\": true,\n \"plugins\": [\n \"react\"\n ],\n \"rules\": {\n \"react/jsx-filename-extension\": [2, { extensions: ['.js','.jsx'] }],\n \"func-names\": [0],\n \"new-cap\": [2, { newIsCap: true ,capIsNew: true, capIsNewExceptions: ['List', 'Map']}],\n \"linebreak-style\": [0]\n },\n \"env\": {\n \"browser\": true\n }\n};" }, { "path": ".gitignore", "content": "### Node template\n# Logs\nlogs\n*.log\nnpm-debug.log*\n.DS_Store\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules\njspm_packages\n\n# Optional npm cache directory\n.npm\n\n# Optional REPL history\n.node_repl_history\n\n# Created by .ignore support plugin (hsz.mobi)\n.idea\n.idea/workspace.xml\n.idea/encodings.xml\n.idea/jsLibraryMappings.xml\n.idea/misc.xml\n.idea/modules.xml\n.idea/react-tetris.iml\n.idea/vcs.xml\n.idea/watcherTasks.xml" }, { "path": "README-EN.md", "content": "### 中文介绍\n请查看 [README.md](https://github.com/chvin/react-tetris/blob/master/README.md)\n\n----\n## Use React, Redux, Immutable to code Tetris.\n\n----\nTetris is a classic game that has always been enthusiastically implemented in various languages. There are many versions of it in Javascript, and using React to do Tetris has become my goal.\n\nOpen [https://chvin.github.io/react-tetris/?lan=en](https://chvin.github.io/react-tetris/?lan=en) to play!\n\n----\n### Interface preview\n![Interface review](https://img.alicdn.com/tps/TB1Ag7CNXXXXXaoXXXXXXXXXXXX-320-483.gif)\n\nThis is the normal speed of recording, you can see it has a smooth experience.\n\n### Responsive\n![Responsive](https://img.alicdn.com/tps/TB1AdjZNXXXXXcCapXXXXXXXXXX-480-343.gif)\n\nNot only refers to the screen adaptation, `but the change of input depending on your platform, use of the keyboard in the PC and in the phone using the touch as input`:\n\n![phone](https://img.alicdn.com/tps/TB1kvJyOVXXXXbhaFXXXXXXXXXX-320-555.gif)\n\n### Data persistence\n![Data persistence](https://img.alicdn.com/tps/TB1EY7cNXXXXXXraXXXXXXXXXXX-320-399.gif)\n\nWhat's the worst can happen when you're playing stand-alone games? Power outage. The state is stored in the `localStorage` by subscribing to `store.subscribe`, which records exactly all the state. Web page refreshes, the program crashes, the phone is dead, just re-open the connection and you can continue playing.\n\n### Redux state preview ([Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension))\n![Redux state preview](https://img.alicdn.com/tps/TB1hGQqNXXXXXX3XFXXXXXXXXXX-640-381.gif)\n\nRedux manages all the state that should be stored, which is a guarantee to be persisted as mentioned above.\n\n----\nThe Game framework is the use of [React](https://facebook.github.io/react/) + [Redux](http://redux.js.org/), together with [Immutable.js](https://facebook.github.io/immutable-js/).\n\n## 1. What is Immutable.js?\nImmutable is data that can not be changed once it is created. Any modification or addition to or deletion of an Immutable object returns a new Immutable object.\n\n### Acquaintance：\nLet's look at the following code:\n``` JavaScript\nfunction keyLog(touchFn) {\n let data = { key: 'value' };\n f(data);\n console.log(data.key); // Guess what will be printed?\n}\n```\nIf we do not look at `f`, and do not know what it did to `data`, we can not confirm what will be printed. But if `data` is *Immutable*, you can be sure that `data` haven't changed and `value` is printed:\n``` JavaScript\nfunction keyLog(touchFn) {\n let data = Immutable.Map({ key: 'value' });\n f(data);\n console.log(data.get('key')); // value\n}\n```\n\nJavaScript uses a reference assignment, meaning that the new object simply refers to the original object, changing the new will also affect the old:\n``` JavaScript\nfoo = {a: 1}; bar = foo; bar.a = 2;\nfoo.a // 2\n```\nAlthough this can save memory, when the application is complex, it can result in the state not being controllable, posing a big risk. The advantages of saving memory, in this case, become more harm than good.\n\nWith Immutable.js the same doesn't happen:\n``` JavaScript\nfoo = Immutable.Map({ a: 1 }); bar = foo.set('a', 2);\nfoo.get('a') // 1\n```\n\n### Concise：\nIn `Redux`, it's a good practice to return a new object (array) to each `reducer`, so we often see code like this:\n``` JavaScript\n// reducer\n...\nreturn [\n ...oldArr.slice(0, 3),\n newValue,\n ...oldArr.slice(4)\n];\n```\nIn order modify one item in the array and return the new object (array), the code has this strange appearance above, and it becomes worse the deeper the data structure.\nLet's take a look at Immutable.js's approach:\n``` JavaScript\n// reducer\n...\nreturn oldArr.set(4, newValue);\n```\nIsn't it simpler?\n\n### About “===”：\nWe know that ```===``` operator for the `Object` and `Array` compares the reference to the address of the object rather than its \"value comparison\", such as:\n``` JavaScript\n{a:1, b:2, c:3} === {a:1, b:2, c:3}; // false\n[1, 2, [3, 4]] === [1, 2, [3, 4]]; // false\n```\n\nTo achieve the above we could only `deepCopy` and `deepCompare` to traverse the objects, but this is not only cumbersome it also harms performance.\n\nLet's check `Immutable.js` approach!\n``` JavaScript\nmap1 = Immutable.Map({a:1, b:2, c:3});\nmap2 = Immutable.Map({a:1, b:2, c:3});\nImmutable.is(map1, map2); // true\n\n// List1 = Immutable.List([1, 2, Immutable.List[3, 4]]);\nList1 = Immutable.fromJS([1, 2, [3, 4]]);\nList2 = Immutable.fromJS([1, 2, [3, 4]]);\nImmutable.is(List1, List2); // true\n```\nIt's smooth like a breeze blowing.\n\nReact has a big trick when it comes to performance tuning. It uses `shouldComponentUpdate()` to check (as the name says) if the component should be re-rendered, it returns `true` by default, which always executes the `render()` method followed by the Virtual DOM comparison.\n\nIf we don't return a new object when making state updates, we would have to use `deepCopy` and `deepCompare` to calculate if the new state is equal to the previous one, the consumption of the performance is not worth it. With Immutable.js, it's easy to compare deep structures using the method above.\n\nFor Tetris, imagine that the board is a `two-dimensional array`. The square that can be moved is `shape (also a two-dimensional array) + coordinates`. The superposition of the board and the box is composed of the final result of `Matrix`. The properties above are built by `Immutable.js`, through its comparison method, you can easily write `shouldComponentUpdate`. Source Code:[/src/components/matrix/index.js#L35](https://github.com/chvin/react-tetris/blob/master/src/components/matrix/index.js#L35)\n\nImmutable learning materials:\n* [Immutable.js](http://facebook.github.io/immutable-js/)\n* [Immutable Detailed and React in practice](https://github.com/camsong/blog/issues/3)\n\n\n----\n## 2. How to use Immutable.js in Redux\nGoal: `state` -> Immutable.\nImportant plug-ins: [gajus/redux-immutable](https://github.com/gajus/redux-immutable)\nWill be provided by the original Redux combineReducers provided by the above plug-ins:\n``` JavaScript\n// rootReducers.js\n// import { combineReducers } from 'redux'; // The old method\nimport { combineReducers } from 'redux-immutable'; // The new method\n\nimport prop1 from './prop1';\nimport prop2 from './prop2';\nimport prop3 from './prop3';\n\nconst rootReducer = combineReducers({\n prop1, prop2, prop3,\n});\n\n\n// store.js\n// Create a store method and the same general\nimport { createStore } from 'redux';\nimport rootReducer from './reducers';\n\nconst store = createStore(rootReducer);\nexport default store;\n```\nThrough the new `combineReducers` the store object will be stored as an Immutable.js object, the container will be slightly different, but this is what we want:\n``` JavaScript\nconst mapStateToProps = (state) => ({\n prop1: state.get('prop1'),\n prop2: state.get('prop2'),\n prop3: state.get('prop3'),\n next: state.get('next'),\n});\nexport default connect(mapStateToProps)(App);\n```\n\n\n----\n## 3. Web Audio Api\nThere are many different sound effects in the game, but in fact we keep only a reference to a sound file: [/build/music.mp3](https://github.com/chvin/react-tetris/blob/master/build/music.mp3). With the help of `Web Audio Api`, you can play audio in millisecond precision, with a high frequency, which is not possible with the `