RSEMCS mostly complete.
69
package-lock.json
generated
@ -9,8 +9,11 @@
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"axios": "^0.24.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
"bootstrap-icons": "^1.7.2",
|
||||
"core-js": "^3.20.3",
|
||||
"css.gg": "^2.0.0",
|
||||
"regenerator-runtime": "^0.13.9",
|
||||
"vue": "^3.2.26",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
@ -2527,6 +2530,14 @@
|
||||
"lodash": "^4.17.14"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "0.24.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
|
||||
"integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.14.4"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-loader": {
|
||||
"version": "8.2.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz",
|
||||
@ -2728,14 +2739,6 @@
|
||||
"@popperjs/core": "^2.10.2"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-icons": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
|
||||
"integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ==",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -3102,6 +3105,16 @@
|
||||
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.20.3",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
|
||||
"integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==",
|
||||
"hasInstallScript": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/core-js-compat": {
|
||||
"version": "3.20.2",
|
||||
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.2.tgz",
|
||||
@ -3199,6 +3212,11 @@
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/css.gg": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css.gg/-/css.gg-2.0.0.tgz",
|
||||
"integrity": "sha512-8qO59kSXLbewo7xaUM4eC8328MTdGmb8atpmw6PRzeDGsZrCkAVjJzKeFDIntagl1/aCee+NG1OQtIvWAjgG/A=="
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
@ -4113,7 +4131,6 @@
|
||||
"version": "1.14.7",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
|
||||
"integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
@ -6028,8 +6045,7 @@
|
||||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
|
||||
},
|
||||
"node_modules/regenerator-transform": {
|
||||
"version": "0.14.5",
|
||||
@ -9445,6 +9461,14 @@
|
||||
"lodash": "^4.17.14"
|
||||
}
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.24.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
|
||||
"integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.14.4"
|
||||
}
|
||||
},
|
||||
"babel-loader": {
|
||||
"version": "8.2.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz",
|
||||
@ -9608,11 +9632,6 @@
|
||||
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
|
||||
"requires": {}
|
||||
},
|
||||
"bootstrap-icons": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
|
||||
"integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ=="
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -9911,6 +9930,11 @@
|
||||
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
|
||||
"dev": true
|
||||
},
|
||||
"core-js": {
|
||||
"version": "3.20.3",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
|
||||
"integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag=="
|
||||
},
|
||||
"core-js-compat": {
|
||||
"version": "3.20.2",
|
||||
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.2.tgz",
|
||||
@ -9981,6 +10005,11 @@
|
||||
"integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
|
||||
"dev": true
|
||||
},
|
||||
"css.gg": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css.gg/-/css.gg-2.0.0.tgz",
|
||||
"integrity": "sha512-8qO59kSXLbewo7xaUM4eC8328MTdGmb8atpmw6PRzeDGsZrCkAVjJzKeFDIntagl1/aCee+NG1OQtIvWAjgG/A=="
|
||||
},
|
||||
"cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
@ -10705,8 +10734,7 @@
|
||||
"follow-redirects": {
|
||||
"version": "1.14.7",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
|
||||
"integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
|
||||
},
|
||||
"forwarded": {
|
||||
"version": "0.2.0",
|
||||
@ -12121,8 +12149,7 @@
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
|
||||
},
|
||||
"regenerator-transform": {
|
||||
"version": "0.14.5",
|
||||
|
@ -37,8 +37,11 @@
|
||||
"webpack-merge": "^5.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.24.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
"bootstrap-icons": "^1.7.2",
|
||||
"core-js": "^3.20.3",
|
||||
"css.gg": "^2.0.0",
|
||||
"regenerator-runtime": "^0.13.9",
|
||||
"vue": "^3.2.26",
|
||||
"vue-router": "^4.0.12"
|
||||
}
|
||||
|
99
src/App.vue
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid">
|
||||
<a
|
||||
class="navbar-brand"
|
||||
@ -9,39 +9,31 @@
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
style="height:1.25rem"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navigation"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<i class="bi bi-list" />
|
||||
<i class="gg-menu" />
|
||||
</button>
|
||||
<div
|
||||
id="navigation"
|
||||
class="collapse navbar-collapse"
|
||||
>
|
||||
<div class="navbar-nav">
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'IntroPortal'}"
|
||||
active-class="active"
|
||||
>
|
||||
Info
|
||||
</router-link>
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'steam'}"
|
||||
active-class="active"
|
||||
>
|
||||
Steam
|
||||
</router-link>
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'resmcs'}"
|
||||
active-class="active"
|
||||
>
|
||||
Minecraft
|
||||
</router-link>
|
||||
<div
|
||||
v-for="route in $router.getRoutes()"
|
||||
:key="route.path"
|
||||
>
|
||||
<div class="navbar-nav">
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="route.path"
|
||||
active-class="active"
|
||||
>
|
||||
{{ route.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,18 +48,67 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "/node_modules/bootstrap/js/dist/collapse";
|
||||
export default {
|
||||
data() {
|
||||
console.log(this.$router.getRoutes());
|
||||
return {
|
||||
greeting: "Hello World!"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.greeting {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
<style lang="scss">
|
||||
@use "sass:color";
|
||||
@use "@/styles/themer";
|
||||
|
||||
@use "/node_modules/css.gg/icons/scss/menu.scss";
|
||||
|
||||
@import "/node_modules/bootstrap/scss/functions";
|
||||
@import "/node_modules/bootstrap/scss/variables";
|
||||
@import "/node_modules/bootstrap/scss/mixins";
|
||||
@import "/node_modules/bootstrap/scss/utilities";
|
||||
@import "/node_modules/bootstrap/scss/nav";
|
||||
@import "/node_modules/bootstrap/scss/navbar";
|
||||
@import "/node_modules/bootstrap/scss/transitions";
|
||||
|
||||
|
||||
.navbar {
|
||||
position: fixed !important;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
|
||||
@include themer.themed {
|
||||
border-bottom-color: color.adjust(themer.color-of("navbar"), $lightness: 10%);
|
||||
background-color: color.change($color: themer.color-of("navbar"), $alpha: 0.75);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@extend .navbar-brand;
|
||||
@include themer.themed {
|
||||
color: themer.color-of("navbar-brand");
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
@include themer.themed {
|
||||
color: themer.color-of("navbar-link");
|
||||
}
|
||||
&.active {
|
||||
@include themer.themed {
|
||||
color: themer.color-of("navbar-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
@include themer.themed {
|
||||
color: color.invert(themer.color-of("navbar"), 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
BIN
src/assets/images/minecraft/landscapes/day.png
Normal file
After Width: | Height: | Size: 2.5 MiB |
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
BIN
src/assets/images/minecraft/landscapes/sunset.png
Normal file
After Width: | Height: | Size: 2.0 MiB |
BIN
src/assets/images/minecraft/textures/birch_board.png
Normal file
After Width: | Height: | Size: 53 KiB |
BIN
src/assets/images/minecraft/textures/birch_plank.png
Normal file
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/minecraft/textures/board.png
Normal file
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/images/minecraft/textures/map.png
Normal file
After Width: | Height: | Size: 967 B |
BIN
src/assets/images/minecraft/textures/map_center.png
Normal file
After Width: | Height: | Size: 4.6 KiB |
BIN
src/assets/images/minecraft/textures/oak_plank.png
Normal file
After Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 8.2 MiB After Width: | Height: | Size: 8.2 MiB |
@ -1,6 +1,9 @@
|
||||
import "@/styles/global.scss";
|
||||
import "bootstrap/dist/js/bootstrap";
|
||||
import "core-js/stable";
|
||||
import "regenerator-runtime/runtime";
|
||||
|
||||
import App from "./App.vue";
|
||||
|
||||
import { createApp } from "vue";
|
||||
|
||||
import { router } from "./router/router";
|
||||
|
@ -1,15 +1,199 @@
|
||||
<template>
|
||||
<main>
|
||||
<h1>REMCS</h1>
|
||||
</main>
|
||||
<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: {
|
||||
},
|
||||
};
|
||||
</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-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@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: 95%;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 2.5%;
|
||||
background-color: transparent;
|
||||
|
||||
border-width: 20px;
|
||||
|
||||
border-image-slice:27 27 27 27;
|
||||
border-image-width:20px 20px 20px 20px;
|
||||
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>
|
@ -6,7 +6,7 @@
|
||||
id="steam"
|
||||
class="panel"
|
||||
>
|
||||
<div class="contained-title">
|
||||
<div class="title">
|
||||
<h2>Steam System</h2>
|
||||
<hr>
|
||||
<p>Access the RES Steam web interface for establishing connections to the game system and viewing some statistics.</p>
|
||||
@ -16,7 +16,7 @@
|
||||
id="minecraft"
|
||||
class="panel"
|
||||
>
|
||||
<div class="contained-title">
|
||||
<div class="title">
|
||||
<h2>Minecraft Server</h2>
|
||||
<hr>
|
||||
<p> Access the RES Minecraft Server web interface for interacting with a variety of game utilities and information.</p>
|
||||
@ -28,7 +28,7 @@
|
||||
id="about"
|
||||
class="page"
|
||||
>
|
||||
<div class="contained-title">
|
||||
<div class="title">
|
||||
<h1>What is this?</h1>
|
||||
<p>This is the web interface for Reslate Entertainment Systems. This is <b>not</b> a public service and you may be on this page by mistake. Alternatively, you may be this page completely intentionally!</p>
|
||||
</div>
|
||||
@ -41,9 +41,15 @@
|
||||
@use "sass:color";
|
||||
#steam {
|
||||
@include themer.themed {
|
||||
$gradient-color: themer.color-of("main");
|
||||
background-size: cover;
|
||||
background-image: radial-gradient(circle at center, color.change($color: $gradient-color, $alpha: 0.0) 0%, color.change($color: $gradient-color, $alpha: 0.1) 60%, color.change($color: $gradient-color, $alpha: 0.2) 100%), url("@/assets/images/controller.png");
|
||||
$gradient-color: themer.color-of("background");
|
||||
background-image:
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
color.change($color: $gradient-color, $alpha: 0.0) 0%,
|
||||
color.change($color: $gradient-color, $alpha: 0.1) 60%,
|
||||
color.change($color: $gradient-color, $alpha: 0.2) 100%
|
||||
),
|
||||
url("@/assets/images/steam/controller.png");
|
||||
|
||||
.contained-title {
|
||||
color: white;
|
||||
@ -53,9 +59,15 @@
|
||||
|
||||
#minecraft {
|
||||
@include themer.themed {
|
||||
$gradient-color: themer.color-of("main");
|
||||
background-size: cover;
|
||||
background-image: radial-gradient(circle at center, color.change($color: $gradient-color, $alpha: 0.2) 0%, color.change($color: $gradient-color, $alpha: 0.1) 60%, color.change($color: $gradient-color, $alpha: 0.8, $lightness: 10%) 100%), url("@/assets/images/minecraft.png");
|
||||
$gradient-color: themer.color-of("background");
|
||||
background-image:
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
color.change($color: $gradient-color, $alpha: 0.2) 0%,
|
||||
color.change($color: $gradient-color, $alpha: 0.1) 60%,
|
||||
color.change($color: $gradient-color, $alpha: 0.8, $lightness: 10%) 100%
|
||||
),
|
||||
url("@/assets/images/minecraft/landscapes/day.png");
|
||||
|
||||
.contained-title {
|
||||
color: white;
|
||||
@ -65,9 +77,15 @@
|
||||
|
||||
#about {
|
||||
@include themer.themed {
|
||||
$gradient-color: themer.color-of("main");
|
||||
background-size: cover;
|
||||
background-image: radial-gradient(circle at center, color.change($color: $gradient-color, $alpha: 0.55) 0%, color.change($color: $gradient-color, $alpha: 0.5) 60%, color.change($color: $gradient-color, $alpha: 1, $lightness: 10%) 100%), url("@/assets/images/about.png");
|
||||
$gradient-color: themer.color-of("background");
|
||||
background-image:
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
color.change($color: $gradient-color, $alpha: 0.55) 0%,
|
||||
color.change($color: $gradient-color, $alpha: 0.5) 60%,
|
||||
color.change($color: $gradient-color, $alpha: 1, $lightness: 10%) 100%
|
||||
),
|
||||
url("@/assets/images/generic_room.png");
|
||||
.contained-title {
|
||||
color: white;
|
||||
}
|
||||
|
@ -5,17 +5,17 @@ import SteamServer from "@/pages/SteamServer.vue";
|
||||
export const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "IntroPortal",
|
||||
name: "Home",
|
||||
component: OverviewInfo,
|
||||
},
|
||||
{
|
||||
path: "/resmcs",
|
||||
name: "resmcs",
|
||||
path: "/mcs",
|
||||
name: "RSEMCS",
|
||||
component: MinecraftServer,
|
||||
},
|
||||
{
|
||||
path: "/steam",
|
||||
name: "steam",
|
||||
name: "RSE-Steam",
|
||||
component: SteamServer,
|
||||
}
|
||||
];
|
@ -1,13 +1,13 @@
|
||||
$themes: (
|
||||
"dark": (
|
||||
"background": #2c093b,
|
||||
"background": #531e6c,
|
||||
"navbar": #623d99,
|
||||
"navbar-brand": #fcfcff,
|
||||
"navbar-link": #fcf0ff,
|
||||
"navbar-active": #00c9a9,
|
||||
"main": #501b69,
|
||||
"footer": #15061d,
|
||||
"text": #cfcfff,
|
||||
"text": #dfdfff,
|
||||
"special": #94e22b,
|
||||
"muted": #797a7e,
|
||||
),
|
||||
|
@ -1,67 +1,40 @@
|
||||
@use "themer";
|
||||
@use "sass:color";
|
||||
@use "/node_modules/bootstrap/scss/bootstrap";
|
||||
@import "/node_modules/bootstrap-icons/font/bootstrap-icons.css"; // @use introduces errors. Perhaps webpack is missing a loader?
|
||||
|
||||
header > nav {
|
||||
@extend .navbar;
|
||||
@extend .navbar-expand-lg;
|
||||
|
||||
position: fixed !important;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
|
||||
@include themer.themed {
|
||||
border-bottom-color: color.adjust(themer.color-of("navbar"), $lightness: 10%);
|
||||
background-color: color.change($color: themer.color-of("navbar"), $alpha: 0.75);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@include themer.themed {
|
||||
color: themer.color-of("navbar-brand");
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
@include themer.themed {
|
||||
color: themer.color-of("navbar-link");
|
||||
}
|
||||
&.active {
|
||||
@include themer.themed {
|
||||
color: themer.color-of("navbar-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
@include themer.themed {
|
||||
color: color.invert(themer.color-of("navbar"), 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "/node_modules/bootstrap/scss/bootstrap-utilities.scss";
|
||||
@import "/node_modules/bootstrap/scss/root";
|
||||
@import "/node_modules/bootstrap/scss/helpers";
|
||||
@import "/node_modules/bootstrap/scss/reboot";
|
||||
@import "/node_modules/bootstrap/scss/containers";
|
||||
@import "/node_modules/bootstrap/scss/type";
|
||||
|
||||
.pages {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
|
||||
.page {
|
||||
min-height: 100%;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.contained-title {
|
||||
text-align: center;
|
||||
max-width: 50%;
|
||||
.title {
|
||||
@extend .container;
|
||||
@extend .my-3;
|
||||
text-align: center;
|
||||
max-width: 30rem;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .container;
|
||||
@extend .my-3;
|
||||
max-width: 30rem;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panels {
|
||||
@ -70,6 +43,7 @@ header > nav {
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
.panel {
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
@ -78,22 +52,25 @@ header > nav {
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
min-height: 100vh;
|
||||
@include themer.themed {
|
||||
color: themer.color-of("text");
|
||||
background-color: themer.color-of("background");
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
@include themer.themed {
|
||||
color: themer.color-of("special");
|
||||
background-color: color.invert(themer.color-of("special"), 100%);
|
||||
}
|
||||
|
||||
border-radius: 2px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
@ -49,6 +49,16 @@ module.exports = {
|
||||
test: /\.(woff|woff2|eot|ttf|otf)$/i,
|
||||
type: "asset/resource",
|
||||
},
|
||||
{
|
||||
test: /\.m?js$/,
|
||||
exclude: /(node_modules|bower_components)/,
|
||||
use: {
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: ["@babel/preset-env"]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
|