🎉 Initial version
This commit is contained in:
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["svelte.svelte-vscode"]
|
||||
}
|
||||
12
index.html
Normal file
12
index.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Guess the Color!</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
1830
package-lock.json
generated
Normal file
1830
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
package.json
Normal file
22
package.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "color-guess",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||
"@tsconfig/svelte": "^5.0.2",
|
||||
"svelte": "^4.2.12",
|
||||
"svelte-check": "^3.6.7",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.2.0",
|
||||
"vite-plugin-singlefile": "^2.0.1"
|
||||
}
|
||||
}
|
||||
237
src/App.svelte
Normal file
237
src/App.svelte
Normal file
@ -0,0 +1,237 @@
|
||||
<script lang="ts">
|
||||
import Button from "./Button.svelte";
|
||||
|
||||
function randomRgbColor(): number[] {
|
||||
const r = Math.floor(Math.random() * 255);
|
||||
const g = Math.floor(Math.random() * 255);
|
||||
const b = Math.floor(Math.random() * 255);
|
||||
return [r, g, b];
|
||||
}
|
||||
|
||||
function cmykToRgb(cmyk: number[]): number[] {
|
||||
return [
|
||||
Math.round(255 * (1 - cmyk[0] / 100) * (1 - cmyk[3] / 100)),
|
||||
Math.round(255 * (1 - cmyk[1] / 100) * (1 - cmyk[3] / 100)),
|
||||
Math.round(255 * (1 - cmyk[2] / 100) * (1 - cmyk[3] / 100)),
|
||||
];
|
||||
}
|
||||
|
||||
function rgbToCmyk(rgb: number[]): number[] {
|
||||
let r = rgb[0] / 255;
|
||||
let g = rgb[1] / 255;
|
||||
let b = rgb[2] / 255;
|
||||
let k = 1 - Math.max(r, g, b);
|
||||
let c = Math.round(((1 - r - k) / (1 - k)) * 100);
|
||||
let m = Math.round(((1 - g - k) / (1 - k)) * 100);
|
||||
let y = Math.round(((1 - b - k) / (1 - k)) * 100);
|
||||
return [c || 0, m || 0, y || 0, Math.round(k * 100)];
|
||||
}
|
||||
|
||||
enum Mode {
|
||||
Rgb,
|
||||
Cmyk,
|
||||
}
|
||||
let mode: Mode = Mode.Rgb;
|
||||
|
||||
let targetColor = randomRgbColor();
|
||||
let guessColor = [0, 0, 0];
|
||||
let guessCmykColor = [0, 0, 0, 0];
|
||||
let guessScore: number | undefined = undefined;
|
||||
|
||||
let sideBySide = false;
|
||||
let realtimeScore = false;
|
||||
|
||||
$: {
|
||||
if (mode == Mode.Cmyk) guessColor = cmykToRgb(guessCmykColor);
|
||||
else if (mode == Mode.Rgb) guessCmykColor = rgbToCmyk(guessColor);
|
||||
}
|
||||
$: if (realtimeScore) guessScore = score(targetColor, guessColor);
|
||||
|
||||
// From: https://github.com/susam/myrgb/blob/main/myrgb.html#L206
|
||||
function score(rgb1: number[], rgb2: number[]) {
|
||||
const maxRErr = Math.max(rgb1[0], 15 - rgb1[0]);
|
||||
const maxGErr = Math.max(rgb1[1], 15 - rgb1[1]);
|
||||
const maxBErr = Math.max(rgb1[2], 15 - rgb1[2]);
|
||||
const maxDist = Math.sqrt(
|
||||
maxRErr * maxRErr + maxGErr * maxGErr + maxBErr * maxBErr
|
||||
);
|
||||
const rErr = Math.abs(rgb2[0] - rgb1[0]);
|
||||
const gErr = Math.abs(rgb2[1] - rgb1[1]);
|
||||
const bErr = Math.abs(rgb2[2] - rgb1[2]);
|
||||
const dist = Math.sqrt(rErr * rErr + gErr * gErr + bErr * bErr);
|
||||
return Math.max(0, Math.floor(100 * (1 - dist / maxDist)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="content">
|
||||
<!-- Title -->
|
||||
<h1>
|
||||
Guess the <span class="gradient">color</span>
|
||||
</h1>
|
||||
|
||||
<!-- Color preview -->
|
||||
<div class="color_grid">
|
||||
{#if sideBySide}
|
||||
<div
|
||||
class="color"
|
||||
style:background-color="rgb({guessColor.join(",")})"
|
||||
></div>
|
||||
{/if}
|
||||
<div class="color" style:background-color="rgb({targetColor.join(",")})">
|
||||
{#if guessScore != undefined}
|
||||
<div class="score">{guessScore}%</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sliders -->
|
||||
<div class="slider_container">
|
||||
{#if mode == Mode.Rgb}
|
||||
<!-- RGB Color selection -->
|
||||
{#each guessColor as color, i}
|
||||
<span style:color={["red", "green", "blue"][i]}>
|
||||
{["R", "G", "B"][i]}
|
||||
</span>
|
||||
<span class="slider_value">{color.toString().padStart(3, "0")}</span>
|
||||
<input type="range" min="0" max="255" bind:value={color} />
|
||||
{/each}
|
||||
{:else if mode == Mode.Cmyk}
|
||||
<!-- CMYK Color selection -->
|
||||
{#each guessCmykColor as color, i}
|
||||
<span style:color={["cyan", "magenta", "yellow", "gray"][i]}>
|
||||
{["C", "M", "Y", "K"][i]}
|
||||
</span>
|
||||
<span class="slider_value">{color.toString().padStart(3, "0")}%</span>
|
||||
<input type="range" min="0" max="100" bind:value={color} />
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="buttons">
|
||||
<Button
|
||||
text="Check input"
|
||||
emoji="✅"
|
||||
callback={() => {
|
||||
guessScore = score(targetColor, guessColor);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
text="New Color"
|
||||
emoji="🔄"
|
||||
callback={() => {
|
||||
if (confirm("Generate new color?")) {
|
||||
targetColor = randomRgbColor();
|
||||
guessColor = [0, 0, 0];
|
||||
guessCmykColor = [0, 0, 0, 0];
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
text="Change inout method"
|
||||
emoji="🔀"
|
||||
callback={() => {
|
||||
if (mode == Mode.Rgb) mode = Mode.Cmyk;
|
||||
else mode = Mode.Rgb;
|
||||
}}
|
||||
/>
|
||||
<hr />
|
||||
<Button
|
||||
text="Show solution"
|
||||
emoji="⁉️"
|
||||
callback={() => {
|
||||
if (confirm("Realy show solution?")) {
|
||||
if (mode == Mode.Rgb) {
|
||||
guessColor = structuredClone(targetColor);
|
||||
} else if (mode == Mode.Cmyk) {
|
||||
guessCmykColor = rgbToCmyk(targetColor);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
text="Toggle side by side view"
|
||||
emoji="⏯️"
|
||||
callback={() => {
|
||||
sideBySide = !sideBySide;
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
text="Update score in realtime"
|
||||
emoji={realtimeScore ? "⏸️" : "▶️"}
|
||||
callback={() => {
|
||||
realtimeScore = !realtimeScore;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.gradient {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#0073e6 0%,
|
||||
#80d9e6 50%,
|
||||
#c0e0e6 75%,
|
||||
#d8f0e6 100%
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.color_grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.color {
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.score {
|
||||
font-size: 25px;
|
||||
opacity: 0.7;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.slider_container {
|
||||
margin-top: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content auto;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
gap: 10px;
|
||||
row-gap: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
32
src/Button.svelte
Normal file
32
src/Button.svelte
Normal file
@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import type { MouseEventHandler } from "svelte/elements";
|
||||
|
||||
export let emoji = "";
|
||||
export let text = "";
|
||||
export let callback: MouseEventHandler<HTMLButtonElement>;
|
||||
</script>
|
||||
|
||||
<button class="button" on:click={callback}>
|
||||
<span>{emoji}</span>
|
||||
<span>{text}</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.button {
|
||||
display: block;
|
||||
outline: unset;
|
||||
background: unset;
|
||||
color: unset;
|
||||
border: unset;
|
||||
cursor: pointer;
|
||||
padding: unset;
|
||||
font-size: unset;
|
||||
padding: 5px 5px;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: rgb(46, 46, 46);
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
5
src/app.css
Normal file
5
src/app.css
Normal file
@ -0,0 +1,5 @@
|
||||
body {
|
||||
background-color: #000;
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
8
src/main.ts
Normal file
8
src/main.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app')!,
|
||||
})
|
||||
|
||||
export default app
|
||||
2
src/vite-env.d.ts
vendored
Normal file
2
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
7
svelte.config.js
Normal file
7
svelte.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
export default {
|
||||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
}
|
||||
20
tsconfig.json
Normal file
20
tsconfig.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||
* Note that setting allowJs false does not prevent the use
|
||||
* of JS in `.svelte` files.
|
||||
*/
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"isolatedModules": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
8
vite.config.ts
Normal file
8
vite.config.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
import { viteSingleFile } from "vite-plugin-singlefile"
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [svelte(), viteSingleFile()],
|
||||
})
|
||||
Reference in New Issue
Block a user