Name fixes, more output formats, algo changes
This commit is contained in:
parent
fdd210e13e
commit
9355fc5a12
@ -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<ColorSchemeCardProps> = ({ scheme, onLike, onDislike, index, isDarkMode, codeSample, outputFormat }) => {
|
||||
const ColorSchemeCard: React.FC<ColorSchemeCardProps> = ({ 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 <stdio.h>
|
||||
|
||||
@ -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`
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-gray-100 dark:bg-gray-700 rounded-md mb-2 flex-grow overflow-hidden z-10 shadow-md">
|
||||
<Highlight theme={themes.dracula} code={getCodeExample()} language={codeSample}>
|
||||
<Highlight theme={themes.dracula} code={getCodeExample()} language={settings.codeSample}>
|
||||
{({ className, style, tokens, getLineProps, getTokenProps }) => (
|
||||
<pre className={`${className} text-sm p-4 h-full overflow-auto`} style={{ ...style, backgroundColor: scheme.colors.primary.background }}>
|
||||
{tokens.map((line, i) => (
|
||||
|
||||
76
app/components/FormatInstructions.tsx
Normal file
76
app/components/FormatInstructions.tsx
Normal file
@ -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<FormatInstructionsProps> = ({ isOpen, onClose, isDarkMode }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl w-[90vw] max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-2xl font-bold">Color Scheme Installation Instructions</h2>
|
||||
<button onClick={onClose} className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
|
||||
<Image src={isDarkMode ? "/close-icon-dark.svg" : "/close-icon-light.svg"} alt="Close" width={24} height={24} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold">YAML (Alacritty)</h3>
|
||||
<ol className="list-decimal list-inside space-y-2">
|
||||
<li>Download the YAML file.</li>
|
||||
<li>Place it in your Alacritty configuration directory (usually <code>~/.config/alacritty/</code>).</li>
|
||||
<li>In your <code>alacritty.yml</code> file, add: <code>import: [/path/to/your/theme.yml]</code></li>
|
||||
</ol>
|
||||
|
||||
<h3 className="text-xl font-semibold">JSON</h3>
|
||||
<p>JSON format can be used in various terminals. Refer to your terminal's documentation for specific instructions.</p>
|
||||
|
||||
<h3 className="text-xl font-semibold">XResources</h3>
|
||||
<ol className="list-decimal list-inside space-y-2">
|
||||
<li>Download the XResources file.</li>
|
||||
<li>Add the contents to your <code>~/.Xresources</code> file.</li>
|
||||
<li>Run <code>xrdb ~/.Xresources</code> to reload.</li>
|
||||
</ol>
|
||||
|
||||
<h3 className="text-xl font-semibold">TOML (Alacritty)</h3>
|
||||
<ol className="list-decimal list-inside space-y-2">
|
||||
<li>Download the TOML file.</li>
|
||||
<li>Place it in your Alacritty configuration directory.</li>
|
||||
<li>In your <code>alacritty.toml</code> file, add: <code>import = ["/path/to/your/theme.toml"]</code></li>
|
||||
</ol>
|
||||
|
||||
<h3 className="text-xl font-semibold">iTerm2</h3>
|
||||
<ol className="list-decimal list-inside space-y-2">
|
||||
<li>Download the iTerm2 color scheme file.</li>
|
||||
<li>Open iTerm2 preferences.</li>
|
||||
<li>Go to Profiles > Colors.</li>
|
||||
<li>Click on "Color Presets..." and choose "Import..."</li>
|
||||
<li>Select the downloaded file.</li>
|
||||
</ol>
|
||||
|
||||
<h3 className="text-xl font-semibold">Windows Terminal</h3>
|
||||
<ol className="list-decimal list-inside space-y-2">
|
||||
<li>Download the JSON file.</li>
|
||||
<li>Open Windows Terminal settings.</li>
|
||||
<li>In the "schemes" array, add the contents of the downloaded JSON file.</li>
|
||||
<li>In your profile, set "colorScheme" to the name of your new scheme.</li>
|
||||
</ol>
|
||||
|
||||
<h3 className="text-xl font-semibold">Terminal.app (macOS)</h3>
|
||||
<ol className="list-decimal list-inside space-y-2">
|
||||
<li>Download the Terminal.app color scheme file.</li>
|
||||
<li>Double-click the downloaded file to import it into Terminal.app.</li>
|
||||
<li>In Terminal.app preferences, select the imported profile.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormatInstructions;
|
||||
@ -21,6 +21,7 @@ const HelpDialog: React.FC<HelpDialogProps> = ({ isOpen, onClose, isDarkMode })
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<p>Welcome to TerminalTinder, the dating app that actually designed to be used over and over again.</p>
|
||||
<p>The more you interact with TerminalTinder, the better it becomes at suggesting color schemes and even creating new ones.</p>
|
||||
|
||||
<h3 className="text-xl font-semibold">How it works:</h3>
|
||||
<ol className="list-decimal list-inside space-y-2">
|
||||
@ -34,12 +35,12 @@ const HelpDialog: React.FC<HelpDialogProps> = ({ isOpen, onClose, isDarkMode })
|
||||
<ul className="list-disc list-inside space-y-2">
|
||||
<li>View a live preview of the color scheme applied to code.</li>
|
||||
<li>Change the programming language of the preview in the settings.</li>
|
||||
<li>Download color schemes in various formats (YAML, JSON, TOML, Xresources).</li>
|
||||
<li>Download color schemes in various formats (YAML, JSON, TOML, Xresources, and more).</li>
|
||||
<li>View your liked and disliked schemes in the history.</li>
|
||||
</ul>
|
||||
|
||||
<p>The more you interact with TerminalTinder, the better it becomes at suggesting color schemes. All information is local, so refreshing the page refreshes learning.</p>
|
||||
<p>It's your internet, take it back.</p>
|
||||
<hr className="my-4 border-t border-gray-200 w-full" />
|
||||
<p>DWS - It's your internet, take it back.</p>
|
||||
<hr className="my-4 border-t border-gray-200 w-full" />
|
||||
<p>All credit for any non generated color schemes goes to their original creators. Color schemes are sourced from <a href="https://github.com/Mayccoll/Gogh" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-blue-600">Gogh</a>.</p>
|
||||
|
||||
|
||||
@ -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<SettingsProps> = ({
|
||||
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<SettingsProps> = ({
|
||||
</div>
|
||||
<div>
|
||||
<label className="block mb-2">Output Format</label>
|
||||
<select
|
||||
value={outputFormat}
|
||||
onChange={(e) => setOutputFormat(e.target.value)}
|
||||
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600"
|
||||
>
|
||||
<option value="json">JSON</option>
|
||||
<option value="xresources">XResources</option>
|
||||
<option value="yaml">YAML (Alacritty)</option>
|
||||
<option value="toml">TOML (Alacritty)</option>
|
||||
</select>
|
||||
<div className="flex items-center">
|
||||
<select
|
||||
value={settings.outputFormat}
|
||||
onChange={(e) => setSettings({ ...settings, outputFormat: e.target.value })}
|
||||
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600"
|
||||
>
|
||||
<option value="yaml">YAML (Alacritty)</option>
|
||||
<option value="json">JSON</option>
|
||||
<option value="xresources">XResources</option>
|
||||
<option value="toml">TOML (Alacritty)</option>
|
||||
<option value="iterm2">iTerm2</option>
|
||||
<option value="windows-terminal">Windows Terminal</option>
|
||||
<option value="terminal-app">Terminal.app</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => setShowFormatInstructions(true)}
|
||||
className="ml-2 text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
<Image src={isDarkMode ? "/question-mark-dark.svg" : "/question-mark-light.svg"} alt="Format Instructions" width={24} height={24} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block mb-2">Code Sample</label>
|
||||
<select
|
||||
value={codeSample}
|
||||
onChange={(e) => setCodeSample(e.target.value as CodeSample)}
|
||||
value={settings.codeSample}
|
||||
onChange={(e) => setSettings({ ...settings, codeSample: e.target.value as CodeSample })}
|
||||
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600"
|
||||
>
|
||||
<option value="c">C</option>
|
||||
@ -116,6 +123,36 @@ const Settings: React.FC<SettingsProps> = ({
|
||||
/>
|
||||
<label htmlFor="saveSettings">Save settings in cookie</label>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<span>Junior Dev Mode</span>
|
||||
<button
|
||||
onClick={() => setSettings({ ...settings, juniorDevMode: !settings.juniorDevMode })}
|
||||
className={`w-12 h-6 rounded-full p-1 transition-colors duration-300 ease-in-out ${
|
||||
settings.juniorDevMode ? 'bg-blue-600' : 'bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-4 h-4 rounded-full bg-white transform transition-transform duration-300 ease-in-out ${
|
||||
settings.juniorDevMode ? 'translate-x-6' : ''
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<span>Party Mode</span>
|
||||
<button
|
||||
onClick={() => setSettings({ ...settings, partyMode: !settings.partyMode })}
|
||||
className={`w-12 h-6 rounded-full p-1 transition-colors duration-300 ease-in-out ${
|
||||
settings.partyMode ? 'bg-blue-600' : 'bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-4 h-4 rounded-full bg-white transform transition-transform duration-300 ease-in-out ${
|
||||
settings.partyMode ? 'translate-x-6' : ''
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showCookieNotice && (
|
||||
@ -126,6 +163,11 @@ const Settings: React.FC<SettingsProps> = ({
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<FormatInstructions
|
||||
isOpen={showFormatInstructions}
|
||||
onClose={() => setShowFormatInstructions(false)}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
38
app/page.tsx
38
app/page.tsx
@ -8,7 +8,7 @@ import Settings from "./components/Settings";
|
||||
import HelpDialog from "./components/HelpDialog";
|
||||
import { ColorScheme, knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm } from './utils/colorSchemes';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { CodeSample } from './utils/types';
|
||||
import { CodeSample, AppSettings } from './utils/types';
|
||||
|
||||
export default function Home() {
|
||||
const [schemes, setSchemes] = useState<ColorScheme[]>([]);
|
||||
@ -18,9 +18,14 @@ export default function Home() {
|
||||
const [isHistoryOpen, setIsHistoryOpen] = useState(false);
|
||||
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
||||
const [isHelpOpen, setIsHelpOpen] = useState(false);
|
||||
const [outputFormat, setOutputFormat] = useState('yaml');
|
||||
const [codeSample, setCodeSample] = useState<CodeSample>('javascript');
|
||||
const [settings, setSettings] = useState<AppSettings>({
|
||||
outputFormat: 'yaml',
|
||||
codeSample: 'javascript',
|
||||
juniorDevMode: false,
|
||||
partyMode: false,
|
||||
});
|
||||
const [saveSettings, setSaveSettings] = useState(false);
|
||||
const [totalSchemes, setTotalSchemes] = useState(0);
|
||||
|
||||
const generateNewSchemes = (count: number) => {
|
||||
const knownCount = Math.floor(count / 2);
|
||||
@ -28,11 +33,14 @@ export default function Home() {
|
||||
const newSchemes = [
|
||||
...knownSchemes.sort(() => 0.5 - Math.random()).slice(0, knownCount),
|
||||
...Array(generatedCount).fill(null).map(() =>
|
||||
likedSchemes.length > 0 ? generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes) : generateRandomScheme()
|
||||
likedSchemes.length > 0 || dislikedSchemes.length > 0
|
||||
? generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes, totalSchemes)
|
||||
: generateRandomScheme(totalSchemes)
|
||||
)
|
||||
];
|
||||
|
||||
setSchemes(prevSchemes => [...prevSchemes, ...newSchemes].sort(() => 0.5 - Math.random()));
|
||||
setTotalSchemes(prev => prev + count);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -51,8 +59,7 @@ export default function Home() {
|
||||
const storedSettings = document.cookie.split('; ').find(row => row.startsWith('settings='));
|
||||
if (storedSettings) {
|
||||
const settings = JSON.parse(storedSettings.split('=')[1]);
|
||||
setOutputFormat(settings.outputFormat);
|
||||
setCodeSample(settings.codeSample);
|
||||
setSettings(settings);
|
||||
setSaveSettings(true);
|
||||
}
|
||||
}, []);
|
||||
@ -71,12 +78,12 @@ export default function Home() {
|
||||
|
||||
useEffect(() => {
|
||||
if (saveSettings) {
|
||||
const settings = JSON.stringify({ outputFormat, codeSample });
|
||||
document.cookie = `settings=${settings}; max-age=31536000; path=/`; // 1 year expiration
|
||||
const settingsToSave = JSON.stringify(settings);
|
||||
document.cookie = `settings=${settingsToSave}; max-age=31536000; path=/`; // 1 year expiration
|
||||
} else {
|
||||
document.cookie = 'settings=; max-age=0; path=/';
|
||||
}
|
||||
}, [saveSettings, outputFormat, codeSample]);
|
||||
}, [saveSettings, settings]);
|
||||
|
||||
const handleLike = (scheme: ColorScheme) => {
|
||||
setLikedSchemes(prev => [...prev, scheme]);
|
||||
@ -149,8 +156,7 @@ export default function Home() {
|
||||
onDislike={() => handleDislike(scheme)}
|
||||
index={index}
|
||||
isDarkMode={isDarkMode}
|
||||
codeSample={codeSample}
|
||||
outputFormat={outputFormat}
|
||||
settings={settings}
|
||||
/>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
@ -160,9 +166,9 @@ export default function Home() {
|
||||
likedSchemes={likedSchemes}
|
||||
dislikedSchemes={dislikedSchemes}
|
||||
onClose={toggleHistory}
|
||||
onClearHistory={handleClearHistory} // Add this line
|
||||
onClearHistory={handleClearHistory}
|
||||
isDarkMode={isDarkMode}
|
||||
outputFormat={outputFormat}
|
||||
outputFormat={settings.outputFormat}
|
||||
/>
|
||||
)}
|
||||
{isSettingsOpen && (
|
||||
@ -171,10 +177,8 @@ export default function Home() {
|
||||
onClose={toggleSettings}
|
||||
isDarkMode={isDarkMode}
|
||||
onToggleDarkMode={() => setIsDarkMode(!isDarkMode)}
|
||||
outputFormat={outputFormat}
|
||||
setOutputFormat={setOutputFormat}
|
||||
codeSample={codeSample}
|
||||
setCodeSample={(sample: CodeSample) => setCodeSample(sample)}
|
||||
settings={settings}
|
||||
setSettings={setSettings}
|
||||
saveSettings={saveSettings}
|
||||
setSaveSettings={setSaveSettings}
|
||||
/>
|
||||
|
||||
@ -29,12 +29,107 @@ function generateCreativeName(colors: { [key: string]: string }): string {
|
||||
const mood = getMood(allColors);
|
||||
const theme = getTheme(dominantColor);
|
||||
|
||||
const nameComponents = [mood, theme].filter(Boolean);
|
||||
if (nameComponents.length === 1) {
|
||||
nameComponents.push(getRandomAdjective(dominantColor));
|
||||
const nameComponents = [
|
||||
generatePrefix(),
|
||||
generateSuffix(),
|
||||
mood,
|
||||
theme,
|
||||
generateCompoundWord(),
|
||||
generateFancifulWord(),
|
||||
generateColorName(dominantColor),
|
||||
generateAdjective(),
|
||||
generateNoun(),
|
||||
].filter(Boolean);
|
||||
|
||||
// Randomly choose 2 or 3 components
|
||||
const selectedComponents = shuffleArray(nameComponents).slice(0, Math.random() < 0.3 ? 2 : 3);
|
||||
|
||||
// Randomly decide to combine words
|
||||
if (Math.random() < 0.3 && selectedComponents.length > 1) {
|
||||
const indexToCombine = Math.floor(Math.random() * (selectedComponents.length - 1));
|
||||
const combinedWord = combineWords(selectedComponents[indexToCombine], selectedComponents[indexToCombine + 1]);
|
||||
selectedComponents.splice(indexToCombine, 2, combinedWord);
|
||||
}
|
||||
|
||||
return nameComponents.join(' ');
|
||||
return selectedComponents.join(' ');
|
||||
}
|
||||
|
||||
function combineWords(word1: string, word2: string): string {
|
||||
const shortenWord = (word: string) => {
|
||||
const vowels = ['a', 'e', 'i', 'o', 'u'];
|
||||
let shortened = word.toLowerCase();
|
||||
// Remove ending if it's a common suffix
|
||||
shortened = shortened.replace(/(tion|sion|ism|ity|ness|ment|er|or|ous|ive|al|ic|ly)$/, '');
|
||||
// Remove last vowel if it's not at the start
|
||||
for (let i = shortened.length - 1; i > 0; i--) {
|
||||
if (vowels.includes(shortened[i])) {
|
||||
shortened = shortened.slice(0, i) + shortened.slice(i + 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return shortened;
|
||||
};
|
||||
|
||||
const short1 = shortenWord(word1);
|
||||
const short2 = shortenWord(word2);
|
||||
|
||||
// Randomly choose how to combine the words
|
||||
const combinationStyles = [
|
||||
() => short1 + short2,
|
||||
() => short1 + word2,
|
||||
() => word1 + short2,
|
||||
() => short1[0].toUpperCase() + short1.slice(1) + short2,
|
||||
() => short1 + short2[0].toUpperCase() + short2.slice(1),
|
||||
];
|
||||
|
||||
const chosenStyle = combinationStyles[Math.floor(Math.random() * combinationStyles.length)];
|
||||
return chosenStyle();
|
||||
}
|
||||
|
||||
function generatePrefix(): string {
|
||||
const prefixes = [
|
||||
'Neo', 'Retro', 'Cyber', 'Quantum', 'Astro', 'Techno', 'Synth', 'Vapor', 'Pixel', 'Neon',
|
||||
'Hyper', 'Micro', 'Macro', 'Ultra', 'Mega', 'Giga', 'Nano', 'Cosmic', 'Stellar', 'Lunar',
|
||||
'Solar', 'Galactic', 'Atomic', 'Quantum', 'Nebula', 'Plasma', 'Fusion', 'Photon', 'Quark',
|
||||
'Void', 'Flux', 'Pulse', 'Wave', 'Beam', 'Core', 'Node', 'Grid', 'Mesh', 'Nexus', 'Vortex'
|
||||
];
|
||||
return prefixes[Math.floor(Math.random() * prefixes.length)];
|
||||
}
|
||||
|
||||
function generateSuffix(): string {
|
||||
const suffixes = [
|
||||
'wave', 'punk', 'core', 'soft', 'hard', 'tech', 'flux', 'glow', 'shine', 'spark',
|
||||
'burn', 'fade', 'shift', 'drift', 'flow', 'pulse', 'beam', 'ray', 'haze', 'mist',
|
||||
'dust', 'aura', 'nova', 'storm', 'breeze', 'wind', 'current', 'tide', 'surge', 'burst',
|
||||
'bloom', 'flare', 'flash', 'gleam', 'glint', 'glimmer', 'glitter', 'shimmer', 'sheen', 'luster'
|
||||
];
|
||||
return suffixes[Math.floor(Math.random() * suffixes.length)];
|
||||
}
|
||||
|
||||
function generateCompoundWord(): string {
|
||||
const compounds = [
|
||||
'Nightfall', 'Daybreak', 'Sunburst', 'Moonbeam', 'Stardust', 'Skyline', 'Seashore', 'Treeline',
|
||||
'Cloudscape', 'Firefly', 'Rainbowdrop', 'Thunderbolt', 'Snowflake', 'Leafstorm', 'Sandstorm',
|
||||
'Iceberg', 'Volcano', 'Earthquake', 'Tidepool', 'Windmill', 'Sunflower', 'Moonstone', 'Stargaze',
|
||||
'Raindrop', 'Snowdrift', 'Firestorm', 'Icecrystal', 'Sandcastle', 'Waterfalls', 'Skyscraper'
|
||||
];
|
||||
return compounds[Math.floor(Math.random() * compounds.length)];
|
||||
}
|
||||
|
||||
function generateFancifulWord(): string {
|
||||
const prefixes = ['Lum', 'Chrom', 'Spec', 'Pris', 'Aur', 'Sol', 'Lun', 'Stel', 'Cos', 'Astr', 'Neb', 'Phos', 'Zeph', 'Crys', 'Aeth'];
|
||||
const suffixes = ['escence', 'arium', 'opia', 'ology', 'orama', 'osyne', 'osphere', 'olith', 'onomy', 'ology', 'ium', 'eon', 'alis', 'ora', 'yx'];
|
||||
const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
|
||||
const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
|
||||
return prefix + suffix;
|
||||
}
|
||||
|
||||
function shuffleArray<T>(array: T[]): T[] {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
function getDominantColor(colors: string[]): Color {
|
||||
@ -93,7 +188,15 @@ function getRandomAdjective(color: Color): string {
|
||||
return adjectives[category][Math.floor(Math.random() * adjectives[category].length)];
|
||||
}
|
||||
|
||||
function generateRandomScheme(): ColorScheme {
|
||||
function generateRandomScheme(totalSchemes: number): ColorScheme {
|
||||
if (totalSchemes < 30) {
|
||||
return generateCompletelyRandomScheme();
|
||||
} else {
|
||||
return generateJitteredKnownScheme(totalSchemes);
|
||||
}
|
||||
}
|
||||
|
||||
function generateCompletelyRandomScheme(): ColorScheme {
|
||||
const colors = {
|
||||
primary: { background: generateRandomColor(), foreground: generateRandomColor() },
|
||||
normal: {
|
||||
@ -115,37 +218,65 @@ function generateRandomScheme(): ColorScheme {
|
||||
};
|
||||
}
|
||||
|
||||
function mutateColor(color: string): string {
|
||||
function generateJitteredKnownScheme(totalSchemes: number): ColorScheme {
|
||||
const baseScheme = knownSchemes[Math.floor(Math.random() * knownSchemes.length)];
|
||||
const jitterAmount = Math.min(0.5, (totalSchemes - 30) / 140);
|
||||
|
||||
const jitteredColors = {
|
||||
primary: {
|
||||
background: jitterColor(baseScheme.colors.primary.background, jitterAmount),
|
||||
foreground: jitterColor(baseScheme.colors.primary.foreground, jitterAmount)
|
||||
},
|
||||
normal: Object.fromEntries(
|
||||
Object.entries(baseScheme.colors.normal).map(([key, value]) => [key, jitterColor(value, jitterAmount)])
|
||||
) as ColorScheme['colors']['normal'],
|
||||
bright: Object.fromEntries(
|
||||
Object.entries(baseScheme.colors.bright).map(([key, value]) => [key, jitterColor(value, jitterAmount)])
|
||||
) as ColorScheme['colors']['bright']
|
||||
};
|
||||
|
||||
return {
|
||||
name: generateCreativeName({ ...jitteredColors.normal, ...jitteredColors.bright }),
|
||||
colors: jitteredColors
|
||||
};
|
||||
}
|
||||
|
||||
function jitterColor(color: string, amount: number): string {
|
||||
const c = Color(color);
|
||||
const hue = (c.hue() + Math.random() * 30 - 15 + 360) % 360;
|
||||
const saturation = Math.max(0, Math.min(100, c.saturationl() + Math.random() * 20 - 10));
|
||||
const lightness = Math.max(0, Math.min(100, c.lightness() + Math.random() * 20 - 10));
|
||||
const hue = (c.hue() + (Math.random() * 2 - 1) * amount * 360 + 360) % 360;
|
||||
const saturation = Math.max(0, Math.min(100, c.saturationl() + (Math.random() * 2 - 1) * amount * 100));
|
||||
const lightness = Math.max(0, Math.min(100, c.lightness() + (Math.random() * 2 - 1) * amount * 100));
|
||||
return c.hsl(hue, saturation, lightness).hex();
|
||||
}
|
||||
|
||||
function generateSchemeFromGeneticAlgorithm(likedSchemes: ColorScheme[], dislikedSchemes: ColorScheme[]): ColorScheme {
|
||||
if (likedSchemes.length === 0) {
|
||||
return generateRandomScheme();
|
||||
function generateSchemeFromGeneticAlgorithm(likedSchemes: ColorScheme[], dislikedSchemes: ColorScheme[], totalSchemes: number): ColorScheme {
|
||||
const recentLikedSchemes = likedSchemes.slice(-15);
|
||||
const recentDislikedSchemes = dislikedSchemes.slice(-15);
|
||||
|
||||
if (recentLikedSchemes.length === 0) {
|
||||
return generateRandomScheme(totalSchemes);
|
||||
}
|
||||
|
||||
const parentScheme = likedSchemes[Math.floor(Math.random() * likedSchemes.length)];
|
||||
const parentScheme = recentLikedSchemes[Math.floor(Math.random() * recentLikedSchemes.length)];
|
||||
const newScheme: ColorScheme = JSON.parse(JSON.stringify(parentScheme)); // Deep copy
|
||||
|
||||
const mutationRate = Math.max(0.1, 0.5 - totalSchemes / 200); // Decreases from 0.5 to 0.1 as totalSchemes increases
|
||||
|
||||
// Mutate colors
|
||||
(Object.keys(newScheme.colors) as Array<keyof typeof newScheme.colors>).forEach((colorGroup) => {
|
||||
Object.keys(newScheme.colors[colorGroup]).forEach((colorName) => {
|
||||
if (Math.random() < 0.3) { // 30% chance of mutation
|
||||
(newScheme.colors[colorGroup] as Record<string, string>)[colorName] = mutateColor((newScheme.colors[colorGroup] as Record<string, string>)[colorName]);
|
||||
if (Math.random() < mutationRate) {
|
||||
(newScheme.colors[colorGroup] as Record<string, string>)[colorName] = mutateColor((newScheme.colors[colorGroup] as Record<string, string>)[colorName], mutationRate);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid similarities with disliked schemes
|
||||
dislikedSchemes.forEach(dislikedScheme => {
|
||||
recentDislikedSchemes.forEach(dislikedScheme => {
|
||||
(Object.keys(newScheme.colors) as Array<keyof typeof newScheme.colors>).forEach((colorGroup) => {
|
||||
Object.keys(newScheme.colors[colorGroup]).forEach((colorName) => {
|
||||
if ((newScheme.colors[colorGroup] as Record<string, string>)[colorName] === (dislikedScheme.colors[colorGroup] as Record<string, string>)[colorName]) {
|
||||
(newScheme.colors[colorGroup] as Record<string, string>)[colorName] = mutateColor((newScheme.colors[colorGroup] as Record<string, string>)[colorName]);
|
||||
(newScheme.colors[colorGroup] as Record<string, string>)[colorName] = mutateColor((newScheme.colors[colorGroup] as Record<string, string>)[colorName], mutationRate * 2);
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -157,5 +288,68 @@ function generateSchemeFromGeneticAlgorithm(likedSchemes: ColorScheme[], dislike
|
||||
return newScheme;
|
||||
}
|
||||
|
||||
function mutateColor(color: string, mutationRate: number): string {
|
||||
const c = Color(color);
|
||||
const hue = (c.hue() + (Math.random() * 2 - 1) * mutationRate * 360 + 360) % 360;
|
||||
const saturation = Math.max(0, Math.min(100, c.saturationl() + (Math.random() * 2 - 1) * mutationRate * 100));
|
||||
const lightness = Math.max(0, Math.min(100, c.lightness() + (Math.random() * 2 - 1) * mutationRate * 100));
|
||||
return c.hsl(hue, saturation, lightness).hex();
|
||||
}
|
||||
|
||||
function generateColorName(color: Color): string {
|
||||
const hue = color.hue();
|
||||
const saturation = color.saturationl();
|
||||
const lightness = color.lightness();
|
||||
|
||||
const hueNames = [
|
||||
'Red', 'Crimson', 'Scarlet', 'Ruby', 'Vermilion',
|
||||
'Orange', 'Amber', 'Gold', 'Marigold', 'Tangerine',
|
||||
'Yellow', 'Lemon', 'Canary', 'Saffron', 'Mustard',
|
||||
'Lime', 'Chartreuse', 'Olive', 'Sage', 'Emerald',
|
||||
'Green', 'Jade', 'Forest', 'Mint', 'Pine',
|
||||
'Cyan', 'Turquoise', 'Aqua', 'Teal', 'Azure',
|
||||
'Blue', 'Cobalt', 'Sapphire', 'Navy', 'Indigo',
|
||||
'Purple', 'Violet', 'Lavender', 'Plum', 'Amethyst',
|
||||
'Magenta', 'Fuchsia', 'Pink', 'Rose', 'Cerise',
|
||||
];
|
||||
|
||||
const index = Math.floor(hue / (360 / hueNames.length));
|
||||
let colorName = hueNames[index];
|
||||
|
||||
if (saturation < 20) {
|
||||
colorName = ['Gray', 'Ash', 'Slate', 'Stone', 'Pewter'][Math.floor(Math.random() * 5)];
|
||||
}
|
||||
|
||||
if (lightness > 80) {
|
||||
colorName = `Pale ${colorName}`;
|
||||
} else if (lightness < 20) {
|
||||
colorName = `Dark ${colorName}`;
|
||||
}
|
||||
|
||||
return colorName;
|
||||
}
|
||||
|
||||
function generateAdjective(): string {
|
||||
const adjectives = [
|
||||
'Ethereal', 'Vivid', 'Serene', 'Dynamic', 'Mellow', 'Vibrant', 'Tranquil', 'Radiant',
|
||||
'Subtle', 'Bold', 'Elegant', 'Rustic', 'Sleek', 'Vintage', 'Modern', 'Classic',
|
||||
'Dreamy', 'Energetic', 'Calm', 'Lively', 'Soft', 'Intense', 'Gentle', 'Fierce',
|
||||
'Mystical', 'Enchanted', 'Whimsical', 'Surreal', 'Fantastical', 'Otherworldly',
|
||||
'Harmonious', 'Balanced', 'Contrasting', 'Complementary', 'Unified', 'Diverse',
|
||||
];
|
||||
return adjectives[Math.floor(Math.random() * adjectives.length)];
|
||||
}
|
||||
|
||||
function generateNoun(): string {
|
||||
const nouns = [
|
||||
'Horizon', 'Cascade', 'Prism', 'Spectrum', 'Mirage', 'Oasis', 'Zenith', 'Abyss',
|
||||
'Echo', 'Whisper', 'Tempest', 'Serenity', 'Harmony', 'Rhythm', 'Melody', 'Symphony',
|
||||
'Essence', 'Spirit', 'Soul', 'Aura', 'Nimbus', 'Halo', 'Veil', 'Shroud',
|
||||
'Crystal', 'Gem', 'Jewel', 'Pearl', 'Diamond', 'Sapphire', 'Emerald', 'Ruby',
|
||||
'Nebula', 'Galaxy', 'Cosmos', 'Universe', 'Infinity', 'Eternity', 'Dimension', 'Realm',
|
||||
];
|
||||
return nouns[Math.floor(Math.random() * nouns.length)];
|
||||
}
|
||||
|
||||
export type { ColorScheme };
|
||||
export { knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm };
|
||||
@ -84,4 +84,268 @@ magenta = "${scheme.colors.bright.magenta}"
|
||||
cyan = "${scheme.colors.bright.cyan}"
|
||||
white = "${scheme.colors.bright.white}"
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export function generateITerm2(scheme: ColorScheme): string {
|
||||
return `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>Ansi 0 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.black.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.black.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.black.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 1 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.red.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.red.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.red.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 2 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.green.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.green.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.green.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 3 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.yellow.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.yellow.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.yellow.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 4 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.blue.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.blue.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.blue.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 5 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.magenta.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.magenta.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.magenta.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 6 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.cyan.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.cyan.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.cyan.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 7 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.white.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.white.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.normal.white.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 8 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.black.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.black.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.black.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 9 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.red.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.red.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.red.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 10 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.green.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.green.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.green.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 11 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.yellow.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.yellow.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.yellow.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 12 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.blue.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.blue.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.blue.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 13 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.magenta.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.magenta.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.magenta.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 14 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.cyan.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.cyan.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.cyan.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
<key>Ansi 15 Color</key>
|
||||
<dict>
|
||||
<key>Color Space</key>
|
||||
<string>sRGB</string>
|
||||
<key>Blue Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.white.slice(5, 7), 16) / 255}</real>
|
||||
<key>Green Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.white.slice(3, 5), 16) / 255}</real>
|
||||
<key>Red Component</key>
|
||||
<real>${parseInt(scheme.colors.bright.white.slice(1, 3), 16) / 255}</real>
|
||||
</dict>
|
||||
</dict>
|
||||
</plist>`;
|
||||
}
|
||||
|
||||
export function generateWindowsTerminal(scheme: ColorScheme): string {
|
||||
return JSON.stringify({
|
||||
"name": scheme.name,
|
||||
"background": scheme.colors.primary.background,
|
||||
"foreground": scheme.colors.primary.foreground,
|
||||
"black": scheme.colors.normal.black,
|
||||
"red": scheme.colors.normal.red,
|
||||
"green": scheme.colors.normal.green,
|
||||
"yellow": scheme.colors.normal.yellow,
|
||||
"blue": scheme.colors.normal.blue,
|
||||
"purple": scheme.colors.normal.magenta,
|
||||
"cyan": scheme.colors.normal.cyan,
|
||||
"white": scheme.colors.normal.white,
|
||||
"brightBlack": scheme.colors.bright.black,
|
||||
"brightRed": scheme.colors.bright.red,
|
||||
"brightGreen": scheme.colors.bright.green,
|
||||
"brightYellow": scheme.colors.bright.yellow,
|
||||
"brightBlue": scheme.colors.bright.blue,
|
||||
"brightPurple": scheme.colors.bright.magenta,
|
||||
"brightCyan": scheme.colors.bright.cyan,
|
||||
"brightWhite": scheme.colors.bright.white
|
||||
}, null, 2);
|
||||
}
|
||||
|
||||
export function generateTerminalApp(scheme: ColorScheme): string {
|
||||
return `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>ANSIBlackColor</key>
|
||||
<data>${colorToBase64(scheme.colors.normal.black)}</data>
|
||||
<key>ANSIRedColor</key>
|
||||
<data>${colorToBase64(scheme.colors.normal.red)}</data>
|
||||
<key>ANSIGreenColor</key>
|
||||
<data>${colorToBase64(scheme.colors.normal.green)}</data>
|
||||
<key>ANSIYellowColor</key>
|
||||
<data>${colorToBase64(scheme.colors.normal.yellow)}</data>
|
||||
<key>ANSIBlueColor</key>
|
||||
<data>${colorToBase64(scheme.colors.normal.blue)}</data>
|
||||
<key>ANSIMagentaColor</key>
|
||||
<data>${colorToBase64(scheme.colors.normal.magenta)}</data>
|
||||
<key>ANSICyanColor</key>
|
||||
<data>${colorToBase64(scheme.colors.normal.cyan)}</data>
|
||||
<key>ANSIWhiteColor</key>
|
||||
<data>${colorToBase64(scheme.colors.normal.white)}</data>
|
||||
<key>ANSIBrightBlackColor</key>
|
||||
<data>${colorToBase64(scheme.colors.bright.black)}</data>
|
||||
<key>ANSIBrightRedColor</key>
|
||||
<data>${colorToBase64(scheme.colors.bright.red)}</data>
|
||||
<key>ANSIBrightGreenColor</key>
|
||||
<data>${colorToBase64(scheme.colors.bright.green)}</data>
|
||||
<key>ANSIBrightYellowColor</key>
|
||||
<data>${colorToBase64(scheme.colors.bright.yellow)}</data>
|
||||
<key>ANSIBrightBlueColor</key>
|
||||
<data>${colorToBase64(scheme.colors.bright.blue)}</data>
|
||||
<key>ANSIBrightMagentaColor</key>
|
||||
<data>${colorToBase64(scheme.colors.bright.magenta)}</data>
|
||||
<key>ANSIBrightCyanColor</key>
|
||||
<data>${colorToBase64(scheme.colors.bright.cyan)}</data>
|
||||
<key>ANSIBrightWhiteColor</key>
|
||||
<data>${colorToBase64(scheme.colors.bright.white)}</data>
|
||||
<key>BackgroundColor</key>
|
||||
<data>${colorToBase64(scheme.colors.primary.background)}</data>
|
||||
<key>TextColor</key>
|
||||
<data>${colorToBase64(scheme.colors.primary.foreground)}</data>
|
||||
<key>CursorColor</key>
|
||||
<data>${colorToBase64(scheme.colors.primary.foreground)}</data>
|
||||
</dict>
|
||||
</plist>`;
|
||||
}
|
||||
|
||||
function colorToBase64(color: string): string {
|
||||
const r = parseInt(color.slice(1, 3), 16) / 255;
|
||||
const g = parseInt(color.slice(3, 5), 16) / 255;
|
||||
const b = parseInt(color.slice(5, 7), 16) / 255;
|
||||
const binaryData = new Float32Array([r, g, b, 1]);
|
||||
return Buffer.from(binaryData.buffer).toString('base64');
|
||||
}
|
||||
|
||||
@ -1 +1,8 @@
|
||||
export type CodeSample = 'c' | 'python' | 'rust' | 'go' | 'javascript' | 'java' | 'bash';
|
||||
export type CodeSample = 'c' | 'python' | 'rust' | 'go' | 'javascript' | 'java' | 'bash';
|
||||
|
||||
export interface AppSettings {
|
||||
outputFormat: string;
|
||||
codeSample: CodeSample;
|
||||
juniorDevMode: boolean;
|
||||
partyMode: boolean;
|
||||
}
|
||||
18
package-lock.json
generated
18
package-lock.json
generated
@ -8,7 +8,9 @@
|
||||
"name": "terminaltinder",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@types/canvas-confetti": "^1.6.4",
|
||||
"@types/color": "^3.0.6",
|
||||
"canvas-confetti": "^1.9.3",
|
||||
"color": "^4.2.3",
|
||||
"framer-motion": "^11.5.4",
|
||||
"next": "14.2.8",
|
||||
@ -487,6 +489,12 @@
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/canvas-confetti": {
|
||||
"version": "1.6.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.6.4.tgz",
|
||||
"integrity": "sha512-fNyZ/Fdw/Y92X0vv7B+BD6ysHL4xVU5dJcgzgxLdGbn8O3PezZNIJpml44lKM0nsGur+o/6+NZbZeNTt00U1uA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/color": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz",
|
||||
@ -1244,6 +1252,16 @@
|
||||
],
|
||||
"license": "CC-BY-4.0"
|
||||
},
|
||||
"node_modules/canvas-confetti": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.3.tgz",
|
||||
"integrity": "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==",
|
||||
"license": "ISC",
|
||||
"funding": {
|
||||
"type": "donate",
|
||||
"url": "https://www.paypal.me/kirilvatev"
|
||||
}
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
|
||||
@ -9,7 +9,9 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/canvas-confetti": "^1.6.4",
|
||||
"@types/color": "^3.0.6",
|
||||
"canvas-confetti": "^1.9.3",
|
||||
"color": "^4.2.3",
|
||||
"framer-motion": "^11.5.4",
|
||||
"next": "14.2.8",
|
||||
|
||||
7
public/question-mark-dark.svg
Normal file
7
public/question-mark-dark.svg
Normal 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"/>
|
||||
<g id="SVGRepo_iconCarrier"> <path d="M11.967 12.75C12.967 11.75 13.967 11.3546 13.967 10.25C13.967 9.14543 13.0716 8.25 11.967 8.25C11.0351 8.25 10.252 8.88739 10.03 9.75M11.967 15.75H11.977M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/> </g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 791 B |
7
public/question-mark-light.svg
Normal file
7
public/question-mark-light.svg
Normal 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"/>
|
||||
<g id="SVGRepo_iconCarrier"> <path d="M11.967 12.75C12.967 11.75 13.967 11.3546 13.967 10.25C13.967 9.14543 13.0716 8.25 11.967 8.25C11.0351 8.25 10.252 8.88739 10.03 9.75M11.967 15.75H11.977M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round"/> </g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 791 B |
Loading…
x
Reference in New Issue
Block a user