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