Commit 5d85e2ab authored by SpinShare's avatar SpinShare

2.3.2 - tournament quickupdate

parent 4bb8a8fc
This diff is collapsed.
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"description": "SpinSha.re Client", "description": "SpinSha.re Client",
"homepage": "https://spinsha.re", "homepage": "https://spinsha.re",
"copyright": "Copyright © SpinSha.re", "copyright": "Copyright © SpinSha.re",
"version": "2.3.1", "version": "2.3.2",
"author": "SpinSha.re", "author": "SpinSha.re",
"private": true, "private": true,
"scripts": { "scripts": {
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"axios": "^0.19.2", "axios": "^0.19.2",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"glob": "^7.1.6", "glob": "^7.1.6",
"md5-file": "^5.0.0",
"moment": "^2.27.0", "moment": "^2.27.0",
"ncp": "^2.0.0", "ncp": "^2.0.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
......
<template> <template>
<aside> <aside>
<nav class="items-left"> <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"> <div class="logo">
<router-link to="/"><img src="https://spinshare.b-cdn.net/assets/img/logo_colored_ondark.svg" alt="SpinShare Logo" /></router-link> <router-link to="/"><img src="https://spinshare.b-cdn.net/assets/img/logo_colored_ondark.svg" alt="SpinShare Logo" /></router-link>
</div> </div>
...@@ -32,6 +33,9 @@ ...@@ -32,6 +33,9 @@
'downloadOverlayShown' 'downloadOverlayShown'
], ],
methods: { methods: {
navigateBack: function() {
this.$router.back();
},
showDownloadOverlay: function() { showDownloadOverlay: function() {
this.$root.$emit('toggleDownloadOverlay'); this.$root.$emit('toggleDownloadOverlay');
}, },
...@@ -62,8 +66,8 @@ ...@@ -62,8 +66,8 @@
&.items-left { justify-content: flex-start; } &.items-left { justify-content: flex-start; }
&.items-right { justify-content: flex-end; } &.items-right { justify-content: flex-end; }
& .logo { & .logo {
width: 180px; width: 160px;
padding: 15px 30px; padding: 15px;
height: 60px; height: 60px;
& img { & img {
height: 100%; height: 100%;
......
...@@ -5,7 +5,7 @@ class SSAPI { ...@@ -5,7 +5,7 @@ class SSAPI {
if(process.env.NODE_ENV !== 'development') { if(process.env.NODE_ENV !== 'development') {
return false; return false;
} else { } else {
return false; return true;
} }
} }
...@@ -241,6 +241,22 @@ class SSAPI { ...@@ -241,6 +241,22 @@ class SSAPI {
throw new Error(error); 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; module.exports = SSAPI;
...@@ -14,6 +14,7 @@ import ViewSongDetailReviews from '../views/SongDetailReviews.vue'; ...@@ -14,6 +14,7 @@ import ViewSongDetailReviews from '../views/SongDetailReviews.vue';
import ViewSongDetailSpinPlays from '../views/SongDetailSpinPlays.vue'; import ViewSongDetailSpinPlays from '../views/SongDetailSpinPlays.vue';
import ViewUserDetail from '../views/UserDetail.vue'; import ViewUserDetail from '../views/UserDetail.vue';
import ViewSettings from '../views/Settings.vue'; import ViewSettings from '../views/Settings.vue';
import ViewTournament from '../views/Tournament.vue';
import ViewError from '../views/Error.vue'; import ViewError from '../views/Error.vue';
Vue.use(VueRouter); Vue.use(VueRouter);
...@@ -81,6 +82,10 @@ const routes = [{ ...@@ -81,6 +82,10 @@ const routes = [{
path: '/settings', path: '/settings',
name: 'Settings', name: 'Settings',
component: ViewSettings component: ViewSettings
}, {
path: '/tournament',
name: 'Tournament',
component: ViewTournament
}, { }, {
path: '/error/:errorCode', path: '/error/:errorCode',
name: 'Error', name: 'Error',
......
...@@ -52,6 +52,16 @@ ...@@ -52,6 +52,16 @@
</div> </div>
</div> </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> </div>
</section> </section>
</template> </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 @@ ...@@ -2,26 +2,25 @@
<section class="section-user-detail"> <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-background" :style="'background-image: url(' + avatar + '), url(' + require('@/assets/img/defaultAvatar.jpg') + ');'" v-if="apiFinished">
<div class="user-detail-dim"> <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-detail">
<div class="user-avatar" :style="'background-image: url(' + avatar + '), url(' + require('@/assets/img/defaultAvatar.jpg') + ');'"></div> <div class="user-avatar" :style="'background-image: url(' + avatar + '), url(' + require('@/assets/img/defaultAvatar.jpg') + ');'"></div>
<div class="user-meta-data"> <div class="user-meta-data">
<div class="user-name">{{ username }}</div> <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> <i class="mdi mdi-check-decagram"></i>
</div> </div>
<div class="user-badge user-badge-patreon"> <div class="user-badge user-badge-patreon" v-if="isPatreon">
<i class="mdi mdi-patreon"></i> <i class="mdi mdi-patreon"></i>
</div> </div>
</div> </div>
</div> </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 <SongRow
class="song-row-user" class="song-row-user"
:title="$t('userdetail.uploaded.header')"
v-if="apiFinished && songs.length > 0"> v-if="apiFinished && songs.length > 0">
<template v-slot:song-list> <template v-slot:song-list>
<SongItem <SongItem
...@@ -100,7 +99,8 @@ ...@@ -100,7 +99,8 @@
& .user-detail { & .user-detail {
padding: 50px; padding: 50px;
display: grid; display: grid;
grid-template-columns: 200px 1fr; grid-template-columns: 1fr;
justify-items: center;
grid-gap: 25px; grid-gap: 25px;
& .user-avatar { & .user-avatar {
...@@ -132,17 +132,15 @@ ...@@ -132,17 +132,15 @@
} }
} }
} }
& .user-detail-actions { & .user-report {
padding: 50px; position: absolute;
padding-top: 0px; top: 25px;
display: grid; right: 25px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 25px;
& .button { & .button {
padding: 15px 0px; padding: 15px 30px;
font-size: 16px; 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 { &.button-primary {
background: #fff; background: #fff;
...@@ -155,13 +153,8 @@ ...@@ -155,13 +153,8 @@
} }
&:hover { &:hover {
background: rgba(255,255,255,0.2);
color: #fff; color: #fff;
opacity: 0.6; 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