API tools faq
paste
Guest User

Untitled

a guest
Jun 17th, 2018
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.06 KB | None | 0 0
raw download clone embed print report
  1. import React, {Component, Fragment} from 'react';
  2. import ControlItem from './components/control'
  3. import {Node, Tree} from "./utils/main";
  4. import PopUp from './components/popUp'
  5. import './style/style.scss';
  6.  
  7.  
  8.  
  9.  
  10. class App extends Component {
  11. constructor() {
  12. super();
  13.  
  14. this.state = {
  15. choosenControl: "",
  16. cheatEnabled: false,
  17. bonusCount : 30,
  18. bangMode : false,
  19. twinMode : false,
  20. showC2a : false,
  21. dataTree : [],
  22. array: [
  23. [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  24. [0, 0, 2, 0, 2, 0, 0, 4, 0, 0, 0, 3, 0, 3, 0, 0, 2, 0, 2, 0, 0, 4, 0, 0, 0, 3, 0, 3, 0, 0],
  25. [0, 0, 0, 2, 0, 0, 4, 4, 4, 0, 0, 0, 3, 0, 0, 0, 0, 2, 0, 0, 4, 4, 4, 0, 0, 0, 3, 0, 0, 0],
  26. [0, 0, 2, 0, 2, 0, 0, 4, 0, 0, 0, 3, 0, 3, 0, 0, 2, 0, 2, 0, 0, 4, 0, 0, 0, 3, 0, 3, 0, 0],
  27. [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  28. [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  29. [0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0],
  30. [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
  31. [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
  32. [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
  33. [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
  34. [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
  35. [0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
  36. [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  37. [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  38. [0, 0, 2, 0, 2, 0, 0, 4, 0, 0, 0, 3, 0, 3, 0, 0, 2, 0, 2, 0, 0, 4, 0, 0, 0, 3, 0, 3, 0, 0],
  39. [0, 0, 0, 2, 0, 0, 4, 4, 4, 0, 0, 0, 3, 0, 0, 0, 0, 2, 0, 0, 4, 4, 4, 0, 0, 0, 3, 0, 0, 0],
  40. [0, 0, 2, 0, 2, 0, 0, 4, 0, 0, 0, 3, 0, 3, 0, 0, 2, 0, 2, 0, 0, 4, 0, 0, 0, 3, 0, 3, 0, 0],
  41. [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  42. [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  43. [0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0],
  44. [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
  45. [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
  46. [0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
  47. [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
  48. [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
  49. [0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
  50. [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  51. ],
  52. color: {
  53. 0 : 'rgba(15, 0, 9, 0.83)',
  54. 1 : 'rgba(255, 15, 167, 1)',
  55. 2 : 'rgba(157, 21, 253, 1)' ,
  56. 3 : 'rgba(118, 253, 21, 1)',
  57. 4 : 'rgba(21, 234, 253, 0.86)'
  58. }
  59. }
  60. }
  61.  
  62. componentWillMount(){
  63. this.getDataFromListTree()
  64. }
  65.  
  66. renderControl = () => {
  67. return Object.keys(this.state.color).map((item) => {
  68. let color = this.state.color[item];
  69.  
  70. if (this.state.choosenControl === this.state.color[item]) {
  71. this.color = color;
  72. return <ControlItem id={item} key={item} color={color} value={item}
  73. handleControlClick={(e) => this.handleControlClick(e)} bgColor={color}/>
  74. }
  75. return <ControlItem id={item} key={item} color={color} value={item}
  76. handleControlClick={(e) => this.handleControlClick(e)}/>
  77. })
  78. };
  79.  
  80.  
  81. getDataFromListTree = () => {
  82.  
  83. this.parse(this.treeBuilder(Tree, Node)) // array object with rowPos and cellPoss
  84. };
  85.  
  86. treeBuilder = (Tree, Node) => {
  87. let result = new Tree(data);
  88. const data = this.state.array;
  89.  
  90. function iterate(arr) {
  91. arr.map(function (item) {
  92.  
  93. if (typeof(item) === 'object') {
  94. result._root.children.push(new Node(item));
  95. iterate(item)
  96. }
  97. })
  98. }
  99. iterate(data);
  100. return result;
  101. };
  102.  
  103.  
  104. cellList = (cellList) => {
  105. let count = 0;
  106. return cellList.map((item) => {
  107. count += 1;
  108. this.cellCount = count;
  109.  
  110. return (
  111. <div className={item.active ? `grid__cell filled` : 'grid__cell'}
  112. key={count} data-color={this.state.color[item.cell]}
  113. onClick={(e) => this.handleCellClick(e)}
  114. data-rowpos={item.rowPos}
  115. data-cellpos={item.cellPos}
  116. data-cell={item.cell}
  117. style={item.active ? {backgroundColor: item.color} : null}>
  118. <span className={'placeholder'}>{item.cell}</span>
  119. </div>
  120. )
  121. })
  122. };
  123.  
  124. parse = (data) => {
  125. let parseData = [];
  126.  
  127. data._root.children.map((row, index) => {
  128. let rowIndex = index;
  129. return row.data.map((cell, index) => {
  130. return parseData.push({
  131. cell: cell,
  132. rowPos: rowIndex,
  133. cellPos: index,
  134. active: false,
  135. color: this.state.color[cell]
  136. })
  137. })
  138. });
  139.  
  140. if(this.state.dataTree.toString() === parseData.toString()) {
  141. return parseData
  142. }
  143.  
  144. this.setState({
  145. dataTree : parseData
  146. });
  147.  
  148. // console.log(parseData);
  149.  
  150. return parseData
  151. };
  152.  
  153. handleControlClick = (e) => {
  154. let controlId = e.target.id;
  155. this.setState({choosenControl: this.state.color[controlId]});
  156.  
  157. e.target.classList.toggle('active');
  158. };
  159.  
  160.  
  161. bangFillCell = (cellRow, cellPos, step) => {
  162. let tree = this.state.dataTree;
  163.  
  164. if(this.state.bonusCount <= 0) {
  165. this.setState({showC2a: true});
  166. return false
  167. }
  168.  
  169. if (step >= 1 && cellRow >= 0 && cellPos >= 0) {
  170.  
  171. for (let i = 0; i < tree.length; i++) {
  172. let actualRowPos = tree[i].rowPos;
  173. let actualCellPos = tree[i].cellPos;
  174.  
  175. if (cellRow === actualRowPos && cellPos === actualCellPos) {
  176. tree[i].active = true;
  177. this.setState({dataTree: tree});
  178. }
  179.  
  180. if (cellRow === actualRowPos && cellPos + step === actualCellPos) {
  181. tree[i].active = true;
  182. this.setState({dataTree: tree});
  183. }
  184.  
  185. if (cellRow === actualRowPos && cellPos - step === actualCellPos) {
  186. tree[i].active = true;
  187. this.setState({dataTree: tree});
  188. }
  189. if (cellRow - step === actualRowPos && cellPos === actualCellPos) {
  190. tree[i].active = true;
  191. this.setState({dataTree: tree});
  192. }
  193.  
  194. if (cellRow - step === actualRowPos && cellPos + step === actualCellPos) {
  195. tree[i].active = true;
  196. this.setState({dataTree: tree});
  197. }
  198.  
  199. if (cellRow - step === actualRowPos && cellPos - step === actualCellPos) {
  200. tree[i].active = true;
  201. this.setState({dataTree: tree});
  202. }
  203. if (cellRow + step === actualRowPos && cellPos === actualCellPos) {
  204. tree[i].active = true;
  205. this.setState({dataTree: tree});
  206. }
  207.  
  208. if (cellRow + step === actualRowPos && cellPos + step === actualCellPos) {
  209. tree[i].active = true;
  210. this.setState({dataTree: tree});
  211. }
  212.  
  213. if (cellRow + step === actualRowPos && cellPos - step === actualCellPos) {
  214. tree[i].active = true;
  215. this.setState({dataTree: tree});
  216. }
  217. }
  218. this.bangFillCell(cellRow , cellPos, step - 1);
  219. this.bangFillCell(cellRow -1, cellPos, step - 1);
  220. this.bangFillCell(cellRow +1, cellPos, step -1);
  221. this.bangFillCell(cellRow, cellPos-1, step - 1);
  222. this.bangFillCell(cellRow, cellPos+1, step -1);
  223.  
  224. this.setState({bonusCount : this.state.bonusCount - 1})
  225. }
  226. };
  227.  
  228. twinFillCell = (cellRow, cellPos, cellNum, steps) => {
  229. let tree = this.state.dataTree;
  230.  
  231. if(this.state.bonusCount <= 0) {
  232. this.setState({showC2a: true});
  233. return false
  234. }
  235.  
  236. if (steps >= 1) {
  237.  
  238. for (let i = 0; i < tree.length; i++) {
  239. let actualRowPos = tree[i].rowPos;
  240. let actualCellPos = tree[i].cellPos;
  241.  
  242. if (cellRow === actualRowPos && cellPos === actualCellPos && cellNum === tree[i].cell) {
  243. tree[i].active = true;
  244. this.setState({dataTree: tree});
  245.  
  246.  
  247. }
  248.  
  249. if (cellRow === actualRowPos && cellPos - 1 === actualCellPos && cellNum === tree[i].cell) {
  250. tree[i].active = true;
  251. this.setState({dataTree: tree})
  252. }
  253.  
  254. if (cellRow -1 === actualRowPos && cellPos -1 === actualCellPos && cellNum === tree[i].cell) {
  255. tree[i].active = true;
  256. this.setState({dataTree: tree})
  257. }
  258.  
  259. if (cellRow -1 === actualRowPos && cellPos === actualCellPos && cellNum === tree[i].cell) {
  260. tree[i].active = true;
  261. this.setState({dataTree: tree})
  262. }
  263. if (cellRow -1 === actualRowPos && cellPos + 1 === actualCellPos && cellNum === tree[i].cell) {
  264. tree[i].active = true;
  265. this.setState({dataTree: tree})
  266. }
  267. if (cellRow === actualRowPos && cellPos + 1 === actualCellPos && cellNum === tree[i].cell) {
  268. tree[i].active = true;
  269. this.setState({dataTree: tree})
  270. }
  271. if (cellRow + 1 === actualRowPos && cellPos +1 === actualCellPos && cellNum === tree[i].cell) {
  272. tree[i].active = true;
  273. this.setState({dataTree: tree})
  274. }
  275. if (cellRow + 1 === actualRowPos && cellPos === actualCellPos && cellNum === tree[i].cell) {
  276. tree[i].active = true;
  277. this.setState({dataTree: tree})
  278. }
  279. if (cellRow+ 1 === actualRowPos && cellPos -1 === actualCellPos && cellNum === tree[i].cell) {
  280. tree[i].active = true;
  281. this.setState({dataTree: tree})
  282. }
  283.  
  284.  
  285. }
  286.  
  287.  
  288. this.twinFillCell(cellRow - 1, cellPos, cellNum, steps - 1);
  289. this.twinFillCell(cellRow + 1, cellPos, cellNum, steps - 1);
  290. this.twinFillCell(cellRow, cellPos - 1, cellNum, steps - 1);
  291. this.twinFillCell(cellRow, cellPos + 1, cellNum, steps - 1);
  292. this.twinFillCell(cellRow + 1, cellPos + 1, cellNum, steps - 1);
  293. this.twinFillCell(cellRow - 1, cellPos - 1, cellNum, steps - 1);
  294.  
  295.  
  296.  
  297. this.setState({bonusCount : this.state.bonusCount - 1})
  298. }
  299. };
  300.  
  301. fillCell = (cellRow , cellPos) => {
  302. this.setState({
  303. dataTree: this.state.dataTree.map((item) => {
  304. if (cellRow === item.rowPos && cellPos === item.cellPos) {
  305. item.active = true;
  306. }
  307. return item
  308. })
  309. })
  310. };
  311.  
  312.  
  313. handleCellClick = (e) => {
  314. let cell = e.target;
  315. let choosenNum = this.state.choosenControl;
  316. const clickedCellRow = Number(cell.getAttribute('data-rowpos'));
  317. const clickedCellPos = Number(cell.getAttribute('data-cellpos'));
  318. const cellNum = Number(cell.getAttribute('data-cell'));
  319.  
  320. if (this.state.bangMode) {
  321. this.bangFillCell(clickedCellRow, clickedCellPos, 2)
  322. }
  323.  
  324. if (this.state.twinMode) {
  325. this.twinFillCell(clickedCellRow, clickedCellPos, cellNum , 4)
  326. }
  327.  
  328. if (choosenNum === cell.getAttribute('data-color')) {
  329. this.fillCell(clickedCellRow, clickedCellPos)
  330. }
  331. };
  332.  
  333. handleCheatClick = (e) => {
  334. e.target.classList.toggle('active');
  335.  
  336.  
  337. if(!this.state.cheatEnabled) {
  338. this.setState({
  339. dataTree: this.state.dataTree.map((item) => {
  340.  
  341. item.active = true;
  342. return item
  343. })
  344. });
  345. this.setState({cheatEnabled: !this.state.cheatEnabled});
  346. return false;
  347. }
  348.  
  349.  
  350. this.setState({cheatEnabled: !this.state.cheatEnabled});
  351. this.setState({
  352. dataTree: this.state.dataTree.map((item) => {
  353.  
  354. item.active = false;
  355. return item
  356. })
  357. })
  358.  
  359. };
  360.  
  361. handleBangClick = (e) => {
  362. this.setState({
  363. bangMode : !this.state.bangMode,
  364. twinMode : false
  365. })
  366.  
  367. };
  368.  
  369. handleTwinClick = (e) => {
  370. this.setState({
  371. bangMode : false,
  372. twinMode : !this.state.twinMode
  373. })
  374.  
  375. };
  376.  
  377. handleCloser = (e) => {
  378. this.setState({showC2a : false})
  379. };
  380.  
  381.  
  382.  
  383.  
  384.  
  385.  
  386. render() {
  387. let bonusCount = this.state.bonusCount >= 0 ? this.state.bonusCount : 0;
  388.  
  389. return (
  390. <Fragment>
  391. <div className="wrapper">
  392. <div className="inner-container">
  393.  
  394.  
  395. <div className="controls">
  396. {this.renderControl()}
  397. <div className="cheats">
  398. <a href="javascript:;" className={this.state.twinMode ? 'twins active' : 'twins'} onClick={(e) => this.handleTwinClick(e)}><span className={'bang-0'}>T</span><span className={'bang-1'}>W</span><span className={'bang-2'}>I</span><span className={'bang-3'}>N</span><span className={'bang-4'}>S</span></a>
  399. <span className={'bang-count'}>{` ${bonusCount}x `}</span>
  400. <a href="javascript:;" onClick={(e) => this.handleBangClick(e)} className={this.state.bangMode ? 'bang active' : 'bang'}>
  401. <span className={'bang-0'}>B</span><span className={'bang-1'}>A</span><span
  402. className={'bang-2'}>N</span><span className={'bang-3'}>G</span><span
  403. className={'bang-4'}>!</span></a>
  404. <a href="javascript:;" className={'cheat-btn'}
  405. onClick={(e) => this.handleCheatClick(e)}>cheat</a>
  406. </div>
  407.  
  408. </div>
  409. <div className="grid">
  410. {this.cellList(this.state.dataTree)}
  411.  
  412. </div>
  413.  
  414. </div>
  415. </div>
  416.  
  417. <PopUp className={this.state.showC2a ? 'pop-up active' : 'pop-up'} innerText="Sorry, you dont have more bonus items!" handleCloser={(e) => this.handleCloser(e)} />
  418.  
  419.  
  420. </Fragment>
  421.  
  422.  
  423. );
  424. }
  425. }
  426.  
  427. export default App;
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!