在单淘汰 UI 中连接奇数玩家的线 - 反应

Question

我正在使用

Single Elimination UI

和

React

构建

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);

现在是这样的：

这是分叉的沙箱：