History and Responsive for mobile

leomotors · May 19, 2022 · f2c6d29 · f2c6d29 · vercel · May 19, 2022
1 parent 583b13d
commit f2c6d29
Show file tree

Hide file tree

Showing 17 changed files with 188 additions and 75 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+16
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All change except updating data will be noted here
 
+## [1.3.132] - 2022-05-19
+
+- Add History (in /statistics)
+
+- Finally, *RESPONSIVE* across mobile and various screen sizes is now properly implemented! ✨✨✨
+
 ## [1.3.116] - 2022-05-18
 
 Preview Version but merged to main because it is now better than old version

diff --git a/README.md b/README.md
@@ -22,11 +22,11 @@ Recently, Anime Captcha has been rewritten for better developer and user experie
 
 - Now has many routes✨
 
-- [COMING SOON] Statistics and play history
+- Animations🤩 and miscellaneous design changes
 
-- [COMING SOON] Better responsiveness for mobile and various screen sizes
+- [IN PROGRESS] Statistics and [Done] Play history
 
-- Miscellanous design changes
+- Much better responsiveness for mobile and various screen sizes
 
 Changelog: [./CHANGELOG.md](./CHANGELOG.md)
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "anime-captcha",
-  "version": "1.3.116",
+  "version": "1.3.132",
   "type": "module",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "globby": "^13.1.1",
-    "postcss": "^8.4.13",
+    "postcss": "^8.4.14",
     "postcss-load-config": "^3.1.4",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.7.0",
@@ -51,4 +51,4 @@
     "typescript": "^4.6.4",
     "vite-plugin-pwa": "^0.12.0"
   }
