epsilon_webui/src/pages/MinecraftServer.vue

<template>
  <div class="pages">
    <div
      id="introduction"
      class="page"
    >
      <div class="title">
        <h1>RSEMCS</h1>
        <p>Reslate Systems - Entertainment: Minecraft Server, or RSEMCS (for brevity, of course), a the private survival Minecraft server. There is an overall objective to keep the server close to vanilla however with a few minor tweaks.</p>
      </div>
      <div class="content">
        <h2>Status</h2>
        <p>The server is currently <b>{{ online ? "online" : "offline" }}</b><span v-if="online"> with <b>{{ players.now }} players out of {{ players.max }}</b> slots currently playing. The server is running <b>{{ server.name }}</b></span><span v-else-if="lastOnline">. It was last seen online {{ LastOnlineInMin }} minutes ago</span>. This information was updated <b>{{ LastUpdateInSec }} seconds ago</b>.</p>
      </div>
    </div>
    <div
      id="about"
      class="page"
    >
      <div class="panels">
        <div
          id="join"
          class="panel"
        >
          <div class="title">
            <h2>Looking to play?</h2>
          </div>
          <div class="content map">
            <p>Assuming you are whitelisted, there's nothing to it asides from just joining the server at <code>ent.sys.reslate.xyz</code> (yup, exactly the same as this website).</p>
          </div>
        </div>
        <div
          id="basics"
          class="panel"
        >
          <div class="board">
            <div class="title">
              <h2>Basics</h2>
              <p>Some basics explaining the server.</p>
            </div>
            <div class="content">
              <ul>
                <li>The <b>currency</b> on the server is <b>emeralds</b>.</li>
                <li>To create a <b>vault</b>, place a <b>sign</b> on any storage block</li>
                <li><b>Grave Artifacts</b> can be held to produce a grave on death!</li>
                <li><b>Protection Artifacts</b> can be used to protect your land and yourself!</li>
                <li><b>/money help</b> will tell you how to use your money.</li>
                <li><b>/ps help</b> will show you the commands for your <b>protection artifact</b>.</li>
                <li><b>New recipes</b> can be found by checking your <b>recipe book</b>. Remember to check in the <b>crafting table</b>!</li>
                <li><b>Infernal hostiles</b> are like minibosses! They are incredibly rare, however have equally incredible drops!</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>   
    <div
      id="maps"
      class="page"
    >
      <div class="title">
        <h2>Maps</h2>
        <p>For all your reconnaissance needs...</p>
      </div>
      <iframe
        ref="dynmap"
        src="https:/ent.sys.reslate.xyz/resmcs/dynmap/"
        class="map"
        allowtransparency="true"
        @load="iframeLoaded"
      >
        <p>Your browser does not support iframes. Visit <a href="https:/ent.sys.reslate.xyz/resmcs/dynmap/">the full dynmap page here</a></p>
      </iframe>
    </div>   
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      online: "loading...",
      motd: "loading...",
      players: {
        max: "loading...",
        now: "loading..."
      },
      server: {
        name: "loading...",
        protocol: "loading...",
      },
      lastOnline: "loading...",
      lastUpdate: "loading..."
    };
  },
  computed: {
    LastUpdateInSec() {
      let date = new Date(this.lastUpdate * 1000);
      return date.getSeconds();
    },
    LastOnlineInMin() {
      let date = new Date(this.lastOnline * 1000);
      return date.getMinutes();
    }
  },
  async mounted() {
    let results = await axios.get("https://mcapi.us/server/status?ip=ent.sys.reslate.xyz");
    let info = results.data;
    this.online = info.online;
    this.motd = info.motd;
    this.players = info.players;
    this.server = info.server;
    this.lastOnline = info.last_online;
    this.lastUpdate = info.last_updated;
  },
  methods: {
    iframeLoaded() {
      let iframe = this.$refs.dynmap;
      let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
      iframeDocument.body.style.backgroundColor = "transparent";
    }
  },
};
</script>

<style lang="scss" scoped>
@use "@/styles/themer";
@use "sass:color";

#introduction {
  @include themer.themed {
    $gradient-color: themer.color-of("background");
    background-image: 
      radial-gradient(circle at center, 
      color.change($color: $gradient-color, $alpha: 0.8) 0%, 
      color.change($color: $gradient-color, $alpha: 0.1) 60%, 
      color.change($color: $gradient-color, $alpha: 0.2) 100%
      ), 
      url("@/assets/images/minecraft/landscapes/day.png");
  }
}

#about {
  #basics {
    .board {
      .title, .content {
        width: auto;
        max-width: 35rem;
      }
    }

    @include themer.themed {
      $gradient-color: themer.color-of("background");
      background-image: 
        radial-gradient(circle at center, 
        color.change($color: $gradient-color, $alpha: 0.8) 0%, 
        color.change($color: $gradient-color, $alpha: 0.5) 60%, 
        color.change($color: $gradient-color, $alpha: 0.2) 100%
        ), 
        url("@/assets/images/minecraft/textures/birch_plank.png");
    }
    background-repeat: repeat;
    background-size: auto;
  }
}

@font-face {
  font-family: Pixel;
  src: url("https://res.sys.reslate.xyz/dl/fonts/PublicPixel.ttf");
}


#maps {
  padding-top: 4rem;
  @include themer.themed {
    $gradient-color: themer.color-of("background");
    background-image: 
      linear-gradient(180deg, 
      color.change($color: $gradient-color, $alpha: 0.8) 0%, 
      color.change($color: $gradient-color, $alpha: 0.8) 100%
      ), 
      url("@/assets/images/minecraft/landscapes/sunset.png");
  }

  .map {
    width: 90%;
    flex-grow: 1;
    background-image: url("@/assets/images/minecraft/textures/map_center.png");
    background-repeat: repeat;
    background-clip: padding-box;
    margin-bottom: 5%;
    

    border-image-slice:27 27 27 27;
    border-image-width:27px 27px 27px 27px;
    border-image-outset:0px 0px 0px 0px;
    border-image-repeat:repeat repeat;
    border-image-source:url("@/assets/images/minecraft/textures/map.png");
    border-style:solid;
  }
}

</style>