add rules list view, link to it in nav bar

packages/shared/src/variant_map.ts

@@ -116,3 +116,12 @@ export function uiTransform(variant: string, config: object, state: object) {
   }
   return variant_object.uiTransform(config, state);
 }
+
+export function getVariantsWithRulesDescription(): string[] {
+  return Object.entries(variant_map)
+    .filter(
+      ([_name, variant]) =>
+        !variant.deprecated && variant.rulesDescription !== undefined,
+    )
+    .map(([name, _variant]) => name);
+}

packages/vue-client/src/App.vue

@@ -4,11 +4,11 @@ import UserNav from "./components/UserNav.vue";
 import { ref } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faBars } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faBook } from "@fortawesome/free-solid-svg-icons";
 import { faHouse } from "@fortawesome/free-solid-svg-icons";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 
-library.add(faBars, faHouse, faCircleInfo);
+library.add(faBars, faHouse, faCircleInfo, faBook);
 const is_menu_closed = ref(true);
 
 const closeMenuFn = (event: MouseEvent) => {
@@ -50,6 +50,12 @@ const toggleMenuFn = (event: MouseEvent) => {
             class="icon"
           />About</RouterLink
         >
+        <RouterLink class="navElement" to="/variants/rules-list"
+          ><font-awesome-icon
+            icon="fa-solid fa-book"
+            class="icon"
+          />Rules</RouterLink
+        >
       </div>
       <div>
         <UserNav />

packages/vue-client/src/assets/base.css

@@ -93,7 +93,6 @@
   }
 }
 
-/* TODO: Check why this is here, can we remove this? */
 *,
 *::before,
 *::after {

packages/vue-client/src/router/index.ts

@@ -48,6 +48,11 @@ const router = createRouter({
       component: () => import("../views/RulesView.vue"),
       props: true,
     },
+    {
+      path: "/variants/rules-list",
+      name: "rules-list",
+      component: () => import("../views/RulesListView.vue"),
+    },
   ],
 });
 

packages/vue-client/src/utils/format-utils.ts

@@ -0,0 +1,7 @@
+export function toUpperCaseFirstLetter(string: string) {
+  if (string.length === 0) {
+    return "";
+  }
+
+  return string[0].toUpperCase() + string.slice(1);
+}

packages/vue-client/src/views/RulesListView.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { toUpperCaseFirstLetter } from "@/utils/format-utils";
+import { getVariantsWithRulesDescription } from "@ogfcommunity/variants-shared";
+import { RouterLink } from "vue-router";
+
+const variantsWithRulesDescription = getVariantsWithRulesDescription();
+</script>
+
+<template>
+  <main>
+    <h1>Rule Descriptions</h1>
+    <div class="rule-links-container">
+      <RouterLink
+        v-for="variant in variantsWithRulesDescription"
+        :key="variant"
+        class="rules-link"
+        v-bind:to="{ name: 'rules', params: { variant: variant } }"
+      >
+        {{ toUpperCaseFirstLetter(variant) }}
+      </RouterLink>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+main {
+  padding: 0 2rem;
+}
+.rule-links-container {
+  display: flex;
+  flex-direction: row;
+  flex-flow: wrap;
+}
+.rules-link {
+  border: 1px solid var(--color-border);
+  margin: 15px;
+  text-align: center;
+  padding: 1rem 2rem;
+  font-size: large;
+  background-color: var(--color-background-soft);
+  &:hover {
+    background-color: var(--color-background-mute);
+  }
+}
+</style>

packages/vue-client/src/views/RulesView.vue

@@ -5,26 +5,19 @@ import {
 } from "@ogfcommunity/variants-shared";
 import { computed } from "vue";
 import VariantDemoView from "./VariantDemoView.vue";
+import { toUpperCaseFirstLetter } from "@/utils/format-utils";
 
 const props = defineProps<{ variant: string }>();
 
 const rulesDescription = computed(() => getRulesDescription(props.variant));
 
 const variantExists = computed(() => getVariantList().includes(props.variant));
-
-function toUpperCaseFirstLetter(string: string) {
-  if (string.length === 0) {
-    return "";
-  }
-
-  return string[0].toUpperCase() + string.slice(1);
-}
 </script>
 
 <template>
   <main>
     <div v-if="!variantExists">Sorry, variant not found.</div>
-    <div v-if="variantExists" class="grid-page-layout">
+    <div v-if="variantExists" class="grid-page-layout large-grid">
       <div>
         <h1>{{ toUpperCaseFirstLetter(props.variant) }} Variant Rules</h1>
         <p v-if="!rulesDescription">Under Construction</p>
@@ -45,6 +38,7 @@ main {
 
 .grid-page-layout {
   max-width: none;
+  overflow-x: scroll;
 }
 
 :deep(strong, h1, h2) {