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
  42   onMount(async () => {
  43     fetchTime = performance.now();
  44     images = await fetchImages(language);
  45     fetchTime = performance.now() - fetchTime;
  46     complete = true;
  47
  48     if (imageQuery) {
  49       // If the `imageQuery` is a string
  50       if (Number.isNaN(Number(imageQuery))) {
  51         image = images.filter((i) => i.includes(imageQuery));
  52
  53         // Make sure that if there are no exact matches to the `imageQuery`;
  54         // show error page
  55         if (image[0] !== imageQuery) {
  56           image[0] = undefined;
  57         }
  58
  59         if (!image[0]) {
  60           image =
  61             "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png";
  62           image = errorImages[Math.floor(Math.random() * errorImages.length)];
  63         }
  64       } else {
  65         image = images[imageQuery];
  66       }
  67
  68       let xhr = new XMLHttpRequest();
  69
  70       xhr.open("HEAD", image, true);
  71       xhr.onreadystatechange = () => {
  72         if (xhr.readyState === 4) {
  73           if (xhr.status === 200) {
  74             imageSize = `${xhr.getResponseHeader("Content-Length") / 1024}`;
  75           } else {
  76             imageSize = "Error";
  77           }
  78         }
  79       };
  80       xhr.send(null);
  81     }
  82   });
  83 </script>
  84
  85 <svelte:head>
  86   <title>{language} | The Senpy Club</title>
  87 </svelte:head>
  88
  89 <div class="content">
  90   <h1>{language}</h1>
  91
  92   {#if !complete}
  93     <p>Fetching images...</p>
  94   {:else if images.length === 0}
  95     <p>Sorry, no images were found for this language.</p>
  96   {:else if image}
  97     {#if errorImages.includes(image)}
  98       <div class="highlight-image">
  99         <p>
 100           <i>Could not locate that specific image!</i>
 101           Wanna go
 102           <a href={`/language?language=${language}`} target="_blank">back</a>
 103           to language homepage?
 104         </p>
 105
 106         <a href={image}>
 107           <img src={image} alt="Image of a confused anime girl" />
 108         </a>
 109       </div>
 110     {:else if image}
 111       <div class="highlight-image">
 112         <p>
 113           Wanna go
 114           <a href={`/language?language=${language}`} target="_blank">back</a>
 115           to language homepage?
 116         </p>
 117
 118         <a href={image}>
 119           <img
 120             src={image}
 121             alt="Image of an anime girl holding a programming book"
 122           />
 123         </a>
 124
 125         <h2>Information</h2>
 126         <p>
 127           Want to know more information about this specific anime scene? Like
 128           what anime and episode it's from, frame, studio, where you can watch
 129           it, and a bunch of other information); Visit
 130           <a href={`https://trace.moe/?url=${image}`} target="_blank"> this </a>
 131           link!
 132         </p>
 133
 134         <h2>Attributes</h2>
 135         <p>
 136           Attributes attributes = &lbrace;<br />
 137           &ensp;direct_link: "<a href={image}>url</a>",<br />
 138           &ensp;size: {imageSize}, /* kb */<br />
 139           &ensp;fetch_time: {fetchTime}, /* ms */<br />
 140           &rbrace;;
 141         </p>
 142
 143         <h3>Development Information</h3>
 144         <p>
 145           The aforementioned link does have an API which can provide direct data
 146           about images and could be integrated directly into this website,
 147           however, there is a ratelimit of around one-thousand, low-tier
 148           requests per month without a paid subscription, which is why the link
 149           is outbound.
 150         </p>
 151         <p>
 152           Integrating the API into this website is a future goal, however, it is
 153           not financially viable at the moment for this project. If you'd like
 154           to support the project to reach future goals, you can donate at
 155           <a href="https://github.com/sponsors/senpy-club" target="_blank">
 156             github.com/sponsors/senpy-club
 157           </a>.
 158         </p>
 159       </div>
 160     {/if}
 161   {:else}
 162     <ul class="image-rack">
 163       {#each images as image}
 164         <li id="image-rack-item">
 165           <a
 166             href={`/language?language=${language}&image=${images.indexOf(
 167               image
 168             )}`}
 169             target="_blank"
 170           >
 171             <img
 172               src={image}
 173               alt="Image of an anime girl holding a programming book"
 174             />
 175           </a>
 176         </li>
 177       {/each}
 178     </ul>
 179
 180     <p>Double fetch_time = {fetchTime}; /* ms */</p>
 181   {/if}
 182 </div>