feat: input page (wip)

src/App.vue

@@ -1,86 +1,21 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeMount } from "vue";
-import { isDomainAvailable } from "./lib/whois";
-import { DomainFactory } from "./lib/factory";
-
-enum State {
-  Loading,
-  Ready,
-  Generating,
-  Fetching,
-  Error,
-}
+import PageRandom from "@/components/PageRandom.vue";
+// import PageInput from "@/components/PageInput.vue";
+import { DomainFactory } from "@/lib/factory";
 
 function getLang() {
   return document.location.hash === "#french" ? "french" : "english";
 }
 
 const visible = ref<boolean>(false);
-const factory = ref<DomainFactory>(new DomainFactory());
-const domain = ref<string | null>(null);
-const domainAvailable = ref<boolean>(false);
 const lang = ref<string>(getLang());
-const state = ref<State>(State.Loading);
-
-function newDomain() {
-  if (!factory.value.error) {
-    state.value = State.Generating;
-    factory.value
-      .next(lang.value)
-      .then((value) => {
-        domain.value = value;
-        checkAvailability();
-      })
-      .catch((err: unknown) => {
-        state.value = State.Error;
-        throw err;
-      });
-  }
-}
-
-function checkAvailability() {
-  if (domain.value) {
-    const promiseDomain = domain.value;
-    state.value = State.Fetching;
-    isDomainAvailable(promiseDomain)
-      .then((available) => {
-        if (domain.value !== promiseDomain) {
-          return; // domain changed
-        }
-        domainAvailable.value = available;
-        if (!available) {
-          newDomain();
-        } else {
-          state.value = State.Ready;
-        }
-      })
-      .catch((err: unknown) => {
-        state.value = State.Error;
-        throw err;
-      });
-  }
-}
-
-function getTextClass() {
-  if (!domain.value || domain.value.length < 15) {
-    return "text-5xl";
-  }
-  if (domain.value.length < 20) {
-    return "text-4xl";
-  }
-  if (domain.value.length < 25) {
-    return "text-3xl";
-  }
-  if (domain.value.length < 30) {
-    return "text-2xl";
-  }
-  return "text-xl";
-}
+const factory = ref<DomainFactory>(new DomainFactory());
 
 onBeforeMount(() => {
   factory.value.init();
-  newDomain();
 });
