From 7851d2c0f6fae38eb19301e31375feed0ed5ea4e Mon Sep 17 00:00:00 2001 From: Tanishq Dubey Date: Mon, 9 Sep 2024 15:31:19 -0400 Subject: [PATCH] Mostly ready for release --- app/components/ColorSchemeCard.tsx | 9 ++--- app/globals.css | 1 + app/page.tsx | 54 +++++++++++++++--------------- app/utils/colorSchemes.ts | 45 ++----------------------- public/app-icon.svg | 43 ++++++++++++++++++++++++ public/cross-icon-dark.svg | 7 ++++ public/cross-icon-light.svg | 7 ++++ public/download-icon-dark.svg | 7 ++++ public/download-icon-light.svg | 7 ++++ public/heart-icon-dark.svg | 7 ++++ public/heart-icon-light.svg | 7 ++++ 11 files changed, 121 insertions(+), 73 deletions(-) create mode 100644 public/app-icon.svg create mode 100644 public/cross-icon-dark.svg create mode 100644 public/cross-icon-light.svg create mode 100644 public/download-icon-dark.svg create mode 100644 public/download-icon-light.svg create mode 100644 public/heart-icon-dark.svg create mode 100644 public/heart-icon-light.svg diff --git a/app/components/ColorSchemeCard.tsx b/app/components/ColorSchemeCard.tsx index 5267ec7..48f993b 100644 --- a/app/components/ColorSchemeCard.tsx +++ b/app/components/ColorSchemeCard.tsx @@ -10,9 +10,10 @@ interface ColorSchemeCardProps { onLike: () => void; onDislike: () => void; index: number; + isDarkMode: boolean; } -const ColorSchemeCard: React.FC = ({ scheme, onLike, onDislike, index }) => { +const ColorSchemeCard: React.FC = ({ scheme, onLike, onDislike, index, isDarkMode }) => { const [overlayColor, setOverlayColor] = useState('rgba(0, 0, 0, 0)'); const controls = useAnimation(); @@ -97,7 +98,7 @@ fetchData().then(data => console.log(data)); `; className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300" onClick={handleDownload} > - Download + Download
@@ -144,13 +145,13 @@ fetchData().then(data => console.log(data)); `; className="bg-red-500 text-white p-3 rounded-full shadow-lg hover:bg-red-600 transition-colors duration-300" onClick={handleDislike} > - Dislike + Dislike
diff --git a/app/globals.css b/app/globals.css index f279d2f..4840404 100644 --- a/app/globals.css +++ b/app/globals.css @@ -18,6 +18,7 @@ body { color: var(--foreground); background: var(--background); font-family: var(--font-geist-sans), Arial, sans-serif; + overflow: hidden; } @layer utilities { diff --git a/app/page.tsx b/app/page.tsx index 0108399..df42c89 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,16 +1,14 @@ 'use client'; import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; import ColorSchemeCard from "./components/ColorSchemeCard"; -import SettingsIcon from "./components/SettingsIcon"; -import Settings from "./components/Settings"; import { ColorScheme, knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm } from './utils/colorSchemes'; import { AnimatePresence } from 'framer-motion'; export default function Home() { const [schemes, setSchemes] = useState([]); const [isDarkMode, setIsDarkMode] = useState(false); - const [isSettingsOpen, setIsSettingsOpen] = useState(false); const [likedSchemes, setLikedSchemes] = useState([]); const [dislikedSchemes, setDislikedSchemes] = useState([]); @@ -40,20 +38,28 @@ export default function Home() { }, [dislikedSchemes]); const generateNewSchemes = (count: number) => { - const knownCount = Math.floor(count / 2); - const generatedCount = count - knownCount; + const newSchemes = Array(count).fill(null).map(() => { + const schemeType = Math.random(); + if (schemeType < 0.25) { + // 25% chance of known scheme + return knownSchemes[Math.floor(Math.random() * knownSchemes.length)]; + } else if (schemeType < 0.5) { + // 25% chance of random scheme + return generateRandomScheme(); + } else if (likedSchemes.length > 2 && dislikedSchemes.length > 2) { + // 50% chance of genetic scheme if there are more than 2 liked and disliked schemes + return generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes); + } else { + // 30% known, 20% random for other cases + if (Math.random() < 0.3) { + return generateRandomScheme(); + } else { + return knownSchemes[Math.floor(Math.random() * knownSchemes.length)]; + } + } + }); - const newSchemes = [ - ...knownSchemes.sort(() => 0.5 - Math.random()).slice(0, knownCount), - ...Array(generatedCount).fill(null).map(() => - likedSchemes.length > 0 ? generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes) : generateRandomScheme() - ) - ]; - - // Shuffle the new schemes - const shuffledSchemes = newSchemes.sort(() => 0.5 - Math.random()); - - setSchemes(prevSchemes => [...prevSchemes, ...shuffledSchemes]); + setSchemes(prevSchemes => [...prevSchemes, ...newSchemes]); }; const handleLike = (scheme: ColorScheme) => { @@ -81,12 +87,11 @@ export default function Home() { }; return ( -
-
-

Terminal Color Scheme Generator

- setIsSettingsOpen(true)} /> +
+
+ App Icon
-
+
{schemes.slice(0, 3).map((scheme, index) => ( handleLike(scheme)} onDislike={() => handleDislike(scheme)} index={index} + isDarkMode={isDarkMode} /> ))}
- setIsSettingsOpen(false)} - />
); } diff --git a/app/utils/colorSchemes.ts b/app/utils/colorSchemes.ts index bfbf69e..b5a6898 100644 --- a/app/utils/colorSchemes.ts +++ b/app/utils/colorSchemes.ts @@ -30,7 +30,7 @@ function generateCreativeName(): string { function generateRandomScheme(): ColorScheme { let x = { - name: generateCreativeName(), + name: generateCreativeName() + "rand", colors: { primary: { background: generateRandomColor(), foreground: generateRandomColor() }, normal: { @@ -58,45 +58,6 @@ function crossTitles(title1: string, title2: string): string { return `${firstWord} ${secondWord}`; } -function crossSchemes(scheme1: ColorScheme, scheme2: ColorScheme): ColorScheme { - const crossColor = (color1: Color, color2: Color): Color => { - const r = Math.round((parseInt(color1.slice(1, 3), 16) + parseInt(color2.slice(1, 3), 16)) / 2); - const g = Math.round((parseInt(color1.slice(3, 5), 16) + parseInt(color2.slice(3, 5), 16)) / 2); - const b = Math.round((parseInt(color1.slice(5, 7), 16) + parseInt(color2.slice(5, 7), 16)) / 2); - return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`; - }; - - return { - name: crossTitles(scheme1.name, scheme2.name), - colors: { - primary: { - background: crossColor(scheme1.colors.primary.background, scheme2.colors.primary.background), - foreground: crossColor(scheme1.colors.primary.foreground, scheme2.colors.primary.foreground) - }, - normal: { - black: crossColor(scheme1.colors.normal.black, scheme2.colors.normal.black), - red: crossColor(scheme1.colors.normal.red, scheme2.colors.normal.red), - green: crossColor(scheme1.colors.normal.green, scheme2.colors.normal.green), - yellow: crossColor(scheme1.colors.normal.yellow, scheme2.colors.normal.yellow), - blue: crossColor(scheme1.colors.normal.blue, scheme2.colors.normal.blue), - magenta: crossColor(scheme1.colors.normal.magenta, scheme2.colors.normal.magenta), - cyan: crossColor(scheme1.colors.normal.cyan, scheme2.colors.normal.cyan), - white: crossColor(scheme1.colors.normal.white, scheme2.colors.normal.white) - }, - bright: { - black: crossColor(scheme1.colors.bright.black, scheme2.colors.bright.black), - red: crossColor(scheme1.colors.bright.red, scheme2.colors.bright.red), - green: crossColor(scheme1.colors.bright.green, scheme2.colors.bright.green), - yellow: crossColor(scheme1.colors.bright.yellow, scheme2.colors.bright.yellow), - blue: crossColor(scheme1.colors.bright.blue, scheme2.colors.bright.blue), - magenta: crossColor(scheme1.colors.bright.magenta, scheme2.colors.bright.magenta), - cyan: crossColor(scheme1.colors.bright.cyan, scheme2.colors.bright.cyan), - white: crossColor(scheme1.colors.bright.white, scheme2.colors.bright.white) - } - } - }; -} - function mutateColor(color: Color): Color { const r = parseInt(color.slice(1, 3), 16); const g = parseInt(color.slice(3, 5), 16); @@ -142,9 +103,9 @@ function generateSchemeFromGeneticAlgorithm(likedSchemes: ColorScheme[], dislike }); }); - newScheme.name = generateCreativeName(); + newScheme.name = generateCreativeName() + "gen"; return newScheme; } export type { ColorScheme }; -export { knownSchemes, generateRandomScheme, crossSchemes, generateSchemeFromGeneticAlgorithm }; \ No newline at end of file +export { knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm }; \ No newline at end of file diff --git a/public/app-icon.svg b/public/app-icon.svg new file mode 100644 index 0000000..c40020f --- /dev/null +++ b/public/app-icon.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/cross-icon-dark.svg b/public/cross-icon-dark.svg new file mode 100644 index 0000000..2ad60db --- /dev/null +++ b/public/cross-icon-dark.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/cross-icon-light.svg b/public/cross-icon-light.svg new file mode 100644 index 0000000..eab722b --- /dev/null +++ b/public/cross-icon-light.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/download-icon-dark.svg b/public/download-icon-dark.svg new file mode 100644 index 0000000..b87b189 --- /dev/null +++ b/public/download-icon-dark.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/download-icon-light.svg b/public/download-icon-light.svg new file mode 100644 index 0000000..a1a284e --- /dev/null +++ b/public/download-icon-light.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/heart-icon-dark.svg b/public/heart-icon-dark.svg new file mode 100644 index 0000000..222f090 --- /dev/null +++ b/public/heart-icon-dark.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/heart-icon-light.svg b/public/heart-icon-light.svg new file mode 100644 index 0000000..346f9db --- /dev/null +++ b/public/heart-icon-light.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file