1 <!-- This file is part of api-worker <https://github.com/senpy-club/api-worker>.
2 Copyright (C) 2022-2022 Fuwn <contact@fuwn.me>
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.
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.
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/>.
16 Copyright (C) 2022-2022 Fuwn <contact@fuwn.me>
17 SPDX-License-Identifier: GPL-3.0-only -->
19 import { onMount } from "svelte";
20 import { fetchImages } from "$lib/api";
21 import { page } from "$app/stores";
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",
37 let language = $page.url.searchParams.get("language");
38 let images, fetchTime, image, imageSize;
40 let imageQuery = $page.url.searchParams.get("image");
41 let languageEncoded = language.replaceAll("#", "%23");
44 fetchTime = performance.now();
45 images = await fetchImages(language);
46 fetchTime = performance.now() - fetchTime;
50 // If the `imageQuery` is a string
51 if (Number.isNaN(Number(imageQuery))) {
52 image = images.filter((i) => i.includes(imageQuery));
54 // Make sure that if there are no exact matches to the `imageQuery`;
56 if (image[0] !== imageQuery) {
62 "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png";
63 image = errorImages[Math.floor(Math.random() * errorImages.length)];
66 image = images[imageQuery];
69 let xhr = new XMLHttpRequest();
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}`;
87 <title>{language} | The Senpy Club</title>
94 <p>Fetching images...</p>
95 {:else if images.length === 0}
96 <p>Sorry, no images were found for this language.</p>
98 {#if errorImages.includes(image)}
99 <div class="highlight-image">
101 <i>Could not locate that specific image!</i>
103 <a href={`/language?language=${languageEncoded}`} target="_blank"
106 to language homepage?
110 <img src={image} alt="Image of a confused anime girl" />
114 <div class="highlight-image">
117 <a href={`/language?language=${languageEncoded}`} target="_blank"
120 to language homepage?
126 alt="Image of an anime girl holding a programming book"
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>
141 Attributes attributes = {<br />
142  direct_link: "<a href={image}>url</a>",<br />
143  size: {imageSize}, /* kb */<br />
144  fetch_time: {fetchTime}, /* ms */<br />
148 <h3>Development Information</h3>
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
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
167 <ul class="image-rack">
168 {#each images as image}
169 <li id="image-rack-item">
171 href={`/language?language=${languageEncoded}&image=${images.indexOf(
178 alt="Image of an anime girl holding a programming book"
185 <p>Double fetch_time = {fetchTime}; /* ms */</p>