diff --git a/app/components/ColorSchemeCard.tsx b/app/components/ColorSchemeCard.tsx index 958d4b1..1a5e966 100644 --- a/app/components/ColorSchemeCard.tsx +++ b/app/components/ColorSchemeCard.tsx @@ -1,10 +1,12 @@ import React, { useState } from 'react'; import Image from 'next/image'; import { ColorScheme } from '../utils/colorSchemes'; -import { generateYAML, generateJSON, generateXResources, generateTOML } from '../utils/exportFormats'; +import { generateYAML, generateJSON, generateXResources, generateTOML, generateITerm2, generateWindowsTerminal, generateTerminalApp } from '../utils/exportFormats'; import { Highlight, themes } from 'prism-react-renderer'; import { motion, useAnimation } from 'framer-motion'; import ColorPalette from './ColorPalette'; +import confetti from 'canvas-confetti'; +import { AppSettings } from '../utils/types'; interface ColorSchemeCardProps { scheme: ColorScheme; @@ -12,16 +14,42 @@ interface ColorSchemeCardProps { onDislike: () => void; index: number; isDarkMode: boolean; - codeSample: string; - outputFormat: string; + settings: AppSettings; } -const ColorSchemeCard: React.FC = ({ scheme, onLike, onDislike, index, isDarkMode, codeSample, outputFormat }) => { +const ColorSchemeCard: React.FC = ({ scheme, onLike, onDislike, index, isDarkMode, settings }) => { const [overlayColor, setOverlayColor] = useState('rgba(0, 0, 0, 0)'); const controls = useAnimation(); const getCodeExample = () => { - // Add code samples for each language here + if (settings.juniorDevMode) { + return ` +// This code is perfect, no need to review +function makeItWork() { + return true; +} + +// This function does everything +function doEverything() { + // TODO: Implement +} + +// Ignore this, it's probably not important +try { + somethingRisky(); +} catch (e) { + // This will never happen +} + +// Copy-pasted from StackOverflow +const regex = /^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$/; + +// I'll fix this later +while (true) { + // Infinite loop for extra performance +} + `; + } const samples = { c: `#include @@ -149,31 +177,30 @@ func main() { num := 7 fmt.Printf("Is %d prime? %v\n", num, isPrime(num)) }`, - javascript: `function isPrime(n) { - if (n <= 1) return false; - for (let i = 2; i <= Math.sqrt(n); i++) { - if (n % i === 0) return false; - } - return true; + javascript: `/* Calculate the area and circumference of a circle */ +const pi = 3.14; + +function calculateArea(r) { + return pi * r ** 2; // Exponentiation, constant, operator } -function primesUpTo(limit) { - let primes = []; - for (let i = 2; i <= limit; i++) { - if (isPrime(i)) primes.push(i); - } - return primes; +function calculateCircumference(r) { + return 2 * pi * r; // Function, return, operators } -function fibonacci(n) { - let fib = [0, 1]; - for (let i = 2; i < n; i++) { - fib.push(fib[i - 1] + fib[i - 2]); - } - return fib; +if (radius > 0) { + console.log(\`Area: $\{calculateArea(radius)\}\`); // Template string, method + console.log(\`Circumference: $\{calculateCircumference(radius)\}\`); +} else { + console.error("Invalid radius!"); // Error handling } -let limit = 50;`, +try { + radius = -1; + if (radius < 0) throw new Error("Negative radius"); // Throw, error +} catch (e) { + console.warn(e.message); // Catch block, method +}`, bash: `#!/bin/bash is_prime() { @@ -219,7 +246,7 @@ fi` return sample in samples; }; - return isValidSample(codeSample) ? samples[codeSample] : samples.javascript; + return isValidSample(settings.codeSample) ? samples[settings.codeSample] : samples.javascript; }; const handleDownload = (e: React.MouseEvent) => { @@ -227,7 +254,7 @@ fi` let content: string; let fileExtension: string; - switch (outputFormat) { + switch (settings.outputFormat) { case 'json': content = generateJSON(scheme); fileExtension = 'json'; @@ -240,6 +267,18 @@ fi` content = generateTOML(scheme); fileExtension = 'toml'; break; + case 'iterm2': + content = generateITerm2(scheme); + fileExtension = 'itermcolors'; + break; + case 'windows-terminal': + content = generateWindowsTerminal(scheme); + fileExtension = 'json'; + break; + case 'terminal-app': + content = generateTerminalApp(scheme); + fileExtension = 'terminal'; + break; case 'yaml': default: content = generateYAML(scheme); @@ -259,7 +298,16 @@ fi` const handleLike = () => { setOverlayColor('rgba(0, 255, 0, 0.1)'); - controls.start({ x: 300, opacity: 0, transition: { duration: 0.3 } }).then(onLike); + controls.start({ x: 300, opacity: 0, transition: { duration: 0.3 } }).then(() => { + if (settings.partyMode) { + confetti({ + particleCount: 100, + spread: 70, + origin: { y: 0.6 } + }); + } + onLike(); + }); }; const handleDislike = () => { @@ -318,7 +366,7 @@ fi`
- + {({ className, style, tokens, getLineProps, getTokenProps }) => ( 
                 {tokens.map((line, i) => (
diff --git a/app/components/FormatInstructions.tsx b/app/components/FormatInstructions.tsx
new file mode 100644
index 0000000..0c72804
--- /dev/null
+++ b/app/components/FormatInstructions.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface FormatInstructionsProps {
+  isOpen: boolean;
+  onClose: () => void;
+  isDarkMode: boolean;
+}
+
+const FormatInstructions: React.FC = ({ isOpen, onClose, isDarkMode }) => {
+  if (!isOpen) return null;
+
+  return (
+    

+      

+        

+          
Color Scheme Installation Instructions

+          
+        

+        

+          
YAML (Alacritty)

+          
    
+            
  1. Download the YAML file.
    2. 
+            
  2. Place it in your Alacritty configuration directory (usually ~/.config/alacritty/).
    3. 
+            
  3. In your alacritty.yml file, add: import: [/path/to/your/theme.yml]
    4. 
+          

+
+          
JSON

+          
JSON format can be used in various terminals. Refer to your terminal's documentation for specific instructions.

+
+          
XResources

+          
    
+            
  1. Download the XResources file.
    2. 
+            
  2. Add the contents to your ~/.Xresources file.
    3. 
+            
  3. Run xrdb ~/.Xresources to reload.
    4. 
+          

+
+          
TOML (Alacritty)

+          
    
+            
  1. Download the TOML file.
    2. 
+            
  2. Place it in your Alacritty configuration directory.
    3. 
+            
  3. In your alacritty.toml file, add: import = ["/path/to/your/theme.toml"]
    4. 
+          

+
+          
iTerm2

+          
    
+            
  1. Download the iTerm2 color scheme file.
    2. 
+            
  2. Open iTerm2 preferences.
    3. 
+            
  3. Go to Profiles > Colors.
    4. 
+            
  4. Click on "Color Presets..." and choose "Import..."
    5. 
+            
  5. Select the downloaded file.
    6. 
+          

+
+          
Windows Terminal

+          
    
+            
  1. Download the JSON file.
    2. 
+            
  2. Open Windows Terminal settings.
    3. 
+            
  3. In the "schemes" array, add the contents of the downloaded JSON file.
    4. 
+            
  4. In your profile, set "colorScheme" to the name of your new scheme.
    5. 
+          

+
+          
Terminal.app (macOS)

+          
    
+            
  1. Download the Terminal.app color scheme file.
    2. 
+            
  2. Double-click the downloaded file to import it into Terminal.app.
    3. 
+            
  3. In Terminal.app preferences, select the imported profile.
    4. 
+          

+        

+      

+    

+  );
+};
+
+export default FormatInstructions;
\ No newline at end of file
diff --git a/app/components/HelpDialog.tsx b/app/components/HelpDialog.tsx
index 25cf8b4..bedaa6b 100644
--- a/app/components/HelpDialog.tsx
+++ b/app/components/HelpDialog.tsx
@@ -21,6 +21,7 @@ const HelpDialog: React.FC = ({ isOpen, onClose, isDarkMode })

Welcome to TerminalTinder, the dating app that actually designed to be used over and over again.

+

The more you interact with TerminalTinder, the better it becomes at suggesting color schemes and even creating new ones.

How it works:

    @@ -34,12 +35,12 @@ const HelpDialog: React.FC = ({ isOpen, onClose, isDarkMode })
    • View a live preview of the color scheme applied to code.
    • Change the programming language of the preview in the settings.
      • -
    • Download color schemes in various formats (YAML, JSON, TOML, Xresources).
      • +
    • Download color schemes in various formats (YAML, JSON, TOML, Xresources, and more).
    • View your liked and disliked schemes in the history.
    -

    The more you interact with TerminalTinder, the better it becomes at suggesting color schemes. All information is local, so refreshing the page refreshes learning.

    -

    It's your internet, take it back.

    +
    +

    DWS - It's your internet, take it back.

    All credit for any non generated color schemes goes to their original creators. Color schemes are sourced from Gogh.

    diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index 353eaef..0948069 100644 --- a/app/components/Settings.tsx +++ b/app/components/Settings.tsx @@ -1,18 +1,15 @@ import React, { useState, useEffect } from 'react'; import Image from 'next/image'; - -// Import the CodeSample type -import { CodeSample } from '../utils/types'; +import { CodeSample, AppSettings } from '../utils/types'; +import FormatInstructions from './FormatInstructions'; interface SettingsProps { isOpen: boolean; onClose: () => void; isDarkMode: boolean; onToggleDarkMode: () => void; - outputFormat: string; - setOutputFormat: (format: string) => void; - codeSample: CodeSample; - setCodeSample: (sample: CodeSample) => void; + settings: AppSettings; + setSettings: (settings: AppSettings) => void; saveSettings: boolean; setSaveSettings: (save: boolean) => void; } @@ -22,14 +19,13 @@ const Settings: React.FC = ({ onClose, isDarkMode, onToggleDarkMode, - outputFormat, - setOutputFormat, - codeSample, - setCodeSample, + settings, + setSettings, saveSettings, setSaveSettings }) => { const [showCookieNotice, setShowCookieNotice] = useState(false); + const [showFormatInstructions, setShowFormatInstructions] = useState(false); useEffect(() => { if (saveSettings && !localStorage.getItem('cookieNoticeShown')) { @@ -79,22 +75,33 @@ const Settings: React.FC = ({
- +
+ + +