Additional improvements #16
Conversation
PitPik
commented
Jan 30, 2023
PitPik
commented
- remove all row/col dependencies (app, css, ..). Moved to automate level change introduce event delegation simplify builder logic introduce documentFragment for faster rendering cleaner table model with Object.create(null) (no more prototypes involved) Let's flex-box do calculations for rows and cells no changes in game logic.
- remove all row/col dependencies (app, css, ..) - automate level change - introduce event delegation - simplify builder logic - introduce documentFragment for faster rendering - cleaner table model with Object.create(null) (no more prototypes involved) - no changes in game logic.
Fixes the time not start and further no actions when lost or won. Introduced with massive refactoring.
| let cellElement = document.getElementById(cellId); | ||
| let cell = table.tableCells[cellId]; | ||
|
|
||
| if (!cell || cell.haveFlag || table.won !== undefined) return; |
There was a problem hiding this comment.
This is newly introduced to realise event delegation. Same further down in rightClickOnCell()
| <option title="8x8 and 10 mines" value="easy">Easy</option> | ||
| <option title="10x10 and 14 mines" value="normal">Normal</option> | ||
| <option title="12x12 and 20 mines" value="hard">Hard</option> | ||
| <option title="8x8 and 10 mines" value="8,8,10">Easy</option> |
There was a problem hiding this comment.
See app.js line 15 to see how this helps.
| @@ -49,116 +49,54 @@ button { | |||
| } | |||
|
|
|||
| .game-canvas { | |||
| display: flex; | |||
| flex-direction: column; | |||
There was a problem hiding this comment.
This way we don't need all the specific classes further down .cell-8 , cell-10, ... We set the max width and height we want to see and flex-box does the rest.
| setLevel(); | ||
| removeGameTable(); | ||
| table = buildGameTable(level); | ||
| table = buildGameTable(levelElement.value.split(',').map(item => +item)); | ||
| stopTimer(); |
There was a problem hiding this comment.
We directly pass the value from the <select> to the function. This way we can change the levels in one place (the index.html)
| const fragment = document.createDocumentFragment(); | ||
| const gameTableElement = document.getElementById("gameTable"); | ||
|
|
||
| gameTableElement.addEventListener("click", clickOnCell); |
There was a problem hiding this comment.
We install the event listener(s) only once and don't need to bother any more in the future. This way everything renders and builds faster as installing event listeners is heavy (9 * 9 * 4 = 324 listeners for the easy game, or ... only 4 for all games)
| break; | ||
| } | ||
|
|
||
| removeGameTable(); |
There was a problem hiding this comment.
Putting this here is in my opinion quite logic and makes app.js easier to handle.
| const out = Object.create(null); | ||
| let num = 1; | ||
|
|
||
| for (let x = i - 1; x <= i + 1; x++) { |
There was a problem hiding this comment.
Well, the outcome of the following is exactly the same as the red lines above, just a bit more programmatically.
|
I tried not to touch the logic of the game, so |
|
I also have an implementation of mine-sweeper on https://pitpik.github.io/circularjs/demos/minesweeper/ but with a very different approach as I'm also using my own MVC framework that makes things easier. I liked though the "vanilla-js" approach of yours as it is simple and small. Great work. |
