<template> <div> <div v-if="codes.length === 0 && !hasError">Loading...</div> <div v-if="codes.length === 0 && hasError">Failed to load codes.</div> <CodeInfo v-for="code in codes" :code="code" :anchor="true" /> </div> </template> <script> // Components import CodeInfo from './CodeInfo'; // Data import gameVersions from '../data/gameVersions.json'; // Util import parseXml from './scripts/parseXml'; // Libs import axios from 'axios'; export default { props: { gameVersion: { type: String }, }, mounted() { if (localStorage.getItem('codes') != null) { try { const data = JSON.parse(localStorage.getItem('codes')).find( c => c.identifier === this.gameVersion, ); if (data) { this.codes = data.cheats.sort((a, b) => (a.title > b.title ? 1 : -1)); console.log(this.codes); return; } } catch {} } axios .get(`/codes/${this.gameVersion}.xml`) .then(response => { const xmlData = parseXml(response.data); this.codes = xmlData.sort((a, b) => (a.title > b.title ? 1 : -1)); }) .catch(() => (this.hasError = true)); }, updated() { // Scroll to anchor if (window.location.hash) { const anchorElement = document.querySelector(window.location.hash); if (anchorElement) { const topOffset = anchorElement.getBoundingClientRect().top; window.scrollTo({ top: topOffset - 100, behavior: 'smooth', }); } } }, data() { return { codes: [], hasError: false, }; }, }; </script> <style> body { overflow-y: scroll; } </style>