-}
+}
diff --git a/src/app.css b/src/app.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+.google-font {
   font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
@@ -12,6 +12,11 @@
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
+.premium-font {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
 .blue-link {
   @apply text-blue-400 hover:text-blue-500;
 }
@@ -23,3 +28,20 @@
 .actions > * {
   @apply rounded-xl p-4 text-xl text-white;
 }
+
+h1 {
+  @apply text-4xl font-bold;
+}
+
+h2 {
+  @apply text-3xl font-semibold;
+}
+
+h3 {
+  @apply text-2xl font-medium;
+}
+
+button,
+iframe {
+  @apply select-none;
+}
diff --git a/src/app.html b/src/app.html
@@ -15,9 +15,13 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto"
     />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Inter"
+    />
     %svelte.head%
   </head>
   <body>
-    <div>%svelte.body%</div>
+    <div class="google-font">%svelte.body%</div>
   </body>
 </html>
diff --git a/src/components/Captcha.svelte b/src/components/Captcha.svelte
@@ -64,7 +64,7 @@
 
 <main class="my-4">
   <section class="top-section border-gray-200 border">
-    <h1 class="text-left p-4 bg-captcha-blue text-white text-4xl">
+    <h1 class="text-left p-4 bg-captcha-blue text-white text-3xl sm:text-4xl">
       {@html questions.title}
     </h1>
     <table class="table-fixed m-2">
@@ -118,7 +118,7 @@
   }
 
   .tile {
-    @apply w-28 h-28 bg-center bg-cover;
+    @apply w-20 h-20 md:w-24 md:h-24 2xl:w-28 2xl:h-28 bg-center bg-cover;
   }
 
   .tile,

diff --git a/src/components/Label.svelte b/src/components/Label.svelte
@@ -4,6 +4,6 @@
 </script>
 
 <main>
-  <div class="font-bold text-2xl">{label.en}</div>
-  <div class="text-slate-800 text-xl">{label.ja}</div>
+  <div class="font-bold text-xs lg:text-2xl">{label.en}</div>
+  <div class="text-slate-800 text-[8px] lg:text-xl">{label.ja}</div>
 </main>
diff --git a/src/components/NotARobot.svelte b/src/components/NotARobot.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <main
-  class="flex flex-row items-center gap-1 bg-[#f9f9f9] p-4 rounded select-none border border-[#d3d3d3]"
+  class="flex flex-row items-center gap-1 bg-[#f9f9f9] m-4 p-4 rounded select-none border border-[#d3d3d3]"
 >
   {#if rickroll_data}
     <RickRoll {...rickroll_data} />

diff --git a/src/components/RickRoll.svelte b/src/components/RickRoll.svelte
@@ -5,20 +5,18 @@
   export let chance: string;
 </script>
 
-<main class="text-center">
+<main>
   <h1 class="font-bold text-4xl">You Lucky!</h1>
   <hr class="my-4" />
   <iframe
-    class="mx-auto"
-    width="560"
-    height="315"
+    class="mx-auto w-full aspect-video"
     src="https://www.youtube.com/embed/{url}?autoplay=1"
     {title}
     frameborder="0"
     allow="autoplay; encrypted-media; picture-in-picture"
     allowfullscreen
   />
-  <p class="mt-4 font-semibold text-2xl">
+  <p class="mt-4 font-semibold text-xl sm:text-2xl">
     There is {chance}% Chance you will be {roll} and you get it!
   </p>
 

diff --git a/src/lib/storage.ts b/src/lib/storage.ts
@@ -1,13 +1,14 @@
-import type { CaptchaType } from "$data/model";
+import type { CaptchaType, Question } from "$data/model";
 
 export interface PlayResult {
   dataset: CaptchaType;
   user_answer: boolean[][];
+  score: number;
   submission_time: string;
   time_used: number;
 }
 
-const saveVersion = "1";
+const saveVersion = "2";
 
 const keys = {
   saveVersion: "saveVersion",
@@ -16,11 +17,15 @@ const keys = {
 
 let cachedResults: PlayResult[];
 
+export function resetStorage() {
+  localStorage.clear();
+  localStorage.setItem(keys.saveVersion, saveVersion);
+}
+
 export function pushResult(result: PlayResult) {
   if (localStorage.getItem(keys.saveVersion) != saveVersion) {
     // * No migrations implemented yet
-    localStorage.clear();
-    localStorage.setItem(keys.saveVersion, saveVersion);
+    resetStorage();
   }
 
   const history = getAllResults();
@@ -54,11 +59,11 @@ export function getAllResults() {
   return cachedResults;
 }
 
-export function computeScore(res: PlayResult) {
+export function computeScore(questions: Question[], key: boolean[][]) {
   let correct = 0;
   for (let i = 0; i < 4; i++) {
     for (let j = 0; j < 4; j++) {
-      if (res.dataset.questions[4 * i + j].answer == res.user_answer[i][j]) {
+      if (questions[4 * i + j].answer == key[i][j]) {
         correct += 1;
       }
     }

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
@@ -1,21 +1,23 @@
 <script lang="ts">
+  import "../app.css";
+
+  import { page } from "$app/stores";
+
   import GitHub from "$icons/GitHub.svelte";
   import ext from "$lib/ext";
-
-  import { Version, BuildTime } from "../config.g";
   import { elapsedFrom } from "$lib/time";
 
-  import "../app.css";
+  import { Version, BuildTime } from "../config.g";
 </script>
 
 <main
-  class="flex flex-col justify-center items-center min-h-[calc(100vh-4rem)] gap-4 pb-6"
+  class="flex flex-col justify-center items-center text-center min-h-[calc(100vh-8rem)] sm:min-h-[calc(100vh-4rem)] gap-4 pb-6 px-2"
 >
   <slot />
 </main>
 
 <footer
-  class="system-font h-16 bg-slate-700 flex flex-row justify-between px-12 items-center text-white"
+  class="system-font h-32 sm:h-16 bg-slate-700 flex flex-row justify-between px-4 sm:px-12 items-center text-white"
 >
   <a
     class="flex flex-row gap-2 items-center select-none hover:text-gray-300"
@@ -28,7 +30,8 @@
 
   <div class="middle text-center">
     <p>
-      Version {Version} <span class="text-slate-200">PREVIEW</span> |
+      Version {Version}
+      <span class="hidden sm:inline">|</span><br class="inline sm:hidden" />
       <a
         class="blue-link"
         href="https://github.com/Leomotors/anime-captcha/releases"
@@ -40,9 +43,12 @@
     <p>Last Updated {elapsedFrom(BuildTime)}</p>
   </div>
 
-  <div class="right">
-    <a class="font-semibold text-xl hover:text-gray-300" href="/statistics">
-      Statistics
+  <div class="right select-none">
+    <a
+      class="font-semibold text-xl hover:text-gray-300"
+      href={$page.url.pathname.includes("statistics") ? "/" : "/statistics"}
+    >
+      {$page.url.pathname.includes("statistics") ? "Home" : "Statistics"}
     </a>
   </div>
 </footer>
diff --git a/src/routes/answerkey.svelte b/src/routes/answerkey.svelte
@@ -24,15 +24,13 @@
 </script>
 
 {#if play}
-  <h1 class="font-semibold text-3xl mt-6">
+  <h1 class="font-semibold text-xl lg:text-3xl mt-6">
     Result of "{play.dataset.title.replace(/<[^>]+>/g, " ").trim()}"
   </h1>
 
-  <table
-    class="table-auto text-center border-collapse border-[1.5px] border-slate-900"
-  >
+  <table class="table-auto border-collapse border-[1.5px] border-slate-900">
     <thead class="border-b-[1.5px] border-black">
-      <tr class="bg-sky-200 text-xl">
+      <tr class="bg-sky-200 text-xs lg:text-xl">
         <th>Image</th>
         <th>Character Name</th>
         <th>Anime</th>

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -4,7 +4,7 @@
   import Captcha from "$components/Captcha.svelte";
   import NotARobot from "$components/NotARobot.svelte";
   import type { CaptchaType } from "$data/model";
-  import { pushResult } from "$lib/storage";
+  import { computeScore, pushResult } from "$lib/storage";
 
   let data: CaptchaType;
   let started = false;
@@ -19,7 +19,8 @@
     pushResult({
       dataset: data,
       user_answer: e.detail,
-      submission_time: new Date().toISOString(),
+      score: computeScore(data.questions, e.detail),
+      submission_time: new Date().toLocaleString(),
       time_used: Date.now() - startTime,
     });
 

diff --git a/src/routes/result.svelte b/src/routes/result.svelte
@@ -4,24 +4,21 @@
 
 <script lang="ts">
   import { goto } from "$app/navigation";
-
   import { page } from "$app/stores";
-
-  import { computeScore, getResultsByID, type PlayResult } from "$lib/storage";
   import { onMount } from "svelte";
 
+  import { getResultsByID, type PlayResult } from "$lib/storage";
+
   let play: PlayResult | undefined;
-  let score: number;
 
   onMount(() => {
     play = getResultsByID(+($page.url.searchParams.get("id") ?? "-1"));
-    if (play) score = computeScore(play);
   });
 </script>
 
 {#if play}
-  {#if score == 16}
-    <h1>Congrats! You are not a Robot</h1>
+  {#if play.score == 16}
+    <h1>Congrats! You are not a Robot!</h1>
     <h2>
       You completed "{play.dataset.title.replace(/<[^>]+>/g, " ").trim()}"
       within {play.time_used / 1000} seconds
@@ -30,17 +27,18 @@
     <h1>⚠️⚠️ Turn down Volume! 😂 ⚠️⚠️</h1>
     <h2>{play.dataset.onFail.text}</h2>
     <iframe
-      class="mx-auto"
-      width="560"
-      height="315"
+      class="mx-auto w-[90%] sm:w-2/3 md:w-2/5 aspect-video"
       src="https://www.youtube.com/embed/{play.dataset.onFail.ytid}&autoplay=1"
       title={play.dataset.onFail.text}
       frameborder="0"
       allow="autoplay; encrypted-media; picture-in-picture"
       allowfullscreen
     />
-    <h3 class="text-gray-800 mt-4">
+    <p class="text-gray-800 mt-4 text-xl">
       You have spent {play.time_used / 1000} seconds and still fail; pathetic.
+    </p>
+    <h3>
+      You got <span class="text-red-500">{16 - play.score}</span> questions wrong!
     </h3>
   {/if}
 
@@ -55,20 +53,11 @@
       Play again
     </button>
   </div>
+
+  <p class="text-xl">
+    Want to request or contribute? Check out GitHub Repository in bottom left
+    corner
+  </p>
 {:else}
   <p>no data</p>
 {/if}
-
-<style lang="postcss">
-  h1 {
-    @apply text-4xl font-bold;
-  }
-
-  h2 {
-    @apply text-3xl font-semibold;
-  }
-
-  h3 {
-    @apply text-2xl font-medium;
-  }
-</style>