From db8af9bda1d57061fa3f240c2be9bb8bc0b5f838 Mon Sep 17 00:00:00 2001
From: zephex-alt <166333351+zephex-alt@users.noreply.github.com>
Date: Sun, 5 May 2024 05:12:06 +0000
Subject: UI enhancement

---
 src/app/anime/[id]/buttons.jsx               | 58 ++++++++++++++++++++++++----
 src/app/anime/[id]/info.module.css           | 25 +++++++++++-
 src/app/anime/recent/page.jsx                |  4 +-
 src/app/anime/search/search.module.css       |  3 +-
 src/app/anime/top-airing/page.jsx            |  4 +-
 src/app/anime/top-airing/trending.module.css |  2 +-
 src/app/kdrama/components/popular.jsx        |  2 +-
 src/app/kdrama/components/recent.jsx         |  2 +-
 src/app/kdrama/styles/search.module.css      |  5 ++-
 src/app/page.module.css                      | 18 +++++++--
 10 files changed, 101 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx
index 9c297d2..c1b4615 100644
--- a/src/app/anime/[id]/buttons.jsx
+++ b/src/app/anime/[id]/buttons.jsx
@@ -1,7 +1,7 @@
 "use client";
 
 import styles from "./info.module.css";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { fetch_video_link } from "../videoLinkfetcher";
 import { MediaPlayer, MediaProvider } from "@vidstack/react";
 import "@vidstack/react/player/styles/default/theme.css";
