Merge pull request #340 from govariantsteam/add_demo_board_to_rules_page

Rules List

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/assets/main.css

@@ -13,8 +13,8 @@
 
 @media (max-width: 540px) {
   .grid-page-layout {
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
+    padding-left: 12px;
+    padding-right: 12px;
   }
 }
 

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"
+        :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

@@ -1,38 +1,47 @@
 <script setup lang="ts">
-import { getRulesDescription } from "@ogfcommunity/variants-shared";
+import {
+  getRulesDescription,
+  getVariantList,
+} 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));
 
-function toUpperCaseFirstLetter(string: string) {
-  if (string.length === 0) {
-    return "";
-  }
-
-  return string[0].toUpperCase() + string.slice(1);
-}
+const variantExists = computed(() => getVariantList().includes(props.variant));
 </script>
 
 <template>
   <main>
-    <div class="grid-page-layout">
+    <div v-if="!variantExists">Sorry, variant not found.</div>
+    <div v-if="variantExists" class="grid-page-layout rules-page">
+      <div>
+        <h1>{{ toUpperCaseFirstLetter(props.variant) }} Variant Rules</h1>
+        <p v-if="!rulesDescription">Under Construction</p>
+        <div v-if="rulesDescription" v-html="rulesDescription"></div>
+      </div>
       <div>
-        <div class="rules-page">
-          <h1>{{ toUpperCaseFirstLetter(props.variant) }} Variant Rules</h1>
-          <p v-if="!rulesDescription">Under Construction</p>
-          <div v-if="rulesDescription" v-html="rulesDescription"></div>
-        </div>
+        <h1>Demo</h1>
+        <VariantDemoView :variant="variant" />
       </div>
     </div>
   </main>
 </template>
 
 <style scoped>
-.rules-page {
+main {
   font-family: "helvetica", "arial", "sans-serif";
 }
+
+.grid-page-layout.rules-page {
+  max-width: none;
+  overflow-x: scroll;
+  grid-template-columns: minmax(45ch, 90ch) 1fr;
+}
+
 :deep(strong, h1, h2) {
   font-weight: bold;
 }