gsd
2 years ago
11 changed files with 163 additions and 25 deletions
|
After Width: | Height: | Size: 3.4 KiB |
@ -0,0 +1,17 @@ |
|||
<template> |
|||
<md-tab id="backendView" :md-icon="this.s_icon"> |
|||
<p>backend status</p> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "BackendStatus", |
|||
props: { |
|||
s_icon: { |
|||
type: String, |
|||
default: require('@/assets/server.svg') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,11 +0,0 @@ |
|||
<template> |
|||
<md-tab id="serversView" md-label="Серверы"> |
|||
<p>servers</p> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ServersView' |
|||
} |
|||
</script> |
|||
@ -0,0 +1,33 @@ |
|||
<template> |
|||
<div class="md-layout-item md-size-100"> |
|||
<md-card> |
|||
<md-card-media-cover md-solid> |
|||
<md-card-media> |
|||
<img :src="serverImage" :alt="serverName"> |
|||
</md-card-media> |
|||
<md-card-area> |
|||
<md-card-header> |
|||
<span class="md-title">{{serverName}}</span> |
|||
<span class="md-subhead">{{serverCurrentPlayer}}/{{serverMaxPlayer}}</span> |
|||
</md-card-header> |
|||
</md-card-area> |
|||
</md-card-media-cover> |
|||
</md-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ServerCard', |
|||
props: { |
|||
serverImage: String, |
|||
serverName: String, |
|||
serverCurrentPlayer: Number, |
|||
serverMaxPlayer: Number, |
|||
serverData: { |
|||
type: Object, |
|||
default: null |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,40 @@ |
|||
<template> |
|||
<md-tab id="serversView" md-label="Серверы"> |
|||
<div class="md-layout md-alignment-bottom-center" style="margin-bottom: -1%; margin-top: 1%"> |
|||
<CharacterImage :size="10" :img_src="require(`@/assets/images/characters/toilet.png`)" :audio_src="require(`@/assets/sounds/puk.mp3`)"/> |
|||
</div> |
|||
<div class="md-layout md-alignment-bottom-center"> |
|||
<div class="md-layout-item md-size-25 md-alignment-bottom-center rounded-and-colored-without-bottom"> |
|||
<h3 style="text-align: center; margin: 4% 0%">Список серверов</h3> |
|||
</div> |
|||
</div> |
|||
<div class="md-layout md-alignment-bottom-center" style="padding-top: 1%"> |
|||
<div class="md-layout-item md-size-60 md-alignment-bottom-center rounded-only"> |
|||
<h4 style="text-align: center">Для подключения к серверу нажми на него</h4> |
|||
<hr> |
|||
<h5 style="text-align: center" v-if="servers['w'].length>0">где сейчас играют карлики</h5> |
|||
<ServerCard v-for="srv in servers.w" :key="srv" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/> |
|||
<h5 style="text-align: center" v-if="servers['e'].length>0">где сейчас никого нет</h5> |
|||
<ServerCard v-for="srv in servers.e" :key="srv" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/> |
|||
<h5 style="text-align: center" v-if="servers['n'].length>0">где сейчас играют карлики</h5> |
|||
<ServerCard v-for="srv in servers.n" :key="srv" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/> |
|||
</div> |
|||
</div> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
import CharacterImage from "@/components/Others/CharacterImage.vue"; |
|||
import PublicMethods from "@/components/PublicMethods"; |
|||
import ServerCard from "@/components/TabsMenuElements/ServersView/ServerCard.vue"; |
|||
export default { |
|||
name: 'ServersView', |
|||
components: {ServerCard, CharacterImage}, |
|||
data:() => ({ |
|||
servers: null |
|||
}), |
|||
async created() { |
|||
this.servers = await PublicMethods.getServers(); |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue