updated packages and srcset for jpg and webp

This commit is contained in:
cnachtigall1991
2021-10-07 20:16:08 +02:00
parent aa556988e6
commit 3515066ac0
5 changed files with 492 additions and 517 deletions

View File

@@ -12,6 +12,6 @@ module.exports = {
}, },
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
} }
} }

View File

@@ -10,23 +10,23 @@
"dependencies": { "dependencies": {
"@popperjs/core": "^2.10.2", "@popperjs/core": "^2.10.2",
"axios": "^0.22.0", "axios": "^0.22.0",
"bootstrap": "^5.1.1", "babel-eslint": "^10.1.0",
"core-js": "^3.6.5", "bootstrap": "^5.1.2",
"core-js": "^3.18.2",
"luxon": "^2.0.2", "luxon": "^2.0.2",
"vue": "^3.0.0", "vue": "^3.2.19",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.11",
"vuex": "^4.0.0-0" "vuex": "^4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.13",
"@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.13",
"@vue/compiler-sfc": "^3.0.0", "@vue/compiler-sfc": "^3.2.19",
"babel-eslint": "^10.1.0", "eslint": "^6.8.0",
"eslint": "^6.7.2", "eslint-plugin-vue": "^7.19.1",
"eslint-plugin-vue": "^7.0.0",
"sass": "^1.42.1", "sass": "^1.42.1",
"sass-loader": "^10.2.0", "sass-loader": "^10.2.0",
"string-sanitizer": "^2.0.2" "string-sanitizer": "^2.0.2"

956
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -74,7 +74,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.main-content { .main-content {
.head { .head {
background-image: url("../images/map_screenshots/default.png"); background-image: url("../images/map_screenshots/default.jpg");
background-image: url("../images/map_screenshots/default.webp");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;

View File

@@ -1,6 +1,10 @@
<template> <template>
<img v-if="data.matchDetails.map" :alt="data.matchDetails.map" :src="require('../images/map_screenshots/' + data.matchDetails.map + '.png')" <picture v-if="data.matchDetails.map" >
class="bg-img"> <source :srcset="require('../images/map_screenshots/' + data.matchDetails.map + '.webp')" class="bg-img">
<img :alt="data.matchDetails.map"
:src="require('../images/map_screenshots/' + data.matchDetails.map + '.jpg')"
class="bg-img">
</picture>
<div class=""> <div class="">
<div v-if="data.matchDetails.map" class="head row m-auto text-center"> <div v-if="data.matchDetails.map" class="head row m-auto text-center">
<div class="m-auto map"> <div class="m-auto map">
@@ -9,8 +13,8 @@
:title="data.matchDetails.map" class="map-icon"> :title="data.matchDetails.map" class="map-icon">
</div> </div>
<p class="text-center fs-6">Average Rank: <img <p class="text-center fs-6">Average Rank: <img
:src="DisplayRank(data.avgRank)[0]"
:alt="DisplayRank(data.avgRank)[1]" :alt="DisplayRank(data.avgRank)[1]"
:src="DisplayRank(data.avgRank)[0]"
:title="DisplayRank(data.avgRank)[1]" :title="DisplayRank(data.avgRank)[1]"
class="rank-icon"/></p> class="rank-icon"/></p>
</div> </div>
@@ -26,10 +30,10 @@
</div> </div>
<div class="scoreboard"> <div class="scoreboard">
<div v-if="data.score.length === 2 && data.stats"> <div v-if="data.score.length === 2 && data.stats">
<ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[0]" :stats="data.stats" <ScoreTeam :rounds="data.matchDetails.rounds" :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[0]"
:team_id="1" :rounds="data.matchDetails.rounds"/> :stats="data.stats" :team_id="1"/>
<ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[1]" :stats="data.stats" <ScoreTeam :rounds="data.matchDetails.rounds" :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[1]"
:team_id="2" :rounds="data.matchDetails.rounds"/> :stats="data.stats" :team_id="2"/>
</div> </div>
</div> </div>
</template> </template>
@@ -37,7 +41,7 @@
<script> <script>
import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue"; import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
import axios from 'axios' import axios from 'axios'
import {GetHLTV_1, GoToPlayer, DisplayRank} from "../utils"; import {DisplayRank, GetHLTV_1, GoToPlayer} from "../utils";
const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam')) const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))