[feat] 実地とそれ以外を区別する仕組みを追加

* 実地のパソコンはこのサイトを表示した状態で、以下をコンソールで実行すること: `localStorage.setItem("is_offline","true")`

Author: ski-dot-com

src/exhibitions.ts

@@ -19,11 +19,13 @@ type Exhibition = {
     alt: string;
   };
   description: string;
-  url: string;
+  url?: string;
+  dialog?: string;
   isNew: boolean;
   target: TargetAge;
   takes: TimeEst;
   disabled?: boolean;
+  offline_only?: boolean;
 };
 
 export const exhibitions: Exhibition[] = [
@@ -61,7 +63,7 @@ export const exhibitions: Exhibition[] = [
     takes: timeEst.long,
   },
   {
-    // disabled: true,
+    offline_only: true,
     title: "ブラウザハック入門",
     image: {
       src: "img/browser-hack.png",
@@ -93,7 +95,8 @@ export const exhibitions: Exhibition[] = [
     takes: timeEst.short_med,
   },
   {
-    disabled: true,
+    // disabled: true,
+    offline_only: true,
     title: "Hack-shooter",
     image: {
       src: "img/Hackshooter_theme.png",
@@ -102,7 +105,7 @@ export const exhibitions: Exhibition[] = [
     description: `
       シューティングゲームの裏側をプログラミングすることによって、より簡単に、よりスマートにゲームを攻略しよう！
 		`,
-    url: "https://life-code.utcode.net/",
+    dialog: "タスクバーにあるペンギンのアイコンをクリックしてください。",
     isNew: true,
     target: "小学生以上におすすめ",
     takes: timeEst.med_long,
@@ -119,7 +122,7 @@ export const exhibitions: Exhibition[] = [
 		`,
     url: "https://plusoperatorgame.onrender.com",
     isNew: true,
-    target: "中高生以上におすすめ",
+    target: "小学生以上におすすめ",
     takes: timeEst.short,
   },
   {

src/pages/index.tsx

@@ -4,8 +4,8 @@ import Heading from "@theme/Heading";
 import { exhibitions } from "../exhibitions.ts";
 
 const trackerURL = "https://" + "tracker.ut-code.workers" + ".dev";
-
 export default function Home(): JSX.Element {
+  const is_offline = !!localStorage.getItem("is_offline");
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout>
@@ -56,27 +56,38 @@ export default function Home(): JSX.Element {
                 <div className="card__footer">
                   <button
                     type="button"
-                    disabled={ex.disabled}
+                    disabled={ex.disabled || (ex.offline_only && !is_offline)}
                     onClick={async () => {
                       console.log(`clicked ${ex.title}`);
                       const url = ex.url;
-                      window.open(url, "_blank").focus();
-                      // CORS の関係でエラーが出るが、特に問題ないので放置。
-                      try {
-                        await fetch(trackerURL, {
-                          method: "POST",
-                          body: JSON.stringify({
-                            url,
-                            key: "2e0c7cad39e09314a46f217c6107f96e08bd13984cd4ae4c29d96f5db440dba8",
-                            kind: "festival",
-                          }),
-                        });
-                      } catch (err) {}
+                      if (url) {
+                        window.open(url, "_blank").focus();
+                        // CORS の関係でエラーが出るが、特に問題ないので放置。
+                        try {
+                          await fetch(trackerURL, {
+                            method: "POST",
+                            body: JSON.stringify({
+                              url,
+                              key: "2e0c7cad39e09314a46f217c6107f96e08bd13984cd4ae4c29d96f5db440dba8",
+                              kind: "festival",
+                            }),
+                          });
+                        } catch (err) {}
+                      } else {
+                        const dialog = ex.dialog;
+                        if (dialog) {
+                          alert(dialog);
+                        }
+                      }
                     }}
                     rel="noreferrer"
                     className="button button--primary button--block"
                   >
-                    {ex.disabled ? "準備中…" : "この企画を体験する"}
+                    {ex.disabled
+                      ? "準備中…"
+                      : ex.offline_only && !is_offline
+                        ? "実地のみ"
+                        : "この企画を体験する"}
                   </button>
                 </div>
               </div>