@@ -7,7 +7,7 @@ const GRID_SIZE = 40;
7
7
const TICK_RATE = 100 ;
8
8
const GRID_ARRAY = [ ] ;
9
9
10
- for ( var i = 0 ; i <= GRID_SIZE ; i ++ ) {
10
+ for ( let i = 0 ; i <= GRID_SIZE ; i ++ ) {
11
11
GRID_ARRAY . push ( i ) ;
12
12
}
13
13
@@ -60,15 +60,20 @@ const isSnake = (x, y, snakeCoordinates) => {
60
60
const getSnakeHead = ( snake ) =>
61
61
snake . coordinates [ 0 ] ;
62
62
63
- // apply FP
63
+ const getSnakeWithoutStub = ( snake ) =>
64
+ snake . coordinates . slice ( 0 , snake . coordinates . length - 1 ) ;
65
+
66
+ const getSnakeTail = ( snake ) =>
67
+ snake . coordinates . slice ( 1 ) ;
68
+
64
69
const getIsSnakeOutside = ( snake ) =>
65
70
getSnakeHead ( snake ) . x >= GRID_SIZE ||
66
71
getSnakeHead ( snake ) . y >= GRID_SIZE ||
67
72
getSnakeHead ( snake ) . x < 0 ||
68
73
getSnakeHead ( snake ) . y < 0 ;
69
74
70
75
const getIsSnakeClumy = ( snake ) =>
71
- false ;
76
+ isSnake ( getSnakeHead ( snake ) . x , getSnakeHead ( snake ) . y , getSnakeTail ( snake ) ) ;
72
77
73
78
// apply FP
74
79
const getIsSnakeEating = ( { snake, snack } ) =>
@@ -84,11 +89,9 @@ const applySnakePosition = (prevState) => {
84
89
getSnakeHead ( prevState . snake ) . y ,
85
90
) ;
86
91
87
- // TODO babel stage
88
- // const [...snakeCoordinatesWithoutLast, lastCoordinate] = prevState.snake.coordinates;
89
92
const snakeTail = isSnakeEating
90
93
? prevState . snake . coordinates
91
- : prevState . snake . coordinates . slice ( 0 , prevState . snake . coordinates . length - 1 ) ;
94
+ : getSnakeWithoutStub ( prevState . snake ) ;
92
95
93
96
const snackCoordinate = isSnakeEating
94
97
? getRandomCoordinate ( )
@@ -153,7 +156,6 @@ class App extends Component {
153
156
if ( getIsSnakeOutside ( this . state . snake ) || getIsSnakeClumy ( this . state . snake ) ) {
154
157
return ;
155
158
}
156
-
157
159
this . setState ( applySnakePosition ) ;
158
160
}
159
161
@@ -178,25 +180,39 @@ class App extends Component {
178
180
179
181
const Grid = ( { snake, snack } ) =>
180
182
< div className = "grid" >
181
- { GRID_ARRAY . map ( y => < Row
182
- y = { y }
183
- key = { y }
184
- snake = { snake }
185
- snack = { snack }
186
- /> ) }
183
+ < Border grid = { GRID_ARRAY } />
184
+ { GRID_ARRAY . map ( y => < Row
185
+ y = { y }
186
+ key = { y }
187
+ snake = { snake }
188
+ snack = { snack }
189
+ /> ) }
190
+ < Border grid = { GRID_ARRAY } />
187
191
</ div >
188
192
189
193
const Row = ( { snake, snack, y } ) =>
190
194
< div className = "grid-row" >
195
+ < Block />
191
196
{ GRID_ARRAY . map ( x => < Cell
192
197
x = { x }
193
198
y = { y }
194
199
key = { x }
195
200
snake = { snake }
196
201
snack = { snack }
197
202
/> ) }
203
+ < Block />
204
+ </ div >
205
+
206
+ const Border = ( { grid } ) =>
207
+ < div className = "grid-row" >
208
+ < Block />
209
+ { grid . map ( v => < Block key = { v } /> ) }
210
+ < Block />
198
211
</ div >
199
212
213
+ const Block = ( ) =>
214
+ < div className = "grid-cell grid-cell-border" />
215
+
200
216
const Cell = ( { snake, snack, x, y } ) =>
201
217
< div className = { getCellCs ( snake , snack , x , y ) } /> ;
202
218
0 commit comments