Jakie będzie najlepsze wyjście? (React Redux)

0

W skrócie mój dylemat jest taki:

generuję sobię grid powiedzmy 10x10 kratek. Mamy "postać", która porusza się po tym gridzie w następujący sposób:
Jej startowa pozycja to powiedzmy x: 1, y: 1.
Nasłuchuję onkeydown eventów i odpowiednio poprzez reduxa i akcje ustawiam nowa pozycję ludzika. Czyli po wciśnięciu klawisza strzałka w górę, wysyłamy akcję, że y++.

Chcę jednak niektóre elementy grida zablokować, by postać nie mogła na nie wejść i nie wiem jakie byłoby najlepsze rozwiązanie.

Pierwsze co przychodzi do głowy:

  1. komórce grida, która jest obiektem, poza x i y nadac jeszcze atrybut "blocked" czy coś w tym stylu.
  2. Stworzyć nową "postać widmo" i wysłać ją jako zwiadowcę. Jeśli po zmianie pozycji nowa komórka nie ma atrybuty blocked to prawdziwa postać przejdzie normalnie razem ze zwiadowcą. Jeśli jest blocked, to dispatch dla postaci nie przechodzi.

Jednak jest to pewnie mało eleganckie rozwiązanie i można sprawdzić to inaczej. Mogę liczyć na jakies pomysły? Kod mogę wstawić co mam, jak będzie potrzebny, ale mam nadzieję, że w miarę jasno opisałem problem.

0

w storze trzymasz całego grida i w reducerze sprawdzasz czy grid jest blocked.

0

Zrobiłem to w ten sposób:
dodaje do "słowniczka" zablokowane pola i leci foreach:

        switch (e.key) {
            case "ArrowUp": {
                let err = [];

                _.forEach(BLOCKED, cell =>{
                    if(this.props.charPosition.y+1 === cell.y && this.props.charPosition.x === cell.x){
                        console.log('blocked')
                        err.push('blocked');
                    }
                })
                if(err.length === 0){
                    this.props.moveCharUp();
                }
                break;
            }
0

W ten sposób będziesz w każdym case'ie powtarzał ten sam kod z forEachem, popatrz na coś takiego:

class Position {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  isEqual({ x, y }) {
    return this.x === x && this.y === y;
  }
}

const BLOCKED = [
    new Position(1, 3),
];

const getNewPositionMap = {
  'ArrowUp': ({ x, y }) => new Position(x, y+1),
}

const currentPosition = new Position(1, 2);
const newPosition = getNewPositionMap[e.key](currentPosition); // { x: 1, y: 3 }

const isBlocked = BLOCKED.some(pos => pos.isEqual(newPosition))
0

Powiem szczerze, że domyślam się co ten kod robi, ale wydaje mi się niepotrzebnie skomplikowany (ale też nie jestem jeszcze tytanem programowania, domyślam się, że jest to całkiem prosta konstrukcja).
Jednak jestem w stanie wprowadzić coś podobnego jak już będę pewien co do mechanik.

A na tę chwilę na pewno skorzystam z .some() bo kompletnie zapomniałem o jego istnieniu i na pewno zaoszczedzi przeglądarce niepotrzebnych operacji.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0