Commit 5d85e2ab authored by SpinShare's avatar SpinShare

2.3.2 - tournament quickupdate

parent 4bb8a8fc
This diff is collapsed.
......@@ -4,7 +4,7 @@
"description": "SpinSha.re Client",
"homepage": "https://spinsha.re",
"copyright": "Copyright © SpinSha.re",
"version": "2.3.1",
"version": "2.3.2",
"author": "SpinSha.re",
"private": true,
"scripts": {
......@@ -23,6 +23,7 @@
"axios": "^0.19.2",
"core-js": "^3.6.4",
"glob": "^7.1.6",
"md5-file": "^5.0.0",
"moment": "^2.27.0",
"ncp": "^2.0.0",
"rimraf": "^3.0.2",
......
<template>
<aside>
<nav class="items-left">
<div class="item" v-tooltip.down="'Back'" v-on:click="navigateBack()"><i class="mdi mdi-arrow-left"></i></div>
<div class="logo">
<router-link to="/"><img src="https://spinshare.b-cdn.net/assets/img/logo_colored_ondark.svg" alt="SpinShare Logo" /></router-link>
</div>
......@@ -32,6 +33,9 @@
'downloadOverlayShown'
],
methods: {
navigateBack: function() {
this.$router.back();
},
showDownloadOverlay: function() {
this.$root.$emit('toggleDownloadOverlay');
},
......@@ -62,8 +66,8 @@
&.items-left { justify-content: flex-start; }
&.items-right { justify-content: flex-end; }
& .logo {
width: 180px;
padding: 15px 30px;
width: 160px;
padding: 15px;
height: 60px;
& img {
height: 100%;
......
......@@ -5,7 +5,7 @@ class SSAPI {
if(process.env.NODE_ENV !== 'development') {
return false;
} else {
return false;
return true;
}
}
......@@ -241,6 +241,22 @@ class SSAPI {
throw new Error(error);
});
}
async getTournamentMappool() {
let apiPath = this.apiBase + "tournament/mappool";
let supportedVersion = this.supportedVersion;
return axios.get(apiPath)
.then(function(response) {
if(response.data.version !== supportedVersion) {
throw new Error("Client is outdated!");
}
return response.data;
}).catch(function(error) {
throw new Error(error);
});
}
}
module.exports = SSAPI;
......@@ -14,6 +14,7 @@ import ViewSongDetailReviews from '../views/SongDetailReviews.vue';
import ViewSongDetailSpinPlays from '../views/SongDetailSpinPlays.vue';
import ViewUserDetail from '../views/UserDetail.vue';
import ViewSettings from '../views/Settings.vue';
import ViewTournament from '../views/Tournament.vue';
import ViewError from '../views/Error.vue';
Vue.use(VueRouter);
......@@ -81,6 +82,10 @@ const routes = [{
path: '/settings',
name: 'Settings',
component: ViewSettings
}, {
path: '/tournament',
name: 'Tournament',
component: ViewTournament
}, {
path: '/error/:errorCode',
name: 'Error',
......
......@@ -52,6 +52,16 @@
</div>
</div>
</div>
<!-- Botch -->
<div class="settings-box">
<div class="settings-title">Tournament Hub</div>
<div class="settings-item">
<div class="settings-label">Open</div>
<div class="settings-input">
<router-link to="/tournament" class="button">Open WarpZone</router-link>
</div>
</div>
</div>
</div>
</section>
</template>
......
<!-- Botch -->
<template>
<section class="section-tournament">
<header>
<div class="title">Tournament WarpZone</div>
<div class="description">
This page looks very ugly, sorry about that &dash; Andreas
</div>
</header>
<div class="tournament-content" v-if="apiFinished">
<div class="buttons">
<div class="button" v-on:click="checkCharts()">Check if you are tournament-ready</div>
<div class="button" v-on:click="downloadCharts()" v-show="analyzationDone">Download all tournament charts</div>
</div>
<div class="check-result" v-if="missingCharts.length > 0">
<div class="list-title title-missing">Missing</div>
<div class="item" v-for="missingChart in missingCharts" v-bind:key="missingChart.id">
<div class="cover" :style="'background-image: url(' + missingChart.paths.cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'"></div>
<div class="title">{{ missingChart.title }}</div>
</div>
</div>
<div class="check-result" v-if="outdatedCharts.length > 0">
<div class="list-title title-outdated">Outdated</div>
<div class="item" v-for="outdatedChart in outdatedCharts" v-bind:key="outdatedChart.id">
<div class="cover" :style="'background-image: url(' + outdatedChart.paths.cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'"></div>
<div class="title">{{ outdatedChart.title }}</div>
</div>
</div>
<div class="check-result" v-if="okCharts.length > 0">
<div class="list-title title-ok">OK</div>
<div class="item" v-for="okChart in okCharts" v-bind:key="okChart.id">
<div class="cover" :style="'background-image: url(' + okChart.paths.cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'"></div>
<div class="title">{{ okChart.title }}</div>
</div>
</div>
</div>
</section>
</template>
<script>
import fs from 'fs';
import { glob, globSync } from 'glob';
import path from 'path';
import md5File from 'md5-file';
import SSAPI from '@/modules/module.api.js';
import UserSettings from '@/modules/module.usersettings.js';
export default {
name: 'Tournament',
data: function() {
return {
tournamentCharts: [],
missingCharts: [],
outdatedCharts: [],
okCharts: [],
apiFinished: false,
analyzationDone: false
}
},
mounted: function() {
let ssapi = new SSAPI();
ssapi.getTournamentMappool().then((data) => {
this.$data.apiFinished = true;
this.$data.tournamentCharts = data.data;
});
},
methods: {
checkCharts: function() {
let userSettings = new UserSettings();
this.$data.tournamentCharts.forEach((chart) => {
// Find SRTB
glob(path.join(userSettings.get('gameDirectory'), chart.fileReference + ".srtb"), (error, files) => {
if(files.length < 1) {
this.$data.missingCharts.push(chart);
} else {
// Check MD5
if(md5File.sync(files[0]) == chart.srtbMD5) {
this.$data.okCharts.push(chart);
} else {
this.$data.outdatedCharts.push(chart);
}
}
});
// Note: Huge Success
this.$data.analyzationDone = true;
});
},
downloadCharts: function() {
// Add to Queue
this.$data.missingCharts.forEach((chart) => {
this.$root.$emit('download', {id: chart.id, cover: chart.paths.cover, title: chart.title, artist: chart.artist, downloadPath: chart.paths.zip});
});
this.$data.outdatedCharts.forEach((chart) => {
this.$root.$emit('download', {id: chart.id, cover: chart.paths.cover, title: chart.title, artist: chart.artist, downloadPath: chart.paths.zip});
});
// Clear Analyzation data
this.$data.missingCharts = [];
this.$data.outdatedCharts = [];
this.$data.okCharts = [];
this.$data.analyzationDone = false;
}
}
}
</script>
<style scoped lang="less">
.section-tournament {
& header {
background: rgba(0,0,0,0.3);
padding: 50px;
padding-bottom: 25px;
& .title {
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 15px;
font-family: 'Oswald', sans-serif;
}
& .actions {
display: grid;
grid-template-columns: auto auto auto auto 1fr;
grid-gap: 15px;
}
}
& .tournament-content {
padding: 25px 50px;
line-height: 1.5em;
& .buttons {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
}
& .check-result {
margin-top: 25px;
border-radius: 4px;
background: rgba(255,255,255,0.1);
& .list-title {
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 10px 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
&.title-missing {
background: rgba(189, 43, 43, 0.15);
}
&.title-outdated {
background: rgba(224, 157, 31, 0.15);
}
&.title-ok {
background: rgba(30, 202, 30, 0.15);
}
}
& .item {
display: grid;
grid-template-columns: 22px 1fr;
grid-gap: 10px;
padding: 15px;
& .cover {
width: 22px;
height: 22px;
background-size: cover;
background-position: center;
border-radius: 4px;
}
& .title {
font-size: 14px;
}
}
}
}
}
</style>
\ No newline at end of file
......@@ -2,26 +2,25 @@
<section class="section-user-detail">
<div class="user-detail-background" :style="'background-image: url(' + avatar + '), url(' + require('@/assets/img/defaultAvatar.jpg') + ');'" v-if="apiFinished">
<div class="user-detail-dim">
<div class="user-report" v-if="apiFinished">
<button class="button-report button" v-on:click="OpenReport">{{ $t('userdetail.actions.reportButton') }}</button>
</div>
<div class="user-detail">
<div class="user-avatar" :style="'background-image: url(' + avatar + '), url(' + require('@/assets/img/defaultAvatar.jpg') + ');'"></div>
<div class="user-meta-data">
<div class="user-name">{{ username }}</div>
<div class="user-badge user-badge-verified">
<div class="user-badge user-badge-verified" v-if="isVerified">
<i class="mdi mdi-check-decagram"></i>
</div>
<div class="user-badge user-badge-patreon">
<div class="user-badge user-badge-patreon" v-if="isPatreon">
<i class="mdi mdi-patreon"></i>
</div>
</div>
</div>
</div>
</div>
<div class="user-detail-actions" v-if="apiFinished">
<button class="button-report button" v-on:click="OpenReport">{{ $t('userdetail.actions.reportButton') }}</button>
</div>
<SongRow
class="song-row-user"
:title="$t('userdetail.uploaded.header')"
v-if="apiFinished && songs.length > 0">
<template v-slot:song-list>
<SongItem
......@@ -100,7 +99,8 @@
& .user-detail {
padding: 50px;
display: grid;
grid-template-columns: 200px 1fr;
grid-template-columns: 1fr;
justify-items: center;
grid-gap: 25px;
& .user-avatar {
......@@ -132,17 +132,15 @@
}
}
}
& .user-detail-actions {
padding: 50px;
padding-top: 0px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 25px;
& .user-report {
position: absolute;
top: 25px;
right: 25px;
& .button {
padding: 15px 0px;
padding: 15px 30px;
font-size: 16px;
transition: 0.2s ease-in-out all, 0.1s ease-in-out transform;
transition: 0.2s ease-in-out all;
&.button-primary {
background: #fff;
......@@ -155,13 +153,8 @@
}
&:hover {
background: rgba(255,255,255,0.2);
color: #fff;
opacity: 0.6;
transform: translateY(-4px);
}
&:active {
transform: translateY(-2px);
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment