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 image = images.filter((i) => i.includes(imageQuery));
53 "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png";
54 image = errorImages[Math.floor(Math.random() * errorImages.length)];
56 let xhr = new XMLHttpRequest();
58 xhr.open("HEAD", image, true);
59 xhr.onreadystatechange = () => {
60 if (xhr.readyState === 4) {
61 if (xhr.status === 200) {
62 imageSize = `${xhr.getResponseHeader("Content-Length") / 1024}`;
75 <title>{language} | The Senpy Club</title>
82 <p>Fetching images...</p>
83 {:else if images.length === 0}
84 <p>Sorry, no images were found for this language.</p>
86 {#if errorImages.includes(image)}
87 <div class="highlight-image">
89 <i>Could not locate that specific image!</i>
91 <a href={`/language?language=${language}`}> back </a>
96 <img src={image} alt="Image of a confused anime girl" />
100 <div class="highlight-image">
103 <a href={`/language?language=${language}`}> back </a>
104 to language homepage?
110 alt="Image of an anime girl holding a programming book"
116 Want to know more information about this specific anime scene? Like
117 what anime and episode it's from, frame, studio, where you can watch
118 it, and a bunch of other information); Visit
119 <a href={`https://trace.moe/?url=${image}`} target="_blank"> this </a>
125 Attributes attributes = {<br />
126  direct_link: "<a href={image}>url</a>",<br />
127  size: {imageSize}, /* kb */<br />
128  fetch_time: {fetchTime}, /* ms */<br />
132 <h3>Development Information</h3>
134 The aforementioned link does have an API which can provide direct data
135 about images and could be integrated directly into this website,
136 however, there is a ratelimit of around one-thousand, low-tier
137 requests per day without a paid subscription, which is why the link is
141 Integrating the API into this website is a future goal, however, it is
142 not financially viable at the moment for this project. If you'd like
143 to support the project to reach future goals, you can donate at
144 <a href="https://github.com/sponsors/senpy-club" target="_blank">
145 github.com/sponsors/senpy-club
151 <ul class="image-rack">
152 {#each images as image}
153 <li id="image-rack-item">
154 <a href={`/language?language=${language}&image=${image}`}>
157 alt="Image of an anime girl holding a programming book"
164 <p>Double fetch_time = {fetchTime}; /* ms */</p>