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: {
'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": {
"@popperjs/core": "^2.10.2",
"axios": "^0.22.0",
"bootstrap": "^5.1.1",
"core-js": "^3.6.5",
"babel-eslint": "^10.1.0",
"bootstrap": "^5.1.2",
"core-js": "^3.18.2",
"luxon": "^2.0.2",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
"vue": "^3.2.19",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-eslint": "~4.5.13",
"@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"@vue/compiler-sfc": "^3.2.19",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^7.19.1",
"sass": "^1.42.1",
"sass-loader": "^10.2.0",
"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>
.main-content {
.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-size: cover;
background-position: center;

View File

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