Add Debug and Characters

.gitattributes

@@ -0,0 +1 @@
+src/app.d.ts linguist-vendored=false

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,70 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All change except updating data will be noted here
 
+## [1.3.136] - 2022-05-19
+
+- Added /debug (Accessible in development only)
+
 ## [1.3.132] - 2022-05-19
 
 - Add History (in /statistics)

CONTRIBUTING.md

@@ -39,3 +39,11 @@ now but if set correctly, will appear once pushed)
 ```
 https://github.com/Leomotors/anime-captcha/blob/main/images/Armin.webp?raw=true
 ```
+
+### Local Testing
+
+Start the app in development mode at visits /debug
+
+This will display all the images **and their answer** (Spoiler Warning)
+
+Please make sure your image is accessible from browser and not blocked by CORS or anything.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "anime-captcha",
-  "version": "1.3.132",
+  "version": "1.3.136",
   "type": "module",
   "repository": {
     "type": "git",
@@ -51,4 +51,4 @@
     "typescript": "^4.6.4",
     "vite-plugin-pwa": "^0.12.0"
   }
-}
+}

prebuild.js

@@ -37,14 +37,14 @@ for (const file of files) {
 fs.writeFile(
   "./src/data/data.g.ts",
   `
-import type { CaptchaTypeJSON } from "$data/model";
+import type { CaptchaGetAll } from "$data/model";
 
 ${categories.reduce(
   (prev, cate) => prev + `import * as ${cate} from "./${cate}.json";\n`,
   ""
 )}
 
-export const Data: { [category: string]: CaptchaTypeJSON } = { ${categories} };
+export const Data: CaptchaGetAll = { ${categories} };
 `
 );
 

src/app.css

@@ -45,3 +45,15 @@ button,
 iframe {
   @apply select-none;
 }
+
+.captcha-table {
+  @apply table-auto border-collapse border-[1.5px] border-slate-900;
+}
+
+.captcha-table > thead {
+  @apply border-b-[1.5px] border-black;
+}
+
+.captcha-table > thead > tr > th {
+  @apply p-2;
+}

src/data/fbi.json

@@ -744,6 +744,66 @@
                 "ja": "阿波連さんははかれない"
             },
             "answer": false
+        },
+        {
+            "image": "https://i.pinimg.com/originals/7d/f6/b3/7df6b334ee6a8457b6ba8aaf2f81fdd8.jpg",
+            "name": {
+                "en": "Falco Grice",
+                "ja": "ファルコ・グライス"
+            },
+            "anime": {
+                "en": "Attack on Titan",
+                "ja": "進撃の巨人"
+            },
+            "answer": false
+        },
+        {
+            "image": "https://i.pinimg.com/736x/10/c9/c0/10c9c02224ae9c08ba781bae2a856675.jpg",
+            "name": {
+                "en": "Anya Forger",
+                "ja": "アーニャ・フォージャー"
+            },
+            "anime": {
+                "en": "SPY×FAMILY",
+                "ja": "スパイファミリー"
+            },
+            "answer": false
+        },
+        {
+            "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdRo7bOi2DRI5OaO5n0T8UVpidUQRyXWwalw&usqp=CAU",
+            "name": {
+                "en": "Loid Forger",
+                "ja": "ロイド・フォージャー"
+            },
+            "anime": {
+                "en": "SPY×FAMILY",
+                "ja": "スパイファミリー"
+            },
+            "answer": true
+        },
+        {
+            "image": "https://cdn.realsport101.com/images/ncavvykf/epicstream/e31e80a44efa30c13576b0d29d1a1b13a7428f26-1200x628.jpg?rect=42,0,1116,628&w=700&h=394&dpr=2",
+            "name": {
+                "en": "Yor Forger",
+                "ja": "ヨル・フォージャー"
+            },
+            "anime": {
+                "en": "SPY×FAMILY",
+                "ja": "スパイファミリー"
+            },
+            "answer": true
+        },
+        {
+            "image": "https://i.pinimg.com/236x/ff/08/73/ff0873326996049d257fb08928fa5c80.jpg",
+            "name": {
+                "en": "Izumi Motoko",
+                "ja": "和泉許子"
+            },
+            "anime": {
+                "en": "Shikimori's Not Just a Cutie",
+                "ja": "可愛いだけじゃない式守さん"
+            },
+            "answer": true
         }
     ],
     "onFail": {

src/data/model.ts

@@ -31,3 +31,5 @@ export interface CaptchaType extends CaptchaTypeJSON {
   // * Short name of Title
   category: string;
 }
+
+export type CaptchaGetAll = { [category: string]: CaptchaTypeJSON };

src/data/trap.json

@@ -660,6 +660,30 @@
                 "ja": "阿波連さんははかれない"
             },
             "answer": true
