Module #2 (Nowshin Owishi) #29

owishiboo · 2022-03-27T17:30:14Z

No description provided.

owishiboo · 2022-03-27T19:08:50Z

pages/index.js

-  }, []);
+    }, [dir, func]);
+
+    useEffect(() => {


@Corei13 why does removefood() doesn't work? it says 'Cannot read properties of undefined (reading 'find')'

@owishiboo because on line 136-138, you are setting setFoods(undefined). Why? Because you are calling setFoods(currentFoords => { expression }. Correct form would be either
a. setFoods(currentFoords => expression (without {} or
b. setFoods(currentFoords => { return expression }

Corei13 · 2022-03-28T11:39:05Z

pages/index.js

+    }
+  }, [isFood, snake]);
+
+  const UseInterval = (func, dir) => {


move this outside of useSnake

Corei13 · 2022-03-28T11:41:18Z

pages/index.js

-  }, []);
+    }, [dir, func]);
+
+    useEffect(() => {


@owishiboo because on line 136-138, you are setting setFoods(undefined). Why? Because you are calling setFoods(currentFoords => { expression }. Correct form would be either
a. setFoods(currentFoords => expression (without {} or
b. setFoods(currentFoords => { return expression }

owishiboo · 2022-03-28T22:00:28Z

pages/index.js

@@ -200,6 +201,7 @@ const UseSnake = () => {
      );
    }
    if (isPoison(head)) {


@Corei13
Thanks for the previous help.
Whenever the snake eats one poison, other poisons of the same row OR same column get deleted. But I'm checking both row AND column every time. The same happens with the food also. How to fix it? Everything else is working fine.

Corei13 · 2022-03-29T10:16:19Z

pages/index.js

+      console.log("ate poison");
+      setPoison((currentPoison) =>
+        currentPoison.filter(
+          (poison) => poison.x !== head.x && poison.y !== head.y


@owishiboo poison.x !== head.x && poison.y !== head.y is equivalent to !(poison.x === head.x || poison.y === head.y)

See the issue? It will remove a poison even when it matches either x or y.

royantar0311 · 2022-03-30T13:37:23Z

pages/index.js

-const Snake = () => {
+//custom hook
+//controller
+const UseInterval = (func, dir) => {


custom hooks name should start with use with a lowercase u and a react components name should start with a capital letter.

custom hooks name should start with use with a lowercase u and a react components name should start with a capital letter.

@owishiboo

royantar0311 · 2022-03-30T13:45:08Z

pages/index.js

+      if (isPoison(newHead)) {
+        newSnake.pop();
+      }
+      if (isSnake(newHead) || score < 0) {


how weird would that be to play with a snake of length < 3 ? haha
also one more thing, you are popping the snake here but does the score gets updated here? no, you will get the updated value of score only on the next rerender. so you cannot rely on the score here to get the snake length, use newSnake.length here to avoid potential bugs.

royantar0311 · 2022-03-30T13:46:20Z

pages/index.js

+  //add new food
+  const addFood = () => {
+    let newFood = getRandomCell();
+    while (isSnake(newFood) || isFood(newFood) || isPoison(newFood)) {


an object can be put to a cell only if it isn't occupied yet.
why not create a reusable function like

const isOccupied = (cell) => isSnake(cell) || isFood(cell) || isPoison(cell);

royantar0311 · 2022-03-30T13:47:24Z

pages/index.js

+    // console.log("delete poison auto");
+    setPoison((currentPoison) =>
+      currentPoison.filter((poison) => (Date.now() - poison.start) < 10000)
+    );


addFoods and addPoison, removeFood and removePoison works the same, you can merge them to have one addObject function, and one removeObject function.

owishiboo · 2022-04-16T17:33:34Z

pages/index.js

      if (isFood({ x, y })) {
        type = CellType.Food;
+        remaining =


@royantar0311 I forgot to add the remaining time to the food, so I tried it out today. But the time shows undefined. I can't figure out the problem :")

MahdiMurshed · 2022-04-16T17:50:14Z

pages/index.js

+          10 -
+          Math.round(
+            (Date.now() -
+              foods.find((food) => food.x === x && food.y === y).createdAt) /


as your cell looks like

{ x: Math.floor(Math.random() * Config.width), y: Math.floor(Math.random() * Config.width), start: Date.now() }

.createdAt should be

poisons.find((poison) => poison.x === x && poison.y === y) .start) / 1000

@owishiboo

thanks, bro @MahdiMurshed

owishiboo · 2022-04-17T06:57:18Z

pages/index.js

  const [objects, setObjects] = useState([]);
  const score = snake.length - 3;

  const finding = ({ x, y }, arr, type) => {
-    return arr.find((position) => position.x === x && position.y === y && position.type===type);
+    return arr.find(


@royantar0311 @MahdiMurshed Check this commit. Is it good? Do I need to modify anything?

MahdiMurshed · 2022-04-17T12:02:02Z

pages/index.js

+    return () => clearInterval(interval);
+  }, [createCallback]);
+};
+const UseSnake = () => {


fix naming convention

UseSnake is not a hook here. I'm not sure, should I remove the term 'Use'?

MahdiMurshed · 2022-04-17T12:08:37Z

pages/index.js

+      else if (type === CellType.Poison)
+        return finding({ x, y }, objects, type);
+      else if (type === CellType.Snake) return finding({ x, y }, snake);
+    },


If we just want to know whether the cell contains an object or not, do we need to know the type too?

My 'objects' array contains both poison and food. So, I need to find out whether an object is a food or poison when the snake eats it. I need to update the length and the score according to the type of the object. I've been using the function in this purpose, so I need it.

I don't think you are taking full advantage of objects state

isObject can be more simpler

const isObject = useCallback( ({ x, y }) => objects.find((position) => position.x === x && position.y === y), [objects] );

MahdiMurshed · 2022-04-17T13:11:36Z

pages/index.js

+  UseInterval(() => addObject(CellType.Poison), 1000);
+  UseInterval(runSingleStep, 300);
+  UseInterval(() => removeObject(CellType.Food), 50);
+  UseInterval(() => removeObject(CellType.Poison), 100);


removeObject doesnt take any parameter

UseInterval(() => removeObject(CellType.Food), 50); UseInterval(() => removeObject(CellType.Poison), 100);

would be

UseInterval(removeObject, 100);

this is because removeObject function removes any object that is at least 10s old right? so we don't need to provide the type here.

MahdiMurshed · 2022-04-17T13:27:38Z

pages/index.js

+      else if (type === CellType.Poison)
+        return finding({ x, y }, objects, type);
+      else if (type === CellType.Snake) return finding({ x, y }, snake);
+    },


I don't think you are taking full advantage of objects state

MahdiMurshed · 2022-04-17T13:28:55Z

pages/index.js


-  const [food, setFood] = useState({ x: 4, y: 10 });
-  const [score, setScore] = useState(0);
+  const finding = ({ x, y }, arr, type) => {


doesn't it look cleaner ?

const isObjectOfType = useCallback( ({ x, y }, type) => { const _obj = isObject({ x, y }); return _obj && _obj.type === type; }, [isObject] );

I'm using the same function for snake, food, and poison to find. So I think this is better -

const finding = ({ x, y }, arr, type) => { //for snake if (type === undefined) return arr.find((position) => position.x === x && position.y === y); return arr.find( (position) => position.x === x && position.y === y && position.type === type ); }; //checking cells const isObjectOrSnake = useCallback( ({ x, y }, type) => { if (type === CellType.Snake) return finding({ x, y }, snake); else return finding({ x, y }, objects, type); }, [objects, snake] );

MahdiMurshed · 2022-04-17T13:32:53Z

pages/index.js

+      (position) =>
+        position.x === x && position.y === y && position.type === type
+    );
+  };



as snake state is different from objects state,it makes sense to have a different function for checking snake.And it also makes the code more readable

const isSnake = useCallback( ({ x, y }) => snake.find((position) => position.x === x && position.y === y), [snake] );

yeah I give an upvote to this. @owishiboo your function can work with all three types but loses simplicity. poison and food are similiar and we put them to one object state, but snake is different so we can keep it seperate fully.
well there is no right or wrong here, it comes down to your opinion.

MahdiMurshed · 2022-04-17T13:37:06Z

pages/index.js

+    (cell) =>
+      isObject(cell, CellType.Snake) ||
+      isObject(cell, CellType.Food) ||
+      isObject(cell, CellType.Poison),


const isBlocked = useCallback(isObject(cell) || isSnake(cell),[isObject,isSnake]);

I chnaged these in the next commit. Thanks for your help!

owishiboo added 2 commits March 27, 2022 23:29

half

bee70f2

half complete

cf27ed2

owishiboo commented Mar 27, 2022

View reviewed changes

Corei13 approved these changes Mar 28, 2022

View reviewed changes

owishiboo added 3 commits March 29, 2022 03:32

removing bug

ec21c5a

bugs in removing

9721681

bug while eating

66aec44

owishiboo commented Mar 28, 2022

View reviewed changes

Corei13 reviewed Mar 29, 2022

View reviewed changes

royantar0311 reviewed Mar 30, 2022

View reviewed changes

owishiboo added 2 commits April 16, 2022 22:40

added removeObject and addObject

5c03c11

cannot set remaining

2b4d230

owishiboo commented Apr 16, 2022

View reviewed changes

MahdiMurshed reviewed Apr 16, 2022

View reviewed changes

owishiboo added 3 commits April 17, 2022 01:00

complete

8e93356

complete 01

48ca4d2

complete 02

4ba03c3

owishiboo commented Apr 17, 2022

View reviewed changes

MahdiMurshed reviewed Apr 17, 2022

View reviewed changes

fixed redundancy

b5a4648

MahdiMurshed reviewed Apr 17, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module #2 (Nowshin Owishi) #29

Module #2 (Nowshin Owishi) #29

owishiboo commented Mar 27, 2022

owishiboo Mar 27, 2022

Corei13 Mar 28, 2022

Corei13 Mar 28, 2022

Corei13 Mar 28, 2022

owishiboo Mar 28, 2022

Corei13 Mar 29, 2022

royantar0311 Mar 30, 2022

MahdiMurshed Apr 17, 2022

royantar0311 Mar 30, 2022 •

edited

Loading

royantar0311 Mar 30, 2022

royantar0311 Mar 30, 2022

owishiboo Apr 16, 2022

MahdiMurshed Apr 16, 2022 •

edited

Loading

owishiboo Apr 16, 2022

owishiboo Apr 17, 2022

MahdiMurshed Apr 17, 2022 •

edited

Loading

owishiboo Apr 17, 2022

MahdiMurshed Apr 17, 2022

owishiboo Apr 17, 2022

MahdiMurshed Apr 17, 2022

MahdiMurshed Apr 17, 2022

MahdiMurshed Apr 17, 2022

royantar0311 Apr 18, 2022

MahdiMurshed Apr 17, 2022

MahdiMurshed Apr 17, 2022

owishiboo Apr 17, 2022

MahdiMurshed Apr 17, 2022

royantar0311 Apr 18, 2022

MahdiMurshed Apr 17, 2022

owishiboo Apr 17, 2022

Module #2 (Nowshin Owishi) #29

Are you sure you want to change the base?

Module #2 (Nowshin Owishi) #29

Conversation

owishiboo commented Mar 27, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

royantar0311 Mar 30, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MahdiMurshed Apr 16, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MahdiMurshed Apr 17, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

royantar0311 Mar 30, 2022 •

edited

Loading

MahdiMurshed Apr 16, 2022 •

edited

Loading

MahdiMurshed Apr 17, 2022 •

edited

Loading