Add page "minecraft/"

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

i18n.json

@@ -8,6 +8,7 @@
       "/status": ["status", "common"],
       "/house": ["house", "common"],
       "/tos": ["tos", "common"],
-      "/hcunews": ["hcunews", "common"]
+      "/hcunews": ["hcunews", "common"],
+      "/minecraft": ["minecraft", "common"]
     }
   }

locales/en/minecraft.json

@@ -0,0 +1,5 @@
+{
+    "title": "Minecraft Multiplayer",
+    "playing": "{{count}} player(s) online.",
+    "no_one": "No one is playing."
+}

locales/ja/minecraft.json

@@ -0,0 +1,5 @@
+{
+    "title": "Minecraft マルチプレイ",
+    "playing": "{{count}} 人がプレイしています。",
+    "no_one": "現在、誰もログインしていません。"
+}

pages/components/Minecraft.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import axios from 'axios';
+
+export default function Minecraft(props) {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("minecraft")
+
+  const [dataMinecraft, setDataMinecraft] = useState({ hits: [] });
+  const [data, setData] = useState({ hits: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://mcapi.us/server/status?ip=yude.jp',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+
+    if (data === undefined){
+        console.log("[Minecraft Query] データの取得に失敗しました。 / Failed to retrieve data.")
+        console.log(data)
+        return (
+        <p>Failed to retrieve data</p>
+        )
+      }else{
+        console.log(data)
+        const player = data.players && data.players.now
+        const playing = t('minecraft:playing', {count: player})
+        const no_one = t('minecraft:no_one')
+        return (
+          <p className="text-center">
+            {(() => {
+            if (player == 0) {
+              return <span>{no_one}</span>
+            } else {
+              return <span>{playing}</span>
+            }
+          })()}
+          </p>
+        )
+      }
+}

pages/minecraft.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import Layout from "./components/Layout"
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import Minecraft from './components/Minecraft'
+import Image from 'next/image'
+
+export default function About(props) {
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("minecraft")
+    const title = t('title')
+
+    return (
+        <Layout title={title}>
+        <div>
+        <p className="my-2 text-3xl text-center">{title}</p>
+        <div className="w-full">
+        <Image
+            src         = "/static/images/dynmap.png"
+            alt         = "Dynmap Header"
+            unoptimized = {true}
+            width       = {1354}
+            height      = {619}
+        />
+        </div>
+        <Minecraft />
+        </div>
+        </Layout>
+        )
+}