diff --git a/app/components/ColorSchemeCard.tsx b/app/components/ColorSchemeCard.tsx index c004352..5267ec7 100644 --- a/app/components/ColorSchemeCard.tsx +++ b/app/components/ColorSchemeCard.tsx @@ -1,16 +1,21 @@ -import React from 'react'; +import React, { useState } from 'react'; import Image from 'next/image'; import { ColorScheme } from '../utils/colorSchemes'; import { generateYAML } from '../utils/yamlExport'; import { Highlight, themes } from 'prism-react-renderer'; +import { motion, useAnimation } from 'framer-motion'; interface ColorSchemeCardProps { scheme: ColorScheme; - isSelected: boolean; - onSelect: () => void; + onLike: () => void; + onDislike: () => void; + index: number; } -const ColorSchemeCard: React.FC = ({ scheme, isSelected, onSelect }) => { +const ColorSchemeCard: React.FC = ({ scheme, onLike, onDislike, index }) => { + const [overlayColor, setOverlayColor] = useState('rgba(0, 0, 0, 0)'); + const controls = useAnimation(); + const codeExample = ` // User object and function const user = { @@ -54,13 +59,39 @@ fetchData().then(data => console.log(data)); `; URL.revokeObjectURL(url); }; + const handleLike = () => { + setOverlayColor('rgba(0, 255, 0, 0.1)'); + controls.start({ x: 300, opacity: 0, transition: { duration: 0.3 } }).then(onLike); + }; + + const handleDislike = () => { + setOverlayColor('rgba(255, 0, 0, 0.1)'); + controls.start({ x: -300, opacity: 0, transition: { duration: 0.3 } }).then(onDislike); + }; + return ( -
{ + if (offset.x > 100) handleLike(); + else if (offset.x < -100) handleDislike(); + }} > -
-
+
+ +

{scheme.name}

-
+
{({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
-                {tokens.map((line, i) => (
+              
+                {tokens.slice(0, 20).map((line, i) => (
                   

                     {line.map((token, key) => {
                       let color = scheme.colors.primary.foreground;
@@ -95,21 +126,35 @@ fetchData().then(data => console.log(data)); `;
             )}
           
         

-        

+        

           {Object.values(scheme.colors.normal).concat(Object.values(scheme.colors.bright)).map((color, index) => (
             

-              

+              

                 {color}
               

             

           ))}
         

+        

+          
+          
+        

       

-    

+    
   );
 };
 
diff --git a/app/page.tsx b/app/page.tsx
index 29b45d9..0108399 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,21 +2,20 @@
 
 import React, { useState, useEffect } from 'react';
 import ColorSchemeCard from "./components/ColorSchemeCard";
-import ActionButton from "./components/ActionButton";
 import SettingsIcon from "./components/SettingsIcon";
 import Settings from "./components/Settings";
-import { ColorScheme, knownSchemes, generateRandomScheme, crossSchemes, generateSchemeFromGeneticAlgorithm } from './utils/colorSchemes';
+import { ColorScheme, knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm } from './utils/colorSchemes';
+import { AnimatePresence } from 'framer-motion';
 
 export default function Home() {
   const [schemes, setSchemes] = useState([]);
-  const [selectedSchemes, setSelectedSchemes] = useState([]);
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [likedSchemes, setLikedSchemes] = useState([]);
   const [dislikedSchemes, setDislikedSchemes] = useState([]);
 
   useEffect(() => {
-    generateNewSchemes();
+    generateNewSchemes(8);
     setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);
     const storedLikedSchemes = localStorage.getItem('likedSchemes');
     const storedDislikedSchemes = localStorage.getItem('dislikedSchemes');
@@ -40,39 +39,43 @@ export default function Home() {
     localStorage.setItem('dislikedSchemes', JSON.stringify(dislikedSchemes));
   }, [dislikedSchemes]);
 
-  const generateNewSchemes = () => {
+  const generateNewSchemes = (count: number) => {
+    const knownCount = Math.floor(count / 2);
+    const generatedCount = count - knownCount;
+
     const newSchemes = [
-      knownSchemes[Math.floor(Math.random() * knownSchemes.length)],
-      generateRandomScheme(),
-      likedSchemes.length > 0 ? generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes) : generateRandomScheme()
+      ...knownSchemes.sort(() => 0.5 - Math.random()).slice(0, knownCount),
+      ...Array(generatedCount).fill(null).map(() => 
+        likedSchemes.length > 0 ? generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes) : generateRandomScheme()
+      )
     ];
-    setSchemes(newSchemes);
-    setSelectedSchemes([]);
+
+    // Shuffle the new schemes
+    const shuffledSchemes = newSchemes.sort(() => 0.5 - Math.random());
+
+    setSchemes(prevSchemes => [...prevSchemes, ...shuffledSchemes]);
   };
 
-  const handleSchemeSelect = (index: number) => {
-    setSelectedSchemes(prev => {
-      if (prev.includes(index)) {
-        return prev.filter(i => i !== index);
-      } else if (prev.length < 2) {
-        return [...prev, index];
+  const handleLike = (scheme: ColorScheme) => {
+    setLikedSchemes(prev => [...prev, scheme]);
+    removeTopScheme();
+  };
+
+  const handleDislike = (scheme: ColorScheme) => {
+    setDislikedSchemes(prev => [...prev, scheme]);
+    removeTopScheme();
+  };
+
+  const removeTopScheme = () => {
+    setSchemes(prevSchemes => {
+      const newSchemes = prevSchemes.slice(1);
+      if (newSchemes.length < 3) {
+        generateNewSchemes(3);
       }
-      return prev;
+      return newSchemes;
     });
   };
 
-  const handleAction = () => {
-    if (selectedSchemes.length === 2) {
-      const crossedScheme = crossSchemes(schemes[selectedSchemes[0]], schemes[selectedSchemes[1]]);
-      setLikedSchemes(prev => [...prev, schemes[selectedSchemes[0]], schemes[selectedSchemes[1]]]);
-      setSchemes([crossedScheme, knownSchemes[Math.floor(Math.random() * knownSchemes.length)], generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes)]);
-      setSelectedSchemes([]);
-    } else {
-      setDislikedSchemes(prev => [...prev, ...schemes]);
-      generateNewSchemes();
-    }
-  };
-
   const toggleDarkMode = () => {
     setIsDarkMode(prev => !prev);
   };
@@ -83,21 +86,18 @@ export default function Home() {
         
Terminal Color Scheme Generator

          setIsSettingsOpen(true)} />
       
-      

-        

-          {schemes.map((scheme, index) => (
+      

+        
+          {schemes.slice(0, 3).map((scheme, index) => (
              handleSchemeSelect(index)}
+              onLike={() => handleLike(scheme)}
+              onDislike={() => handleDislike(scheme)}
+              index={index}
             />
           ))}
-        

-        
+        
       

       
+
+
+    
+    cross
+    Created with Sketch Beta.
+    
+
+
+    
+        
+            
+
+
+        
+    
+
\ No newline at end of file
diff --git a/public/download-icon.svg b/public/download-icon.svg
new file mode 100644
index 0000000..9238550
--- /dev/null
+++ b/public/download-icon.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/public/heart-icon.svg b/public/heart-icon.svg
new file mode 100644
index 0000000..2f2c8b8
--- /dev/null
+++ b/public/heart-icon.svg
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/public/settings-icon.svg b/public/settings-icon.svg
new file mode 100644
index 0000000..c681696
--- /dev/null
+++ b/public/settings-icon.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
\ No newline at end of file