The document outlines the development process of an arcade puzzle game called 'Mimstris' using React and Redux, detailing the motivations behind the project and various challenges encountered during programming. It highlights key aspects such as game rendering, state management, and the implementation of features like collision detection and line clearing. Additionally, the author shares insights gained from the experience, including the use of modern JavaScript and various libraries in the development process.

1. MimsH.Wright
FreelanceSoftwareDeveloper
hallo@mims.berlin
@mimshwright
github.com/mimshwright/

2. Mimstris:
Building an arcade puzzle
game in React / Redux

3. Why?
How?
What?
ChoosingtomakeTetris
Challengesofcodingagameinreact
Takeawaysfromtheexperience

4. Why?

7. Thatsoundsfun
•Playwithmyson
•Makecrazyshapesandstuff
•Tryoutsomenewframeworks,etc.

8. JavaScript circa 2014

12. const game = () =>
NeedstobeES2017
cuzit’s2017,obvs.

14. Reductris
I’llcallit…

15. 👈

16. Reductris
Reactris
I’llcallit…

18. Reductris
Reactris
Mimstris
I’llcallit…

19. How?

20. 1.
2.
3.
Buildingthegame
Renderingtocanvas
TheReduxStore

21. 1.
2.
3.
Buildingthegame
Renderingtocanvas
TheReduxStore

22. board = [
[ 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, 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 ],
[ 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, 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 ],
[ 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, 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 ],
[ 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, 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 ],
]

23. piece = [
[ 0, 1, 0 ],
[ 0, 1, 0 ],
[ 0, 1, 1 ],
]

24. board = [
[ 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, 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 ],
[ 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, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 1, 1, 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, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
]

25. “GameLoop”
init()
update()
draw()
every frame

26. •Timingofpiecemovement(timesincelastupdate)
•Respondingtouserinput(seepressedlater)
•Piecematrixpositionandrotation
•Collisiondetection(foreachsquare,iftheyarebothnon-zero)
•Clearinglines(Ifawholerowisnon-zero)
•Scorekeeping
•Configuration
Insideupdate()

27. PushMethod(event-driven)

28. PullMethod(polling)

29. Pressed.js

30. Ihadaproblem.
Isawtherewereseveralgoodsolutions.
Imademyownthatwassliiiightlydifferent.

31. pressed.js
Trackswhichkeysarecurrentlypressed

32. 1.
2.
3.
Buildingthegame
Renderingtocanvas
TheReduxStore

33. init()
Before React
update()
draw()
init()
update()
react
draw()
every frame every frame
componentDidUpdate()
render()
React + Redux
init()
update()
redux
store
react
draw()
every frame
componentDidUpdate()
subscribe() / connect()
dispatch()

35. canvasRenderer.js
drawGame(board, piece)
clear()
drawMatrix(board)
drawBlock(x,y,color)
drawMatrix(piece)
drawBlock(x,y,color)

36. 1.
2.
3.
Buildingthegame
Renderingtocanvas
TheReduxStore

38. What?

40. Takeaways…

41. • Babel / ES6
• React
• Redux (incl. reselect, redux-acitons, etc.)
• Ducks
• Lodash
• Writing an npm module
• Mocha, Chai, Tape, AVA
• Atom
ThingsItriedforthefirsttime…

42. 😍ES6 😍

43. Configfiles!

44. •rendering
•matrixmaths
Usemodulestohandleisolatedfunctionality
Makesitmucheasiertorefactorlater

45. Weirdpiecesarefunbutthey’renotinthegameforareason.

46. •Actions
•ActionCreators
•Reducers
•Selectors
Ducksisaguidelineforcombining…
…intoasinglefile.
(Askmeabout boilerplate-reducer)
Ducks.

47. Stresssaver

48. justworks.
DrawingtothecanvasinReact

49. Unittestearly…foryoursanity

50. arobotwhois
clickingonthings
update()is

51. Memoize!

52. Make a thing for fun.

53. mimstris.surge.sh
github.com/mimshwright/mimstris

54. MimsH.Wright
FreelanceSoftwareDeveloper
hallo@mims.berlin
@mimshwright
github.com/mimshwright/