Leahnaya/splatoon2.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon2.ink.git synced 2026-04-25 07:52:38 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add basic layout

Browse Source
This commit is contained in:
Matt Isenhower 2017-08-02 12:51:10 -07:00
parent e6c0e398b4
commit 6382ab579b
7 changed files with 145 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -11,6 +11,7 @@
"axios": "^0.16.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"bulma": "^0.5.0",

47
src/js/components/App.vue
View File

@ -1,14 +1,59 @@
<template>
<div>
splatoon2.ink
<div v-if="loading">
Loading...
</div>
<div v-else>
<div class="columns">
<div class="column"><ScheduleBox :schedules="regular" :now="now"></ScheduleBox></div>
<div class="column"><ScheduleBox :schedules="ranked" :now="now"></ScheduleBox></div>
<div class="column"><ScheduleBox :schedules="league" :now="now"></ScheduleBox></div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import ScheduleBox from './ScheduleBox.vue';
export default {
components: { ScheduleBox },
data() {
return {
now: null,
splatnet: {
schedules: null,
},
};
},
computed: {
loading() { return !this.splatnet.schedules; },
regular() { return !this.loading && this.splatnet.schedules.regular.filter(this.filterSchedule) },
ranked() { return !this.loading && this.splatnet.schedules.gachi.filter(this.filterSchedule) },
league() { return !this.loading && this.splatnet.schedules.league.filter(this.filterSchedule) },
},
created() {
this.updateNow();
this.timer = setInterval(() => {
this.updateNow();
}, 200);
this.updateData();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
async updateData() {
let schedules = await axios.get('/data/schedules.json');
this.splatnet.schedules = schedules.data;
},
updateNow() {
this.now = Math.trunc((new Date).getTime() / 1000);
},
filterSchedule(item) {
return item.end_time >= this.now;
},
},
}
</script>

61
src/js/components/ScheduleBox.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div v-if="firstSchedule">
<h2 class="title is-2">{{ firstSchedule.game_mode.name }}</h2>
<h3 class="title is-3">{{ firstSchedule.rule.name }}</h3>
<div class="columns">
<div class="column"><Stage :stage="firstSchedule.stage_a"></Stage></div>
<div class="column"><Stage :stage="firstSchedule.stage_b"></Stage></div>
</div>
<div v-if="upcomingSchedule">
<button @click="previousSchedule">Prev</button>
<button @click="nextSchedule">Next</button>
</div>
<div class="columns" v-if="upcomingSchedule">
<div class="column">
<div v-if="upcomingScheduleIndex == 0">
Next
</div>
<div v-else>
Soon
</div>
<div>{{ upcomingSchedule.rule.name }}</div>
</div>
<div class="column"><Stage :stage="upcomingSchedule.stage_a"></Stage></div>
<div class="column"><Stage :stage="upcomingSchedule.stage_b"></Stage></div>
</div>
</div>
</template>
<script>
import Stage from './Stage.vue';
export default {
components: { Stage },
props: ['schedules', 'now'],
data() {
return {
upcomingScheduleIndex: 0,
};
},
computed: {
firstSchedule() { return this.schedules && this.schedules[0]; },
upcomingSchedules() { return this.schedules && this.schedules.slice(1); },
upcomingSchedule() { return this.upcomingSchedules && this.upcomingSchedules[this.upcomingScheduleIndex]; },
},
watch: {
firstSchedule(newSchedule, oldSchedule) { if (oldSchedule != newSchedule) this.upcomingScheduleIndex = 0; },
},
methods: {
nextSchedule() {
this.upcomingScheduleIndex++;
if (this.upcomingScheduleIndex >= this.upcomingSchedules.length)
this.upcomingScheduleIndex = 0;
},
previousSchedule() {
this.upcomingScheduleIndex--;
if (this.upcomingScheduleIndex < 0)
this.upcomingScheduleIndex = this.upcomingSchedules.length - 1;
},
},
}
</script>

18
src/js/components/Stage.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div>
<h4 class="title is-4">{{ stage.name }}</h4>
<img :src="image" />
</div>
</template>
<script>
export default {
props: ['stage'],
computed: {
image() {
if (this.stage)
return `https://app.splatoon2.nintendo.net${this.stage.image}`;
},
},
}
</script>

1
src/js/main.js
View File

@ -1,3 +1,4 @@
import 'babel-polyfill';
import Vue from 'vue';
import App from './components/App.vue';

20
webpack.config.js
View File

@ -73,16 +73,16 @@ module.exports = function(env) {
// Extract CSS to a separate file
new ExtractTextPlugin('assets/css/[name].[contenthash].css'),
// Remove unused CSS styles
new PurifyCSSPlugin({
paths: [
...glob.sync(path.join(__dirname, 'src/html/*.html')),
...glob.sync(path.join(__dirname, 'src/js/components/*.vue')),
],
minimize: production,
purifyOptions: {
//whitelist: ['.tooltip'],
},
}),
// new PurifyCSSPlugin({
// paths: [
// ...glob.sync(path.join(__dirname, 'src/html/*.html')),
// ...glob.sync(path.join(__dirname, 'src/js/components/*.vue')),
// ],
// minimize: production,
// purifyOptions: {
// // whitelist: ['.columns'],
// },
// }),
// Favicon
// new FaviconsWebpackPlugin({
// logo: './src/img/1f389.svg',

8
yarn.lock
View File

@ -689,6 +689,14 @@ babel-plugin-transform-strict-mode@^6.24.1:
babel-runtime "^6.22.0"
babel-types "^6.24.1"
babel-polyfill@^6.23.0:
version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
dependencies:
babel-runtime "^6.22.0"
core-js "^2.4.0"
regenerator-runtime "^0.10.0"
babel-preset-env@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.0.tgz#2de1c782a780a0a5d605d199c957596da43c44e4"