Javascript/CSS：有条件的高亮瓷砖麻将

如何解决Javascript/CSS：有条件的高亮瓷砖麻将

我正在设计一款麻将风格的纸牌游戏。我遇到了两个问题：

有条件的磁贴选择。当光标悬停在可用（可播放）的图块上时，它们将应用阴影。如果图块右侧或左侧没有图块，则可选择图块。我希望使用应用程序和删除类（'selectableTile'）来解决这个问题。问题是我不知道如何让瓷砖“感知”瓷砖是否在右侧和/或左侧使其可用（现在它们都突出显示）。在下面的例子中，1、4、7 和 3、6、9 块可以玩。如果 9 匹配/消失，则可以使用 8。关于要调查什么的任何建议？我已经探索了 nextsibling 但这似乎只看 NEXT 兄弟而不是以前的兄弟？这可以仅用 CSS 来完成吗？
分层瓷砖（第一个问题的捎带）。游戏有 3-4 层，随后的每一层都比上一层小。我的计划只是使用 flexBox 将所有内容居中，但这是否会影响可选图块，具体取决于上述解决方案

*{
  margin:0;
  padding:0;
  Box-sizing:border-Box;
}

.container {
  display:flex;
  justify-content:center;
  align-items:center;
  background: radial-gradient(ellipse at center,#1d9325 0%,#17752d 57%,#013a01 100%);
}

.bottomLayer{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100vh;
    border:solid purple 2px;
}

.row{
    display:flex;
    flex-direction: row;
  
}
.tile{
    height:5.75rem;
    width: 4.5rem;
    background: #f2f2f2;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid rgb(59,59,59) .2px;
}

.selectableTile:hover{
    cursor: pointer;
    -webkit-Box-shadow: 0px 0px 12px 5px rgba(0,0.4); 
    Box-shadow: 0px 0px 12px 5px rgba(0,0.4);

}

<div class="container">
   <div class="bottomLayer">
     <div class="row 1">
       <div class="tile one selectableTile" id="gameTile">1</div>
       <div class="tile one selectableTile" id="gameTile">2</div>
       <div class="tile one selectableTile" id="gameTile">3</div>
     </div>
     <div class="row 2">
       <div class="tile one selectableTile" id="gameTile">4</div>
       <div class="tile one selectableTile" id="gameTile">5</div>
       <div class="tile one selectableTile" id="gameTile">6</div>
      </div>
      <div class="row 3">
        <div class="tile one selectableTile" id="gameTile">7</div>
        <div class="tile one selectableTile" id="gameTile">8</div>
        <div class="tile one selectableTile" id="gameTile">9</div>
       </div>
    </div>
</div>

？

解决方法

我会使用嵌套数组来映射事物并完成逻辑部分。另一种选择是使用唯一的 id 道具，例如图块的编号。如果它们是整数值，您可以使用条件来检查图块编号是否等于当前悬停 id +/- 1；如果大于 id，则突出显示右侧阴影等。