@@ -15,6 +15,13 @@ import { storeLocal } from "../history/storeData";
 export default function Button({ data2: info }) {
 	const currentDate = new Date();
 	const [videoLink, setVideoLink] = useState(null);
+	const [buttonGroups, setButtonGroups] = useState(null);
+
+	useEffect(() => {
+		create_button_group(0, 50);
+	}, []);
+
+	const groups = createGroups(info.episodes, 50);
 
 	async function video(id) {
 		const link = await fetch_video_link(id);
@@ -25,6 +32,14 @@ export default function Button({ data2: info }) {
 		}
 	}
 
+	function createGroups(array, size) {
+		const groups = [];
+		for (let i = 0; i < array.length; i += size) {
+			groups.push(array.slice(i, i + size));
+		}
+		return groups;
+	}
+
 	function store_to_local(name, image, episode, id) {
 		let newData = {
 			name: name,
@@ -42,13 +57,11 @@ export default function Button({ data2: info }) {
 		storeLocal(newData);
 	}
 
-	return (
-		<main>
-			<h2 className={styles.buttonHeader}>Episodes: </h2>
+	function create_button_group(start, end) {
+		setButtonGroups(
 			<div className={styles.buttonContainer}>
-				{info &&
-					info.episodes &&
-					info.episodes.map((item, index) => (
+				{info.episodes &&
+					info.episodes.slice(start, end).map((item, index) => (
 						<button
 							className={styles.dramaButton}
 							key={index}
@@ -68,7 +81,38 @@ export default function Button({ data2: info }) {
 						</button>
 					))}
 			</div>
+		);
+	}
 
+	function handleSelectChange(event) {
+		const selectedIndex = event.target.selectedIndex;
+		const selectedGroup = groups[selectedIndex];
+		if (selectedGroup) {
+			create_button_group(
+				selectedGroup[0].number - 1,
+				selectedGroup[selectedGroup.length - 1].number
+			);
+		}
+	}
+
+	return (
+		<main>
+			<h2 className={styles.buttonHeader}>Episodes: </h2>
+			{info.episodes && (
+				<select
+					onChange={(event) => handleSelectChange(event)}
+					className={styles.SelectClass}
+				>
+					{groups &&
+						groups.map((item, index) => (
+							<option key={index}>
+								{item[0].number} -{" "}
+								{item[item.length - 1].number}
+							</option>
+						))}
+				</select>
+			)}
+			{buttonGroups}
 			{videoLink && (
 				<div
 					className={styles.videoPopUp}
diff --git a/src/app/anime/[id]/info.module.css b/src/app/anime/[id]/info.module.css
index e6d0af1..fd14d32 100644
--- a/src/app/anime/[id]/info.module.css
+++ b/src/app/anime/[id]/info.module.css
@@ -37,6 +37,25 @@
 	color: rgba(255, 255, 255, 0.637);
 }
 
+.SelectClass {
+	background-color: #272727;
+	color: white;
+	font-family: "Lexend Deca", serif;
+	border: none;
+	outline: none;
+	padding: 0.5rem;
+	border-radius: 0.5rem;
+	text-align: center;
+}
+
+.SelectClass::-webkit-scrollbar {
+	width: 0;
+}
+
+.SelectClass option:checked {
+	background-color: rgb(0, 160, 223);
+}
+
 .buttonContainer {
 	margin: 0px;
 	height: 200px;
@@ -72,7 +91,7 @@
 .dramaButton {
 	padding: 10px;
 	font-family: "Lexend Deca", serif;
-	margin: 5px 5px 5px 5px;
+	margin: 0.5rem 0.5rem 0px 0px;
 	width: 55px;
 	border-radius: 5px;
 	text-align: center;
@@ -161,4 +180,8 @@
 	.video {
 		width: 100%;
 	}
+
+	.buttonContainer {
+		text-align: center;
+	}
 }
diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx
index 28dfacb..21d5fb4 100644
--- a/src/app/anime/recent/page.jsx
+++ b/src/app/anime/recent/page.jsx
@@ -28,8 +28,8 @@ export default async function Recent() {
 								<Image
 									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
 									className={styles.trendingImage}
-									width={190}
-									height={270}
+									width={210}
+									height={310}
 									alt="Drama"
 									priority
 								/>
diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css
index 55e29d8..185f6d5 100644
--- a/src/app/anime/search/search.module.css
+++ b/src/app/anime/search/search.module.css
@@ -56,9 +56,10 @@
 	display: flex;
 	overflow-x: auto;
 	margin-bottom: 1rem;
+	margin-left: 0.5rem;
 }
 
-.animeEntry .anime {
+.animeEntry:hover .anime {
 	opacity: 0.5;
 }
 
diff --git a/src/app/anime/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx
index ff329f6..a0fc302 100644
--- a/src/app/anime/top-airing/page.jsx
+++ b/src/app/anime/top-airing/page.jsx
@@ -28,8 +28,8 @@ export default async function Trending() {
 								<Image
 									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
 									className={styles.trendingImage}
-									width={190}
-									height={270}
+									width={210}
+									height={310}
 									alt="Drama"
 									priority
 								/>
diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css
index 31f6b16..2abaf4b 100644
--- a/src/app/anime/top-airing/trending.module.css
+++ b/src/app/anime/top-airing/trending.module.css
@@ -42,7 +42,7 @@
 .trendingEntries p {
 	text-align: center;
 	width: auto;
-	max-width: 180px;
+	max-width: 190px;
 	margin: 0.5rem 0 0 0;
 	overflow: hidden;
 	white-space: nowrap;
diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx
index d09e0ff..8b88fd7 100644
--- a/src/app/kdrama/components/popular.jsx
+++ b/src/app/kdrama/components/popular.jsx
@@ -13,7 +13,7 @@ export default async function PopularDramas() {
 
 			<div className={styles.AnimeContainer}>
 				{popular &&
-					popular.results.slice(0, 16).map((item, index) => (
+					popular.results.slice(0, 24).map((item, index) => (
 						<Link
 							href={`/kdrama/${encodeURIComponent(item.id)}`}
 							key={index}
diff --git a/src/app/kdrama/components/recent.jsx b/src/app/kdrama/components/recent.jsx
index fc142b1..d28f348 100644
--- a/src/app/kdrama/components/recent.jsx
+++ b/src/app/kdrama/components/recent.jsx
@@ -12,7 +12,7 @@ export default async function RecentDramas() {
 
 			<div className={styles.AnimeContainer}>
 				{popular &&
-					popular.results.slice(0, 16).map((item, index) => (
+					popular.results.slice(0, 24).map((item, index) => (
 						<Link
 							href={`/kdrama/${encodeURIComponent(item.id)}`}
 							key={index}
diff --git a/src/app/kdrama/styles/search.module.css b/src/app/kdrama/styles/search.module.css
index 80f70b9..e8076f3 100644
--- a/src/app/kdrama/styles/search.module.css
+++ b/src/app/kdrama/styles/search.module.css
@@ -1,5 +1,5 @@
 .SearchContainer {
-	margin: 20px 0px -20px 0px;
+	margin: -1rem 0 -2rem 0;
 }
 
 .LoadingText {
@@ -14,7 +14,8 @@
 	display: flex;
 	align-items: center;
 	max-width: 30%;
-	border-radius: 10px;
+	border-radius: 0.8rem;
+	margin: 0 0.2rem 0 0.2rem;
 }
 
 .SearchContainer input {
diff --git a/src/app/page.module.css b/src/app/page.module.css
index a38131c..80a2d67 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -33,8 +33,8 @@
 		rgba(115, 154, 242, 1) 21%,
 		rgba(255, 159, 224, 1) 40%,
 		rgba(255, 194, 133, 1) 60%,
-		rgba(245, 243, 81, 1) 80%,
-		rgba(255, 179, 0, 1) 100%
+		rgba(245, 242, 81, 0.884) 80%,
+		rgba(255, 179, 0, 0.842) 100%
 	);
 	background-size: 150% 50%;
 	background-clip: text;
@@ -46,7 +46,7 @@
 		background-position: 0 50%;
 	}
 	100% {
-		background-position: 100% 50%;
+		background-position: 100% 100%;
 	}
 }
 
@@ -124,11 +124,21 @@
 .content:hover > .contentContainer div:hover {
 	opacity: 1;
 	cursor: pointer;
-	transform: scale(0.96) rotateX(15deg) rotateY(-8deg);
+	transform: scale(0.95) rotateX(12deg) rotateY(-8deg);
 }
 
 @media screen and (max-width: 1024px) {
 	.contentContainer {
 		display: block;
 	}
+
+	.content:hover > .contentContainer div {
+		opacity: 0.5;
+	}
+
+	.content:hover > .contentContainer div:hover {
+		opacity: 1;
+		cursor: pointer;
+		transform: scale(0.95);
+	}
 }
-- 
cgit v1.2.3