[대학전쟁3] 양면빙고 웹 개발 06 - 직전 타일 이동, 뒤집기 제한

 

 

 

 

0️⃣ 지난 번까지..

대학전쟁에 나온 '양면빙고 (double sided bingo)' 게임을 보고

 

이 게임을 웹으로 만들면 재밌겠다는 생각이 들어 양면빙고 웹 개발을 시작했다.

 

 

오늘 드디어 대학전쟁3 결승전까지 끝났다..

 

진짜 결승전 개존잼.. 안 본 사람들 다들 보러가세여 ㄱㄱ

 

나의 양면빙고 웹도 거의거의 막바지 단계다.

 

 

지난 글에서는 빙고가 완성되면 게임을 중단하고, player가 행동하면 turn이 넘어가는 기능을 구현했다.

 

오늘은 이어서 빙고판 위의 타일 개수에 따라 이동 뒤집기를 제한하는 기능을 구현해보고자 한다.

 

 

☰   양면빙고 (double-sided-bingo) 개발 과정  

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 01 - list, 타일 뒤집기

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 02 - 타일 list 내 이동

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 03 - 타일 착수

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 04 - 타일 뒤집기, 이동

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 05 - 빙고 판단, player 2명

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 07 - timer, highlight, restart

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 08 - 2인 play

 

• ㆍ [대학전쟁3] 양면빙고 웹 개발 09 - UI/UX 개선 및 기능 보완

 

 

 

1️⃣ 타일 개수에 따른 이동, 뒤집기 제한

🌟 App.js 코드

 

📌 const 추가

 

const [turnCount, setTurnCount] = useState(0);
const [phase, setPhase] = useState("PLACE");

ㆍturnCount - 빙고판에 올라가있는 타일의 개수를 판단하기 위해 turnCount를 사용한다.

 

ㆍphase - turnCount가 14 이상이 되는 순간, phase의 상태를 MOVE_FLIP으로 바꾼다.

 

 

📌 endTurn 함수 수정

 

setTurnCount(prev => prev + 1);

Turn이 지날 때마다 turnCount이 1 씩 증가할 수 있도록 코드를 추가한다.

 

 

📌 canMoveFlip 함수 작성

 

const canMoveOrFlip = (tileKey) => {
    if (phase !== "MOVE_FLIP") return false;
    if (lastAction && lastAction.tileKey === tileKey) return false;
    return true;
};

phase가 PLACE일 경우 착수만, MOVE_FLIP일 경우에 뒤집기, 이동할 수 있도록 코드를 작성한다.

 

 

📌 handleFlip 함수 수정

 

if (fromBoard && !canMoveOrFlip(key)) return;

착수 14번 이하면 뒤집을 수 없도록 코드를 추가한다.

 

 

📌 handleDragStart 함수 수정

 

if (!canMoveOrFlip(active.id)) return;

착수 14번 이하면 이동할 수 없도록 코드를 추가한다.

 

 

📌 handleDragEnd 함수 수정

 

if (!canMoveOrFlip(active.id)) return;

착수 14번 이하면 이동할 수 없도록 코드를 추가한다.

 

 

📌 return 수정

 

<BingoBoard
  boardTiles={boardTiles}
  movableCell={movableCell}
  onFlip={(key) => handleFlip(key, true)}
  isDisabled={canMoveOrFlip} />

BingoTile로 내려주어 실제 동작 차단을 하도록 한다.

 

 

📌 4개부터 이동 가능

 

 

원래는 14개를 착수하여야 이동이 가능하지만, 현재는 테스트 단계이기 때문에 4개로 테스트 하였다.

 

 

 

2️⃣ 직전 타일 이동, 뒤집기 제한

🌟 App.js 코드

 

📌 const 추가

 

setLastAction({ tileKey: key, owner: currentTurn });

마지막 타일을 저장할 수 있는 const를 추가한다.

 

 

📌 canMoveOrFlip 함수 수정

 

const canMoveOrFlip = (tileKey) => {
  if (phase !== "MOVE_FLIP") return false;
  if (!tileKey) return true;
  if (lastAction && lastAction.tileKey === tileKey) return false;
 return true;
};

직전 턴에 이동/뒤집기한 타일은 다음 턴에 이동/ 뒤집기를 제한하도록 코드를 수정한다.

 

 

📌 handleFlip 함수 수정

 

setLastAction({ tileKey: key, owner: currentTurn });

이번 턴에 뒤집었으면 다음 턴에 같은 타일을 이동/뒤집을 수 없도록 코드를 추가한다.

 

 

📌 handleDragStart 함수 수정

 

const activeTileKey = active.data.current?.tileKey ?? active.id;
const tile = myTiles.find(t => t.key === activeTileKey);
setActiveTile(tile ?? null);

이번 턴에 움직였으면 다음 턴에 같은 타일을 이동/뒤집을 수 없도록 코드를 추가한다.

 

 

📌 handleDragEnd 함수 수정

 

const movedTile = boardTiles[from];
const movedTile = boardTiles[from];
 if (movedTile?.key) {
   setLastAction({ tileKey: movedTile.key, owner: currentTurn });      
 } else {
   setLastAction({ tileKey: activeTileKey, owner: currentTurn });      
 }

이번 턴에 움직였으면 다음 턴에 같은 타일을 이동/뒤집을 수 없도록 코드를 추가한다.

 

 

📌 직전 타일 막음

 

 

직전 타일은 뒤집기도 이동도 불가능하다. 이동이 불가능한 타일이 빨간색으로 출력되는 것을 확인할 수 있다.

 

 

 

3️⃣ 이동 자체도 막음

🌟 BingoTile.js 코드

 

📌 disabled

 

disabled: !!isDisabled,

useDraggable 옵션 중 하나인 disabled를 사용해 props로 받은 isDisabled의 드래그 동작 자체를 비활성화한다.

 

 

📌 직전 타일 막음

 

 

직전 타일을 이동할 때 빨간색으로 출력하는 것이 아니라 아예 움직이지 않게 막았다.

 

 

 

4️⃣ gray 표시

🌟 BingoTile.js 코드

 

<TileItem showOverlay={isDisabled} />

props로 받은 isDisabled를 TileItem에게도 넘겨준다.

 

 

🌟 TileItem.js 코드

 

<div className="tile-img-wrap" data-overlay={showOverlay ? "true" : "false"}> </div>

showOverlay 상태값에 따라 서로 다른 CSS 스타일을 적용하기 위해 코드를 작성한다.

 

 

🌟 TileItem.CSS 코드

 

.TileItem .tile-img-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.tile-img-wrap[data-overlay="true"] .tile-img {
  cursor: default;   /* 또는 not-allowed */
}
.TileItem .tile-img-wrap[data-overlay="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.20);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: normal;
  transition: background .18s ease;
  border-radius: inherit;
}

true일 경우 (직전에 착수, 이동, 뒤집은 타일일 경우) 회색처리를 한다.

 

 

📌 직전 타일 회색

 

 

직전 타일 (착수, 이동, 뒤집기)은 건들지 못하기 떄문에 시각적으로 볼 수 있게 타일에 회색 처리를 했다. 근데 뭔가 빙고 완성이 한 눈에 보이지 않아 나중에 삭제할 수도..

 

 

 

5️⃣ 앞으로...

이동, 뒤집기를 제한하는 기능을 만들었다.

 

이제 시간 제한을 만들고 빙고 완성 시, 빙고를 highlight하는 기능을 만들 것이다.