doc: add play online

Author: yuchanns

.github/assets/index.html

@@ -57,6 +57,25 @@
       opacity: 0.85;
       margin: 0;
     }
+    #source-link {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      display: inline-flex;
+      color: inherit;
+      text-decoration: none;
+    }
+    #source-link svg {
+      width: 24px;
+      height: 24px;
+      fill: currentColor;
+      transition: transform 0.2s ease, opacity 0.2s ease;
+    }
+    #source-link:hover svg,
+    #source-link:focus svg {
+      transform: scale(1.05);
+      opacity: 0.85;
+    }
   </style>
   <script src="./coi-serviceworker.min.js"></script>
 </head>
@@ -69,13 +88,24 @@ <h1 id="overlay-title"></h1>
     </div>
   </div>
   <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+  <a
+    id="source-link"
+    href="https://github.com/cloudwu/deepfuture"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <svg viewBox="0 0 16 16" aria-hidden="true">
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+    </svg>
+  </a>
 
   <script>
   (function () {
     const overlay = document.getElementById('overlay');
     const titleEl = document.getElementById('overlay-title');
     const introEl = document.getElementById('overlay-intro');
     const statusEl = document.getElementById('overlay-status');
+    const sourceLinkEl = document.getElementById('source-link');
 
     const locale = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
     const isChinese = locale.startsWith('zh');
@@ -86,6 +116,7 @@ <h1 id="overlay-title"></h1>
         '拓殖星球，发展科技，永无止境地进化你银河系的深远未来。',
         '《深远未来》是桌游的数字化版本，带来“边玩边创造”的独特体验，每一局都能拓展属于你的银河文明。'
       ],
+      sourceAriaLabel: '查看源码',
       checkingWebGPU: '正在检查 WebGPU 支持…',
       webgpuMissingTitle: '当前浏览器未开启 WebGPU 支持',
       webgpuMissingDetail: '请在支持 WebGPU 的浏览器中打开，或者在浏览器设置中启用 WebGPU 后刷新页面。',
@@ -101,6 +132,7 @@ <h1 id="overlay-title"></h1>
         'Settle worlds, advance techs, and endlessly evolve your galaxy\'s deep future.',
         'Deep Future is the digital take on the make-as-you-play board game where every session grows your galactic civilization.'
       ],
+      sourceAriaLabel: 'Source code on GitHub',
       checkingWebGPU: 'Checking for WebGPU support…',
       webgpuMissingTitle: 'WebGPU is not enabled in this browser',
       webgpuMissingDetail: 'Open the page in a browser with WebGPU support or enable it in your browser settings, then reload.',
@@ -114,6 +146,7 @@ <h1 id="overlay-title"></h1>
 
     titleEl.textContent = strings.gameTitle;
     introEl.innerHTML = strings.intro.map(text => '<p>' + text + '</p>').join('');
+    sourceLinkEl.setAttribute('aria-label', strings.sourceAriaLabel);
 
     function setStatus(message) {
       statusEl.textContent = message;

README.md

@@ -1,5 +1,11 @@
 # Deep Future
 
+<div align="center">
+
+<strong><a href="https://cloudwu.github.io/deepfuture">>> Play Online <<</a></strong>
+
+</div>
+
 [简体中文](./README.zh-CN.md)
 
 > Settle worlds, advance techs, and endlessly evolve your galaxy's deep future. 

README.zh-CN.md

@@ -1,5 +1,11 @@
 # 深远未来
 
+<div align="center">
+
+<strong><a href="https://cloudwu.github.io/deepfuture">>> 在线体验 <<</a></strong>
+
+</div>
+
 [English](./README.md)
 
 > 拓殖星球，发展科技，永无止境地进化你银河系的深远未来。