.vscode/settings.json

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

i18n.json

@@ -3,12 +3,11 @@
     "defaultLocale": "ja",
     "pages": {
       "*": ["common"],
-      "/": ["index", "minecraft", "common"],
+      "/": ["index", "common"],
       "/profile": ["profile", "common"],
       "/status": ["status", "common"],
       "/house": ["house", "common"],
       "/tos": ["tos", "common"],
-      "/hcunews": ["hcunews", "common"],
-      "/minecraft": ["minecraft", "common"]
+      "/hcunews": ["hcunews", "common"]
     }
   }

locales/en/minecraft.json

@@ -1,8 +0,0 @@
-{
-    "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

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

pages/components/DiscordPlaying.js

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

pages/components/DiscordStatus.js

@@ -1,37 +1,27 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React from "react";
 
+const url = "https://discord.com/api/guilds/723409709306216498/widget.json";
 const App = () => {
-  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();
+  const [status, setStatus] = React.useState(0);
+  React.useEffect(() => {
+    fetch(url)
+      .then((r) => r.json())
+      .then((j) => setStatus(j.members[0].status))
   }, []);
-  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>
+
+  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{
-        return <div className="z-1000 text-gray-700 rounded-full bg-red-500 flex w-5 h-5"></div>
+    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>
       }
-    })()
     }
-  </div>
-  </>
-  )
   }
+};
 
 export default App;

pages/components/Minecraft.js

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

pages/index.js

@@ -20,7 +20,6 @@ export default function Index(props) {
   const house = t('house')
   const discord = t('discord')
   const mastodon = t('mastodon')
-  const minecraft = t('minecraft:title')
 
   return (
 
@@ -54,11 +53,6 @@ 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

@@ -1,47 +0,0 @@
-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,7 +38,11 @@ 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>
           <Image
             className   = "object-contain rounded-full hover:animate-rumble z-0"
             src         = "/static/images/avatar.png"
@@ -47,13 +51,14 @@ export default function About(props) {
             height      = {200}
             unoptimized = {true}
         />
-          <DiscordStatus />
-          <p className="text-4xl transform -translate-y-4">yude</p>
+        
+          <p className="text-4xl subpixel-antialiased">yude</p>
           <div>
           <DiscordPlaying />
           <Spotify />
           </div>
           </div>
+        </div>
         
         {
          // Description