+        },
+        {
+            "image": "https://i.ytimg.com/vi/ydvzdAMm7cM/maxresdefault.jpg",
+            "name": {
+                "en": "Shikimori",
+                "ja": "式守さん"
+            },
+            "anime": {
+                "en": "Shikimori's Not Just a Cutie",
+                "ja": "可愛いだけじゃない式守さん"
+            },
+            "answer": true
+        },
+        {
+            "image": "https://external-preview.redd.it/MMWh9renmFzqxS9rwZW59LwqWCxBGp_p1IqZK-PnbM4.jpg?width=640&crop=smart&auto=webp&s=759e0dc3f98400538a0b4f6ce4eab5119cab3a3d",
+            "name": {
+                "en": "Izumi",
+                "ja": "和泉くん"
+            },
+            "anime": {
+                "en": "Shikimori's Not Just a Cutie",
+                "ja": "可愛いだけじゃない式守さん"
+            },
+            "answer": false
         }
     ],
     "onFail": {

src/routes/answerkey.svelte

@@ -28,8 +28,8 @@
     Result of "{play.dataset.title.replace(/<[^>]+>/g, " ").trim()}"
   </h1>
 
-  <table class="table-auto border-collapse border-[1.5px] border-slate-900">
-    <thead class="border-b-[1.5px] border-black">
+  <table class="captcha-table">
+    <thead>
       <tr class="bg-sky-200 text-xs lg:text-xl">
         <th>Image</th>
         <th>Character Name</th>

src/routes/debug.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" context="module">
+  import { dev } from "$app/env";
+  import type { Load } from "@sveltejs/kit";
+
+  import type { CaptchaGetAll } from "$data/model";
+  import type { Insight } from "$types";
+
+  export const prerender = false;
+
+  export const load: Load = async ({ fetch }) => {
+    if (!dev)
+      return {
+        status: 403,
+        error: "You shall not pass! Debug is only available in Debug",
+      };
+
+    const [_data, _insight] = await Promise.all([
+      fetch("/api/getall"),
+      fetch("/api/insight"),
+    ]);
+
+    const [data, insight] = await Promise.all([_data.json(), _insight.json()]);
+
+    return {
+      props: {
+        data: data as CaptchaGetAll,
+        insight: insight as Insight,
+      },
+    };
+  };
+</script>
+
+<script lang="ts">
+  import Label from "$components/Label.svelte";
+
+  export let data: CaptchaGetAll;
+  export let insight: Insight;
+
+  function I(cate: string) {
+    return insight.categories[cate];
+  }
+</script>
+
+<main class="premium-font my-10 flex flex-col gap-4">
+  <h1>Insight created at {insight.created_at}</h1>
+
+  {#each Object.entries(data) as [cate, captcha]}
+    <h2 class="mt-10">Category: {cate}</h2>
+    <table class="captcha-table">
+      <thead>
+        <tr class="bg-sky-200 text-xl">
+          <th>Category</th>
+          <th>Index</th>
+          <th>Image</th>
+          <th>Character Name</th>
+          <th>Anime</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each captcha.questions as question, index}
+          <tr class={question.answer ? "bg-green-100" : "bg-red-100"}>
+            <td>{cate}</td>
+            <td>{index + 1}</td>
+            <td>
+              <div
+                class="aspect-square bg-cover bg-center mx-auto w-28 h-28"
+                style="background-image: url({question.image})"
+              />
+            </td>
+            <td><Label label={question.name} /></td>
+            <td><Label label={question.anime} /></td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+    <h2>
+      Correct Ratio: {I(cate).correct_count}/{I(cate).questions_count} ({I(cate)
+        .correct_ratio})
+    </h2>
+  {/each}
+</main>
+
+<style lang="postcss">
+  tbody > tr > td:nth-child(-n + 2) {
+    @apply text-2xl font-bold;
+  }
+</style>

src/routes/statistics.svelte

@@ -28,7 +28,8 @@
   <hr class="text-slate-900 w-[90%] my-4" />
 
   <p class="info px-2">
-    Note: The history is stored in your browser's LocalStorage
+    Note: The history is stored in your browser's LocalStorage, only the last
+    100 plays are kept.
   </p>
 
   <div class="all-play flex flex-col-reverse w-full p-6 gap-4">