Remove garbage

.vscode/settings.json

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

i18n.json

@@ -3,11 +3,12 @@
     "defaultLocale": "ja",
     "pages": {
       "*": ["common"],
-      "/": ["index", "common"],
+      "/": ["index", "minecraft", "common"],
       "/profile": ["profile", "common"],
       "/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,8 @@
+{
+    "title": "Minecraft Multiplayer",
+    "playing": "{{count}} player(s) online.",
+    "no_one": "No one is playing.",
+    "offline": "Server is down.",
+    "address": "Server address",
+    "fail": "Failed to retrieve server status."
+}

locales/ja/minecraft.json

@@ -0,0 +1,8 @@
+{
+    "title": "Minecraft マルチプレイ",
+    "playing": "{{count}} 人がプレイしています。",
+    "no_one": "現在、誰もログインしていません。",
+    "offline": "サーバーがオフラインのようです。",
+    "address": "サーバー アドレス",
+    "fail": "サーバーの状態を取得できませんでした。"
+}

pages/components/DiscordPlaying.js

@@ -7,22 +7,24 @@ function App (){
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("common")
-  const [dataPlaying, setDataPlaying] = useState({ hits: [] });
-  useEffect(async () => {
-    const result = await axios(
-      'https://discord.com/api/guilds/723409709306216498/widget.json',
-    );
-
-    setDataPlaying(result.dataPlaying);
-    }, []);
-  if (dataPlaying === undefined){
+  const [data, setData] = useState({ hits: [] });
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://discord.com/api/guilds/723409709306216498/widget.json',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
     console.log("[Discord API] データの取得に失敗しました。 / Failed to retrieve data.")
     return <p></p>
   }else{
-  const str = JSON.stringify(dataPlaying)
+  const str = JSON.stringify(data)
   
   if (str.indexOf("game") !== -1){
-  const yes_playing = t('yes_playing', {playing: dataPlaying.members[0].game.name})
+  const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
   return <p>{yes_playing}</p>
   }else{
   return <p></p>

pages/components/DiscordStatus.js

@@ -1,27 +1,37 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 
-const url = "https://discord.com/api/guilds/723409709306216498/widget.json";
 const App = () => {
-  const [status, setStatus] = React.useState(0);
-  React.useEffect(() => {
-    fetch(url)
-      .then((r) => r.json())
-      .then((j) => setStatus(j.members[0].status))
+  const [data, setData] = useState({ hits: [] });
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://discord.com/api/guilds/723409709306216498/widget.json',
+      );
+      setData(result.data);
+    };  
+    fetchData();
   }, []);
-
-  if (status === "online") {
-    return <div className="font-bold text-gray-700 rounded-full bg-green-500 flex w-5 h-5 items-center justify-center"></div>
-  }else{
-    if (status === "idle") {
-      return <div className="font-bold text-gray-700 rounded-full bg-yellow-500 flex w-5 h-5 items-center justify-center"></div>
-    }else{
-      if (status === "dnd") {
-        return <div className="font-bold text-gray-700 rounded-full bg-red-500 flex w-5 h-5 items-center justify-center"></div>
-      }else{
-        return <div className="font-bold text-gray-700 rounded-full bg-gray-500 flex w-5 h-5 items-center justify-center"></div>
+  const status = data.members && data.members[0].status;
+  return (
+  <>
+  <div className="z-50 transform translate-x-96 -translate-y-10 w-5">
+  {
+    (() => {
+      if (status == "online"){
+        return <div className="z-1000 text-green-700 rounded-full bg-green-500 flex w-5 h-5"></div>
+      } else if (status == "idle"){
+        return <div className="z-1000 text-yellow-700 rounded-full bg-green-500 flex w-5 h-5"></div>
+      } else if (status == "dnd"){
+        return <div className="z-1000 text-yellow-700 rounded-full bg-red-500 flex w-5 h-5"></div>
+      } else {
+        return <div className="z-1000 text-gray-700 rounded-full bg-red-500 flex w-5 h-5"></div>
       }
-    }
+    })()
   }
-};
+  </div>
+  </>
+  )
+}
 
 export default App;

pages/components/Minecraft.js

@@ -0,0 +1,49 @@
+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 [data, setData] = useState({ hits: [] });
+  const fail = t('minecraft:fail')
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://api.mcsrvstat.us/2/yude.jp',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+
+    if (data === undefined){
+        console.log("[Minecraft Query] データの取得に失敗しました。 / Failed to retrieve data.")
+        return (
+        <p>{fail}</p>
+        )
+      }else{
+        const status = data.online
+        const player = data.players && data.players.online
+        const playing = t('minecraft:playing', {count: player})
+        const no_one = t('minecraft:no_one')
+        const offline = t('minecraft:offline')
+        return (
+          <p className="text-center">
+            {(() => {
+            if (status) {
+            if (player == undefined || player == 0) {
+              return <span>{no_one}</span>
+            } else {
+              return <span>{playing}</span>
+            }}else{
+              return <span>{offline}</span>
+            }
+          })()}
+          </p>
+        )
+      }
+}

pages/components/Spotify.js

@@ -7,21 +7,22 @@ function App () {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("common")  
-  const [dataSpotify, setDataSpotify] = useState({ hits: [] });
-  useEffect(async () => {
-    const result = await axios(
-      '/api/Spotify',
-    );
-
-    setDataSpotify(result.dataSpotify);
-    }, []);
-
-  if (dataSpotify === undefined){
+  const [data, setData] = useState({ hits: [] });
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        '/api/Spotify',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
     console.log("[Spotify Web API] データの取得に失敗しました。 / Failed to retrieve data.")
     return <p></p>
   }else{
-  if (dataSpotify.isPlaying){
-   const status = dataSpotify.artist + ' / ' + dataSpotify.title
+  if (data.isPlaying){
+   const status = data.artist + ' / ' + data.title
    const listening = t('listening', {listening: status})
    return <p>{listening}</p>
   }else{

pages/index.js

@@ -20,6 +20,7 @@ export default function Index(props) {
   const house = t('house')
   const discord = t('discord')
   const mastodon = t('mastodon')
+  const minecraft = t('minecraft:title')
 
   return (
 
@@ -53,6 +54,11 @@ export default function Index(props) {
         <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-16">GitHub Organization</span><Link href="https://github.com/yudejp"><a><FontAwesomeIcon icon={faGithub} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
         <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10">Gitea</span><Link href="https://git.yude.jp"><a><FontAwesomeIcon icon={faGit} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
         <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-12">{mastodon}</span><Link href="https://mstdn.yude.jp"><a><FontAwesomeIcon icon={faMastodon} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
+        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-12">{minecraft}</span><Link href="/minecraft"><a>
+        <svg className="fill-current text-black dark:text-white w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.8 304.8">
+          <path d="M 39.10262 126.138 L 39.16748 12.39574 L 152.7982 12.33506 L 266.4289 12.27438 L 266.4289 126.0773 L 266.4289 239.8803 L 152.7333 239.8803 L 39.03775 239.8803 L 39.10262 126.138 Z M 260.4857 126.0776 L 260.4857 18.55703 L 152.8628 18.55703 L 45.23985 18.55703 L 45.23985 126.0776 L 45.23985 233.5982 L 152.8628 233.5982 L 260.4857 233.5982 L 260.4857 126.0776 Z M 103.8963 162.9245 L 103.8963 126.0776 L 116.1702 126.0776 L 128.4441 126.0776 L 128.4441 113.8758 L 128.4441 101.674 L 152.8628 101.674 L 177.2814 101.674 L 177.2814 113.8758 L 177.2814 126.0776 L 189.3835 126.0776 L 201.4856 126.0776 L 201.6573 150.5415 C 201.7517 163.9967 201.829 180.5779 201.8291 187.3885 L 201.8293 199.7715 L 189.6869 199.7715 L 177.5446 199.7715 L 177.4776 187.5093 L 177.4106 175.2471 L 152.7982 175.1855 L 128.1857 175.1239 L 128.1857 187.4477 L 128.1857 199.7715 L 116.041 199.7715 L 103.8963 199.7715 L 103.8963 162.9245 Z M 79.34843 77.02888 L 79.34843 52.62534 L 103.7671 52.62534 L 128.1857 52.62534 L 128.1857 77.02888 L 128.1857 101.4324 L 103.7671 101.4324 L 79.34843 101.4324 L 79.34843 77.02888 Z M 177.5398 77.02888 L 177.5398 52.62534 L 201.9585 52.62534 L 226.3771 52.62534 L 226.3771 77.02888 L 226.3771 101.4324 L 201.9585 101.4324 L 177.5398 101.4324 L 177.5398 77.02888 Z"/>
+        </svg>
+        </a></Link></div>
         </div>
       </div>
     </Layout>

pages/minecraft.js

@@ -0,0 +1,47 @@
+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'
+import { faMap } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+
+export default function About(props) {
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("minecraft")
+    const title = t('title')
+    const address = t('address')
+    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>
+                <div className="text-center">
+                <Minecraft />
+                <p>{address}: <code>yude.jp</code></p>
+                <Link href="https://dynmap.yude.jp">
+                <a>
+                <button
+                className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
+                type="button"
+              >
+                <FontAwesomeIcon icon={faMap} className="w-5 h-5 inline"/> Dynmap
+              </button>
+              </a>
+              </Link>
+              </div>
+            </div>
+            </Layout>
+        )
+}

pages/profile.js

@@ -38,11 +38,7 @@ export default function About(props) {
         {
          // Heading
         }
-        <div className="flex justify-center">
-          <div>
-          <div className="z-50 transform translate-x-40 translate-y-48 w-5">
-          <DiscordStatus />
-          </div>
+        <div>
           <Image
             className   = "object-contain rounded-full hover:animate-rumble z-0"
             src         = "/static/images/avatar.png"
@@ -50,14 +46,13 @@ export default function About(props) {
             width       = {200}
             height      = {200}
             unoptimized = {true}
-        />
-        
-          <p className="text-4xl subpixel-antialiased">yude</p>
+          />
+          <DiscordStatus />
+          <p className="text-4xl transform -translate-y-4">yude</p>
           <div>
           <DiscordPlaying />
           <Spotify />
           </div>
-          </div>
         </div>
         
         {