More clickable stuff.

FS-Frost · Nov 28, 2023 · 5444d68 · 5444d68
1 parent c7a9bb9
commit 5444d68
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 17 deletions.
diff --git a/src/Dictionary.svelte b/src/Dictionary.svelte
@@ -8,6 +8,7 @@
         LANG_ES,
     } from "./DictionaryClient";
     import Word from "./Word.svelte";
+    import { cleanWord } from "./strings";
 
     let response: ClientResponse;
     let isLoading: boolean = false;
@@ -29,6 +30,9 @@
         ? "Ups, I hit an error. Try again."
         : "Vaya, me tropecé con una piedra. Intenta de nuevo.";
     $: searchingMessage = isLangEnglish ? "Searching..." : "Buscando...";
+    $: proTip = isLangEnglish
+        ? "Pro tip: click a word to search it."
+        : "Pro tip: clic en una palabra para buscarla.";
 
     onMount(() => {
         const url = new URL(window.location.href);
@@ -116,6 +120,26 @@
         </select>
     </div>
 
+    <p>
+        <i>
+            {#each proTip.split(" ") as subword}
+                <span
+                    class="searchable"
+                    title={isLangEnglish
+                        ? `Click to search "${cleanWord(subword)}"`
+                        : `Clic para buscar "${cleanWord(subword)}"`}
+                    on:click={() => {
+                        word = cleanWord(subword);
+                        searchWord();
+                    }}
+                >
+                    {subword}
+                </span>
+                {" "}
+            {/each}
+        </i>
+    </p>
+
     {#if !isLoading && response && response.json}
         {#each response.json as defWord}
             <Word
@@ -150,4 +174,9 @@
     .text-center {
         text-align: center;
     }
+
+    .searchable:hover {
+        text-decoration: underline;
+        cursor: pointer;
+    }
 </style>
diff --git a/src/Word.svelte b/src/Word.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
     import { LANG_EN, Word } from "./DictionaryClient";
+    import { cleanWord } from "./strings";
 
     export let language: string;
     export let word: Word;
@@ -28,22 +29,13 @@
     function searchWord(subword: string): void {
         dispatch("search", subword);
     }
-
-    function cleanWord(subword: string): string {
-        const re = /(\w+)/;
-        const result = re.exec(subword);
-        if (!result || result.length == 0) {
-            return subword;
-        }
-
-        return result[0];
-    }
 </script>
 
 <div class="card mb-3">
     <div class="card-body">
         <h5 class="card-title">
-            {word.word}{#if word.phonetic != null}
+            <span>{word.word}</span>
+            {#if word.phonetic != null}
                 <i>({word.phonetic})</i>
             {/if}
         </h5>
@@ -56,10 +48,38 @@
         {#each word.meanings as meaning}
             {#if meaning.partOfSpeech != null}
                 <h6>
-                    <b
-                        >{getPartOfSpeechPrefix(meaning.partOfSpeech)}
-                        {meaning.partOfSpeech}</b
-                    >
+                    <b>
+                        {#each getPartOfSpeechPrefix(meaning.partOfSpeech).split(" ") as subword}
+                            <span
+                                class="searchable"
+                                title={isLangEnglish
+                                    ? `Click to search "${cleanWord(subword)}"`
+                                    : `Clic para buscar "${cleanWord(
+                                          subword
+                                      )}"`}
+                                on:click={() => searchWord(cleanWord(subword))}
+                            >
+                                {subword}
+                            </span>
+                            {" "}
+                        {/each}
+                        <span
+                            class="searchable"
+                            title={isLangEnglish
+                                ? `Click to search "${cleanWord(
+                                      meaning.partOfSpeech
+                                  )}"`
+                                : `Clic para buscar "${cleanWord(
+                                      meaning.partOfSpeech
+                                  )}"`}
+                            on:click={() =>
+                                searchWord(
+                                    cleanWord(meaning.partOfSpeech ?? "")
+                                )}
+                        >
+                            {meaning.partOfSpeech}
+                        </span>
+                    </b>
                 </h6>
             {/if}
 
@@ -68,7 +88,7 @@
                     <i>
                         {#each definition.definition.split(" ") as subword}
                             <span
-                                class="word"
+                                class="searchable"
                                 title={isLangEnglish
                                     ? `Click to search "${cleanWord(subword)}"`
                                     : `Clic para buscar "${cleanWord(
@@ -88,7 +108,7 @@
 </div>
 
 <style>
-    .word:hover {
+    .searchable:hover {
         text-decoration: underline;
         cursor: pointer;
     }

diff --git a/src/strings.ts b/src/strings.ts
@@ -0,0 +1,9 @@
+export function cleanWord(subword: string): string {
+    const re = /(\w+)/;
+    const result = re.exec(subword);
+    if (!result || result.length == 0) {
+        return subword;
+    }
+
+    return result[0];
+}