dubey/TerminalTinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mostly ready for release

Browse Source
This commit is contained in:
Tanishq Dubey
2024-09-09 15:31:19 -04:00
parent 5bbfa98ed3
commit 7851d2c0f6
11 changed files with 121 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/components/ColorSchemeCard.tsx
View File

@ -10,9 +10,10 @@ interface ColorSchemeCardProps {
onLike: () => void;
onDislike: () => void;
index: number;
isDarkMode: boolean;
}
const ColorSchemeCard: React.FC<ColorSchemeCardProps> = ({ scheme, onLike, onDislike, index }) => {
const ColorSchemeCard: React.FC<ColorSchemeCardProps> = ({ 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}
>
<Image src="/download-icon.svg" alt="Download" width={24} height={24} />
<Image src={isDarkMode ? "/download-icon-dark.svg" : "/download-icon-light.svg"} alt="Download" width={24} height={24} />
</button>
</div>
<div className="bg-gray-100 dark:bg-gray-700 rounded-md mb-4 flex-grow overflow-hidden z-10 shadow-md">
@ -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}
>
<Image src="/cross-icon.svg" alt="Dislike" width={28} height={28} />
<Image src={isDarkMode ? "/cross-icon-dark.svg" : "/cross-icon-light.svg"} alt="Dislike" width={28} height={28} />
</button>
<button
className="bg-green-500 text-white p-3 rounded-full shadow-lg hover:bg-green-600 transition-colors duration-300"
onClick={handleLike}
>
<Image src="/heart-icon.svg" alt="Like" width={28} height={28} />
<Image src={isDarkMode ? "/heart-icon-dark.svg" : "/heart-icon-light.svg"} alt="Like" width={28} height={28} />
</button>
</div>
</div>

1
app/globals.css
View File

@ -18,6 +18,7 @@ body {
color: var(--foreground);
background: var(--background);
font-family: var(--font-geist-sans), Arial, sans-serif;
overflow: hidden;
}
@layer utilities {

54
app/page.tsx
View File

@ -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<ColorScheme[]>([]);
const [isDarkMode, setIsDarkMode] = useState(false);
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
const [likedSchemes, setLikedSchemes] = useState<ColorScheme[]>([]);
const [dislikedSchemes, setDislikedSchemes] = useState<ColorScheme[]>([]);
@ -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 (
<div className="min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)] dark:bg-gray-900 dark:text-white transition-colors duration-300">
<header className="flex justify-between items-center mb-8">
<h1 className="text-2xl font-bold">Terminal Color Scheme Generator</h1>
<SettingsIcon onClick={() => setIsSettingsOpen(true)} />
<div className="h-screen w-screen overflow-hidden p-8 font-[family-name:var(--font-geist-sans)] dark:bg-gray-900 dark:text-white transition-colors duration-300">
<header className="flex items-center mb-8">
<Image src="/app-icon.svg" alt="App Icon" width={40} height={40} />
</header>
<main className="flex flex-col items-center justify-center h-[calc(100vh-200px)] relative">
<main className="flex flex-col items-center justify-center h-[calc(100vh-100px)]">
<AnimatePresence>
{schemes.slice(0, 3).map((scheme, index) => (
<ColorSchemeCard
@ -95,16 +100,11 @@ export default function Home() {
onLike={() => handleLike(scheme)}
onDislike={() => handleDislike(scheme)}
index={index}
isDarkMode={isDarkMode}
/>
))}
</AnimatePresence>
</main>
<Settings
isDarkMode={isDarkMode}
onToggleDarkMode={toggleDarkMode}
isOpen={isSettingsOpen}
onClose={() => setIsSettingsOpen(false)}
/>
</div>
);
}

45
app/utils/colorSchemes.ts
View File

@ -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 };
export { knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm };

43
public/app-icon.svg Normal file
View File

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="35.479 5 414.17 489.256" xmlns="http://www.w3.org/2000/svg">
<rect x="149.52" y="470.326" width="195.224" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="108.079" y="433.571" width="61.527" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
<rect x="180.037" y="433.573" width="105.807" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 221, 200);"/>
<rect x="296.705" y="433.571" width="105.807" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="86.575" y="397.804" width="31.895" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
<rect x="133.439" y="397.806" width="130.903" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
<rect x="331.134" y="397.804" width="83.132" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
<rect x="57.622" y="362.039" width="94.852" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(53, 167, 124);"/>
<rect x="167.671" y="362.04" width="67.718" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="246.25" y="362.039" width="52.339" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
<rect x="42.293" y="325.419" width="171.985" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="227.572" y="325.419" width="51.93" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
<rect y="289.651" width="61.527" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);" x="35.479"/>
<rect x="107.747" y="289.653" width="43.708" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
<rect x="165.557" y="289.651" width="84.265" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
<rect x="84.895" y="253.035" width="130.724" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="227.515" y="253.032" width="78.622" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
<rect x="47.404" y="214.712" width="82.816" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
<rect x="144.91" y="214.715" width="61.527" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(53, 167, 124);"/>
<rect x="221.047" y="214.712" width="54.82" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
<rect x="75.292" y="176.391" width="42.789" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="110.207" y="138.922" width="34.274" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="135.1" y="176.391" width="24.909" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
<rect x="288.845" y="214.758" width="98.152" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
<rect x="400.706" y="214.976" width="46.104" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="264.6" y="289.735" width="75.84" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 221, 200);"/>
<rect x="352.572" y="289.735" width="75.84" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="199.859" y="179.045" width="31.786" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 221, 200);"/>
<rect x="242.922" y="179.093" width="82.514" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="338.005" y="179.309" width="87.62" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
<rect x="236.382" y="144.662" width="108.958" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
<rect x="357.65" y="144.596" width="78.522" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
<rect x="249.74" y="109.491" width="168.1" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
<rect x="264.038" y="74.295" width="31.786" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(53, 167, 124);"/>
<rect x="317.144" y="74.342" width="59.427" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="272.322" y="38.562" width="50.955" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="259.611" width="24.267" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);" y="5"/>
<rect x="276.856" y="397.902" width="43.225" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
<rect x="375.633" y="362.085" width="21.939" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="409.398" y="362.081" width="40.251" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

7
public/cross-icon-dark.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side

After

Width:  |  Height:  |  Size: 569 B

7
public/cross-icon-light.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side

After

Width:  |  Height:  |  Size: 569 B

7
public/download-icon-dark.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
public/download-icon-light.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
public/heart-icon-dark.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
public/heart-icon-light.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB