From cb0e21a60ab0a178784338679667a4227019acdb Mon Sep 17 00:00:00 2001
From: merowin <martin.unger@planet-earth.at>
Date: Fri, 22 Nov 2024 20:09:26 +0100
Subject: [PATCH] increase max width in rules page, catch typos in variant prop

---
 packages/vue-client/src/views/RulesView.vue | 33 +++++++++++++--------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/vue-client/src/views/RulesView.vue b/packages/vue-client/src/views/RulesView.vue
index e2f85b7..5c2b183 100644
--- a/packages/vue-client/src/views/RulesView.vue
+++ b/packages/vue-client/src/views/RulesView.vue
@@ -1,5 +1,8 @@
 <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";
 
@@ -7,6 +10,8 @@ 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 "";
@@ -18,26 +23,30 @@ function toUpperCaseFirstLetter(string: string) {
 
 <template>
   <main>
-    <div class="grid-page-layout">
+    <div v-if="!variantExists">Sorry, variant not found.</div>
+    <div v-if="variantExists" class="grid-page-layout">
+      <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>
-        <div>
-          <h1>Demo</h1>
-          <VariantDemoView v-bind:variant="variant" />
-        </div>
+        <h1>Demo</h1>
+        <VariantDemoView v-bind:variant="variant" />
       </div>
     </div>
   </main>
 </template>
 
 <style scoped>
-.rules-page {
+main {
   font-family: "helvetica", "arial", "sans-serif";
 }
+
+.grid-page-layout {
+  max-width: none;
+}
+
 :deep(strong, h1, h2) {
   font-weight: bold;
 }