141 lines
3.5 KiB
Vue
141 lines
3.5 KiB
Vue
<template>
|
|
<section class="home">
|
|
<section class="hero is-medium is-primary is-bold">
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<h1 class="title">
|
|
{{ projectName }}
|
|
</h1>
|
|
<h2 class="subtitle">
|
|
An unofficial, fan-made MLP:CCG simulator
|
|
</h2>
|
|
<br />
|
|
<b-button
|
|
tag="router-link"
|
|
to="/lobby"
|
|
class="is-primary spaced"
|
|
inverted
|
|
outlined
|
|
>Play with people</b-button
|
|
>
|
|
<b-button
|
|
tag="router-link"
|
|
to="/build"
|
|
class="is-primary spaced"
|
|
inverted
|
|
outlined
|
|
>Build a deck</b-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<div class="container is-widescreen landing-content">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<section class="has-text-centered">
|
|
<div class="title is-4">
|
|
<strong>Web-based</strong>
|
|
</div>
|
|
</section>
|
|
<div class="content">
|
|
The entire client runs in your browser. No downloads necessary!
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<section class="has-text-centered">
|
|
<div class="title is-4">
|
|
<strong>Constructed</strong>
|
|
<span class="behind fantasy"> & </span>
|
|
<strong>Limited</strong>
|
|
</div>
|
|
</section>
|
|
<div class="content">
|
|
You can build decks or draft them with friends. You can even do
|
|
cube drafts!
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<section class="has-text-centered">
|
|
<div class="title is-4">
|
|
<strong>Peer-to-Peer</strong>
|
|
</div>
|
|
</section>
|
|
<div class="content">
|
|
The entire client uses WebRTC for P2P communications. No
|
|
registration required to play!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="footer">
|
|
<div class="container is-widescreen">
|
|
<div class="content has-text-centered">
|
|
<p>
|
|
<strong>{{ projectName }}</strong> is not affiliated with Hasbro in
|
|
any way.<br />
|
|
Come look at the
|
|
<a href="https://git.fromouter.space/mcg/mlpcardgame"
|
|
>source code</a
|
|
>
|
|
(ISC licensed)!
|
|
</p>
|
|
<p>MCG Version {{ projectVersion }}</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/_variables.scss";
|
|
|
|
.home {
|
|
user-select: text;
|
|
}
|
|
|
|
.behind {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.fantasy {
|
|
font-family: $fantasy;
|
|
}
|
|
|
|
.landing-content .column {
|
|
border: 1px solid $grey;
|
|
border-radius: 10px;
|
|
margin: 10px;
|
|
.title {
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid rgba($white, 0.2);
|
|
}
|
|
.content {
|
|
padding: 10px;
|
|
font-size: 11pt;
|
|
}
|
|
}
|
|
|
|
.spaced {
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
|
|
declare const GIT_DESCRIBE: { raw: string };
|
|
let versionString: string = GIT_DESCRIBE
|
|
? GIT_DESCRIBE.raw
|
|
: require("@/../package.json").version;
|
|
|
|
@Component({
|
|
components: {}
|
|
})
|
|
export default class Home extends Vue {
|
|
private projectName: string = "MLPCARDGAME";
|
|
private projectVersion: string = versionString;
|
|
}
|
|
</script>
|