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");
43 fetchTime = performance.now();
44 images = await fetchImages(language);
45 fetchTime = performance.now() - fetchTime;
49 // If the `imageQuery` is a string
50 if (Number.isNaN(Number(imageQuery))) {
51 image = images.filter((i) => i.includes(imageQuery));
53 // Make sure that if there are no exact matches to the `imageQuery`;
55 if (image[0] !== imageQuery) {
61 "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png";
62 image = errorImages[Math.floor(Math.random() * errorImages.length)];
65 image = images[imageQuery];
68 let xhr = new XMLHttpRequest();
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}`;
86 <title>{language} | The Senpy Club</title>
93 <p>Fetching images...</p>
94 {:else if images.length === 0}
95 <p>Sorry, no images were found for this language.</p>
97 {#if errorImages.includes(image)}
98 <div class="highlight-image">
100 <i>Could not locate that specific image!</i>
102 <a href={`/language?language=${language}`} target="_blank">back</a>
103 to language homepage?
107 <img src={image} alt="Image of a confused anime girl" />
111 <div class="highlight-image">
114 <a href={`/language?language=${language}`} target="_blank">back</a>
115 to language homepage?
121 alt="Image of an anime girl holding a programming book"
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>
136 Attributes attributes = {<br />
137  direct_link: "<a href={image}>url</a>",<br />
138  size: {imageSize}, /* kb */<br />
139  fetch_time: {fetchTime}, /* ms */<br />
143 <h3>Development Information</h3>
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 day without a paid subscription, which is why the link is
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
162 <ul class="image-rack">
163 {#each images as image}
164 <li id="image-rack-item">
166 href={`/language?language=${language}&image=${images.indexOf(
173 alt="Image of an anime girl holding a programming book"
180 <p>Double fetch_time = {fetchTime}; /* ms */</p>