🗺️ 島嶼點擊放大效果

const ISLAND_ZOOM=1.5;

/*
  外圍三島的位移量。

  位移值等於島嶼向外部分因 1.5 倍縮放增加的尺寸，
  因而能保持原本與棋盤外框的邊距：

  上島：向下
  左下島：向右上
  右下島：向左上
*/
const OUTER_ISLAND_SHIFT={
  0:[0,24.75],
  4:[24.032,-16.875],
  6:[-24.032,-16.875]
};

function getIslandView(island){
  if(island!==selectedIsland){
    return {
      scale:1,
      dx:0,
      dy:0
    };
  }

  const shift=OUTER_ISLAND_SHIFT[island]||[0,0];

  return {
    scale:ISLAND_ZOOM,
    dx:shift[0],
    dy:shift[1]
  };
}

/*
  先以島嶼中心為縮放中心，再套用外圍島的向內位移。
*/
function islandTransform(island){
  const [cx,cy]=ISLAND_CENTERS[island];
  const {scale,dx,dy}=getIslandView(island);

  return [
    `translate(${dx} ${dy})`,
    `translate(${cx} ${cy})`,
    `scale(${scale})`,
    `translate(${-cx} ${-cy})`
  ].join(" ");
}

/*
  取得經過島嶼縮放、位移後的畫面座標。
  用於最後一步連線這類橫跨不同島嶼的圖形。
*/
function visualCellCoordinates(index){
  const island=(index/7)|0;
  const [cx,cy]=ISLAND_CENTERS[island];
  const [x,y]=cellCoordinates(index);
  const {scale,dx,dy}=getIslandView(island);

  return [
    cx+dx+(x-cx)*scale,
    cy+dy+(y-cy)*scale
  ];
}

function buildBoard(){
  const islandLayer=$("#islandLayer");
  const hitLayer=$("#hitLayer");

  ISLAND_CENTERS.forEach(([x,y],island)=>{
    /*
      可見島嶼。
    */
    const use=createSVGElement("use",{
      href:"#island-symbol",
      transform:`translate(${x} ${y})`,
      class:"island-copy",
      "data-island":island
    });

    use.style.color="#fff0c5";
    islandLayer.appendChild(use);
    islandUses.push(use);

    /*
      每座島擁有獨立的點擊群組。
      群組和可見島嶼使用相同 transform，
      因而放大後點擊位置仍然正確。
    */
    const hitGroup=createSVGElement("g",{
      "data-hit-island":island
    });

    const islandHit=createSVGElement("use",{
      href:"#island-symbol",
      transform:`translate(${x} ${y})`,
      class:"island-hit",
      "data-island":island,
      "aria-hidden":"true"
    });

    hitGroup.appendChild(islandHit);

    for(let point=0;point<7;point++){
      const index=island*7+point;
      const [cellX,cellY]=cellCoordinates(index);

      const circle=createSVGElement("circle",{
        cx:cellX,
        cy:cellY,
        r:11.5,
        class:"hit-slot",
        "data-cell":index,
        "data-island":island,
        "aria-hidden":"true"
      });

      hitGroup.appendChild(circle);
      hitSlots[index]=circle;
    }

    hitLayer.appendChild(hitGroup);
    islandHitGroups.push(hitGroup);
  });
}

state.claims.forEach((owner,index)=>{
  const use=islandUses[index];
  const [x,y]=ISLAND_CENTERS[index];

  use.style.color=
    owner===1 ? "#ff9f82" :
    owner===-1 ? "#d7f7ff" :
    "#fff0c5";

  use.dataset.owner=String(owner);
  use.classList.toggle("is-selected",index===selectedIsland);

  use.setAttribute(
    "transform",
    `${islandTransform(index)} translate(${x} ${y})`
  );
});

/*
  點擊群組必須和島嶼使用相同的縮放及位移。
*/
islandHitGroups.forEach((group,index)=>{
  group.setAttribute("transform",islandTransform(index));
});

/*
  將選中島及其點擊區移到所在圖層的最後，
  避免被其他島的點擊區域遮蓋。
*/
if(selectedIsland>=0){
  $("#islandLayer").appendChild(islandUses[selectedIsland]);
  $("#hitLayer").appendChild(islandHitGroups[selectedIsland]);
}

hitSlots.forEach((slot,index)=>{
  if(
    gameStarted &&
    !thinking &&
    !state.winner &&
    controllers[state.turn]==="human"
  ){
    slot.style.cursor=
      state.board[index]===state.turn || state.board[index]===0
        ? "pointer"
        : "not-allowed";
  }else{
    slot.style.cursor="default";
  }
});

const selectedCellIsland=(selectedCell/7)|0;
const [sx,sy]=cellCoordinates(selectedCell);

const ring=createSVGElement("circle",{
  cx:sx,
  cy:sy,
  r:12.5,
  class:"selection-ring",
  stroke:state.turn===1 ? "#ffdc6b" : "#75dcff",
  transform:islandTransform(selectedCellIsland)
});

for(const move of getMovesFrom(state,selectedCell)){
  const destinationIsland=(move.to/7)|0;
  const [x,y]=cellCoordinates(move.to);

  const marker=createSVGElement("circle",{
    cx:x,
    cy:y,
    r:4.2,
    class:"target-dot",
    transform:islandTransform(destinationIsland)
  });

  targetLayer.appendChild(marker);
}

function onIslandClick(island){
  if(!Number.isInteger(island)||island<0||island>=7) return;

  selectedIsland=island;
  renderBoard();
  renderStatus();
}

function onCellClick(index){
  /*
    島嶼選擇優先於棋子操作。

    因此即使：
    1. 尚未選中己方棋子；
    2. 點到敵方棋子；
    3. 點到不能移動的位置；
    4. AI 正在思考；
    這座島仍會被選中。
  */
  selectedIsland=(index/7)|0;

  if(
    !gameStarted ||
    thinking ||
    state.winner ||
    controllers[state.turn]!=="human"
  ){
    renderBoard();
    renderStatus();
    return;
  }

  const occupant=state.board[index];

  if(occupant===state.turn){
    lastAIStats=null;
    selectedCell=selectedCell===index ? -1 : index;
    renderBoard();
    renderStatus();
    return;
  }

  if(
    occupant===0 &&
    selectedCell>=0 &&
    isLegalMove(state,{from:selectedCell,to:index})
  ){
    /*
      selectedIsland 已經是目的地所屬島嶼，
      commitMove 後仍會保持放大。
    */
    commitMove(
      {from:selectedCell,to:index},
      "human",
      null
    );
    return;
  }

  /*
    即使不是合法移動，島嶼選擇仍然生效。
  */
  renderBoard();
  renderStatus();
}