add code reference

docs/.vuepress/components/CodeInfo.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <h4>{{ code.title }}</h4>
+    <h3 v-if="anchor" :id="headerId">
+      <a :href="`#${headerId}`" class="header-anchor">#</a>
+      {{ code.title }}
+    </h3>
+    <h3 v-else>{{ code.title }}</h3>
     <div class="metadata">
       <span>Version: {{ code.version }} ({{ code.date }})</span>
       <span v-if="code.author.includes(',')">Authors: {{ code.author }}</span>
@@ -13,8 +17,14 @@
 <script>
 export default {
   props: {
+    anchor: { type: Boolean },
     code: { type: Object },
   },
+  data() {
+    return {
+      headerId: this.code.title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-'),
+    };
+  },
 };
 </script>
 

docs/.vuepress/components/CodeOverview.vue

@@ -0,0 +1,74 @@
+<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>

docs/.vuepress/components/VersionCards.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="wrapper">
+    <div v-for="version in gameVersions" class="card" @click="onCardClick(version)">
+      <h3>{{ version.name }}</h3>
+    </div>
+  </div>
+</template>
+
+<script>
+// Data
+import gameVersions from '../data/gameVersions.json';
+
+export default {
+  data() {
+    return {
+      gameVersions,
+    };
+  },
+  methods: {
+    onCardClick(v) {
+      window.location.href = `/code-reference/${v.identifier.toLowerCase()}.html`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.card {
+  width: 300px;
+  max-width: 100%;
+  margin: 5px;
+  padding: 15px;
+  background-color: #f3f5f7;
+  border-left: 0.5rem solid #42b983;
+  cursor: pointer;
+  text-align: center;
+  color: #3eaf7c;
+}
+
+.card:hover {
+  background-color: #e5f0eb;
+}
+</style>

docs/.vuepress/config.js

@@ -25,6 +25,10 @@ module.exports = {
         text: 'Cookbook',
         link: '/guide.html',
       },
+      {
+        text: 'Code Reference',
+        link: '/code-reference/index.html',
+      },
       {
         text: 'Changelog',
         link: '/changelog.html',

docs/code-reference/gmse01.md

@@ -0,0 +1,9 @@
+---
+editLink: false
+---
+
+# GMSE01 (NTSC-U / North America)
+
+## List of available codes
+
+<CodeOverview gameVersion="GMSE01" />

docs/code-reference/gmsj01.md

@@ -0,0 +1,13 @@
+---
+editLink: false
+---
+
+# GMSJ01 (NTSC-J / Japan)
+
+::: tip
+This site refers to version 1.0 of the NTSC-J release. For version 1.1 [click this link](/code-overview/jpa.html).
+:::
+
+## List of available codes
+
+<CodeOverview gameVersion="GMSJ01" />

docs/code-reference/gmsj0a.md

@@ -0,0 +1,13 @@
+---
+editLink: false
+---
+
+# GMSJ01 (NTSC-J / Japan)
+
+::: tip
+This site refers to version 1.1 of the NTSC-J release. For version 1.0 [click this link](/code-overview/jp.html).
+:::
+
+## List of available codes
+
+<CodeOverview gameVersion="GMSJ0A" />

docs/code-reference/gmsp01.md

@@ -0,0 +1,9 @@
+---
+editLink: false
+---
+
+# GMSE01 (PAL / Europe)
+
+## List of available codes
+
+<CodeOverview gameVersion="GMSP01" />

docs/code-reference/index.md

@@ -0,0 +1,7 @@
+---
+editLink: false
+---
+
+# Code Reference
+
+<VersionCards />