From c3c3e3fb04de589cbca07343c848c875a89bd7e9 Mon Sep 17 00:00:00 2001
From: Yurij Mikhalevich <yurij@mikhalevi.ch>
Date: Sat, 9 Nov 2024 13:21:21 +0400
Subject: [PATCH] fix(info Modal): remove spaces before dots, make it shorter,
 center it better

---
 components/GlobalHeader.vue | 21 ++++---------
 components/ModalDialog.vue  |  6 ++--
 eslint.config.mjs           | 61 +++++++++++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/components/GlobalHeader.vue b/components/GlobalHeader.vue
index ff3a49f..1972ffb 100644
--- a/components/GlobalHeader.vue
+++ b/components/GlobalHeader.vue
@@ -68,15 +68,14 @@ const onCloseAboutModal = () => {
   <ModalDialog
     :open="aboutModalOpen"
     :on-close="onCloseAboutModal"
+    extra-modal-class="h-[400px]"
   >
     <div class="flex flex-grow flex-col justify-between">
       <div class="flex flex-col gap-2">
         <p>Aibyss is a survival game where you compete by coding your AI in <span class="font-semibold">JavaScript</span>.</p>
 
         <p>
-          The game is played in real time, and you can see how your AI performs against other players' AIs. It is played in a 2D grid, and your AI can move around, attack other AIs, and collect resources. The game is written in TypeScript. If you want to contribute, check out the list of open issues and the contributing guide <AnchorLink href="https://github.com/move-fast-and-break-things/aibyss">
-            here
-          </AnchorLink>.
+          The game is played in real time, and you can see how your AI performs against other players' AIs. It is played in a 2D grid, and your AI can move around, attack other AIs, and collect resources. The game is written in TypeScript. If you want to contribute, check out the list of open issues and the contributing guide <AnchorLink href="https://github.com/move-fast-and-break-things/aibyss">here</AnchorLink>.
         </p>
 
         <p>Good luck, and have fun!</p>
@@ -87,27 +86,19 @@ const onCloseAboutModal = () => {
           The logo and the art for the social preview image created by <AnchorLink
             href="https://github.com/Bee133"
             rel="nofollow noreferrer"
-          >
-            Ivan Pchelka
-          </AnchorLink>.
+          >Ivan Pchelka</AnchorLink>.
         </p>
         <p>
           The <AnchorLink
             href="https://fontstruct.com/fontstructions/show/1716995"
             rel="nofollow noreferrer"
-          >
-            FontStruction "RetroPix"
-          </AnchorLink> by <AnchorLink
+          >FontStruction "RetroPix"</AnchorLink> by <AnchorLink
             href="https://brandonkleeman.com/"
             rel="nofollow noreferrer"
-          >
-            Brandon Kleeman
-          </AnchorLink> is licensed under a <AnchorLink
+          >Brandon Kleeman</AnchorLink> is licensed under a <AnchorLink
             href="http://creativecommons.org/licenses/by/3.0/"
             rel="nofollow noreferrer"
-          >
-            Creative Commons Attribution license
-          </AnchorLink>.
+          >Creative Commons Attribution license</AnchorLink>.
         </p>
       </div>
     </div>
diff --git a/components/ModalDialog.vue b/components/ModalDialog.vue
index 6a40b0b..8d4a7e7 100644
--- a/components/ModalDialog.vue
+++ b/components/ModalDialog.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-const { open, onClose } = defineProps<{ open: boolean; onClose: () => void }>();
+const { open, onClose, extraModalClass } = defineProps<{ open: boolean; onClose: () => void; extraModalClass?: string }>();
 </script>
 
 <template>
   <div
     v-if="open"
-    class="absolute z-10 w-full h-full top-0 left-0 bg-slate-400 bg-opacity-20"
+    class="flex absolute z-10 w-full h-full top-0 left-0 bg-slate-400 bg-opacity-20 items-center justify-center"
     @click.self="onClose"
   >
-    <div class="bg-white z-10 flex flex-col max-w-xl max-h-[calc(100vh-140px)] h-[600px] shadow p-4 pt-2 mx-auto mt-[110px]">
+    <div :class="`bg-white z-10 flex flex-col max-w-xl max-h-[calc(100vh-140px)] h-[600px] shadow p-4 pt-2 mb-16 ${extraModalClass}`">
       <div class="flex flex-row justify-end mb-2">
         <ButtonLink @click="onClose">
           close
diff --git a/eslint.config.mjs b/eslint.config.mjs
index a44ebf9..37fb355 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,9 +1,70 @@
 // @ts-check
 import withNuxt from "./.nuxt/eslint.config.mjs";
 
+const INLINE_ELEMENTS = [
+  "AnchorLink",
+  "pre",
+  "textarea",
+  "router-link",
+  "RouterLink",
+  "nuxt-link",
+  "NuxtLink",
+  "u-link",
+  "ULink",
+  "a",
+  "abbr",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "canvas",
+  "cite",
+  "code",
+  "data",
+  "del",
+  "dfn",
+  "em",
+  "i",
+  "iframe",
+  "ins",
+  "kbd",
+  "label",
+  "map",
+  "mark",
+  "noscript",
+  "object",
+  "output",
+  "picture",
+  "q",
+  "ruby",
+  "s",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "svg",
+  "time",
+  "u",
+  "var",
+  "video",
+];
+
 export default withNuxt({
   rules: {
     "curly": "error",
+    "vue/multiline-html-element-content-newline": ["error", {
+      ignoreWhenEmpty: true,
+      ignores: INLINE_ELEMENTS,
+      allowEmptyLines: false,
+    }],
+    "vue/singleline-html-element-content-newline": ["warn", {
+      ignoreWhenNoAttributes: true,
+      ignoreWhenEmpty: true,
+      ignores: INLINE_ELEMENTS,
+      externalIgnores: [],
+    }],
     "@typescript-eslint/no-non-null-assertion": "error",
   },
 });