search by category

src/Content.svelte

@@ -2,6 +2,7 @@
   import Card from './components/card.svelte';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
   import { _env } from './stores';
+    import { to_number } from 'svelte/internal';
 
   // -----------------------------
   let List = [];
@@ -74,7 +75,7 @@
     List = [...List, ...data];
   }
 
-  function searchTag(args) {
+  function querySearch(args) {
     let searchInfo = {
       url: `${$_env}/query.php?action=get&${args}`,
       params: {
@@ -92,8 +93,28 @@
     });
   }
 
+  function getCategoryIndex(text) {
+    return categoryList.findIndex((val)=>{
+      return val == text;
+    });
+  }
+
   function onSearch(e) {
-    searchTag("tag=" + encodeURIComponent(e.detail.text));
+    console.log("searching");
+    console.log(e);
+    let url;
+    switch(e.detail.type) {
+      case 'tag':
+        url = "tag=" + encodeURIComponent(e.detail.text);
+        console.log(url);
+        querySearch(url);
+        break;
+      case 'category':
+        url = "category=" + getCategoryIndex(e.detail.text);
+        console.log(url);
+        querySearch(url);
+        break;
+    }
   }
 
 </script>

src/components/card.svelte

@@ -40,6 +40,14 @@
   function searchByTag(e) {
     console.log(e);
     raiseEvent('search', {
+      type: 'tag',
+			text: e.target.innerHTML
+		});
+  }
+  function searchByCategory(e) {
+    console.log(e.target.innerHTML);
+    raiseEvent('search', {
+      type: 'category',
 			text: e.target.innerHTML
 		});
   }
@@ -52,16 +60,23 @@
       src={cover}
       alt={title ?? 'default alt'}
       style={error ? 'height: 240px; width: 320px;' : ''}
+      class='common-clickable'
       on:error={() => {
         cover = '/favicon.ico';
         error = true;
       }}
+      on:mousedown={()=>{
+        window.open($_env + '/' + folder);
+      }}
     />
   </figure>
   <div class="card-body">
-    <h2 class="card-title block">
+    <h2 class="card-title block common-clickable">
       <!-- NOTE: 游戏类别 -->
-      <div class="badge badge-secondary m-auto" style="height: inherit;line-height: inherit;">{language ?? '示例'}</div>
+      <div
+        class="badge badge-secondary m-auto"
+        style="height: inherit;line-height: inherit;"
+        on:mousedown={searchByCategory}>{language ?? '未知'}</div>
       <!-- NOTE: 游戏名称 -->
       {title ?? 'default title'}
     </h2>
@@ -99,4 +114,7 @@
     transition: background-color 0.5s ease;
     background-color: red;
   }
+  .common-clickable {
+    cursor:pointer;
+  }
 </style>