+
 onMounted(() => {
   setTimeout(() => {
     visible.value = true;
@@ -89,7 +24,6 @@ onMounted(() => {
     const newLang = getLang();
     if (newLang !== lang.value) {
       lang.value = newLang;
-      newDomain();
     }
   }, 100);
 });
@@ -97,99 +31,32 @@ onMounted(() => {
 
 <template>
   <div :style="{ display: visible ? 'inherit' : 'none' }">
-    <div class="card bg-base-100 w-xl max-w-svw shrink-0 shadow-2xl">
-      <div class="card-body overflow-hidden">
-        <h1 class="font-bold" :class="getTextClass()">
-          <span
-            v-if="state !== State.Loading && domain"
-            class="inline-block me-2"
-          >
-            <div v-if="state === State.Fetching" class="status status-xl"></div>
-            <div
-              v-else-if="domainAvailable"
-              class="inline-grid *:[grid-area:1/1]"
-            >
-              <div class="status status-xl status-success animate-ping"></div>
-              <div class="status status-xl status-success"></div>
-            </div>
-            <div v-else class="inline-grid *:[grid-area:1/1]">
-              <div class="status status-xl status-error animate-ping"></div>
-              <div class="status status-xl status-error"></div>
-            </div>
-          </span>
-          <span
-            v-if="!domain"
-            class="loading loading-spinner loading-xl"
-          ></span>
-          <span v-else>{{ domain }}</span>
-        </h1>
-        <p v-if="state === State.Loading" class="py-6">
-          <span v-if="lang === 'french'"
-            >Chargement de la Cool Domain Factory™</span
-          >
-          <span v-else>Loading the Cool Domain Factory™</span>
-          <span class="loading loading-dots loading-xs"></span>
-        </p>
-        <p v-else-if="state === State.Generating" class="py-6">
-          <span v-if="lang === 'french'">Création d'un domaine cool</span>
-          <span v-else>Generating a new cool domain</span>
-          <span class="loading loading-dots loading-xs"></span>
-        </p>
-        <p v-else-if="state === State.Fetching" class="py-6">
-          <span v-if="lang === 'french'">Vérification de la disponibilité</span>
-          <span v-else>Checking domain availability</span>
-          <span class="loading loading-dots loading-xs"></span>
-        </p>
-        <div v-else-if="state === State.Ready && domainAvailable" class="py-6">
-          <span v-if="lang === 'french'"
-            >Ce domaine semble
-            <a
-              :href="`https://tld-list.com/fr/tld/${domain?.split('.')[1]}`"
-              target="_blank"
-              class="underline"
-              >disponible</a
-            >
-            !</span
-          >
-          <span v-else
-            >This domain seems
-            <a
-              :href="`https://tld-list.com/tld/${domain?.split('.')[1]}`"
-              target="_blank"
-              class="underline"
-              >available</a
-            >!</span
-          >
-        </div>
-        <div v-else-if="state === State.Ready && !domainAvailable" class="py-6">
-          <span v-if="lang === 'french'">Ce domaine n'est pas disponible.</span>
-          <span v-else>This domain is not available.</span>
-        </div>
-        <div v-else-if="state === State.Error" class="py-6">
-          <span v-if="lang === 'french'"
-            >Une erreur est survenue, merci de recharger la page.</span
-          >
-          <span v-else>An error has occured, please reload the page.</span>
-        </div>
-        <button
-          :disabled="
-            state === State.Loading ||
-            state === State.Generating ||
-            state === State.Error
-          "
-          class="btn btn-primary"
-          @click="newDomain"
-        >
-          <span v-if="lang === 'french'">Nouveau domaine</span>
-          <span v-else>New domain</span>
-        </button>
+    <div class="tabs tabs-xs tabs-bottom w-xl max-w-svw shrink-0">
+      <input
+        type="radio"
+        name="app_tabs"
+        class="tab"
+        :aria-label="lang === 'french' ? 'Aléatoire' : 'Random'"
+        checked
+      />
+      <div
+        class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
+      >
+        <PageRandom :lang="lang" :factory="factory" />
       </div>
+
+      <!-- <input
+        type="radio"
+        name="app_tabs"
+        class="tab"
+        :aria-label="lang === 'french' ? 'Saisie' : 'Input'"
+        checked
+      />
+      <div
+        class="tab-content bg-base-100 border-base-300 shadow-2xl p-6 overflow-hidden"
+      >
+        <PageInput :lang="lang" :factory="factory" />
+      </div> -->
     </div>
   </div>
 </template>
-
-<style scoped>
-.footer {
-  opacity: 50%;
-}
-</style>

src/components/CoolDomain.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  domain: string;
+  available: boolean;
+  searching: boolean;
+  size: string;
+}>();
+</script>
+
+<template>
+  <div class="inline-block align-text-top">
+    <div v-if="searching" class="status" :class="`status-${size}`"></div>
+    <div v-else-if="available" class="inline-grid *:[grid-area:1/1]">
+      <div
+        class="status status-success animate-ping"
+        :class="`status-${size}`"
+      ></div>
+      <div class="status status-success" :class="`status-${size}`"></div>
+    </div>
+    <div v-else class="inline-grid *:[grid-area:1/1]">
+      <div
+        class="status status-error animate-ping"
+        :class="`status-${size}`"
+      ></div>
+      <div class="status status-error" :class="`status-${size}`"></div>
+    </div>
+  </div>
+  {{ domain }}
+</template>

src/components/PageInput.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { DomainFactory } from "@/lib/factory";
+import CoolDomain from "./CoolDomain.vue";
+
+const props = defineProps<{ lang: string; factory: DomainFactory }>();
+
+const input = ref<string>("");
+const domains = ref<string[]>([]);
+
+function start() {
+  if (input.value.length) {
+    domains.value.splice(0, domains.value.length);
+    newDomain();
+  }
+}
+
+function newDomain() {
+  const startInput = input.value;
+  props.factory
+    .nextFromWord(input.value)
+    .then((domain) => {
+      if (input.value === startInput) {
+        domains.value.push(domain);
+        newDomain();
+      }
+    })
+    .catch(() => {
+      // TODO handle 0 domains
+    });
+}
+</script>
+
+<template>
+  <div>
+    <div class="pb-6">
+      <input
+        v-model.trim="input"
+        type="text"
+        :placeholder="
+          lang === 'french'
+            ? 'Écrit un mot ou une phrase'
+            : 'Type a word or a phrase'
+        "
+        class="input input-xl w-full"
+      />
+    </div>
+    <button class="btn btn-primary" :disabled="!input" @click="start">
+      <span v-if="lang === 'french'">Génerer</span>
+      <span v-else>Generate</span>
+    </button>
+    <p v-for="(domain, i) in domains" :key="`domain-${i}`" class="pt-6">
+      <CoolDomain
+        :domain="domain"
+        :available="false"
+        :searching="false"
+        size="md"
+      ></CoolDomain>
+    </p>
+  </div>
+</template>

src/components/PageRandom.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, onBeforeMount, watch } from "vue";
+import { isDomainAvailable } from "@/lib/whois";
+import type { DomainFactory } from "@/lib/factory";
+import CoolDomain from "./CoolDomain.vue";
+
+enum State {
+  Loading,
+  Ready,
+  Generating,
+  Fetching,
+  Error,
+}
+
+const props = defineProps<{ lang: string; factory: DomainFactory }>();
+
+const domain = ref<string | null>(null);
+const domainAvailable = ref<boolean>(false);
+const state = ref<State>(State.Loading);
+
+function newDomain() {
+  if (!props.factory.error) {
+    state.value = State.Generating;
+    props.factory
+      .next(props.lang)
+      .then((value: string) => {
+        domain.value = value;
+        checkAvailability();
+      })
+      .catch((err: unknown) => {
+        state.value = State.Error;
+        throw err;
+      });
+  }
+}
+
+function checkAvailability() {
+  if (domain.value) {
+    const promiseDomain = domain.value;
+    state.value = State.Fetching;
+    isDomainAvailable(promiseDomain)
+      .then((available: boolean) => {
+        if (domain.value !== promiseDomain) {
+          return; // domain changed
+        }
+        domainAvailable.value = available;
+        if (!available) {
+          newDomain();
+        } else {
+          state.value = State.Ready;
+        }
+      })
+      .catch((err: unknown) => {
+        state.value = State.Error;
+        throw err;
+      });
+  }
+}
+
+function getTextClass() {
+  if (!domain.value || domain.value.length < 15) {
+    return "text-5xl";
+  }
+  if (domain.value.length < 20) {
+    return "text-4xl";
+  }
+  if (domain.value.length < 25) {
+    return "text-3xl";
+  }
+  if (domain.value.length < 30) {
+    return "text-2xl";
+  }
+  return "text-xl";
+}
+
+onBeforeMount(() => {
+  newDomain();
+});
+watch(() => props.lang, newDomain);
+</script>
+
+<template>
+  <div>
+    <h1 class="font-bold" :class="getTextClass()">
+      <span v-if="!domain" class="loading loading-spinner loading-xl"></span>
+      <span v-else
+        ><CoolDomain
+          :domain="domain"
+          :available="domainAvailable"
+          :searching="state === State.Fetching"
+          size="xl"
+      /></span>
+    </h1>
+    <p v-if="state === State.Loading" class="py-6">
+      <span v-if="lang === 'french'"
+        >Chargement de la Cool Domain Factory™</span
+      >
+      <span v-else>Loading the Cool Domain Factory™</span>
+      <span class="loading loading-dots loading-xs"></span>
+    </p>
+    <p v-else-if="state === State.Generating" class="py-6">
+      <span v-if="lang === 'french'">Création d'un domaine cool</span>
+      <span v-else>Generating a new cool domain</span>
+      <span class="loading loading-dots loading-xs"></span>
+    </p>
+    <p v-else-if="state === State.Fetching" class="py-6">
+      <span v-if="lang === 'french'">Vérification de la disponibilité</span>
+      <span v-else>Checking domain availability</span>
+      <span class="loading loading-dots loading-xs"></span>
+    </p>
+    <div v-else-if="state === State.Ready && domainAvailable" class="py-6">
+      <span v-if="lang === 'french'"
+        >Ce domaine semble
+        <a
+          :href="`https://tld-list.com/fr/tld/${domain?.split('.')[1]}`"
+          target="_blank"
+          class="underline"
+          >disponible</a
+        >
+        !</span
+      >
+      <span v-else
+        >This domain seems
+        <a
+          :href="`https://tld-list.com/tld/${domain?.split('.')[1]}`"
+          target="_blank"
+          class="underline"
+          >available</a
+        >!</span
+      >
+    </div>
+    <div v-else-if="state === State.Ready && !domainAvailable" class="py-6">
+      <span v-if="lang === 'french'">Ce domaine n'est pas disponible.</span>
+      <span v-else>This domain is not available.</span>
+    </div>
+    <div v-else-if="state === State.Error" class="py-6">
+      <span v-if="lang === 'french'"
+        >Une erreur est survenue, merci de recharger la page.</span
+      >
+      <span v-else>An error has occured, please reload the page.</span>
+    </div>
+    <button
+      :disabled="
+        state === State.Loading ||
+        state === State.Generating ||
+        state === State.Error
+      "
+      class="btn btn-primary"
+      @click="newDomain"
+    >
+      <span v-if="lang === 'french'">Nouveau domaine</span>
+      <span v-else>New domain</span>
+    </button>
+  </div>
+</template>

src/lib/factory.ts

@@ -15,15 +15,19 @@ export class DomainFactory {
     this.words.english = this.initWords(englishWords);
   }
 
+  escapeWord(word: string): string {
+    return word
+      .normalize("NFD")
+      .toLowerCase()
+      .replace(/[^a-z0-9-]/g, "")
+      .trim();
+  }
+
   initWords(raw: string): string[] {
     return raw
       .split("\n")
       .map((word) => {
-        word = word
-          .normalize("NFD")
-          .toLowerCase()
-          .replace(/[^a-z0-9-]/g, "")
-          .trim();
+        word = this.escapeWord(word);
         if (word.length == 0) {
           return null;
         }
@@ -40,13 +44,12 @@ export class DomainFactory {
     return randomElement(this.words[lang]);
   }
 
-  randomDomain(lang: string): string | null {
-    const word = this.randomWord(lang);
+  randomDomain(word: string): string | null {
     for (const tld of shuffled(TLD_LIST.slice())) {
       const tldEscaped: string = tld.replace(".", "");
       if (word.endsWith(tldEscaped) && word.length > tldEscaped.length + 2) {
         const domain = `${word.substring(0, word.length - tldEscaped.length)}.${tld}`;
-        if (!domain.includes("-.")) {
+        if (!domain.includes("-.") && !this.generated.includes(domain)) {
           this.generated.push(domain);
           return domain;
         }
@@ -60,7 +63,8 @@ export class DomainFactory {
       let k = 10000;
       while (k > 0) {
         k--;
-        const domain = this.randomDomain(lang);
+        const word = this.randomWord(lang);
+        const domain = this.randomDomain(word);
         if (domain) {
           resolve(domain);
           return;
@@ -70,4 +74,20 @@ export class DomainFactory {
       reject(new Error(this.error));
     });
   }
+
+  nextFromWord(word: string): Promise<string> {
+    const escapedWord = this.escapeWord(word.replace(/ /gm, "-"));
+    return new Promise((resolve, reject) => {
+      let k = 10000;
+      while (k > 0) {
+        k--;
+        const domain = this.randomDomain(escapedWord);
+        if (domain) {
+          resolve(domain);
+          return;
+        }
+      }
+      reject(new Error("Could not generate a valid domain"));
+    });
+  }
 }