2023.10.07.1

.gitignore

@@ -27,5 +27,4 @@ coverage
 *.sln
 *.sw?
 
-.vite
-production.sh
+.vite

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prettyheroes",
-  "version": "0.0.1",
+  "version": "fang",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -1,31 +1,8 @@
 <script setup>
-import HomePage from "@/views/HomePage.vue";
-import HeroCreator from "@/views/HeroCreator.vue";
-import HeroPage from "@/views/HeroPage.vue";
-import LoadingPage from "@/components/Transition/LoadingPage.vue";
-
-function currentPage(route) {
-  switch (route.path) {
-    case '/':
-      return "HOME";
-    case '/creator':
-      return "CREATOR";
-    default:
-      return "HERO";
-  }
-}
-
 </script>
 
 <template>
-  <HomePage v-if="currentPage($route) === 'HOME'"/>
-  <HeroCreator v-if="currentPage($route) === 'CREATOR'"/>
-  <Suspense v-if="currentPage($route) === 'HERO'">
-    <template #fallback>
-      <LoadingPage/>
-    </template>
-    <HeroPage/>
-  </Suspense>
+  <router-view></router-view>
 </template>
 
 <style scoped>

src/assets/base.css

@@ -14,7 +14,7 @@
 }
 
 @media screen and (orientation: portrait) {
-    :root{
+    :root {
         --col: var(--wi);
         --al: #353056;
     }

src/assets/js/fetchResult.js

@@ -1,6 +1,7 @@
 import {load} from "js-yaml";
 import {parse} from "smol-toml";
 import {refactorToml, refactorYaml} from "@/assets/js/checkFile";
+import homeInfo from "@/assets/json/homeInfo.json"
 
 export async function fetchWebsite(url) {
     let res = null;
@@ -15,7 +16,7 @@ export async function fetchWebsite(url) {
     return res.text();
 }
 
-export function loadAsToml(fetchedContent) {
+export function loadAsToml(fetchedContent, noColor) {
     let loadedContent = null;
     try {
         loadedContent = parse(fetchedContent);
@@ -25,29 +26,31 @@ export function loadAsToml(fetchedContent) {
 
     refactorToml(loadedContent);
 
-    document.querySelector('head title').textContent = `${loadedContent.title.title} - PrettyHeroes`;
+    document.querySelector('head title').textContent = `${loadedContent.title.title} - ${homeInfo.appName}`;
     document.querySelector("link[rel~='icon']").href = loadedContent.title.img;
     document.querySelector("meta[name='description']").content = loadedContent.title.catchphrase;
     document.querySelector("meta[name='og:title']").content = loadedContent.title.title;
     document.querySelector("meta[name='og:description']").content = loadedContent.title.catchphrase;
 
-    let params = {
-        '--cbg': loadedContent.colors.background,
-        '--cwi': loadedContent.colors.widget,
-        '--clk': loadedContent.colors.link,
-        '--cho': loadedContent.colors.hover,
-        '--ctt': loadedContent.colors.title,
-        '--ctxt': loadedContent.colors.text
-    }
-    for (let elem in params) {
-        if (params[elem] !== undefined) {
-            document.documentElement.style.setProperty(elem, params[elem]);
+    if (!noColor) {
+        let params = {
+            '--cbg': loadedContent.colors.background,
+            '--cwi': loadedContent.colors.widget,
+            '--clk': loadedContent.colors.link,
+            '--cho': loadedContent.colors.hover,
+            '--ctt': loadedContent.colors.title,
+            '--ctxt': loadedContent.colors.text
+        }
+        for (let elem in params) {
+            if (params[elem] !== undefined) {
+                document.documentElement.style.setProperty(elem, params[elem]);
+            }
         }
     }
     return loadedContent;
 }
 
-export function loadAsYaml(fetchedContent) {
+export function loadAsYaml(fetchedContent, noColor) {
     let loadedContent = null;
     try {
         loadedContent = load(fetchedContent);
@@ -91,12 +94,12 @@ export function loadAsYaml(fetchedContent) {
             url: loadedContent.urls[elem]
         })
     }
-    document.querySelector('head title').textContent = `${loadedContent.title} - PrettyHeroes`;
+    document.querySelector('head title').textContent = `${loadedContent.title} - ${homeInfo.appName}`;
     document.querySelector("head link[rel~='icon']").href = loadedContent.icon;
     document.querySelector("head meta[name='description']").content = "From Pronounce";
     document.querySelector("head meta[name='og:title']").content = loadedContent.title;
     document.querySelector("head meta[name='og:description']").content = "From Pronounce";
-    if (loadedContent.colors === undefined) {
+    if (loadedContent.colors === undefined || noColor) {
         return result;
     }
     let params = {

src/assets/json/flagsMatches.json

@@ -79,9 +79,9 @@
     "img": "grey.png",
     "name": "Greysexual"
   },
-  "homo": {
-    "img": "homo.png",
-    "name": "Homosexual"
+  "pride": {
+    "img": "pride.png",
+    "name": "LGBTQIA+"
   },
   "inter": {
     "img": "inter.png",
@@ -123,7 +123,7 @@
     "img": "transfem.png",
     "name": "Transfeminine"
   },
-  "transmac": {
+  "transmasc": {
     "img": "transmasc.png",
     "name": "Transmasculine"
   },

src/components/Creator/Dummy/HelpPage.vue

@@ -98,8 +98,7 @@ defineEmits([
     border-radius: 32px;
     padding: 32px;
     float: right;
-    animation: slidein ease-out 0.25s;
-
+    animation: Blur ease-out 0.5s;
   }
 
   #helpmess > div > * {
@@ -148,7 +147,6 @@ defineEmits([
     justify-content: center;
     cursor: pointer;
     transition: all 0.25s;
-
   }
 
   #helpmess > div > div:not(.flags) > a:hover {
@@ -178,8 +176,7 @@ defineEmits([
     z-index: 15;
     align-items: center;
     justify-content: center;
-    animation: Blur ease-out 0.5s;
-  }
+}
 
   #helpmess > div {
     width: 80vw;
@@ -190,9 +187,8 @@ defineEmits([
     height: fit-content;
     padding: 5vh 0;
     float: right;
-    animation: slidein ease-out 0.25s;
-
-  }
+    animation: Blur ease-out 0.5s;
+}
 
   #helpmess > div > * {
     margin: 0;

src/components/Hero/HeroTitle.vue

@@ -87,6 +87,10 @@ const props = defineProps(
 
   .herotitle > div > h1 {
     color: var(--ctt);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 50vw;
   }
 
   .herotitle > img {

src/components/Hero/PronounceCompat.vue

@@ -74,7 +74,6 @@ defineEmits([
     z-index: 10;
     align-items: center;
     justify-content: center;
-    animation: Blur ease-out 0.5s;
   }
 
   .promess > div {
@@ -88,8 +87,7 @@ defineEmits([
     height: fit-content;
     padding: 32px;
     float: right;
-    animation: slidein ease-out 0.25s;
-
+    animation: Blur ease-out 0.5s;
   }
 
   .promess > div > * {
@@ -130,7 +128,6 @@ defineEmits([
     justify-content: center;
     cursor: pointer;
     transition: all 0.25s;
-
   }
 
   .promess > div > div > a:hover {
@@ -160,7 +157,6 @@ defineEmits([
     z-index: 15;
     align-items: center;
     justify-content: center;
-    animation: Blur ease-out 0.5s;
     background: var(--bg);
   }
 
@@ -173,8 +169,7 @@ defineEmits([
     height: fit-content;
     padding: 5vh 0;
     float: right;
-    animation: slidein ease-out 0.25s;
-
+    animation: Blur ease-out 0.5s;
   }
 
   .promess > div > * {