src/routes/language.svelte

   1 <!-- This file is part of api-worker <https://github.com/senpy-club/api-worker>.
   2 Copyright (C) 2022-2022 Fuwn <contact@fuwn.me>
   3
   4 This program is free software: you can redistribute it and/or modify
   5 it under the terms of the GNU General Public License as published by
   6 the Free Software Foundation, version 3.
   7
   8 This program is distributed in the hope that it will be useful, but
   9 WITHOUT ANY WARRANTY; without even the implied warranty of
  10 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  11 General Public License for more details.
  12
  13 You should have received a copy of the GNU General Public License
  14 along with this program. If not, see <http://www.gnu.org/licenses/>.
  15
  16 Copyright (C) 2022-2022 Fuwn <contact@fuwn.me>
  17 SPDX-License-Identifier: GPL-3.0-only -->
  18 <script>
  19   import { onMount } from "svelte";
  20   import { fetchImages } from "$lib/api";
  21   import { page } from "$app/stores";
  22
  23   const errorImages = [
  24     "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png",
  25     "https://cdn130.picsart.com/246838980018212.png?r1024x1024",
  26     "https://toppng.com/public/uploads/thumbnail/confused-anime-png-anime-question-png-gif-11563638774nccphyut3x.png",
  27     "https://linuxreviews.org/images/8/8d/Blond-anime-girl-with-red-questionmark.png",
  28     "https://external-preview.redd.it/VNfYgsb6Pqn4xlEBpYl11534fIpOfN1XeMe7NrzgmQs.png?width=282&auto=webp&s=3247341e1cb8a6d6f63b7b3d63809e52ca0558fd",
  29     "https://i.ya-webdesign.com/images/confused-anime-png-5.png",
  30     "https://www.pngarts.com/files/8/Confused-Anime-PNG-Picture.png",
  31     "https://64.media.tumblr.com/20fb900f57db568393387211c9c4760c/tumblr_olanyyuuQZ1tbejoso2_400.png",
  32     "https://stickershop.line-scdn.net/stickershop/v1/product/7982958/LINEStorePC/main.png;compress=true",
  33     "https://emoji.gg/assets/emoji/8573_Shikiconfused.png",
  34     "https://i.imgur.com/TOgxESH.jpg",
  35   ];
  36
  37   let language = $page.url.searchParams.get("language");
  38   let images, fetchTime, image, imageSize;
  39   let complete = false;
  40   let imageQuery = $page.url.searchParams.get("image");
  41   let languageEncoded = language.replaceAll("#", "%23");
  42
  43   onMount(async () => {
  44     fetchTime = performance.now();
  45     images = await fetchImages(language);
  46     fetchTime = performance.now() - fetchTime;
  47     complete = true;
  48
  49     if (imageQuery) {
  50       // If the `imageQuery` is a string
  51       if (Number.isNaN(Number(imageQuery))) {
  52         image = images.filter((i) => i.includes(imageQuery));
  53
  54         // Make sure that if there are no exact matches to the `imageQuery`;
  55         // show error page
  56         if (image[0] !== imageQuery) {
  57           image[0] = undefined;
  58         }
  59
  60         if (!image[0]) {
  61           image =
  62             "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png";
  63           image = errorImages[Math.floor(Math.random() * errorImages.length)];
  64         }
  65       } else {
  66         image = images[imageQuery];
  67       }
  68
  69       let xhr = new XMLHttpRequest();
  70
  71       xhr.open("HEAD", image, true);
  72       xhr.onreadystatechange = () => {
  73         if (xhr.readyState === 4) {
  74           if (xhr.status === 200) {
  75             imageSize = `${xhr.getResponseHeader("Content-Length") / 1024}`;
  76           } else {
  77             imageSize = "Error";
  78           }
  79         }
  80       };
  81       xhr.send(null);
  82     }
  83   });
  84 </script>
  85
  86 <svelte:head>
  87   <title>{language} | The Senpy Club</title>
  88 </svelte:head>
  89
  90 <div class="content">
  91   <h1>{language}</h1>
  92
  93   {#if !complete}
  94     <p>Fetching images...</p>
  95   {:else if images.length === 0}
  96     <p>Sorry, no images were found for this language.</p>
  97   {:else if image}
  98     {#if errorImages.includes(image)}
  99       <div class="highlight-image">
 100         <p>
 101           <i>Could not locate that specific image!</i>
 102           Wanna go
 103           <a href={`/language?language=${languageEncoded}`} target="_blank"
 104             >back</a
 105           >
 106           to language homepage?
 107         </p>
 108
 109         <a href={image}>
 110           <img src={image} alt="Image of a confused anime girl" />
 111         </a>
 112       </div>
 113     {:else if image}
 114       <div class="highlight-image">
 115         <p>
 116           Wanna go
 117           <a href={`/language?language=${languageEncoded}`} target="_blank"
 118             >back</a
 119           >
 120           to language homepage?
 121         </p>
 122
 123         <a href={image}>
 124           <img
 125             src={image}
 126             alt="Image of an anime girl holding a programming book"
 127           />
 128         </a>
 129
 130         <h2>Information</h2>
 131         <p>
 132           Want to know more information about this specific anime scene? Like
 133           what anime and episode it's from, frame, studio, where you can watch
 134           it, and a bunch of other information); Visit
 135           <a href={`https://trace.moe/?url=${image}`} target="_blank"> this </a>
 136           link!
 137         </p>
 138
 139         <h2>Attributes</h2>
 140         <p>
 141           Attributes attributes = &lbrace;<br />
 142           &ensp;direct_link: "<a href={image}>url</a>",<br />
 143           &ensp;size: {imageSize}, /* kb */<br />
 144           &ensp;fetch_time: {fetchTime}, /* ms */<br />
 145           &rbrace;;
 146         </p>
 147
 148         <h3>Development Information</h3>
 149         <p>
 150           The aforementioned link does have an API which can provide direct data
 151           about images and could be integrated directly into this website,
 152           however, there is a ratelimit of around one-thousand, low-tier
 153           requests per month without a paid subscription, which is why the link
 154           is outbound.
 155         </p>
 156         <p>
 157           Integrating the API into this website is a future goal, however, it is
 158           not financially viable at the moment for this project. If you'd like
 159           to support the project to reach future goals, you can donate at
 160           <a href="https://github.com/sponsors/senpy-club" target="_blank">
 161             github.com/sponsors/senpy-club
 162           </a>.
 163         </p>
 164       </div>
 165     {/if}
 166   {:else}
 167     <ul class="image-rack">
 168       {#each images as image}
 169         <li id="image-rack-item">
 170           <a
 171             href={`/language?language=${languageEncoded}&image=${images.indexOf(
 172               image
 173             )}`}
 174             target="_blank"
 175           >
 176             <img
 177               src={image}
 178               alt="Image of an anime girl holding a programming book"
 179             />
 180           </a>
 181         </li>
 182       {/each}
 183     </ul>
 184
 185     <p>Double fetch_time = {fetchTime}; /* ms */</p>
 186   {/if}
 187 </div>