Skip to content

Commit

Permalink
let user input color amount and fix a few things
Browse files Browse the repository at this point in the history
  • Loading branch information
@saboooor
saboooor committed Dec 27, 2023
1 parent ccf08d7 commit ec3ebe7
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 61 deletions.
2 changes: 1 addition & 1 deletion postcss.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {},
autoprefixer: {},
},
}
};
2 changes: 1 addition & 1 deletion src/components/elements/NumberInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const RawNumberInput = component$(({ input, onDecrement$, onIncrement$, .
'flex justify-center items-center transition ease-in-out border border-gray-700 bg-gray-800 text-2xl hover:bg-gray-600 h-full py-1.5 cursor-pointer': true,
'px-3 rounded-r-md border-l-0': input,
'w-[50%] rounded-md': !input,
'opacity-50 pointer-events-none': props.value <= props.max,
'opacity-50 pointer-events-none': props.value >= props.max,
}}>
<Add width="24" class="fill-current" />
</button>
Expand Down
43 changes: 27 additions & 16 deletions src/routes/animtab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default component$(() => {
if (key == 'colors') track(() => store.colors.length);
else track(() => store[key]);
});
const { frames } = getAnimFrames(store);
const { frames } = getAnimFrames({ ...store, text: store.text != '' ? store.text : 'SimplyMC' });
if (store.type == 1) {
store.frames = frames.reverse();
}
Expand Down Expand Up @@ -165,7 +165,7 @@ export default component$(() => {

<h1 class={`text-4xl sm:text-6xl my-6 break-all max-w-7xl -space-x-[1px] font${store.bold ? '-bold' : ''}${store.italic ? '-italic' : ''}`}>
{(() => {
const text = store.text ? store.text : 'SimplyMC';
const text = store.text != '' ? store.text : 'SimplyMC';

if (!store.frames[0]) return;
const colors = store.frames[store.frame];
Expand Down Expand Up @@ -207,12 +207,20 @@ export default component$(() => {

<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="hidden sm:flex flex-col gap-3 relative" id="colors">
<NumberInput id="colorsinput"
onIncrement$={() => {
if (store.colors.length < store.text.length) {
store.colors.push(getRandomColor());
setCookie(JSON.stringify(store));
<NumberInput input min={2} value={store.colors.length} id="colorsinput"
onChange$={(event: any) => {
if (event.target!.value < 2) event.target!.value = 2;
const newColors = [];
for (let i = 0; i < event.target!.value; i++) {
if (store.colors[i]) newColors.push(store.colors[i]);
else newColors.push(getRandomColor());
}
store.colors = newColors;
setCookie(JSON.stringify(store));
}}
onIncrement$={() => {
store.colors.push(getRandomColor());
setCookie(JSON.stringify(store));
}}
onDecrement$={() => {
if (store.colors.length > 2) {
Expand All @@ -221,16 +229,19 @@ export default component$(() => {
}
}}
>
{t('color.colorAmount@@Color Amount')} - {store.colors.length}
{t('color.colorAmount@@Color Amount')}
</NumberInput>
<NumberInput id="length" step={1} min={1} onIncrement$={() => {
store.length++;
setCookie(JSON.stringify(store));
}} onDecrement$={() => {
if (store.length > 1) store.length--;
setCookie(JSON.stringify(store));
}}>
{t('animtab.length@@Gradient Length')} - {store.length * store.text.length}
<NumberInput id="length" input disabled value={store.length * store.text.length} min={store.text.length}
onIncrement$={() => {
store.length++;
setCookie(JSON.stringify(store));
}}
onDecrement$={() => {
if (store.length > 1) store.length--;
setCookie(JSON.stringify(store));
}}
>
{t('animtab.length@@Gradient Length')}
</NumberInput>
<div class="flex flex-col gap-2 overflow-auto sm:max-h-[500px]">
{store.colors.map((color: string, i: number) => {
Expand Down
15 changes: 13 additions & 2 deletions src/routes/gradients/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,18 @@ export default component$(() => {

<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="hidden sm:flex flex-col gap-3 relative" id="colors">
<NumberInput id="colorsinput"
<NumberInput input min={2} max={store.text.length} value={store.colors.length} id="colorsinput"
onChange$={(event: any) => {
if (event.target!.value > store.text.length) event.target!.value = store.text.length;
if (event.target!.value < 2) event.target!.value = 2;
const newColors = [];
for (let i = 0; i < event.target!.value; i++) {
if (store.colors[i]) newColors.push(store.colors[i]);
else newColors.push(getRandomColor());
}
store.colors = newColors;
setCookie(JSON.stringify(store));
}}
onIncrement$={() => {
if (store.colors.length < store.text.length) {
store.colors.push(getRandomColor());
Expand All @@ -180,7 +191,7 @@ export default component$(() => {
}
}}
>
{t('color.colorAmount@@Color Amount')} - {store.colors.length}
{t('color.colorAmount@@Color Amount')}
</NumberInput>
<div class="flex flex-col gap-2 overflow-auto sm:max-h-[500px]">
{store.colors.map((color: string, i: number) => {
Expand Down
80 changes: 40 additions & 40 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
/** @type {import('tailwindcss').Config} */

const gray = {
50: "hsl(270deg, 2%, 95%)",
100: "hsl(270deg, 4%, 85%)",
200: "hsl(270deg, 6%, 75%)",
300: "hsl(270deg, 8%, 65%)",
400: "hsl(270deg, 10%, 55%)",
500: "hsl(270deg, 12%, 45%)",
600: "hsl(270deg, 14%, 32%)",
700: "hsl(270deg, 16%, 21%)",
800: "hsl(270deg, 18%, 12%)",
850: "hsl(270deg, 20%, 8%)",
900: "hsl(270deg, 22%, 5%)",
50: 'hsl(270deg, 2%, 95%)',
100: 'hsl(270deg, 4%, 85%)',
200: 'hsl(270deg, 6%, 75%)',
300: 'hsl(270deg, 8%, 65%)',
400: 'hsl(270deg, 10%, 55%)',
500: 'hsl(270deg, 12%, 45%)',
600: 'hsl(270deg, 14%, 32%)',
700: 'hsl(270deg, 16%, 21%)',
800: 'hsl(270deg, 18%, 12%)',
850: 'hsl(270deg, 20%, 8%)',
900: 'hsl(270deg, 22%, 5%)',
};

const luminescent = {
50: "hsl(286deg, 65%, 97%)",
100: "hsl(286deg, 60%, 95%)",
200: "hsl(286deg, 55%, 90%)",
300: "hsl(286deg, 50%, 82%)",
400: "hsl(286deg, 45%, 75%)",
500: "hsl(286deg, 40%, 60%)",
600: "hsl(286deg, 35%, 51%)",
700: "hsl(286deg, 30%, 42%)",
800: "hsl(286deg, 25%, 35%)",
900: "hsl(286deg, 20%, 30%)",
950: "hsl(286deg, 15%, 17%)"
50: 'hsl(286deg, 65%, 97%)',
100: 'hsl(286deg, 60%, 95%)',
200: 'hsl(286deg, 55%, 90%)',
300: 'hsl(286deg, 50%, 82%)',
400: 'hsl(286deg, 45%, 75%)',
500: 'hsl(286deg, 40%, 60%)',
600: 'hsl(286deg, 35%, 51%)',
700: 'hsl(286deg, 30%, 42%)',
800: 'hsl(286deg, 25%, 35%)',
900: 'hsl(286deg, 20%, 30%)',
950: 'hsl(286deg, 15%, 17%)',
};

function getBlobKeyFrame() {
const translateXPercentages = [ 80, 40, 0, -40, -80 ];
const translateYPercentages = [ 0, -25, -50, -75, -100 ];
const scaleValues = [ 0.8, 1, 1.2, 1.4 ];
const rotateValues = [ 0, 90, 180, 270 ];
const translateXPercentages = [80, 40, 0, -40, -80];
const translateYPercentages = [0, -25, -50, -75, -100];
const scaleValues = [0.8, 1, 1.2, 1.4];
const rotateValues = [0, 90, 180, 270];

const translateX0Key = Math.floor(Math.random() * translateXPercentages.length);
const translateX0 = translateXPercentages[translateX0Key];
Expand Down Expand Up @@ -71,29 +71,29 @@ function getBlobKeyFrame() {
const rotate3 = rotateValues[Math.floor(Math.random() * rotateValues.length)];

const keyframe = {
"0%, 100%": { transform: `translate(${translateX0}%, ${translateY0}%) scale(${scale0}) rotate(${rotate0}deg)` },
"25%": { transform: `translate(${translateX1}%, ${translateY1}%) scale(${scale1}) rotate(${rotate1}deg)` },
"50%": { transform: `translate(${translateX2}%, ${translateY2}%) scale(${scale2}) rotate(${rotate2}deg)` },
"75%": { transform: `translate(${translateX3}%, ${translateY3}%) scale(${scale3}) rotate(${rotate3}deg)` }
'0%, 100%': { transform: `translate(${translateX0}%, ${translateY0}%) scale(${scale0}) rotate(${rotate0}deg)` },
'25%': { transform: `translate(${translateX1}%, ${translateY1}%) scale(${scale1}) rotate(${rotate1}deg)` },
'50%': { transform: `translate(${translateX2}%, ${translateY2}%) scale(${scale2}) rotate(${rotate2}deg)` },
'75%': { transform: `translate(${translateX3}%, ${translateY3}%) scale(${scale3}) rotate(${rotate3}deg)` },
};

return keyframe;
};
}

module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: { gray, luminescent },
animation: {
blob: "blob 15s infinite",
blob1: "blob1 15s infinite",
blob2: "blob2 15s infinite",
blob3: "blob3 15s infinite",
blob4: "blob4 15s infinite",
blob5: "blob5 15s infinite",
blob6: "blob6 15s infinite",
float: "float 6s infinite"
blob: 'blob 15s infinite',
blob1: 'blob1 15s infinite',
blob2: 'blob2 15s infinite',
blob3: 'blob3 15s infinite',
blob4: 'blob4 15s infinite',
blob5: 'blob5 15s infinite',
blob6: 'blob6 15s infinite',
float: 'float 6s infinite',
},
keyframes: {
blob: getBlobKeyFrame(),
Expand All @@ -103,7 +103,7 @@ module.exports = {
blob4: getBlobKeyFrame(),
blob5: getBlobKeyFrame(),
blob6: getBlobKeyFrame(),
}
},
},
},
};
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@
}
},
"files": ["./.eslintrc.cjs"],
"include": ["src", "./*.d.ts"]
"include": ["src", "./*.d.ts", "./*.js"],
}

0 comments on commit ec3ebe7

Please sign in to comment.