CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

updated MatchView.vue

Browse Source
This commit is contained in:
vikingowl
2022-03-25 15:49:54 +01:00
parent 0a355ff2bd
commit 3ad55c7fc4
1 changed files with 197 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
src/views/MatchView.vue
View File

@@ -294,7 +294,7 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { import {
onBeforeMount, onBeforeMount,
onBeforeUnmount, onBeforeUnmount,
@@ -305,7 +305,6 @@ import {
} from "vue"; } from "vue";
import { import {
closeNav, closeNav,
CreatePlayersArray,
DisplayRank, DisplayRank,
errorHandling, errorHandling,
FixMapName, FixMapName,
@@ -315,48 +314,62 @@ import {
GoToLink, GoToLink,
LoadImage, LoadImage,
ProcessName, ProcessName,
} from "/src/utils"; setAppDivBackground,
import { useStore } from "vuex"; setBgImgDisplay,
} from "@/utils";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { DateTime } from "luxon/build/es6/luxon"; import { DateTime } from "luxon";
import { FOOTER_HEIGHT, NAV_HEIGHT } from "/src/constants"; import { FOOTER_HEIGHT, NAV_HEIGHT } from "@/constants";
import { useInfoStateStore } from "@/stores/infoState";
import { useMatchDetailsStore } from "@/stores/matchDetails";
import type { Match, MatchStats } from "@/types";
import { usePlayersArrStore } from "@/stores/playersArr";
export default { const route = useRoute();
name: "MatchView", const pHeight = ref(0);
props: ["match_id"], const matchIdPattern = /^\d{19}$/;
setup(props) {
const store = useStore();
const route = useRoute();
const pHeight = ref(0);
const matchIdPattern = /^\d{19}$/; const infoStateStore = useInfoStateStore();
const matchDetailsStore = useMatchDetailsStore();
const playersArrStore = usePlayersArrStore();
// Refs // Props
const data = reactive({ const props = defineProps<{
match_id: string;
}>();
// Refs
interface dataI {
player_id: string;
matchDetails?: Match;
stats?: MatchStats[];
score: number[];
team1Avg: number;
team2Avg: number;
}
const data: dataI = reactive({
player_id: "", player_id: "",
matchDetails: {},
stats: [],
score: [0], score: [0],
team1Avg: 0, team1Avg: 0,
team2Avg: 0, team2Avg: 0,
}); });
const getWindowHeight = () => { const getWindowHeight = () => {
const navHeight = document.getElementsByTagName("nav")[0].clientHeight; const navHeight = document.getElementsByTagName("nav")[0].clientHeight;
const footerHeight = const footerHeight = document.getElementsByTagName("footer")[0].clientHeight;
document.getElementsByTagName("footer")[0].clientHeight;
// 70 = nav-height | 108.5 = footer-height // 70 = nav-height | 108.5 = footer-height
return window.innerHeight - navHeight - footerHeight; return window.innerHeight - navHeight - footerHeight;
}; };
pHeight.value = getWindowHeight(); pHeight.value = getWindowHeight();
// Functions // Functions
const GetMatch = async () => { const GetMatch = async () => {
if (matchIdPattern.test(props.match_id)) { if (matchIdPattern.test(props.match_id)) {
const res = await GetMatchDetails(store, props.match_id); const [res, info] = await GetMatchDetails(props.match_id);
if (info.message !== "") infoStateStore.addInfo(info);
if (res !== null) { if (res !== null) {
if (res.map) if (res.map)
document.title = `${FixMapName(res.map)} ► ${res.score[0]} : ${ document.title = `${FixMapName(res.map)} ► ${res.score[0]} : ${
@@ -366,16 +379,13 @@ export default {
)} | csgoWTF`; )} | csgoWTF`;
else document.title = `Match-Details | csgoWTF`; else document.title = `Match-Details | csgoWTF`;
store.commit({ matchDetailsStore.matchDetails = res;
type: "changeMatchDetails",
data: res,
});
checkRoute(); checkRoute();
data.matchDetails = store.state.matchDetails; data.matchDetails = matchDetailsStore.matchDetails;
data.matchDetails.stats.forEach((p) => { data.matchDetails.stats?.forEach((p) => {
p.player.name = ProcessName(p.player.name); p.player!.name = ProcessName(p.player?.name || "");
}); });
data.stats = data.matchDetails.stats; data.stats = data.matchDetails.stats;
@@ -387,8 +397,8 @@ export default {
Math.floor( Math.floor(
getTeamAvgRank(1).reduce((a, b) => { getTeamAvgRank(1).reduce((a, b) => {
if (a !== 0 && b !== 0) pCount++; if (a !== 0 && b !== 0) pCount++;
return a + b; return (a ? a : 0) + (b ? b : 0);
}) }) || 0
) / pCount; ) / pCount;
pCount = 1; pCount = 1;
@@ -396,27 +406,22 @@ export default {
Math.floor( Math.floor(
getTeamAvgRank(2).reduce((a, b) => { getTeamAvgRank(2).reduce((a, b) => {
if (a !== 0 && b !== 0) pCount++; if (a !== 0 && b !== 0) pCount++;
return a + b; return (a ? a : 0) + (b ? b : 0);
}) }) || 0
) / pCount; ) / pCount;
LoadImage(data.matchDetails.map ? data.matchDetails.map : "random"); LoadImage(data.matchDetails.map ? data.matchDetails.map : "random");
store.commit({ playersArrStore.playersArr = data.stats;
type: "changePlayersArr",
data: CreatePlayersArray(data.stats),
});
// console.log(data.matchDetails)
} else { } else {
document.querySelector(".bg-img").style.display = "none"; setBgImgDisplay("none", HTMLImageElement);
} }
} else { } else {
errorHandling(404); errorHandling(404);
} }
}; };
const checkRoute = () => { const checkRoute = () => {
if (route.fullPath.split("/")[3]) { if (route.fullPath.split("/")[3]) {
const sub = route.fullPath.split("/")[3]; const sub = route.fullPath.split("/")[3];
if (matchIdPattern.test(props.match_id)) { if (matchIdPattern.test(props.match_id)) {
@@ -431,102 +436,88 @@ export default {
errorHandling(404); errorHandling(404);
} }
} }
}; };
const getTeamAvgRank = (team) => { const getTeamAvgRank = (team: number) => {
let arr = []; let arr = [];
for (let i = (team - 1) * 5; i < team * 5; i++) { for (let i = (team - 1) * 5; i < team * 5; i++) {
arr.push( const player = data.stats !== undefined ? data.stats[i] : undefined;
data.matchDetails.stats[i].rank?.old !== undefined if (player !== undefined)
? data.matchDetails.stats[i].rank?.old arr.push(player?.rank?.old ? player?.rank?.old : 0);
: 0
);
} }
return arr; return arr;
}; };
const handleDownloadMenu = () => { const handleDownloadMenu = () => {
const downloadGroup = document.getElementById("downloadGroup"); const downloadGroup = document.getElementById(
const menuBtn = document.getElementById("downloadMenuBtn"); "downloadGroup"
let opacity = window ) as HTMLDivElement;
.getComputedStyle(menuBtn) const menuBtn = document.getElementById("downloadMenuBtn") as HTMLElement;
.getPropertyValue("opacity"); let opacity = window.getComputedStyle(menuBtn).getPropertyValue("opacity");
let tmpOpacity = parseFloat(opacity);
function show() { function show() {
if (opacity < 1) { if (tmpOpacity < 1) {
opacity = opacity + 0.1; tmpOpacity = tmpOpacity + 0.1;
downloadGroup.style.opacity = opacity; downloadGroup.style.opacity = tmpOpacity.toString();
} else { } else {
clearInterval(0); clearInterval(0);
} }
} }
function hide() { function hide() {
if (opacity > 0) { if (tmpOpacity > 0) {
opacity = opacity - 0.1; tmpOpacity = tmpOpacity - 0.1;
menuBtn.style.opacity = opacity; menuBtn.style.opacity = opacity;
} else { } else {
menuBtn.style.display = "none"; menuBtn.style.display = "none";
downloadGroup.style.opacity = 0; tmpOpacity = 0;
downloadGroup.style.opacity = tmpOpacity.toString();
downloadGroup.style.display = "block"; downloadGroup.style.display = "block";
setInterval(show, 35); setInterval(show, 35);
} }
} }
setInterval(hide, 35); setInterval(hide, 35);
}; };
// Watchers // Watchers
watch(() => props.match_id, GetMatch); watch(() => props.match_id, GetMatch);
// Run on create // Run on create
onBeforeMount(() => { onBeforeMount(() => {
GetMatch(); GetMatch();
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
store.commit("resetMatchDetails"); matchDetailsStore.$reset();
}); });
onMounted(() => { onMounted(() => {
const headHeight = 230; const headHeight = 230;
const navHeight = 42; const navHeight = 42;
const height = const height =
window.innerHeight - window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT - headHeight - navHeight;
NAV_HEIGHT - const scoreWrapper = document.getElementById(
FOOTER_HEIGHT - "scoreWrapper"
headHeight - ) as HTMLDivElement;
navHeight;
const scoreWrapper = document.getElementById("scoreWrapper");
scoreWrapper.style.minHeight = height + "px"; scoreWrapper.style.minHeight = height + "px";
document.getElementById("app").style.background = setAppDivBackground(
"linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.85) 70%, rgba(0, 0, 0, .6) 100%)"; "linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.85) 70%, rgba(0, 0, 0, .6) 100%)",
document.querySelector(".bg-img").style.display = "initial"; HTMLDivElement
}); );
setBgImgDisplay("initial", HTMLImageElement);
});
window.onresize = () => { window.onresize = () => {
pHeight.value = getWindowHeight(); pHeight.value = getWindowHeight();
};
document.addEventListener("click", () => {
closeNav("matchNav");
});
return {
data,
DisplayRank,
FormatFullDate,
FormatDuration,
FixMapName,
route,
pHeight,
handleDownloadMenu,
getTeamAvgRank,
};
},
}; };
document.addEventListener("click", () => {
closeNav("matchNav");
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>