mrrpnya
39739d0444
Some checks failed
Run Tests / unit-tests (pull_request) Has been cancelled
Run Tests / cypress-tests (chrome) (pull_request) Has been cancelled
Run Tests / cypress-tests (edge) (pull_request) Has been cancelled
Run Tests / cypress-tests (firefox) (pull_request) Has been cancelled
Run Tests / install (pull_request) Has been cancelled
Run Tests / install (push) Failing after 7m36s
Run Tests / unit-tests (push) Has been skipped
Run Tests / cypress-tests (chrome) (push) Has been skipped
Run Tests / cypress-tests (edge) (push) Has been skipped
Run Tests / cypress-tests (firefox) (push) Has been skipped
318 lines
10 KiB
Vue
318 lines
10 KiB
Vue
<template>
|
|
<div class="servers">
|
|
<h1>Game Servers</h1>
|
|
|
|
<!-- Always On Section -->
|
|
<section class="server-section">
|
|
<h2>Always On</h2>
|
|
<div class="server-grid">
|
|
<div
|
|
v-for="(server, name) in alwaysOnServers"
|
|
:key="name"
|
|
class="server-card"
|
|
@click="openModal(name)"
|
|
>
|
|
<h3>{{ name }}</h3>
|
|
<p>
|
|
Status: <span :class="server.status">{{ server.status }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Toggled Section -->
|
|
<section class="server-section">
|
|
<h2>Toggled On/Off As Needed</h2>
|
|
<div class="server-grid">
|
|
<div
|
|
v-for="(server, name) in toggledServers"
|
|
:key="name"
|
|
class="server-card"
|
|
@click="openModal(name)"
|
|
>
|
|
<h3>{{ name }}</h3>
|
|
<p>
|
|
Status: <span :class="server.status">{{ server.status }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Modal -->
|
|
<div v-if="showModal" class="modal-overlay" @click="closeModal">
|
|
<div class="modal-content" @click.stop>
|
|
<img v-if="modalData.banner" :src="modalData.banner" alt="Server Banner" class="banner" />
|
|
<h2>{{ modalData.name || 'No Server Selected' }}</h2>
|
|
<p>
|
|
Status:
|
|
<span :class="modalData.status">
|
|
<i v-if="modalData.status === 'online'" class="fas fa-check-circle online-icon"></i>
|
|
<i
|
|
v-else-if="modalData.status === 'offline'"
|
|
class="fas fa-times-circle offline-icon"
|
|
></i>
|
|
<i v-else class="fas fa-question-circle unknown-icon"></i>
|
|
{{ modalData.status || 'unknown' }}
|
|
</span>
|
|
</p>
|
|
|
|
<p v-if="showPlayerCount">
|
|
<i class="fas fa-users players-icon"></i>
|
|
Players Online: {{ displayPlayerCount }}
|
|
</p>
|
|
|
|
<h3>About</h3>
|
|
<p v-if="modalData.about" v-html="modalData.about"></p>
|
|
<p v-else>No description available.</p>
|
|
|
|
<h3>Connection Instructions</h3>
|
|
<div v-if="modalData.instructions">
|
|
<p class="ip-display" v-if="modalData.instructions.public">
|
|
Public:
|
|
<span class="ip">{{ modalData.instructions.public }}</span>
|
|
</p>
|
|
<p class="ip-display" v-if="modalData.instructions.local">
|
|
Local:
|
|
<span class="ip">{{ modalData.instructions.local }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<h3 v-if="modalData.installInstructions">Installation Instructions</h3>
|
|
<p v-if="modalData.installInstructions">{{ modalData.installInstructions }}</p>
|
|
|
|
<a v-if="modalData.link" :href="modalData.link" target="_blank" class="link">
|
|
Download Modpack
|
|
</a>
|
|
<button @click="closeModal" class="close-button">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
|
|
interface ServerInstructions {
|
|
public: string
|
|
local: string
|
|
}
|
|
|
|
interface Server {
|
|
name?: string
|
|
banner: string
|
|
status: string
|
|
playersOnline?: number
|
|
maxPlayers?: number
|
|
about: string
|
|
instructions: ServerInstructions
|
|
installInstructions?: string
|
|
queryIP: string
|
|
link: string | null
|
|
}
|
|
|
|
export default defineComponent({
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
modalData: {} as Server,
|
|
|
|
alwaysOnServers: {
|
|
'Minecraft Java Modern': {
|
|
banner: 'minecraft-modern-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 20,
|
|
about: 'This is the modern Minecraft Java server.',
|
|
instructions: {
|
|
public: '',
|
|
local: '192.168.1.201',
|
|
},
|
|
installInstructions: "Download Minecraft Java Edition from Mojang's website.",
|
|
queryIP: '',
|
|
link: '',
|
|
},
|
|
'Minecraft Java 1.12.2': {
|
|
banner: 'minecraft-1-12-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 10,
|
|
about: 'This is the Minecraft Java 1.12.2 server with mods.',
|
|
instructions: {
|
|
public: '',
|
|
local: '',
|
|
},
|
|
installInstructions: 'Install Forge 1.12.2 and download the modpack provided.',
|
|
queryIP: '',
|
|
link: '',
|
|
},
|
|
Terraria: {
|
|
banner: 'terraria-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 8,
|
|
about: 'Our modded Terraria instance for friends and family.',
|
|
instructions: {
|
|
public: '',
|
|
local: '192.168.1.121',
|
|
},
|
|
installInstructions:
|
|
'Use TModLoader from Steam (not base Terraria) and download our pack.',
|
|
queryIP: '',
|
|
link: 'https://steamcommunity.com/sharedfiles/filedetails/?id=2943030068',
|
|
},
|
|
'Team Fortress 2': {
|
|
banner: 'tf2-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 16,
|
|
about: 'Classic Team Fortress 2 fun with friends.',
|
|
instructions: {
|
|
public: '',
|
|
local: '192.168.1.203',
|
|
},
|
|
installInstructions: 'Download Team Fortress 2 for free on Steam.',
|
|
queryIP: '',
|
|
link: '',
|
|
},
|
|
} as Record<string, Server>, // Add type Record<string, Server> for alwaysOnServers
|
|
|
|
toggledServers: {
|
|
'Core Keeper': {
|
|
banner: 'core-keeper-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 16,
|
|
about: 'Explore, mine, and survive in this pixelated adventure.',
|
|
instructions: {
|
|
public: '',
|
|
local: '192.168.1.204',
|
|
},
|
|
installInstructions: 'Available on Steam. Ensure your game is up to date.',
|
|
queryIP: '',
|
|
link: null,
|
|
},
|
|
ECO: {
|
|
banner: 'eco-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 50,
|
|
about: 'A global survival game where players build an ecosystem.',
|
|
instructions: {
|
|
public: 'eco.example.com',
|
|
local: '',
|
|
},
|
|
installInstructions:
|
|
'Download ECO from the official website or Steam. Use the provided IP.',
|
|
queryIP: 'http://eco.example.com/status',
|
|
link: null,
|
|
},
|
|
Enshrouded: {
|
|
banner: 'enshrouded-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 16,
|
|
about: 'A survival crafting game in a mysterious fantasy setting.',
|
|
instructions: {
|
|
public: '',
|
|
local: '',
|
|
},
|
|
installInstructions: undefined,
|
|
queryIP: 'http://enshrouded.example.com/status',
|
|
link: null,
|
|
},
|
|
Empyrion: {
|
|
banner: 'empyrion-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 16,
|
|
about: 'Explore space and build your intergalactic empire.',
|
|
instructions: {
|
|
public: '',
|
|
local: '',
|
|
},
|
|
installInstructions:
|
|
'Download Empyrion from Steam and ensure mods match server settings.',
|
|
queryIP: 'http://empyrion.example.com/status',
|
|
link: null,
|
|
},
|
|
Palworld: {
|
|
banner: 'palworld-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 32,
|
|
about: 'A multiplayer game where you befriend and fight alongside creatures.',
|
|
instructions: {
|
|
public: '',
|
|
local: '',
|
|
},
|
|
installInstructions: 'Available on Steam. Join the server via multiplayer menu.',
|
|
queryIP: 'http://palworld.example.com/status',
|
|
link: null,
|
|
},
|
|
'Survive The Nights': {
|
|
banner: 'survive-the-nights-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 10,
|
|
about: 'A survival horror game set in a post-apocalyptic world.',
|
|
instructions: {
|
|
public: '',
|
|
local: '',
|
|
},
|
|
installInstructions: 'Purchase on Steam and ensure to update your client.',
|
|
queryIP: 'http://survivethenights.example.com/status',
|
|
link: null,
|
|
},
|
|
Valheim: {
|
|
banner: 'valheim-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 10,
|
|
about: 'A Viking-themed survival game set in a procedurally generated world.',
|
|
instructions: {
|
|
public: '',
|
|
local: '',
|
|
},
|
|
installInstructions: 'Install via Steam and ensure mods match server settings.',
|
|
queryIP: 'http://valheim.example.com/status',
|
|
link: null,
|
|
},
|
|
'V Rising': {
|
|
banner: 'v-rising-banner.jpg',
|
|
status: 'unknown',
|
|
playersOnline: 0,
|
|
maxPlayers: 20,
|
|
about: 'Rise as a vampire lord in this survival RPG.',
|
|
instructions: {
|
|
public: '',
|
|
local: '',
|
|
},
|
|
installInstructions: 'Available on Steam. Ensure your game and server mods are synced.',
|
|
queryIP: 'http://vrising.example.com/status',
|
|
link: null,
|
|
},
|
|
} as Record<string, Server>, // Add type Record<string, Server> for toggledServers
|
|
}
|
|
},
|
|
computed: {
|
|
showPlayerCount(): boolean {
|
|
return this.modalData.playersOnline !== undefined && this.modalData.maxPlayers !== undefined
|
|
},
|
|
displayPlayerCount(): string {
|
|
if (this.modalData.maxPlayers === undefined) return '? / ?'
|
|
if (this.modalData.playersOnline === undefined) return '? / ?'
|
|
return `${this.modalData.playersOnline} / ${this.modalData.maxPlayers}`
|
|
},
|
|
},
|
|
methods: {
|
|
openModal(serverName: string) {
|
|
this.modalData = this.alwaysOnServers[serverName] || this.toggledServers[serverName] || {}
|
|
this.modalData.name = serverName
|
|
this.showModal = true
|
|
},
|
|
closeModal() {
|
|
this.showModal = false
|
|
},
|
|
},
|
|
})
|
|
</script>
|