在单淘汰 UI 中与奇数玩家连接线 - React

Question

我正在构建一个Single Elimination UI使用Reactand 的CSS程序，并且在尝试连接玩家之间的线路时遇到了问题。

我尝试了这个方法。在上面画了一条线。但结构失败了。这是我尝试过的代码 https://codesandbox.io/s/single-elimination-torunament-forked-qqlxm4?file=/src/SingleElimination.jsx 但由于盒子结构不正确而失败。如果线条不在视口下，则不会绘制线条

所需的结构是

请建议我一些解决方案。

Answer 1

老实说，我更愿意使用另一个 HTML 来连接线，但我不想为此改变太多代码，所以在这个解决方案中，我坚持使用 SVG 来绘制线。

首先，要制作类似于第二张图片的结构，您需要添加“幽灵”框，所以我添加了以下内容：

const players15 = {
    round1: [
      [], // need to add this
      [8, 9],
...

然后我制作了CSS，使盒子垂直居中（调整了许多CSS代码，无法真正显示哪些代码，因为太多了）。

修复 CSS 后，我意识到您将一些框连接到了错误的框：

      drawConnectorsBetweenMatches(".round1match2", ".round2match1", newLines);
      drawConnectorsBetweenMatches(".round1match2", ".round2match2", newLines);
      drawConnectorsBetweenMatches(".round1match3", ".round2match1", newLines);

我假设你不想连接round1match2，round2match1同时也连接round1match2（round2match2比如为什么一个盒子会在下一轮连接到两个盒子？），所以我也根据第二张图片修复了它们：

      // round 1 to 2
      drawConnectorsBetweenMatches(".round1match2", ".round2match1", newLines);
      drawConnectorsBetweenMatches(".round1match3", ".round2match2", newLines);
      drawConnectorsBetweenMatches(".round1match4", ".round2match2", newLines);
      drawConnectorsBetweenMatches(".round1match5", ".round2match3", newLines);
      drawConnectorsBetweenMatches(".round1match6", ".round2match3", newLines);
      drawConnectorsBetweenMatches(".round1match7", ".round2match4", newLines);
      drawConnectorsBetweenMatches(".round1match8", ".round2match4", newLines);

      // round 2 to 3
      drawConnectorsBetweenMatches(".round2match1", ".round3match1", newLines);
      drawConnectorsBetweenMatches(".round2match2", ".round3match1", newLines);
      drawConnectorsBetweenMatches(".round2match3", ".round3match2", newLines);
      drawConnectorsBetweenMatches(".round2match4", ".round3match2", newLines);

      // round 3 to 4
      drawConnectorsBetweenMatches(".round3match1", ".round4match1", newLines);
      drawConnectorsBetweenMatches(".round3match2", ".round4match1", newLines);

之后，我意识到线条仍然没有正确渲染，所以我必须调整线条的位置。基本上我将你的代码更改为：

    let midPointX =
      (match1Rect.right + match2Rect.left) / 2 + scrollLeft - playoffTableLeft;

    newLines.push({
      x1: midPointX,
      y1: match1Rect.top + match1Rect.height / 2 + window.scrollY - offsetTop,
      x2: midPointX,
      y2: match2Rect.top + match2Rect.height / 2 + window.scrollY - offsetTop
    });
    newLines.push({
      x1: match1Rect.right + scrollLeft - 20 - playoffTableLeft,
      y1: match1Rect.top + match1Rect.height / 2 + window.scrollY - offsetTop,
      x2: midPointX,
      y2: match1Rect.top + match1Rect.height / 2 + window.scrollY - offsetTop
    });
    newLines.push({
      x1: match2Rect.left + scrollLeft + 20 - playoffTableLeft,
      y1: match2Rect.top + match2Rect.height / 2 + window.scrollY - offsetTop,
      x2: midPointX,
      y2: match2Rect.top + match2Rect.height / 2 + window.scrollY - offsetTop
    });

基本上，我添加了它们，以便计算能够反映视口的变化。

然后我也删除了这一行，因为我不确定它是否仍然有必要：

    playoffTable.addEventListener("scroll", handleScroll);

现在是这样的：

这是分叉的沙箱：

编辑：

由于OP说他们不能手动添加空框，所以我提供了自动添加空框的解决方案，该解决方案甚至自动连接线路。

因此，由于它本质上是一个二叉树数据结构，我们可以从根（最后一轮）迭代，看看是否有任何不是“tbd”的值，如果不是“tbd”，我们可以添加空框在上一轮中，这样 CSS 就可以坚持下去，这是函数：

  function populateTree(obj) {
    const newObj = JSON.parse(JSON.stringify(obj));
    const round = Math.max(
      ...Object.keys(newObj).map((key) =>
        parseInt(key.replace(/[A-Za-z$-]/g, ""))
      )
    );

    let pointer = round;

    while (pointer !== 1) {
      const currRound = newObj[`round${pointer}`].flat(Infinity);

      for (let i = 0; i < currRound.length; i++) {
        if (currRound[i] !== "tbd") {
          newObj[`round${pointer - 1}`].splice(i, 0, [null, null]);
        }
      }
      pointer--;
    }

    return newObj;
  }

现在可以处理已经有赢家的情况：

这是新的分叉的codesandbox：