BoardGame/index.html at main · deathcats4/BoardGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <!-- 字体已自托管到 public/fonts/，通过 src/fonts.css 加载，无外部依赖 -->
  <link rel="icon" type="image/svg+xml" href="/logos/logo_1_grid.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes, viewport-fit=cover" />

  <title>易桌游 - 桌游教学与在线联机平台 | 王权骰铸、大杀四方、召唤师战争</title>
  <meta name="description" content="易桌游是现代化桌游平台，提供专业的桌游教学引导与便捷的在线联机对局。支持王权骰铸(Dice Throne)、大杀四方(Smash Up)、召唤师战争(Summoner Wars)等多种桌游，免费在线畅玩。" />
  <meta name="keywords" content="易桌游, 桌游, 桌游平台, 在线桌游, 桌游联机, 桌游教学, 王权骰铸, Dice Throne, 大杀四方, Smash Up, 召唤师战争, Summoner Wars, 免费桌游, 网页桌游" />

  <!-- Open Graph / Social Media Shared -->
  <meta property="og:title" content="易桌游 - 桌游教学与在线联机平台" />
  <meta property="og:description" content="免费在线桌游平台，支持王权骰铸、大杀四方、召唤师战争等热门桌游的教学与联机对局。" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="易桌游" />
  <meta property="og:url" content="https://easyboardgame.top/" />
  <meta property="og:image" content="https://easyboardgame.top/logos/logo_1_grid.png" />

  <!-- 规范链接 -->
  <link rel="canonical" href="https://easyboardgame.top/" />
</head>

<body>
  <div id="root">
    <!-- SEO：静态内容供搜索引擎爬虫读取，React hydrate 后自动替换 -->
    <!-- 对真实用户隐藏（noscript 回退），爬虫不执行 JS 所以能正常读取 -->
    <noscript>
      <div style="max-width:960px;margin:0 auto;padding:40px 20px;font-family:serif;color:#2c2216">
        <h1 style="text-align:center;font-size:2rem;letter-spacing:0.1em">易桌游</h1>
        <p style="text-align:center;font-size:0.875rem;color:#8b7355;letter-spacing:0.2em">桌游教程、联机与原型制作平台</p>
        <nav style="margin:32px 0;text-align:center">
          <span>全部</span> · <span>策略</span> · <span>派对</span> · <span>休闲</span>
        </nav>
        <section>
          <h2>🎲 王权骰铸 (Dice Throne)</h2>
          <p>经典骰子对战桌游，选择你的英雄，投掷骰子，释放强力技能击败对手。支持在线联机对战与新手教学引导。</p>
          <h2>💥 大杀四方 (Smash Up)</h2>
          <p>阵营混搭卡牌桌游，选择两个阵营组合成独特牌组，争夺基地控制权。支持在线联机对战与新手教学引导。</p>
          <h2>⚔️ 召唤师战争 (Summoner Wars)</h2>
          <p>战术卡牌对战桌游，指挥召唤师和军队在战场上排兵布阵，消灭对方召唤师获胜。支持在线联机对战与新手教学引导。</p>
          <h2>⭕ 井字棋 (Tic Tac Toe)</h2>
          <p>经典井字棋，支持本地对战和在线联机。适合快速上手体验平台功能。</p>
        </section>
        <footer style="margin-top:48px;text-align:center;font-size:0.75rem;color:#8b7355">
          <p>易桌游 - 免费在线桌游平台 | 桌游教学 · 在线联机 · 好友对战</p>
          <p>支持王权骰铸、大杀四方、召唤师战争等热门桌游，无需下载，打开浏览器即可畅玩。</p>
        </footer>
      </div>
    </noscript>
    <!-- 路由感知的加载占位：首页用羊皮纸风格，游戏页用黑底光点 -->
    <div id="initial-loader"></div>
    <script>
      (function(){
        var el = document.getElementById('initial-loader');
        if (!el) return;
        var p = location.pathname;
        var isGame = p.indexOf('/play/') === 0 || p.indexOf('/dev/') === 0;
        function showFriendlyFallback() {
          var current = document.getElementById('initial-loader');
          if (!current || !isGame) return;
          current.setAttribute('data-bg-friendly-screen', 'true');
          current.style.cssText = 'position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at top, rgba(214,173,96,0.14), transparent 36%),linear-gradient(180deg,#0d0905 0%,#130d07 46%,#060403 100%);display:flex;align-items:center;justify-content:center;padding:20px;color:#f8e7bf;font-family:system-ui,sans-serif';
          current.innerHTML = ''
            + '<div style="width:min(100%,400px);border:1px solid rgba(255,231,191,0.14);background:rgba(22,16,8,0.94);border-radius:20px;padding:24px;text-align:center;box-shadow:0 30px 100px rgba(0,0,0,0.55);backdrop-filter:blur(12px)">'
            +   '<div style="width:64px;height:64px;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,231,191,0.18);background:rgba(255,231,191,0.05);font-size:28px">!</div>'
            +   '<div style="margin-top:20px;font-size:11px;font-weight:700;letter-spacing:0.28em;text-transform:uppercase;color:rgba(248,231,191,0.72)">游戏页保护</div>'
            +   '<div style="margin-top:10px;font-size:24px;font-weight:700;line-height:1.3;color:#fff7dd">页面没有正常显示</div>'
            +   '<div style="margin-top:12px;font-size:14px;line-height:1.8;color:rgba(248,231,191,0.78)">为了避免一直停留在黑屏，这里先切到友好提示。你可以刷新重试，或先返回大厅再重新进入。</div>'
            +   '<div style="margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px">'
            +     '<button type="button" data-action="reload" style="min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,231,191,0.18);background:rgba(255,231,191,0.1);color:#fff7dd;font-weight:700">刷新重试</button>'
            +     '<button type="button" data-action="home" style="min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.88);font-weight:700">返回大厅</button>'
            +   '</div>'
            + '</div>';
          var reloadButton = current.querySelector('[data-action="reload"]');
          var homeButton = current.querySelector('[data-action="home"]');
          if (reloadButton) {
            reloadButton.addEventListener('click', function() {
              location.reload();
            });
          }
          if (homeButton) {
            homeButton.addEventListener('click', function() {
              location.href = '/';
            });
          }
        }
        if (isGame) {
          el.style.cssText = 'position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center';
          el.innerHTML = '<div style="width:16px;height:16px;background:#d97706;border-radius:50%;filter:blur(2px);box-shadow:0 0 20px #f59e0b,0 0 60px rgba(245,158,11,0.3);animation:il-breath 2s ease-in-out infinite"></div>';
          window.setTimeout(function() {
            if (document.getElementById('initial-loader')) {
              showFriendlyFallback();
            }
          }, 10000);
        } else {
          el.style.cssText = 'position:fixed;inset:0;z-index:9999;background:#f5f0e8;display:flex;align-items:center;justify-content:center;font-family:serif';
          el.innerHTML = '<div style="text-align:center"><img src="/logos/logo_1_grid.svg" alt="" width="48" height="48" style="opacity:0.7;margin:0 auto 16px;display:block"/><div style="font-size:1.5rem;color:#2c2216;letter-spacing:0.1em;font-weight:bold">易桌游</div><div style="font-size:0.75rem;color:#8b7355;letter-spacing:0.2em;margin-top:8px">加载中…</div></div>';
        }
      })();
    </script>
    <style>@keyframes il-breath{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}</style>
  </div>
  <div id="modal-root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>