refactor: extract shared client utilities
- Add src/lib/client/clipboard.ts with CopyFeedback class - Add src/lib/client/validation.ts with createErrorDisplay and isInteger - Add src/lib/client/animations.ts with popElement - Refactor NumberGenerator, LotteryGenerator, PasswordGenerator, ListGenerator, CardGenerator, CoinGenerator, UuidGenerator, WheelSpinner to use shared utilities - Leave DiceGenerator and ColorGenerator untouched (complex patterns)
This commit is contained in:
emil
@@ -1,188 +1,272 @@
|
||||
---
|
||||
import { useT } from '../../i18n/translations';
|
||||
const isRu = Astro.url.pathname.startsWith('/ru');
|
||||
const T = useT(isRu ? 'ru' : 'en');
|
||||
import { useT } from "../../i18n/translations";
|
||||
const isRu = Astro.url.pathname.startsWith("/ru");
|
||||
const T = useT(isRu ? "ru" : "en");
|
||||
---
|
||||
|
||||
<div id="card-generator" class="mt-8">
|
||||
<div class="flex flex-col sm:flex-row gap-4 items-end">
|
||||
<div class="flex-1">
|
||||
<label for="crd-count" class="block text-sm font-medium text-zinc-400 mb-1">{T.cardsToDraw}</label>
|
||||
<input
|
||||
id="crd-count"
|
||||
type="number"
|
||||
value="1"
|
||||
min="1"
|
||||
max="52"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
aria-label={T.cardsToDraw}
|
||||
/>
|
||||
<div class="flex flex-col sm:flex-row gap-4 items-end">
|
||||
<div class="flex-1">
|
||||
<label
|
||||
for="crd-count"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>{T.cardsToDraw}</label
|
||||
>
|
||||
<input
|
||||
id="crd-count"
|
||||
type="number"
|
||||
value="1"
|
||||
min="1"
|
||||
max="52"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
aria-label={T.cardsToDraw}
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="flex items-center gap-2.5 cursor-pointer select-none group pb-2"
|
||||
>
|
||||
<input
|
||||
id="crd-replace"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer"
|
||||
/>
|
||||
<span
|
||||
class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors"
|
||||
>{T.allowDuplicates}</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<label class="flex items-center gap-2.5 cursor-pointer select-none group pb-2">
|
||||
<input
|
||||
id="crd-replace"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer"
|
||||
/>
|
||||
<span class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors">{T.allowDuplicates}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p
|
||||
id="crd-error"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
class="mt-3 text-sm text-red-500 hidden"
|
||||
></p>
|
||||
|
||||
<div class="my-10 min-h-32 flex flex-col items-center justify-center gap-4">
|
||||
<div
|
||||
id="crd-cards"
|
||||
class="flex flex-wrap justify-center gap-2"
|
||||
aria-live="polite"
|
||||
aria-label="Drawn cards"
|
||||
></div>
|
||||
|
||||
<button
|
||||
id="crd-copy-btn"
|
||||
type="button"
|
||||
aria-label="Copy cards to clipboard"
|
||||
class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
|
||||
<p
|
||||
id="crd-error"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
class="mt-3 text-sm text-red-500 hidden"
|
||||
>
|
||||
<span id="crd-copy-label">{T.copy}</span>
|
||||
<span id="crd-copy-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
|
||||
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="crd-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 6 9 17l-5-5"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="crd-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.draw}
|
||||
</button>
|
||||
</div>
|
||||
<div class="my-10 min-h-32 flex flex-col items-center justify-center gap-4">
|
||||
<div
|
||||
id="crd-cards"
|
||||
class="flex flex-wrap justify-center gap-2"
|
||||
aria-live="polite"
|
||||
aria-label="Drawn cards"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="crd-copy-btn"
|
||||
type="button"
|
||||
aria-label="Copy cards to clipboard"
|
||||
class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
|
||||
>
|
||||
<span id="crd-copy-label">{T.copy}</span>
|
||||
<span id="crd-copy-icon" aria-hidden="true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"
|
||||
></rect>
|
||||
<path
|
||||
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
id="crd-check-icon"
|
||||
class="hidden text-[#534AB7]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20 6 9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="crd-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.draw}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const isRu = document.documentElement.lang === 'ru';
|
||||
const COPY_LABEL = isRu ? 'Копировать' : 'Copy';
|
||||
const COPIED_LABEL = isRu ? 'Скопировано' : 'Copied';
|
||||
const ERR_AT_LEAST = isRu ? 'Вытащите хотя бы 1 карту.' : 'Draw at least 1 card.';
|
||||
const ERR_UNIQUE = isRu ? 'Нельзя вытащить более 52 уникальных карт.' : 'Cannot draw more than 52 unique cards.';
|
||||
const ERR_MAX52 = isRu ? 'Максимум 52 карты одновременно.' : 'Maximum 52 cards at once.';
|
||||
import { CopyFeedback } from "@/lib/client/clipboard";
|
||||
import { createErrorDisplay } from "@/lib/client/validation";
|
||||
|
||||
const countInput = document.getElementById('crd-count') as HTMLInputElement;
|
||||
const replaceCb = document.getElementById('crd-replace') as HTMLInputElement;
|
||||
const btn = document.getElementById('crd-btn') as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById('crd-copy-btn') as HTMLButtonElement;
|
||||
const cardsEl = document.getElementById('crd-cards') as HTMLDivElement;
|
||||
const errorEl = document.getElementById('crd-error') as HTMLParagraphElement;
|
||||
const copyLabel = document.getElementById('crd-copy-label') as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById('crd-copy-icon') as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById('crd-check-icon') as HTMLSpanElement;
|
||||
const isRu = document.documentElement.lang === "ru";
|
||||
const COPY_LABEL = isRu ? "Копировать" : "Copy";
|
||||
const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
|
||||
const ERR_AT_LEAST = isRu
|
||||
? "Вытащите хотя бы 1 карту."
|
||||
: "Draw at least 1 card.";
|
||||
const ERR_UNIQUE = isRu
|
||||
? "Нельзя вытащить более 52 уникальных карт."
|
||||
: "Cannot draw more than 52 unique cards.";
|
||||
const ERR_MAX52 = isRu
|
||||
? "Максимум 52 карты одновременно."
|
||||
: "Maximum 52 cards at once.";
|
||||
|
||||
const RANKS = ['A','2','3','4','5','6','7','8','9','10','J','Q','K'];
|
||||
const SUITS = [
|
||||
{ symbol: '♠', label: 'Spades', red: false },
|
||||
{ symbol: '♥', label: 'Hearts', red: true },
|
||||
{ symbol: '♦', label: 'Diamonds', red: true },
|
||||
{ symbol: '♣', label: 'Clubs', red: false },
|
||||
];
|
||||
const countInput = document.getElementById("crd-count") as HTMLInputElement;
|
||||
const replaceCb = document.getElementById(
|
||||
"crd-replace",
|
||||
) as HTMLInputElement;
|
||||
const btn = document.getElementById("crd-btn") as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById(
|
||||
"crd-copy-btn",
|
||||
) as HTMLButtonElement;
|
||||
const cardsEl = document.getElementById("crd-cards") as HTMLDivElement;
|
||||
const errorEl = document.getElementById(
|
||||
"crd-error",
|
||||
) as HTMLParagraphElement;
|
||||
const copyLabel = document.getElementById(
|
||||
"crd-copy-label",
|
||||
) as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById(
|
||||
"crd-copy-icon",
|
||||
) as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById(
|
||||
"crd-check-icon",
|
||||
) as HTMLSpanElement;
|
||||
|
||||
const DECK = SUITS.flatMap((suit) =>
|
||||
RANKS.map((rank) => ({ rank, suit }))
|
||||
);
|
||||
const RANKS = [
|
||||
"A",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"J",
|
||||
"Q",
|
||||
"K",
|
||||
];
|
||||
const SUITS = [
|
||||
{ symbol: "♠", label: "Spades", red: false },
|
||||
{ symbol: "♥", label: "Hearts", red: true },
|
||||
{ symbol: "♦", label: "Diamonds", red: true },
|
||||
{ symbol: "♣", label: "Clubs", red: false },
|
||||
];
|
||||
|
||||
let lastCards: { rank: string; suit: typeof SUITS[number] }[] = [];
|
||||
let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const DECK = SUITS.flatMap((suit) => RANKS.map((rank) => ({ rank, suit })));
|
||||
|
||||
function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
|
||||
function clearError() { errorEl.textContent = ''; errorEl.classList.add('hidden'); }
|
||||
let lastCards: { rank: string; suit: (typeof SUITS)[number] }[] = [];
|
||||
|
||||
function draw() {
|
||||
const count = parseInt(countInput.value, 10);
|
||||
const withReplacement = replaceCb.checked;
|
||||
const errors = createErrorDisplay(errorEl);
|
||||
const clipboard = new CopyFeedback(copyIcon, checkIcon);
|
||||
|
||||
if (!Number.isInteger(count) || count < 1) { showError(ERR_AT_LEAST); return; }
|
||||
if (!withReplacement && count > 52) { showError(ERR_UNIQUE); return; }
|
||||
if (count > 52) { showError(ERR_MAX52); return; }
|
||||
function draw() {
|
||||
const count = parseInt(countInput.value, 10);
|
||||
const withReplacement = replaceCb.checked;
|
||||
|
||||
clearError();
|
||||
if (!Number.isInteger(count) || count < 1) {
|
||||
errors.show(ERR_AT_LEAST);
|
||||
return;
|
||||
}
|
||||
if (!withReplacement && count > 52) {
|
||||
errors.show(ERR_UNIQUE);
|
||||
return;
|
||||
}
|
||||
if (count > 52) {
|
||||
errors.show(ERR_MAX52);
|
||||
return;
|
||||
}
|
||||
|
||||
if (withReplacement) {
|
||||
lastCards = Array.from({ length: count }, () => DECK[Math.floor(Math.random() * DECK.length)]);
|
||||
} else {
|
||||
const deck = [...DECK];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const j = i + Math.floor(Math.random() * (deck.length - i));
|
||||
[deck[i], deck[j]] = [deck[j], deck[i]];
|
||||
}
|
||||
lastCards = deck.slice(0, count);
|
||||
errors.clear();
|
||||
|
||||
if (withReplacement) {
|
||||
lastCards = Array.from(
|
||||
{ length: count },
|
||||
() => DECK[Math.floor(Math.random() * DECK.length)],
|
||||
);
|
||||
} else {
|
||||
const deck = [...DECK];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const j = i + Math.floor(Math.random() * (deck.length - i));
|
||||
[deck[i], deck[j]] = [deck[j], deck[i]];
|
||||
}
|
||||
lastCards = deck.slice(0, count);
|
||||
}
|
||||
|
||||
renderCards();
|
||||
copyBtn.classList.remove("invisible");
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}
|
||||
|
||||
renderCards();
|
||||
copyBtn.classList.remove('invisible');
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}
|
||||
function renderCards() {
|
||||
cardsEl.innerHTML = "";
|
||||
lastCards.forEach(({ rank, suit }) => {
|
||||
const card = document.createElement("div");
|
||||
card.setAttribute("aria-label", `${rank} of ${suit.label}`);
|
||||
card.className = [
|
||||
"flex flex-col items-center justify-between w-14 h-20 rounded-lg border px-1.5 py-1.5",
|
||||
"bg-zinc-900 border-zinc-700 select-none",
|
||||
suit.red ? "text-red-400" : "text-zinc-100",
|
||||
].join(" ");
|
||||
|
||||
function renderCards() {
|
||||
cardsEl.innerHTML = '';
|
||||
lastCards.forEach(({ rank, suit }) => {
|
||||
const card = document.createElement('div');
|
||||
card.setAttribute('aria-label', `${rank} of ${suit.label}`);
|
||||
card.className = [
|
||||
'flex flex-col items-center justify-between w-14 h-20 rounded-lg border px-1.5 py-1.5',
|
||||
'bg-zinc-900 border-zinc-700 select-none',
|
||||
suit.red ? 'text-red-400' : 'text-zinc-100',
|
||||
].join(' ');
|
||||
const top = document.createElement("div");
|
||||
top.className =
|
||||
"w-full text-left text-sm font-bold leading-none tabular-nums";
|
||||
top.textContent = rank;
|
||||
|
||||
const top = document.createElement('div');
|
||||
top.className = 'w-full text-left text-sm font-bold leading-none tabular-nums';
|
||||
top.textContent = rank;
|
||||
const mid = document.createElement("div");
|
||||
mid.className = "text-2xl leading-none";
|
||||
mid.textContent = suit.symbol;
|
||||
|
||||
const mid = document.createElement('div');
|
||||
mid.className = 'text-2xl leading-none';
|
||||
mid.textContent = suit.symbol;
|
||||
const bot = document.createElement("div");
|
||||
bot.className =
|
||||
"w-full text-right text-sm font-bold leading-none tabular-nums rotate-180";
|
||||
bot.textContent = rank;
|
||||
|
||||
const bot = document.createElement('div');
|
||||
bot.className = 'w-full text-right text-sm font-bold leading-none tabular-nums rotate-180';
|
||||
bot.textContent = rank;
|
||||
card.append(top, mid, bot);
|
||||
cardsEl.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
card.append(top, mid, bot);
|
||||
cardsEl.appendChild(card);
|
||||
async function copyCards() {
|
||||
if (!lastCards.length) return;
|
||||
const text = lastCards
|
||||
.map(({ rank, suit }) => `${rank}${suit.symbol}`)
|
||||
.join(", ");
|
||||
await navigator.clipboard.writeText(text);
|
||||
|
||||
clipboard.showCopied();
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
|
||||
setTimeout(() => {
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
btn.addEventListener("click", draw);
|
||||
copyBtn.addEventListener("click", copyCards);
|
||||
countInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") draw();
|
||||
});
|
||||
}
|
||||
|
||||
async function copyCards() {
|
||||
if (!lastCards.length) return;
|
||||
const text = lastCards.map(({ rank, suit }) => `${rank}${suit.symbol}`).join(', ');
|
||||
await navigator.clipboard.writeText(text);
|
||||
|
||||
copyIcon.classList.add('hidden');
|
||||
checkIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
|
||||
if (copyRevertTimer) clearTimeout(copyRevertTimer);
|
||||
copyRevertTimer = setTimeout(() => {
|
||||
checkIcon.classList.add('hidden');
|
||||
copyIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
btn.addEventListener('click', draw);
|
||||
copyBtn.addEventListener('click', copyCards);
|
||||
countInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') draw(); });
|
||||
</script>
|
||||
|
||||
@@ -1,148 +1,200 @@
|
||||
---
|
||||
import { useT } from '../../i18n/translations';
|
||||
const isRu = Astro.url.pathname.startsWith('/ru');
|
||||
const T = useT(isRu ? 'ru' : 'en');
|
||||
import { useT } from "../../i18n/translations";
|
||||
const isRu = Astro.url.pathname.startsWith("/ru");
|
||||
const T = useT(isRu ? "ru" : "en");
|
||||
---
|
||||
|
||||
<div id="coin-generator" class="mt-8">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label for="coin-count" class="text-sm font-medium text-zinc-400">{T.numberOfCoins}</label>
|
||||
<span id="coin-count-val" class="text-sm font-semibold tabular-nums text-zinc-100">1</span>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label for="coin-count" class="text-sm font-medium text-zinc-400"
|
||||
>{T.numberOfCoins}</label
|
||||
>
|
||||
<span
|
||||
id="coin-count-val"
|
||||
class="text-sm font-semibold tabular-nums text-zinc-100">1</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
id="coin-count"
|
||||
type="range"
|
||||
min="1"
|
||||
max="20"
|
||||
value="1"
|
||||
class="w-full accent-[#534AB7] cursor-pointer"
|
||||
aria-label={T.numberOfCoins}
|
||||
/>
|
||||
<div
|
||||
class="flex justify-between text-xs text-zinc-600 mt-1 select-none"
|
||||
>
|
||||
<span>1</span><span>20</span>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
id="coin-count"
|
||||
type="range"
|
||||
min="1"
|
||||
max="20"
|
||||
value="1"
|
||||
class="w-full accent-[#534AB7] cursor-pointer"
|
||||
aria-label={T.numberOfCoins}
|
||||
/>
|
||||
<div class="flex justify-between text-xs text-zinc-600 mt-1 select-none">
|
||||
<span>1</span><span>20</span>
|
||||
|
||||
<div class="my-10 min-h-28 flex flex-col items-center justify-center gap-4">
|
||||
<div
|
||||
id="coin-coins"
|
||||
class="flex flex-wrap justify-center gap-2"
|
||||
aria-live="polite"
|
||||
aria-label="Coin results"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="coin-summary"
|
||||
class="hidden text-sm text-zinc-500 tabular-nums"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="coin-copy-btn"
|
||||
type="button"
|
||||
aria-label="Copy results to clipboard"
|
||||
class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
|
||||
>
|
||||
<span id="coin-copy-label">{T.copy}</span>
|
||||
<span id="coin-copy-icon" aria-hidden="true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"
|
||||
></rect>
|
||||
<path
|
||||
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
id="coin-check-icon"
|
||||
class="hidden text-[#534AB7]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20 6 9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-10 min-h-28 flex flex-col items-center justify-center gap-4">
|
||||
<div
|
||||
id="coin-coins"
|
||||
class="flex flex-wrap justify-center gap-2"
|
||||
aria-live="polite"
|
||||
aria-label="Coin results"
|
||||
></div>
|
||||
|
||||
<div id="coin-summary" class="hidden text-sm text-zinc-500 tabular-nums"></div>
|
||||
|
||||
<button
|
||||
id="coin-copy-btn"
|
||||
type="button"
|
||||
aria-label="Copy results to clipboard"
|
||||
class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
|
||||
>
|
||||
<span id="coin-copy-label">{T.copy}</span>
|
||||
<span id="coin-copy-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
|
||||
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="coin-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 6 9 17l-5-5"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="coin-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.flip}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="coin-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.flip}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const isRu = document.documentElement.lang === 'ru';
|
||||
const COPY_LABEL = isRu ? 'Копировать' : 'Copy';
|
||||
const COPIED_LABEL = isRu ? 'Скопировано' : 'Copied';
|
||||
const HEADS_LABEL = isRu ? 'О' : 'H';
|
||||
const TAILS_LABEL = isRu ? 'Р' : 'T';
|
||||
const HEADS_WORD = isRu ? 'орёл' : 'Heads';
|
||||
const TAILS_WORD = isRu ? 'решка' : 'Tails';
|
||||
const HEADS_SUMMARY = isRu ? 'орёл' : 'heads';
|
||||
const TAILS_SUMMARY = isRu ? 'решка' : 'tails';
|
||||
import { CopyFeedback } from "@/lib/client/clipboard";
|
||||
|
||||
const countInput = document.getElementById('coin-count') as HTMLInputElement;
|
||||
const countVal = document.getElementById('coin-count-val') as HTMLSpanElement;
|
||||
const btn = document.getElementById('coin-btn') as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById('coin-copy-btn') as HTMLButtonElement;
|
||||
const coinsEl = document.getElementById('coin-coins') as HTMLDivElement;
|
||||
const summaryEl = document.getElementById('coin-summary') as HTMLDivElement;
|
||||
const copyLabel = document.getElementById('coin-copy-label') as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById('coin-copy-icon') as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById('coin-check-icon') as HTMLSpanElement;
|
||||
const isRu = document.documentElement.lang === "ru";
|
||||
const COPY_LABEL = isRu ? "Копировать" : "Copy";
|
||||
const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
|
||||
const HEADS_LABEL = isRu ? "О" : "H";
|
||||
const TAILS_LABEL = isRu ? "Р" : "T";
|
||||
const HEADS_WORD = isRu ? "орёл" : "Heads";
|
||||
const TAILS_WORD = isRu ? "решка" : "Tails";
|
||||
const HEADS_SUMMARY = isRu ? "орёл" : "heads";
|
||||
const TAILS_SUMMARY = isRu ? "решка" : "tails";
|
||||
|
||||
let lastResults: boolean[] = [];
|
||||
let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const countInput = document.getElementById(
|
||||
"coin-count",
|
||||
) as HTMLInputElement;
|
||||
const countVal = document.getElementById(
|
||||
"coin-count-val",
|
||||
) as HTMLSpanElement;
|
||||
const btn = document.getElementById("coin-btn") as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById(
|
||||
"coin-copy-btn",
|
||||
) as HTMLButtonElement;
|
||||
const coinsEl = document.getElementById("coin-coins") as HTMLDivElement;
|
||||
const summaryEl = document.getElementById("coin-summary") as HTMLDivElement;
|
||||
const copyLabel = document.getElementById(
|
||||
"coin-copy-label",
|
||||
) as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById(
|
||||
"coin-copy-icon",
|
||||
) as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById(
|
||||
"coin-check-icon",
|
||||
) as HTMLSpanElement;
|
||||
|
||||
countInput.addEventListener('input', () => {
|
||||
countVal.textContent = countInput.value;
|
||||
});
|
||||
let lastResults: boolean[] = [];
|
||||
|
||||
function flip() {
|
||||
const count = parseInt(countInput.value, 10);
|
||||
lastResults = Array.from({ length: count }, () => Math.random() < 0.5);
|
||||
const clipboard = new CopyFeedback(copyIcon, checkIcon);
|
||||
|
||||
const heads = lastResults.filter(Boolean).length;
|
||||
const tails = count - heads;
|
||||
|
||||
coinsEl.innerHTML = '';
|
||||
lastResults.forEach((isHeads) => {
|
||||
const coin = document.createElement('div');
|
||||
coin.setAttribute('aria-label', isHeads ? HEADS_WORD : TAILS_WORD);
|
||||
coin.className = [
|
||||
'flex flex-col items-center justify-center w-14 h-14 rounded-full border-2 font-bold text-xs select-none',
|
||||
isHeads
|
||||
? 'border-[#534AB7] bg-[#534AB7]/10 text-[#534AB7]'
|
||||
: 'border-zinc-600 bg-zinc-800 text-zinc-400',
|
||||
].join(' ');
|
||||
coin.textContent = isHeads ? HEADS_LABEL : TAILS_LABEL;
|
||||
coinsEl.appendChild(coin);
|
||||
countInput.addEventListener("input", () => {
|
||||
countVal.textContent = countInput.value;
|
||||
});
|
||||
|
||||
if (count > 1) {
|
||||
summaryEl.textContent = `${heads} ${HEADS_SUMMARY} · ${tails} ${TAILS_SUMMARY}`;
|
||||
summaryEl.classList.remove('hidden');
|
||||
} else {
|
||||
summaryEl.classList.add('hidden');
|
||||
function flip() {
|
||||
const count = parseInt(countInput.value, 10);
|
||||
lastResults = Array.from({ length: count }, () => Math.random() < 0.5);
|
||||
|
||||
const heads = lastResults.filter(Boolean).length;
|
||||
const tails = count - heads;
|
||||
|
||||
coinsEl.innerHTML = "";
|
||||
lastResults.forEach((isHeads) => {
|
||||
const coin = document.createElement("div");
|
||||
coin.setAttribute("aria-label", isHeads ? HEADS_WORD : TAILS_WORD);
|
||||
coin.className = [
|
||||
"flex flex-col items-center justify-center w-14 h-14 rounded-full border-2 font-bold text-xs select-none",
|
||||
isHeads
|
||||
? "border-[#534AB7] bg-[#534AB7]/10 text-[#534AB7]"
|
||||
: "border-zinc-600 bg-zinc-800 text-zinc-400",
|
||||
].join(" ");
|
||||
coin.textContent = isHeads ? HEADS_LABEL : TAILS_LABEL;
|
||||
coinsEl.appendChild(coin);
|
||||
});
|
||||
|
||||
if (count > 1) {
|
||||
summaryEl.textContent = `${heads} ${HEADS_SUMMARY} · ${tails} ${TAILS_SUMMARY}`;
|
||||
summaryEl.classList.remove("hidden");
|
||||
} else {
|
||||
summaryEl.classList.add("hidden");
|
||||
}
|
||||
|
||||
copyBtn.classList.remove("invisible");
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}
|
||||
|
||||
copyBtn.classList.remove('invisible');
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}
|
||||
async function copyResults() {
|
||||
if (!lastResults.length) return;
|
||||
const text = lastResults
|
||||
.map((h) => (h ? HEADS_WORD : TAILS_WORD))
|
||||
.join(", ");
|
||||
await navigator.clipboard.writeText(text);
|
||||
|
||||
async function copyResults() {
|
||||
if (!lastResults.length) return;
|
||||
const text = lastResults.map((h) => (h ? HEADS_WORD : TAILS_WORD)).join(', ');
|
||||
await navigator.clipboard.writeText(text);
|
||||
clipboard.showCopied();
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
|
||||
copyIcon.classList.add('hidden');
|
||||
checkIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
setTimeout(() => {
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
if (copyRevertTimer) clearTimeout(copyRevertTimer);
|
||||
copyRevertTimer = setTimeout(() => {
|
||||
checkIcon.classList.add('hidden');
|
||||
copyIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
btn.addEventListener('click', flip);
|
||||
copyBtn.addEventListener('click', copyResults);
|
||||
btn.addEventListener("click", flip);
|
||||
copyBtn.addEventListener("click", copyResults);
|
||||
</script>
|
||||
|
||||
@@ -1,179 +1,251 @@
|
||||
---
|
||||
import { useT } from '../../i18n/translations';
|
||||
const isRu = Astro.url.pathname.startsWith('/ru');
|
||||
const T = useT(isRu ? 'ru' : 'en');
|
||||
import { useT } from "../../i18n/translations";
|
||||
const isRu = Astro.url.pathname.startsWith("/ru");
|
||||
const T = useT(isRu ? "ru" : "en");
|
||||
---
|
||||
|
||||
<div id="list-generator" class="mt-8">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label for="lst-items" class="block text-sm font-medium text-zinc-400 mb-1">
|
||||
{T.items} <span class="text-zinc-600">({T.itemsOneLine})</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="lst-items"
|
||||
rows="6"
|
||||
placeholder="Alice Bob Carol David"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm font-mono focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors resize-y"
|
||||
aria-label={T.items}
|
||||
></textarea>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label
|
||||
for="lst-items"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>
|
||||
{T.items}
|
||||
<span class="text-zinc-600">({T.itemsOneLine})</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="lst-items"
|
||||
rows="6"
|
||||
placeholder="Alice
|
||||
Bob
|
||||
Carol
|
||||
David"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm font-mono focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors resize-y"
|
||||
aria-label={T.items}></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 items-end">
|
||||
<div class="flex-1">
|
||||
<label
|
||||
for="lst-pick"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>{T.pick}</label
|
||||
>
|
||||
<input
|
||||
id="lst-pick"
|
||||
type="number"
|
||||
value="1"
|
||||
min="1"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
aria-label={T.pick}
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="flex items-center gap-2.5 cursor-pointer select-none group pb-2"
|
||||
>
|
||||
<input
|
||||
id="lst-replace"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer"
|
||||
/>
|
||||
<span
|
||||
class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors"
|
||||
>{T.allowDuplicates}</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 items-end">
|
||||
<div class="flex-1">
|
||||
<label for="lst-pick" class="block text-sm font-medium text-zinc-400 mb-1">{T.pick}</label>
|
||||
<input
|
||||
id="lst-pick"
|
||||
type="number"
|
||||
value="1"
|
||||
min="1"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
aria-label={T.pick}
|
||||
/>
|
||||
</div>
|
||||
<label class="flex items-center gap-2.5 cursor-pointer select-none group pb-2">
|
||||
<input
|
||||
id="lst-replace"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer"
|
||||
/>
|
||||
<span class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors">{T.allowDuplicates}</span>
|
||||
</label>
|
||||
<p
|
||||
id="lst-error"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
class="mt-3 text-sm text-red-500 hidden"
|
||||
>
|
||||
</p>
|
||||
|
||||
<div class="my-8 min-h-16 flex flex-col items-center justify-center gap-3">
|
||||
<div
|
||||
id="lst-result"
|
||||
class="flex flex-wrap justify-center gap-2"
|
||||
aria-live="polite"
|
||||
aria-label="Picked items"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="lst-copy-btn"
|
||||
type="button"
|
||||
aria-label="Copy picked items to clipboard"
|
||||
class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
|
||||
>
|
||||
<span id="lst-copy-label">{T.copy}</span>
|
||||
<span id="lst-copy-icon" aria-hidden="true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"
|
||||
></rect>
|
||||
<path
|
||||
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
id="lst-check-icon"
|
||||
class="hidden text-[#534AB7]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20 6 9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
id="lst-error"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
class="mt-3 text-sm text-red-500 hidden"
|
||||
></p>
|
||||
|
||||
<div class="my-8 min-h-16 flex flex-col items-center justify-center gap-3">
|
||||
<div
|
||||
id="lst-result"
|
||||
class="flex flex-wrap justify-center gap-2"
|
||||
aria-live="polite"
|
||||
aria-label="Picked items"
|
||||
></div>
|
||||
|
||||
<button
|
||||
id="lst-copy-btn"
|
||||
type="button"
|
||||
aria-label="Copy picked items to clipboard"
|
||||
class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
|
||||
>
|
||||
<span id="lst-copy-label">{T.copy}</span>
|
||||
<span id="lst-copy-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
|
||||
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="lst-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 6 9 17l-5-5"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="lst-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.pick}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="lst-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.pick}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const isRu = document.documentElement.lang === 'ru';
|
||||
const COPY_LABEL = isRu ? 'Копировать' : 'Copy';
|
||||
const COPIED_LABEL = isRu ? 'Скопировано' : 'Copied';
|
||||
const ERR_ADD_ONE = isRu ? 'Добавьте хотя бы один элемент в список.' : 'Add at least one item to the list.';
|
||||
const ERR_PICK_ONE = isRu ? 'Выберите хотя бы 1 элемент.' : 'Pick at least 1 item.';
|
||||
import { CopyFeedback } from "@/lib/client/clipboard";
|
||||
import { createErrorDisplay } from "@/lib/client/validation";
|
||||
|
||||
const itemsInput = document.getElementById('lst-items') as HTMLTextAreaElement;
|
||||
const pickInput = document.getElementById('lst-pick') as HTMLInputElement;
|
||||
const replaceCb = document.getElementById('lst-replace') as HTMLInputElement;
|
||||
const btn = document.getElementById('lst-btn') as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById('lst-copy-btn') as HTMLButtonElement;
|
||||
const resultEl = document.getElementById('lst-result') as HTMLDivElement;
|
||||
const errorEl = document.getElementById('lst-error') as HTMLParagraphElement;
|
||||
const copyLabel = document.getElementById('lst-copy-label') as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById('lst-copy-icon') as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById('lst-check-icon') as HTMLSpanElement;
|
||||
const isRu = document.documentElement.lang === "ru";
|
||||
const COPY_LABEL = isRu ? "Копировать" : "Copy";
|
||||
const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
|
||||
const ERR_ADD_ONE = isRu
|
||||
? "Добавьте хотя бы один элемент в список."
|
||||
: "Add at least one item to the list.";
|
||||
const ERR_PICK_ONE = isRu
|
||||
? "Выберите хотя бы 1 элемент."
|
||||
: "Pick at least 1 item.";
|
||||
|
||||
let lastPicked: string[] = [];
|
||||
let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const itemsInput = document.getElementById(
|
||||
"lst-items",
|
||||
) as HTMLTextAreaElement;
|
||||
const pickInput = document.getElementById("lst-pick") as HTMLInputElement;
|
||||
const replaceCb = document.getElementById(
|
||||
"lst-replace",
|
||||
) as HTMLInputElement;
|
||||
const btn = document.getElementById("lst-btn") as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById(
|
||||
"lst-copy-btn",
|
||||
) as HTMLButtonElement;
|
||||
const resultEl = document.getElementById("lst-result") as HTMLDivElement;
|
||||
const errorEl = document.getElementById(
|
||||
"lst-error",
|
||||
) as HTMLParagraphElement;
|
||||
const copyLabel = document.getElementById(
|
||||
"lst-copy-label",
|
||||
) as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById(
|
||||
"lst-copy-icon",
|
||||
) as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById(
|
||||
"lst-check-icon",
|
||||
) as HTMLSpanElement;
|
||||
|
||||
function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
|
||||
function clearError() { errorEl.textContent = ''; errorEl.classList.add('hidden'); }
|
||||
let lastPicked: string[] = [];
|
||||
|
||||
function pick() {
|
||||
const items = itemsInput.value.split('\n').map((s) => s.trim()).filter(Boolean);
|
||||
const count = parseInt(pickInput.value, 10);
|
||||
const withReplacement = replaceCb.checked;
|
||||
const errors = createErrorDisplay(errorEl);
|
||||
const clipboard = new CopyFeedback(copyIcon, checkIcon);
|
||||
|
||||
if (items.length === 0) { showError(ERR_ADD_ONE); return; }
|
||||
if (!Number.isInteger(count) || count < 1) { showError(ERR_PICK_ONE); return; }
|
||||
if (!withReplacement && count > items.length) {
|
||||
showError(
|
||||
isRu
|
||||
? `Нельзя выбрать ${count} уникальных элементов из списка ${items.length}.`
|
||||
: `Cannot pick ${count} unique items from a list of ${items.length}.`
|
||||
);
|
||||
return;
|
||||
function pick() {
|
||||
const items = itemsInput.value
|
||||
.split("\n")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
const count = parseInt(pickInput.value, 10);
|
||||
const withReplacement = replaceCb.checked;
|
||||
|
||||
if (items.length === 0) {
|
||||
errors.show(ERR_ADD_ONE);
|
||||
return;
|
||||
}
|
||||
if (!Number.isInteger(count) || count < 1) {
|
||||
errors.show(ERR_PICK_ONE);
|
||||
return;
|
||||
}
|
||||
if (!withReplacement && count > items.length) {
|
||||
errors.show(
|
||||
isRu
|
||||
? `Нельзя выбрать ${count} уникальных элементов из списка ${items.length}.`
|
||||
: `Cannot pick ${count} unique items from a list of ${items.length}.`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
errors.clear();
|
||||
|
||||
if (withReplacement) {
|
||||
lastPicked = Array.from(
|
||||
{ length: count },
|
||||
() => items[Math.floor(Math.random() * items.length)],
|
||||
);
|
||||
} else {
|
||||
const pool = [...items];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const j = i + Math.floor(Math.random() * (pool.length - i));
|
||||
[pool[i], pool[j]] = [pool[j], pool[i]];
|
||||
}
|
||||
lastPicked = pool.slice(0, count);
|
||||
}
|
||||
|
||||
resultEl.innerHTML = "";
|
||||
lastPicked.forEach((item) => {
|
||||
const chip = document.createElement("span");
|
||||
chip.textContent = item;
|
||||
chip.className =
|
||||
"inline-flex items-center px-3 py-1.5 rounded-full border border-[#534AB7]/40 bg-[#534AB7]/10 text-zinc-100 text-sm font-medium";
|
||||
resultEl.appendChild(chip);
|
||||
});
|
||||
|
||||
copyBtn.classList.remove("invisible");
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}
|
||||
|
||||
clearError();
|
||||
async function copyPicked() {
|
||||
if (!lastPicked.length) return;
|
||||
await navigator.clipboard.writeText(lastPicked.join(", "));
|
||||
|
||||
if (withReplacement) {
|
||||
lastPicked = Array.from({ length: count }, () => items[Math.floor(Math.random() * items.length)]);
|
||||
} else {
|
||||
const pool = [...items];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const j = i + Math.floor(Math.random() * (pool.length - i));
|
||||
[pool[i], pool[j]] = [pool[j], pool[i]];
|
||||
}
|
||||
lastPicked = pool.slice(0, count);
|
||||
clipboard.showCopied();
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
|
||||
setTimeout(() => {
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
resultEl.innerHTML = '';
|
||||
lastPicked.forEach((item) => {
|
||||
const chip = document.createElement('span');
|
||||
chip.textContent = item;
|
||||
chip.className =
|
||||
'inline-flex items-center px-3 py-1.5 rounded-full border border-[#534AB7]/40 bg-[#534AB7]/10 text-zinc-100 text-sm font-medium';
|
||||
resultEl.appendChild(chip);
|
||||
btn.addEventListener("click", pick);
|
||||
copyBtn.addEventListener("click", copyPicked);
|
||||
itemsInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter" && e.ctrlKey) pick();
|
||||
});
|
||||
|
||||
copyBtn.classList.remove('invisible');
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}
|
||||
|
||||
async function copyPicked() {
|
||||
if (!lastPicked.length) return;
|
||||
await navigator.clipboard.writeText(lastPicked.join(', '));
|
||||
|
||||
copyIcon.classList.add('hidden');
|
||||
checkIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
|
||||
if (copyRevertTimer) clearTimeout(copyRevertTimer);
|
||||
copyRevertTimer = setTimeout(() => {
|
||||
checkIcon.classList.add('hidden');
|
||||
copyIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
btn.addEventListener('click', pick);
|
||||
copyBtn.addEventListener('click', copyPicked);
|
||||
itemsInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && e.ctrlKey) pick();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,116 +1,224 @@
|
||||
---
|
||||
import { useT } from '../../i18n/translations';
|
||||
const isRu = Astro.url.pathname.startsWith('/ru');
|
||||
const T = useT(isRu ? 'ru' : 'en');
|
||||
import { useT } from "../../i18n/translations";
|
||||
const isRu = Astro.url.pathname.startsWith("/ru");
|
||||
const T = useT(isRu ? "ru" : "en");
|
||||
---
|
||||
|
||||
<div id="lottery-generator" class="mt-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label for="lg-from" class="block text-sm font-medium text-zinc-400 mb-1">{T.from}</label>
|
||||
<input id="lg-from" type="number" value="1" class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors" />
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label
|
||||
for="lg-from"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>{T.from}</label
|
||||
>
|
||||
<input
|
||||
id="lg-from"
|
||||
type="number"
|
||||
value="1"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="lg-to"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>{T.to}</label
|
||||
>
|
||||
<input
|
||||
id="lg-to"
|
||||
type="number"
|
||||
value="49"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="lg-pick"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>{T.pick}</label
|
||||
>
|
||||
<input
|
||||
id="lg-pick"
|
||||
type="number"
|
||||
value="6"
|
||||
min="1"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="lg-to" class="block text-sm font-medium text-zinc-400 mb-1">{T.to}</label>
|
||||
<input id="lg-to" type="number" value="49" class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors" />
|
||||
|
||||
<p
|
||||
id="lg-error"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
class="mt-3 text-sm text-red-500 hidden"
|
||||
>
|
||||
</p>
|
||||
|
||||
<div class="my-10 min-h-24 flex flex-col items-center justify-center gap-4">
|
||||
<div
|
||||
id="lg-result"
|
||||
class="flex flex-wrap justify-center gap-2"
|
||||
aria-live="polite"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
id="lg-copy-btn"
|
||||
type="button"
|
||||
class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
|
||||
>
|
||||
<span id="lg-copy-label">{T.copy}</span>
|
||||
<span id="lg-copy-icon" aria-hidden="true"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><rect width="14" height="14" x="8" y="8" rx="2" ry="2"
|
||||
></rect><path
|
||||
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
|
||||
></path></svg
|
||||
></span
|
||||
>
|
||||
<span
|
||||
id="lg-check-icon"
|
||||
class="hidden text-[#534AB7]"
|
||||
aria-hidden="true"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path d="M20 6 9 17l-5-5"></path></svg
|
||||
></span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<label for="lg-pick" class="block text-sm font-medium text-zinc-400 mb-1">{T.pick}</label>
|
||||
<input id="lg-pick" type="number" value="6" min="1" class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors" />
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="lg-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.draw}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="lg-error" role="alert" aria-live="polite" class="mt-3 text-sm text-red-500 hidden"></p>
|
||||
|
||||
<div class="my-10 min-h-24 flex flex-col items-center justify-center gap-4">
|
||||
<div id="lg-result" class="flex flex-wrap justify-center gap-2" aria-live="polite"></div>
|
||||
<button id="lg-copy-btn" type="button" class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded">
|
||||
<span id="lg-copy-label">{T.copy}</span>
|
||||
<span id="lg-copy-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></span>
|
||||
<span id="lg-check-icon" class="hidden text-[#534AB7]" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button id="lg-btn" type="button" class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer">
|
||||
{T.draw}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const isRu = document.documentElement.lang === 'ru';
|
||||
const ERR_INTEGERS = isRu ? 'Все значения должны быть целыми числами.' : 'All values must be whole numbers.';
|
||||
const ERR_FROM_TO = isRu ? '«От» должно быть меньше «До».' : '"From" must be less than "To".';
|
||||
const ERR_PICK_MIN = isRu ? '«Выбрать» должно быть не менее 1.' : '"Pick" must be at least 1.';
|
||||
const COPY_LABEL = isRu ? 'Копировать' : 'Copy';
|
||||
const COPIED_LABEL = isRu ? 'Скопировано' : 'Copied';
|
||||
import { CopyFeedback } from "@/lib/client/clipboard";
|
||||
import { createErrorDisplay, isInteger } from "@/lib/client/validation";
|
||||
|
||||
const fromInput = document.getElementById('lg-from') as HTMLInputElement;
|
||||
const toInput = document.getElementById('lg-to') as HTMLInputElement;
|
||||
const pickInput = document.getElementById('lg-pick') as HTMLInputElement;
|
||||
const btn = document.getElementById('lg-btn') as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById('lg-copy-btn') as HTMLButtonElement;
|
||||
const resultEl = document.getElementById('lg-result') as HTMLDivElement;
|
||||
const errorEl = document.getElementById('lg-error') as HTMLParagraphElement;
|
||||
const copyLabel = document.getElementById('lg-copy-label') as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById('lg-copy-icon') as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById('lg-check-icon') as HTMLSpanElement;
|
||||
let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const isRu = document.documentElement.lang === "ru";
|
||||
const ERR_INTEGERS = isRu
|
||||
? "Все значения должны быть целыми числами."
|
||||
: "All values must be whole numbers.";
|
||||
const ERR_FROM_TO = isRu
|
||||
? "«От» должно быть меньше «До»."
|
||||
: '"From" must be less than "To".';
|
||||
const ERR_PICK_MIN = isRu
|
||||
? "«Выбрать» должно быть не менее 1."
|
||||
: '"Pick" must be at least 1.';
|
||||
const COPY_LABEL = isRu ? "Копировать" : "Copy";
|
||||
const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
|
||||
|
||||
function isInteger(val: string) { return /^-?\d+$/.test(val.trim()); }
|
||||
function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
|
||||
function clearError() { errorEl.textContent = ''; errorEl.classList.add('hidden'); }
|
||||
const fromInput = document.getElementById("lg-from") as HTMLInputElement;
|
||||
const toInput = document.getElementById("lg-to") as HTMLInputElement;
|
||||
const pickInput = document.getElementById("lg-pick") as HTMLInputElement;
|
||||
const btn = document.getElementById("lg-btn") as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById("lg-copy-btn") as HTMLButtonElement;
|
||||
const resultEl = document.getElementById("lg-result") as HTMLDivElement;
|
||||
const errorEl = document.getElementById("lg-error") as HTMLParagraphElement;
|
||||
const copyLabel = document.getElementById(
|
||||
"lg-copy-label",
|
||||
) as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById("lg-copy-icon") as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById(
|
||||
"lg-check-icon",
|
||||
) as HTMLSpanElement;
|
||||
|
||||
function draw() {
|
||||
if (!isInteger(fromInput.value) || !isInteger(toInput.value) || !isInteger(pickInput.value)) { showError(ERR_INTEGERS); return; }
|
||||
const min = parseInt(fromInput.value, 10);
|
||||
const max = parseInt(toInput.value, 10);
|
||||
const pick = parseInt(pickInput.value, 10);
|
||||
const pool = max - min + 1;
|
||||
if (min >= max) { showError(ERR_FROM_TO); return; }
|
||||
if (pick < 1) { showError(ERR_PICK_MIN); return; }
|
||||
if (pick > pool) {
|
||||
showError(isRu ? `Нельзя выбрать ${pick} уникальных чисел из диапазона ${pool}.` : `Cannot pick ${pick} unique numbers from a range of ${pool}.`);
|
||||
return;
|
||||
const errors = createErrorDisplay(errorEl);
|
||||
const clipboard = new CopyFeedback(copyIcon, checkIcon);
|
||||
|
||||
function draw() {
|
||||
if (
|
||||
!isInteger(fromInput.value) ||
|
||||
!isInteger(toInput.value) ||
|
||||
!isInteger(pickInput.value)
|
||||
) {
|
||||
errors.show(ERR_INTEGERS);
|
||||
return;
|
||||
}
|
||||
const min = parseInt(fromInput.value, 10);
|
||||
const max = parseInt(toInput.value, 10);
|
||||
const pick = parseInt(pickInput.value, 10);
|
||||
const pool = max - min + 1;
|
||||
if (min >= max) {
|
||||
errors.show(ERR_FROM_TO);
|
||||
return;
|
||||
}
|
||||
if (pick < 1) {
|
||||
errors.show(ERR_PICK_MIN);
|
||||
return;
|
||||
}
|
||||
if (pick > pool) {
|
||||
errors.show(
|
||||
isRu
|
||||
? `Нельзя выбрать ${pick} уникальных чисел из диапазона ${pool}.`
|
||||
: `Cannot pick ${pick} unique numbers from a range of ${pool}.`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
errors.clear();
|
||||
const nums = Array.from({ length: pool }, (_, i) => min + i);
|
||||
for (let i = 0; i < pick; i++) {
|
||||
const j = i + Math.floor(Math.random() * (pool - i));
|
||||
[nums[i], nums[j]] = [nums[j], nums[i]];
|
||||
}
|
||||
const picked = nums.slice(0, pick).sort((a, b) => a - b);
|
||||
resultEl.innerHTML = "";
|
||||
picked.forEach((n) => {
|
||||
const ball = document.createElement("span");
|
||||
ball.textContent = String(n);
|
||||
ball.className =
|
||||
"inline-flex items-center justify-center min-w-[2.5rem] h-10 px-2 rounded-full bg-[#534AB7]/15 border border-[#534AB7]/40 text-zinc-100 font-bold tabular-nums text-sm";
|
||||
resultEl.appendChild(ball);
|
||||
});
|
||||
copyBtn.classList.remove("invisible");
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}
|
||||
clearError();
|
||||
const nums = Array.from({ length: pool }, (_, i) => min + i);
|
||||
for (let i = 0; i < pick; i++) {
|
||||
const j = i + Math.floor(Math.random() * (pool - i));
|
||||
[nums[i], nums[j]] = [nums[j], nums[i]];
|
||||
|
||||
async function copyNumbers() {
|
||||
const balls = resultEl.querySelectorAll("span");
|
||||
const value = Array.from(balls)
|
||||
.map((b) => b.textContent)
|
||||
.join(", ");
|
||||
if (!value) return;
|
||||
await navigator.clipboard.writeText(value);
|
||||
clipboard.showCopied();
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
setTimeout(() => {
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
const picked = nums.slice(0, pick).sort((a, b) => a - b);
|
||||
resultEl.innerHTML = '';
|
||||
picked.forEach((n) => {
|
||||
const ball = document.createElement('span');
|
||||
ball.textContent = String(n);
|
||||
ball.className = 'inline-flex items-center justify-center min-w-[2.5rem] h-10 px-2 rounded-full bg-[#534AB7]/15 border border-[#534AB7]/40 text-zinc-100 font-bold tabular-nums text-sm';
|
||||
resultEl.appendChild(ball);
|
||||
|
||||
btn.addEventListener("click", draw);
|
||||
copyBtn.addEventListener("click", copyNumbers);
|
||||
[fromInput, toInput, pickInput].forEach((input) => {
|
||||
input.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") draw();
|
||||
});
|
||||
});
|
||||
copyBtn.classList.remove('invisible');
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}
|
||||
|
||||
async function copyNumbers() {
|
||||
const balls = resultEl.querySelectorAll('span');
|
||||
const value = Array.from(balls).map((b) => b.textContent).join(', ');
|
||||
if (!value) return;
|
||||
await navigator.clipboard.writeText(value);
|
||||
copyIcon.classList.add('hidden');
|
||||
checkIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
if (copyRevertTimer) clearTimeout(copyRevertTimer);
|
||||
copyRevertTimer = setTimeout(() => {
|
||||
checkIcon.classList.add('hidden');
|
||||
copyIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
btn.addEventListener('click', draw);
|
||||
copyBtn.addEventListener('click', copyNumbers);
|
||||
[fromInput, toInput, pickInput].forEach((input) => {
|
||||
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') draw(); });
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,126 +1,182 @@
|
||||
---
|
||||
import { useT } from '../../i18n/translations';
|
||||
const isRu = Astro.url.pathname.startsWith('/ru');
|
||||
const T = useT(isRu ? 'ru' : 'en');
|
||||
import { useT } from "../../i18n/translations";
|
||||
const isRu = Astro.url.pathname.startsWith("/ru");
|
||||
const T = useT(isRu ? "ru" : "en");
|
||||
---
|
||||
|
||||
<div id="number-generator" class="mt-8" data-ru={isRu ? '1' : '0'}>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<div class="flex-1">
|
||||
<label for="ng-from" class="block text-sm font-medium text-zinc-400 mb-1">{T.from}</label>
|
||||
<input
|
||||
id="ng-from"
|
||||
type="number"
|
||||
value="1"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
/>
|
||||
<div id="number-generator" class="mt-8" data-ru={isRu ? "1" : "0"}>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<div class="flex-1">
|
||||
<label
|
||||
for="ng-from"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>{T.from}</label
|
||||
>
|
||||
<input
|
||||
id="ng-from"
|
||||
type="number"
|
||||
value="1"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label
|
||||
for="ng-to"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>{T.to}</label
|
||||
>
|
||||
<input
|
||||
id="ng-to"
|
||||
type="number"
|
||||
value="100"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label for="ng-to" class="block text-sm font-medium text-zinc-400 mb-1">{T.to}</label>
|
||||
<input
|
||||
id="ng-to"
|
||||
type="number"
|
||||
value="100"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
/>
|
||||
|
||||
<p
|
||||
id="ng-error"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
class="mt-2 text-sm text-red-600 hidden"
|
||||
>
|
||||
</p>
|
||||
|
||||
<div class="my-10 min-h-36 flex flex-col items-center justify-center gap-3">
|
||||
<button
|
||||
id="ng-copy-btn"
|
||||
type="button"
|
||||
class="group relative invisible cursor-copy rounded-xl px-3 py-1 -mx-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7]"
|
||||
aria-live="polite"
|
||||
>
|
||||
<span
|
||||
id="ng-result"
|
||||
class="text-8xl font-bold tabular-nums tracking-tight text-zinc-100 select-none group-hover:text-zinc-300"
|
||||
style="transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), opacity 0.08s ease, color 0.15s ease;"
|
||||
></span>
|
||||
<span
|
||||
id="ng-copy-icon"
|
||||
class="absolute -right-7 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-zinc-500"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><rect width="14" height="14" x="8" y="8" rx="2" ry="2"
|
||||
></rect><path
|
||||
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
|
||||
></path></svg
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
id="ng-check-icon"
|
||||
class="absolute -right-7 top-1/2 -translate-y-1/2 hidden text-[#534AB7]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path d="M20 6 9 17l-5-5"></path></svg
|
||||
>
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
id="ng-copied-label"
|
||||
class="text-xs font-medium text-[#534AB7] opacity-0 transition-opacity duration-200"
|
||||
aria-live="polite"
|
||||
aria-atomic="true">{T.copied}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="ng-error" role="alert" aria-live="polite" class="mt-2 text-sm text-red-600 hidden"></p>
|
||||
|
||||
<div class="my-10 min-h-36 flex flex-col items-center justify-center gap-3">
|
||||
<button
|
||||
id="ng-copy-btn"
|
||||
type="button"
|
||||
class="group relative invisible cursor-copy rounded-xl px-3 py-1 -mx-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7]"
|
||||
aria-live="polite"
|
||||
>
|
||||
<span
|
||||
id="ng-result"
|
||||
class="text-8xl font-bold tabular-nums tracking-tight text-zinc-100 select-none group-hover:text-zinc-300"
|
||||
style="transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), opacity 0.08s ease, color 0.15s ease;"
|
||||
></span>
|
||||
<span id="ng-copy-icon" class="absolute -right-7 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-zinc-500" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
|
||||
</span>
|
||||
<span id="ng-check-icon" class="absolute -right-7 top-1/2 -translate-y-1/2 hidden text-[#534AB7]" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<span id="ng-copied-label" class="text-xs font-medium text-[#534AB7] opacity-0 transition-opacity duration-200" aria-live="polite" aria-atomic="true">{T.copied}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="ng-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.generate}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="ng-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.generate}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const isRu = document.documentElement.lang === 'ru';
|
||||
const ERR_INTEGERS = isRu ? 'Оба значения должны быть целыми числами.' : 'Both values must be whole numbers.';
|
||||
const ERR_FROM_TO = isRu ? '«От» должно быть меньше «До».' : '"From" must be less than "To".';
|
||||
import { CopyFeedback } from "@/lib/client/clipboard";
|
||||
import { createErrorDisplay, isInteger } from "@/lib/client/validation";
|
||||
import { popElement } from "@/lib/client/animations";
|
||||
|
||||
const fromInput = document.getElementById('ng-from') as HTMLInputElement;
|
||||
const toInput = document.getElementById('ng-to') as HTMLInputElement;
|
||||
const btn = document.getElementById('ng-btn') as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById('ng-copy-btn') as HTMLButtonElement;
|
||||
const resultEl = document.getElementById('ng-result') as HTMLSpanElement;
|
||||
const errorEl = document.getElementById('ng-error') as HTMLParagraphElement;
|
||||
const copyIcon = document.getElementById('ng-copy-icon') as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById('ng-check-icon') as HTMLSpanElement;
|
||||
const copiedLabel = document.getElementById('ng-copied-label') as HTMLSpanElement;
|
||||
const isRu = document.documentElement.lang === "ru";
|
||||
const ERR_INTEGERS = isRu
|
||||
? "Оба значения должны быть целыми числами."
|
||||
: "Both values must be whole numbers.";
|
||||
const ERR_FROM_TO = isRu
|
||||
? "«От» должно быть меньше «До»."
|
||||
: '"From" must be less than "To".';
|
||||
|
||||
let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const fromInput = document.getElementById("ng-from") as HTMLInputElement;
|
||||
const toInput = document.getElementById("ng-to") as HTMLInputElement;
|
||||
const btn = document.getElementById("ng-btn") as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById("ng-copy-btn") as HTMLButtonElement;
|
||||
const resultEl = document.getElementById("ng-result") as HTMLSpanElement;
|
||||
const errorEl = document.getElementById("ng-error") as HTMLParagraphElement;
|
||||
const copyIcon = document.getElementById("ng-copy-icon") as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById(
|
||||
"ng-check-icon",
|
||||
) as HTMLSpanElement;
|
||||
const copiedLabel = document.getElementById(
|
||||
"ng-copied-label",
|
||||
) as HTMLSpanElement;
|
||||
|
||||
function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
|
||||
function clearError() { errorEl.textContent = ''; errorEl.classList.add('hidden'); }
|
||||
function isInteger(val: string) { return /^-?\d+$/.test(val.trim()); }
|
||||
const errors = createErrorDisplay(errorEl);
|
||||
const clipboard = new CopyFeedback(copyIcon, checkIcon);
|
||||
|
||||
function pop() {
|
||||
resultEl.style.transform = 'scale(1.18)';
|
||||
resultEl.style.opacity = '0.7';
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => {
|
||||
resultEl.style.transform = 'scale(1)';
|
||||
resultEl.style.opacity = '1';
|
||||
}));
|
||||
}
|
||||
function generate() {
|
||||
if (!isInteger(fromInput.value) || !isInteger(toInput.value)) {
|
||||
errors.show(ERR_INTEGERS);
|
||||
return;
|
||||
}
|
||||
const min = parseInt(fromInput.value, 10);
|
||||
const max = parseInt(toInput.value, 10);
|
||||
if (min >= max) {
|
||||
errors.show(ERR_FROM_TO);
|
||||
return;
|
||||
}
|
||||
errors.clear();
|
||||
const result = Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
resultEl.textContent = String(result);
|
||||
copyBtn.classList.remove("invisible");
|
||||
popElement(resultEl);
|
||||
}
|
||||
|
||||
function generate() {
|
||||
if (!isInteger(fromInput.value) || !isInteger(toInput.value)) { showError(ERR_INTEGERS); return; }
|
||||
const min = parseInt(fromInput.value, 10);
|
||||
const max = parseInt(toInput.value, 10);
|
||||
if (min >= max) { showError(ERR_FROM_TO); return; }
|
||||
clearError();
|
||||
const result = Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
resultEl.textContent = String(result);
|
||||
copyBtn.classList.remove('invisible');
|
||||
pop();
|
||||
}
|
||||
async function copyNumber() {
|
||||
const value = resultEl.textContent?.trim();
|
||||
if (!value) return;
|
||||
await navigator.clipboard.writeText(value);
|
||||
clipboard.showCopied();
|
||||
copiedLabel.style.opacity = "1";
|
||||
setTimeout(() => {
|
||||
copiedLabel.style.opacity = "0";
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
async function copyNumber() {
|
||||
const value = resultEl.textContent?.trim();
|
||||
if (!value) return;
|
||||
await navigator.clipboard.writeText(value);
|
||||
copyIcon.classList.add('hidden');
|
||||
checkIcon.classList.remove('hidden');
|
||||
copiedLabel.style.opacity = '1';
|
||||
if (copyRevertTimer) clearTimeout(copyRevertTimer);
|
||||
copyRevertTimer = setTimeout(() => {
|
||||
checkIcon.classList.add('hidden');
|
||||
copyIcon.classList.remove('hidden');
|
||||
copiedLabel.style.opacity = '0';
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
btn.addEventListener('click', generate);
|
||||
copyBtn.addEventListener('click', copyNumber);
|
||||
[fromInput, toInput].forEach((input) => {
|
||||
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') generate(); });
|
||||
});
|
||||
btn.addEventListener("click", generate);
|
||||
copyBtn.addEventListener("click", copyNumber);
|
||||
[fromInput, toInput].forEach((input) => {
|
||||
input.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") generate();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,123 +1,227 @@
|
||||
---
|
||||
import { useT } from '../../i18n/translations';
|
||||
const isRu = Astro.url.pathname.startsWith('/ru');
|
||||
const T = useT(isRu ? 'ru' : 'en');
|
||||
import { useT } from "../../i18n/translations";
|
||||
const isRu = Astro.url.pathname.startsWith("/ru");
|
||||
const T = useT(isRu ? "ru" : "en");
|
||||
---
|
||||
|
||||
<div id="password-generator" class="mt-8">
|
||||
<div class="flex flex-col gap-5">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label for="pg-length" class="text-sm font-medium text-zinc-400">{T.length}</label>
|
||||
<span id="pg-length-val" class="text-sm font-semibold tabular-nums text-zinc-100">16</span>
|
||||
</div>
|
||||
<input id="pg-length" type="range" min="4" max="64" value="16" class="w-full accent-[#534AB7] cursor-pointer" />
|
||||
<div class="flex justify-between text-xs text-zinc-600 mt-1 select-none"><span>4</span><span>64</span></div>
|
||||
<div class="flex flex-col gap-5">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label for="pg-length" class="text-sm font-medium text-zinc-400"
|
||||
>{T.length}</label
|
||||
>
|
||||
<span
|
||||
id="pg-length-val"
|
||||
class="text-sm font-semibold tabular-nums text-zinc-100"
|
||||
>16</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
id="pg-length"
|
||||
type="range"
|
||||
min="4"
|
||||
max="64"
|
||||
value="16"
|
||||
class="w-full accent-[#534AB7] cursor-pointer"
|
||||
/>
|
||||
<div
|
||||
class="flex justify-between text-xs text-zinc-600 mt-1 select-none"
|
||||
>
|
||||
<span>4</span><span>64</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
{
|
||||
[
|
||||
{ id: "pg-upper", label: T.uppercase },
|
||||
{ id: "pg-lower", label: T.lowercase },
|
||||
{ id: "pg-digits", label: T.digits },
|
||||
{ id: "pg-symbols", label: T.symbols },
|
||||
].map(({ id, label }) => (
|
||||
<label class="flex items-center gap-2.5 cursor-pointer select-none group">
|
||||
<input
|
||||
id={id}
|
||||
type="checkbox"
|
||||
checked
|
||||
class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer"
|
||||
/>
|
||||
<span class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors">
|
||||
{label}
|
||||
</span>
|
||||
</label>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
{[
|
||||
{ id: 'pg-upper', label: T.uppercase },
|
||||
{ id: 'pg-lower', label: T.lowercase },
|
||||
{ id: 'pg-digits', label: T.digits },
|
||||
{ id: 'pg-symbols', label: T.symbols },
|
||||
].map(({ id, label }) => (
|
||||
<label class="flex items-center gap-2.5 cursor-pointer select-none group">
|
||||
<input id={id} type="checkbox" checked class="w-4 h-4 rounded accent-[#534AB7] cursor-pointer" />
|
||||
<span class="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors">{label}</span>
|
||||
</label>
|
||||
))}
|
||||
|
||||
<p
|
||||
id="pg-error"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
class="mt-4 text-sm text-red-500 hidden"
|
||||
>
|
||||
</p>
|
||||
|
||||
<div class="my-10 min-h-24 flex flex-col items-center justify-center gap-3">
|
||||
<button
|
||||
id="pg-copy-btn"
|
||||
type="button"
|
||||
class="group relative invisible cursor-copy rounded-xl px-3 py-2 -mx-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7]"
|
||||
>
|
||||
<span
|
||||
id="pg-result"
|
||||
class="font-mono text-2xl sm:text-3xl font-bold tracking-wide text-zinc-100 break-all select-none group-hover:text-zinc-300"
|
||||
style="transition: opacity 0.08s ease, color 0.15s ease;"
|
||||
></span>
|
||||
<span
|
||||
id="pg-copy-icon"
|
||||
class="absolute -right-7 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-zinc-500"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><rect width="14" height="14" x="8" y="8" rx="2" ry="2"
|
||||
></rect><path
|
||||
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
|
||||
></path></svg
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
id="pg-check-icon"
|
||||
class="absolute -right-7 top-1/2 -translate-y-1/2 hidden text-[#534AB7]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path d="M20 6 9 17l-5-5"></path></svg
|
||||
>
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
id="pg-copied-label"
|
||||
class="text-xs font-medium text-[#534AB7] opacity-0 transition-opacity duration-200"
|
||||
aria-live="polite"
|
||||
aria-atomic="true">{T.copied}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="pg-error" role="alert" aria-live="polite" class="mt-4 text-sm text-red-500 hidden"></p>
|
||||
|
||||
<div class="my-10 min-h-24 flex flex-col items-center justify-center gap-3">
|
||||
<button id="pg-copy-btn" type="button" class="group relative invisible cursor-copy rounded-xl px-3 py-2 -mx-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7]">
|
||||
<span id="pg-result" class="font-mono text-2xl sm:text-3xl font-bold tracking-wide text-zinc-100 break-all select-none group-hover:text-zinc-300" style="transition: opacity 0.08s ease, color 0.15s ease;"></span>
|
||||
<span id="pg-copy-icon" class="absolute -right-7 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-zinc-500" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
|
||||
</span>
|
||||
<span id="pg-check-icon" class="absolute -right-7 top-1/2 -translate-y-1/2 hidden text-[#534AB7]" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<span id="pg-copied-label" class="text-xs font-medium text-[#534AB7] opacity-0 transition-opacity duration-200" aria-live="polite" aria-atomic="true">{T.copied}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button id="pg-btn" type="button" class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer">
|
||||
{T.generate}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="pg-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.generate}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const isRu = document.documentElement.lang === 'ru';
|
||||
const ERR_SELECT_TYPE = isRu ? 'Выберите хотя бы один тип символов.' : 'Select at least one character type.';
|
||||
import { CopyFeedback } from "@/lib/client/clipboard";
|
||||
import { createErrorDisplay } from "@/lib/client/validation";
|
||||
|
||||
const lengthInput = document.getElementById('pg-length') as HTMLInputElement;
|
||||
const lengthVal = document.getElementById('pg-length-val') as HTMLSpanElement;
|
||||
const upperCb = document.getElementById('pg-upper') as HTMLInputElement;
|
||||
const lowerCb = document.getElementById('pg-lower') as HTMLInputElement;
|
||||
const digitsCb = document.getElementById('pg-digits') as HTMLInputElement;
|
||||
const symbolsCb = document.getElementById('pg-symbols') as HTMLInputElement;
|
||||
const btn = document.getElementById('pg-btn') as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById('pg-copy-btn') as HTMLButtonElement;
|
||||
const resultEl = document.getElementById('pg-result') as HTMLSpanElement;
|
||||
const errorEl = document.getElementById('pg-error') as HTMLParagraphElement;
|
||||
const copyIcon = document.getElementById('pg-copy-icon') as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById('pg-check-icon') as HTMLSpanElement;
|
||||
const copiedLabel = document.getElementById('pg-copied-label') as HTMLSpanElement;
|
||||
const isRu = document.documentElement.lang === "ru";
|
||||
const ERR_SELECT_TYPE = isRu
|
||||
? "Выберите хотя бы один тип символов."
|
||||
: "Select at least one character type.";
|
||||
|
||||
const UPPER = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
const LOWER = 'abcdefghijklmnopqrstuvwxyz';
|
||||
const DIGITS = '0123456789';
|
||||
const SYMBOLS = '!@#$%^&*()-_=+[]{}|;:,.<>?';
|
||||
let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const lengthInput = document.getElementById(
|
||||
"pg-length",
|
||||
) as HTMLInputElement;
|
||||
const lengthVal = document.getElementById(
|
||||
"pg-length-val",
|
||||
) as HTMLSpanElement;
|
||||
const upperCb = document.getElementById("pg-upper") as HTMLInputElement;
|
||||
const lowerCb = document.getElementById("pg-lower") as HTMLInputElement;
|
||||
const digitsCb = document.getElementById("pg-digits") as HTMLInputElement;
|
||||
const symbolsCb = document.getElementById("pg-symbols") as HTMLInputElement;
|
||||
const btn = document.getElementById("pg-btn") as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById("pg-copy-btn") as HTMLButtonElement;
|
||||
const resultEl = document.getElementById("pg-result") as HTMLSpanElement;
|
||||
const errorEl = document.getElementById("pg-error") as HTMLParagraphElement;
|
||||
const copyIcon = document.getElementById("pg-copy-icon") as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById(
|
||||
"pg-check-icon",
|
||||
) as HTMLSpanElement;
|
||||
const copiedLabel = document.getElementById(
|
||||
"pg-copied-label",
|
||||
) as HTMLSpanElement;
|
||||
|
||||
lengthInput.addEventListener('input', () => { lengthVal.textContent = lengthInput.value; });
|
||||
const UPPER = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
const LOWER = "abcdefghijklmnopqrstuvwxyz";
|
||||
const DIGITS = "0123456789";
|
||||
const SYMBOLS = "!@#$%^&*()-_=+[]{}|;:,.<>?";
|
||||
|
||||
function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
|
||||
function clearError() { errorEl.textContent = ''; errorEl.classList.add('hidden'); }
|
||||
lengthInput.addEventListener("input", () => {
|
||||
lengthVal.textContent = lengthInput.value;
|
||||
});
|
||||
|
||||
function generate() {
|
||||
const length = parseInt(lengthInput.value, 10);
|
||||
const pools: string[] = [];
|
||||
if (upperCb.checked) pools.push(UPPER);
|
||||
if (lowerCb.checked) pools.push(LOWER);
|
||||
if (digitsCb.checked) pools.push(DIGITS);
|
||||
if (symbolsCb.checked) pools.push(SYMBOLS);
|
||||
if (pools.length === 0) { showError(ERR_SELECT_TYPE); return; }
|
||||
clearError();
|
||||
const required = pools.map((p) => p[Math.floor(Math.random() * p.length)]);
|
||||
const combined = pools.join('');
|
||||
const rest = Array.from({ length: length - required.length }, () => combined[Math.floor(Math.random() * combined.length)]);
|
||||
const chars = [...required, ...rest];
|
||||
for (let i = chars.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[chars[i], chars[j]] = [chars[j], chars[i]];
|
||||
const errors = createErrorDisplay(errorEl);
|
||||
const clipboard = new CopyFeedback(copyIcon, checkIcon);
|
||||
|
||||
function generate() {
|
||||
const length = parseInt(lengthInput.value, 10);
|
||||
const pools: string[] = [];
|
||||
if (upperCb.checked) pools.push(UPPER);
|
||||
if (lowerCb.checked) pools.push(LOWER);
|
||||
if (digitsCb.checked) pools.push(DIGITS);
|
||||
if (symbolsCb.checked) pools.push(SYMBOLS);
|
||||
if (pools.length === 0) {
|
||||
errors.show(ERR_SELECT_TYPE);
|
||||
return;
|
||||
}
|
||||
errors.clear();
|
||||
const required = pools.map(
|
||||
(p) => p[Math.floor(Math.random() * p.length)],
|
||||
);
|
||||
const combined = pools.join("");
|
||||
const rest = Array.from(
|
||||
{ length: length - required.length },
|
||||
() => combined[Math.floor(Math.random() * combined.length)],
|
||||
);
|
||||
const chars = [...required, ...rest];
|
||||
for (let i = chars.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[chars[i], chars[j]] = [chars[j], chars[i]];
|
||||
}
|
||||
resultEl.textContent = chars.join("");
|
||||
resultEl.style.opacity = "0.5";
|
||||
requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => {
|
||||
resultEl.style.opacity = "1";
|
||||
}),
|
||||
);
|
||||
copyBtn.classList.remove("invisible");
|
||||
}
|
||||
resultEl.textContent = chars.join('');
|
||||
resultEl.style.opacity = '0.5';
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => { resultEl.style.opacity = '1'; }));
|
||||
copyBtn.classList.remove('invisible');
|
||||
}
|
||||
|
||||
async function copyPassword() {
|
||||
const value = resultEl.textContent?.trim();
|
||||
if (!value) return;
|
||||
await navigator.clipboard.writeText(value);
|
||||
copyIcon.classList.add('hidden');
|
||||
checkIcon.classList.remove('hidden');
|
||||
copiedLabel.style.opacity = '1';
|
||||
if (copyRevertTimer) clearTimeout(copyRevertTimer);
|
||||
copyRevertTimer = setTimeout(() => {
|
||||
checkIcon.classList.add('hidden');
|
||||
copyIcon.classList.remove('hidden');
|
||||
copiedLabel.style.opacity = '0';
|
||||
}, 1500);
|
||||
}
|
||||
async function copyPassword() {
|
||||
const value = resultEl.textContent?.trim();
|
||||
if (!value) return;
|
||||
await navigator.clipboard.writeText(value);
|
||||
clipboard.showCopied();
|
||||
copiedLabel.style.opacity = "1";
|
||||
setTimeout(() => {
|
||||
copiedLabel.style.opacity = "0";
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
btn.addEventListener('click', generate);
|
||||
copyBtn.addEventListener('click', copyPassword);
|
||||
btn.addEventListener("click", generate);
|
||||
copyBtn.addEventListener("click", copyPassword);
|
||||
</script>
|
||||
|
||||
@@ -1,191 +1,263 @@
|
||||
---
|
||||
import { useT } from '../../i18n/translations';
|
||||
const isRu = Astro.url.pathname.startsWith('/ru');
|
||||
const T = useT(isRu ? 'ru' : 'en');
|
||||
import { useT } from "../../i18n/translations";
|
||||
const isRu = Astro.url.pathname.startsWith("/ru");
|
||||
const T = useT(isRu ? "ru" : "en");
|
||||
---
|
||||
|
||||
<div id="uuid-generator" class="mt-8">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-zinc-400 mb-2">{T.type}</label>
|
||||
<div class="flex flex-wrap gap-2" role="radiogroup" aria-label={T.type}>
|
||||
{[
|
||||
{ value: 'uuid', label: 'UUID v4' },
|
||||
{ value: 'hex', label: 'Hex' },
|
||||
{ value: 'base64', label: 'Base64' },
|
||||
].map(({ value, label }) => (
|
||||
<label class="cursor-pointer">
|
||||
<input type="radio" name="ug-type" value={value} class="sr-only peer" checked={value === 'uuid'} />
|
||||
<span class="inline-flex items-center justify-center px-4 h-9 rounded-lg border border-zinc-700 text-sm font-medium text-zinc-400 peer-checked:border-[#534AB7] peer-checked:text-[#534AB7] peer-checked:bg-[#534AB7]/10 hover:border-zinc-500 transition-colors select-none cursor-pointer">
|
||||
{label}
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-zinc-400 mb-2"
|
||||
>{T.type}</label
|
||||
>
|
||||
<div
|
||||
class="flex flex-wrap gap-2"
|
||||
role="radiogroup"
|
||||
aria-label={T.type}
|
||||
>
|
||||
{
|
||||
[
|
||||
{ value: "uuid", label: "UUID v4" },
|
||||
{ value: "hex", label: "Hex" },
|
||||
{ value: "base64", label: "Base64" },
|
||||
].map(({ value, label }) => (
|
||||
<label class="cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="ug-type"
|
||||
value={value}
|
||||
class="sr-only peer"
|
||||
checked={value === "uuid"}
|
||||
/>
|
||||
<span class="inline-flex items-center justify-center px-4 h-9 rounded-lg border border-zinc-700 text-sm font-medium text-zinc-400 peer-checked:border-[#534AB7] peer-checked:text-[#534AB7] peer-checked:bg-[#534AB7]/10 hover:border-zinc-500 transition-colors select-none cursor-pointer">
|
||||
{label}
|
||||
</span>
|
||||
</label>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<div id="ug-length-wrap" class="flex-1 hidden">
|
||||
<label
|
||||
for="ug-length"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>{T.lengthBytes}</label
|
||||
>
|
||||
<input
|
||||
id="ug-length"
|
||||
type="number"
|
||||
value="16"
|
||||
min="4"
|
||||
max="64"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
aria-label={T.lengthBytes}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label
|
||||
for="ug-count"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>{T.count}</label
|
||||
>
|
||||
<input
|
||||
id="ug-count"
|
||||
type="number"
|
||||
value="1"
|
||||
min="1"
|
||||
max="20"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
aria-label={T.count}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="my-8 min-h-16 flex flex-col gap-2"
|
||||
aria-live="polite"
|
||||
aria-label="Generated tokens"
|
||||
>
|
||||
<div id="ug-result" class="flex flex-col gap-2"></div>
|
||||
|
||||
<button
|
||||
id="ug-copy-btn"
|
||||
type="button"
|
||||
aria-label="Copy all tokens to clipboard"
|
||||
class="invisible self-start inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded mt-1"
|
||||
>
|
||||
<span id="ug-copy-label">{T.copyAll}</span>
|
||||
<span id="ug-copy-icon" aria-hidden="true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"
|
||||
></rect>
|
||||
<path
|
||||
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<span
|
||||
id="ug-check-icon"
|
||||
class="hidden text-[#534AB7]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20 6 9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<div id="ug-length-wrap" class="flex-1 hidden">
|
||||
<label for="ug-length" class="block text-sm font-medium text-zinc-400 mb-1">{T.lengthBytes}</label>
|
||||
<input
|
||||
id="ug-length"
|
||||
type="number"
|
||||
value="16"
|
||||
min="4"
|
||||
max="64"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
aria-label={T.lengthBytes}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label for="ug-count" class="block text-sm font-medium text-zinc-400 mb-1">{T.count}</label>
|
||||
<input
|
||||
id="ug-count"
|
||||
type="number"
|
||||
value="1"
|
||||
min="1"
|
||||
max="20"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
|
||||
aria-label={T.count}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="ug-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.generate}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-8 min-h-16 flex flex-col gap-2" aria-live="polite" aria-label="Generated tokens">
|
||||
<div id="ug-result" class="flex flex-col gap-2"></div>
|
||||
|
||||
<button
|
||||
id="ug-copy-btn"
|
||||
type="button"
|
||||
aria-label="Copy all tokens to clipboard"
|
||||
class="invisible self-start inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded mt-1"
|
||||
>
|
||||
<span id="ug-copy-label">{T.copyAll}</span>
|
||||
<span id="ug-copy-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
|
||||
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="ug-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 6 9 17l-5-5"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
id="ug-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
|
||||
>
|
||||
{T.generate}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const isRu = document.documentElement.lang === 'ru';
|
||||
const COPY_ALL_LABEL = isRu ? 'Копировать всё' : 'Copy all';
|
||||
const COPIED_LABEL = isRu ? 'Скопировано' : 'Copied';
|
||||
import { CopyFeedback } from "@/lib/client/clipboard";
|
||||
|
||||
const lengthWrap = document.getElementById('ug-length-wrap') as HTMLDivElement;
|
||||
const lengthInput = document.getElementById('ug-length') as HTMLInputElement;
|
||||
const countInput = document.getElementById('ug-count') as HTMLInputElement;
|
||||
const btn = document.getElementById('ug-btn') as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById('ug-copy-btn') as HTMLButtonElement;
|
||||
const resultEl = document.getElementById('ug-result') as HTMLDivElement;
|
||||
const copyLabel = document.getElementById('ug-copy-label') as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById('ug-copy-icon') as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById('ug-check-icon') as HTMLSpanElement;
|
||||
const isRu = document.documentElement.lang === "ru";
|
||||
const COPY_ALL_LABEL = isRu ? "Копировать всё" : "Copy all";
|
||||
const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
|
||||
|
||||
let lastTokens: string[] = [];
|
||||
let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const lengthWrap = document.getElementById(
|
||||
"ug-length-wrap",
|
||||
) as HTMLDivElement;
|
||||
const lengthInput = document.getElementById(
|
||||
"ug-length",
|
||||
) as HTMLInputElement;
|
||||
const countInput = document.getElementById("ug-count") as HTMLInputElement;
|
||||
const btn = document.getElementById("ug-btn") as HTMLButtonElement;
|
||||
const copyBtn = document.getElementById("ug-copy-btn") as HTMLButtonElement;
|
||||
const resultEl = document.getElementById("ug-result") as HTMLDivElement;
|
||||
const copyLabel = document.getElementById(
|
||||
"ug-copy-label",
|
||||
) as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById("ug-copy-icon") as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById(
|
||||
"ug-check-icon",
|
||||
) as HTMLSpanElement;
|
||||
|
||||
function getType(): string {
|
||||
return (document.querySelector('input[name="ug-type"]:checked') as HTMLInputElement)?.value ?? 'uuid';
|
||||
}
|
||||
let lastTokens: string[] = [];
|
||||
|
||||
document.querySelectorAll('input[name="ug-type"]').forEach((radio) => {
|
||||
radio.addEventListener('change', () => {
|
||||
const type = getType();
|
||||
lengthWrap.classList.toggle('hidden', type === 'uuid');
|
||||
});
|
||||
});
|
||||
const clipboard = new CopyFeedback(copyIcon, checkIcon);
|
||||
|
||||
function uuidV4(): string {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
const r = (crypto.getRandomValues(new Uint8Array(1))[0] & 0xf);
|
||||
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
||||
});
|
||||
}
|
||||
function getType(): string {
|
||||
return (
|
||||
(
|
||||
document.querySelector(
|
||||
'input[name="ug-type"]:checked',
|
||||
) as HTMLInputElement
|
||||
)?.value ?? "uuid"
|
||||
);
|
||||
}
|
||||
|
||||
function randomBytes(n: number): Uint8Array {
|
||||
const buf = new Uint8Array(n);
|
||||
crypto.getRandomValues(buf);
|
||||
return buf;
|
||||
}
|
||||
|
||||
function toHex(bytes: Uint8Array): string {
|
||||
return Array.from(bytes).map((b) => b.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
|
||||
function toBase64(bytes: Uint8Array): string {
|
||||
return btoa(String.fromCharCode(...bytes))
|
||||
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
|
||||
}
|
||||
|
||||
function generate() {
|
||||
const type = getType();
|
||||
const count = parseInt(countInput.value, 10);
|
||||
const length = parseInt(lengthInput.value, 10);
|
||||
|
||||
lastTokens = Array.from({ length: count }, () => {
|
||||
if (type === 'uuid') return uuidV4();
|
||||
if (type === 'hex') return toHex(randomBytes(length));
|
||||
return toBase64(randomBytes(length));
|
||||
document.querySelectorAll('input[name="ug-type"]').forEach((radio) => {
|
||||
radio.addEventListener("change", () => {
|
||||
const type = getType();
|
||||
lengthWrap.classList.toggle("hidden", type === "uuid");
|
||||
});
|
||||
});
|
||||
|
||||
resultEl.innerHTML = '';
|
||||
lastTokens.forEach((token) => {
|
||||
const row = document.createElement('div');
|
||||
row.className =
|
||||
'flex items-center justify-between gap-3 bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2';
|
||||
function uuidV4(): string {
|
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
|
||||
const r = crypto.getRandomValues(new Uint8Array(1))[0] & 0xf;
|
||||
return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
const code = document.createElement('code');
|
||||
code.textContent = token;
|
||||
code.className = 'text-sm font-mono text-zinc-100 break-all';
|
||||
function randomBytes(n: number): Uint8Array {
|
||||
const buf = new Uint8Array(n);
|
||||
crypto.getRandomValues(buf);
|
||||
return buf;
|
||||
}
|
||||
|
||||
row.appendChild(code);
|
||||
resultEl.appendChild(row);
|
||||
function toHex(bytes: Uint8Array): string {
|
||||
return Array.from(bytes)
|
||||
.map((b) => b.toString(16).padStart(2, "0"))
|
||||
.join("");
|
||||
}
|
||||
|
||||
function toBase64(bytes: Uint8Array): string {
|
||||
return btoa(String.fromCharCode(...bytes))
|
||||
.replace(/\+/g, "-")
|
||||
.replace(/\//g, "_")
|
||||
.replace(/=+$/, "");
|
||||
}
|
||||
|
||||
function generate() {
|
||||
const type = getType();
|
||||
const count = parseInt(countInput.value, 10);
|
||||
const length = parseInt(lengthInput.value, 10);
|
||||
|
||||
lastTokens = Array.from({ length: count }, () => {
|
||||
if (type === "uuid") return uuidV4();
|
||||
if (type === "hex") return toHex(randomBytes(length));
|
||||
return toBase64(randomBytes(length));
|
||||
});
|
||||
|
||||
resultEl.innerHTML = "";
|
||||
lastTokens.forEach((token) => {
|
||||
const row = document.createElement("div");
|
||||
row.className =
|
||||
"flex items-center justify-between gap-3 bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2";
|
||||
|
||||
const code = document.createElement("code");
|
||||
code.textContent = token;
|
||||
code.className = "text-sm font-mono text-zinc-100 break-all";
|
||||
|
||||
row.appendChild(code);
|
||||
resultEl.appendChild(row);
|
||||
});
|
||||
|
||||
copyBtn.classList.remove("invisible");
|
||||
copyLabel.textContent = COPY_ALL_LABEL;
|
||||
}
|
||||
|
||||
async function copyAll() {
|
||||
if (!lastTokens.length) return;
|
||||
await navigator.clipboard.writeText(lastTokens.join("\n"));
|
||||
|
||||
clipboard.showCopied();
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
|
||||
setTimeout(() => {
|
||||
copyLabel.textContent = COPY_ALL_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
btn.addEventListener("click", generate);
|
||||
copyBtn.addEventListener("click", copyAll);
|
||||
[countInput, lengthInput].forEach((el) => {
|
||||
el.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") generate();
|
||||
});
|
||||
});
|
||||
|
||||
copyBtn.classList.remove('invisible');
|
||||
copyLabel.textContent = COPY_ALL_LABEL;
|
||||
}
|
||||
|
||||
async function copyAll() {
|
||||
if (!lastTokens.length) return;
|
||||
await navigator.clipboard.writeText(lastTokens.join('\n'));
|
||||
|
||||
copyIcon.classList.add('hidden');
|
||||
checkIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
|
||||
if (copyRevertTimer) clearTimeout(copyRevertTimer);
|
||||
copyRevertTimer = setTimeout(() => {
|
||||
checkIcon.classList.add('hidden');
|
||||
copyIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPY_ALL_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
btn.addEventListener('click', generate);
|
||||
copyBtn.addEventListener('click', copyAll);
|
||||
[countInput, lengthInput].forEach((el) => {
|
||||
el.addEventListener('keydown', (e) => { if (e.key === 'Enter') generate(); });
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,332 +1,436 @@
|
||||
---
|
||||
import { useT } from '../../i18n/translations';
|
||||
const isRu = Astro.url.pathname.startsWith('/ru');
|
||||
const T = useT(isRu ? 'ru' : 'en');
|
||||
import { useT } from "../../i18n/translations";
|
||||
const isRu = Astro.url.pathname.startsWith("/ru");
|
||||
const T = useT(isRu ? "ru" : "en");
|
||||
---
|
||||
|
||||
<div id="wheel-spinner" class="mt-8">
|
||||
|
||||
<!-- Items input -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<div>
|
||||
<label for="ws-items" class="block text-sm font-medium text-zinc-400 mb-1">
|
||||
{T.items} <span class="text-zinc-600">({T.itemsOneLine224})</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="ws-items"
|
||||
rows="6"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm font-mono focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors resize-y"
|
||||
>Alice
|
||||
Bob
|
||||
Carol
|
||||
Dave
|
||||
Eve
|
||||
Frank</textarea>
|
||||
</div>
|
||||
<p id="ws-error" role="alert" aria-live="polite" class="text-sm text-red-500 hidden"></p>
|
||||
</div>
|
||||
|
||||
<!-- Wheel area -->
|
||||
<div class="flex flex-col items-center mt-8 gap-6">
|
||||
<div class="relative w-full max-w-[480px]" id="ws-wheel-wrap">
|
||||
<!-- Pointer: triangle pointing down at top-center of wheel -->
|
||||
<div
|
||||
id="ws-pointer"
|
||||
class="absolute left-1/2 top-0 z-10 -translate-x-1/2 -translate-y-1/2"
|
||||
style="width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid #534AB7;filter:drop-shadow(0 2px 8px rgba(83,74,183,0.6));"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<canvas
|
||||
id="ws-canvas"
|
||||
class="block w-full"
|
||||
aria-label="Wheel of fortune"
|
||||
></canvas>
|
||||
<!-- Items input -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<div>
|
||||
<label
|
||||
for="ws-items"
|
||||
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||
>
|
||||
{T.items}
|
||||
<span class="text-zinc-600">({T.itemsOneLine224})</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="ws-items"
|
||||
rows="6"
|
||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm font-mono focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors resize-y"
|
||||
>Alice Bob Carol Dave Eve Frank</textarea
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
id="ws-error"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
class="text-sm text-red-500 hidden"
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="ws-spin-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-10 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{T.spin}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Wheel area -->
|
||||
<div class="flex flex-col items-center mt-8 gap-6">
|
||||
<div class="relative w-full max-w-[480px]" id="ws-wheel-wrap">
|
||||
<!-- Pointer: triangle pointing down at top-center of wheel -->
|
||||
<div
|
||||
id="ws-pointer"
|
||||
class="absolute left-1/2 top-0 z-10 -translate-x-1/2 -translate-y-1/2"
|
||||
style="width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid #534AB7;filter:drop-shadow(0 2px 8px rgba(83,74,183,0.6));"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</div>
|
||||
<canvas
|
||||
id="ws-canvas"
|
||||
class="block w-full"
|
||||
aria-label="Wheel of fortune"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Result card (hidden until first spin) -->
|
||||
<div id="ws-result-card" class="hidden mt-10 flex flex-col items-center gap-3" aria-live="polite">
|
||||
<p id="ws-winner-label" class="text-xs font-semibold uppercase tracking-widest text-zinc-500">{T.winner}</p>
|
||||
<span id="ws-result-text" class="text-3xl sm:text-4xl font-bold text-zinc-100 text-center break-words max-w-full"></span>
|
||||
<button
|
||||
id="ws-copy-btn"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
|
||||
>
|
||||
<span id="ws-copy-label">{T.copy}</span>
|
||||
<span id="ws-copy-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
|
||||
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="ws-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 6 9 17l-5-5"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
id="ws-spin-btn"
|
||||
type="button"
|
||||
class="w-full sm:w-auto px-10 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{T.spin}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Result card (hidden until first spin) -->
|
||||
<div
|
||||
id="ws-result-card"
|
||||
class="hidden mt-10 flex flex-col items-center gap-3"
|
||||
aria-live="polite"
|
||||
>
|
||||
<p
|
||||
id="ws-winner-label"
|
||||
class="text-xs font-semibold uppercase tracking-widest text-zinc-500"
|
||||
>
|
||||
{T.winner}
|
||||
</p>
|
||||
<span
|
||||
id="ws-result-text"
|
||||
class="text-3xl sm:text-4xl font-bold text-zinc-100 text-center break-words max-w-full"
|
||||
></span>
|
||||
<button
|
||||
id="ws-copy-btn"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
|
||||
>
|
||||
<span id="ws-copy-label">{T.copy}</span>
|
||||
<span id="ws-copy-icon" aria-hidden="true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"
|
||||
></rect>
|
||||
<path
|
||||
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
id="ws-check-icon"
|
||||
class="hidden text-[#534AB7]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20 6 9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes ws-pop {
|
||||
from { transform: scale(0.6); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
.ws-pop { animation: ws-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
|
||||
@keyframes ws-pop {
|
||||
from {
|
||||
transform: scale(0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.ws-pop {
|
||||
animation: ws-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const isRu = document.documentElement.lang === 'ru';
|
||||
const COPY_LABEL = isRu ? 'Копировать' : 'Copy';
|
||||
const COPIED_LABEL = isRu ? 'Скопировано' : 'Copied';
|
||||
const ERR_MIN2 = isRu ? 'Добавьте хотя бы 2 элемента.' : 'Add at least 2 items.';
|
||||
const ERR_MAX24 = isRu ? 'Максимум 24 элемента.' : 'Maximum 24 items.';
|
||||
import { CopyFeedback } from "@/lib/client/clipboard";
|
||||
import { createErrorDisplay } from "@/lib/client/validation";
|
||||
|
||||
const COLORS = ['#534AB7','#0F6E56','#993C1D','#185FA5','#854F0B','#993556','#3B6D11','#A32D2D'];
|
||||
const TAU = 2 * Math.PI;
|
||||
const isRu = document.documentElement.lang === "ru";
|
||||
const COPY_LABEL = isRu ? "Копировать" : "Copy";
|
||||
const COPIED_LABEL = isRu ? "Скопировано" : "Copied";
|
||||
const ERR_MIN2 = isRu
|
||||
? "Добавьте хотя бы 2 элемента."
|
||||
: "Add at least 2 items.";
|
||||
const ERR_MAX24 = isRu ? "Максимум 24 элемента." : "Maximum 24 items.";
|
||||
|
||||
const textarea = document.getElementById('ws-items') as HTMLTextAreaElement;
|
||||
const errorEl = document.getElementById('ws-error') as HTMLParagraphElement;
|
||||
const canvas = document.getElementById('ws-canvas') as HTMLCanvasElement;
|
||||
const spinBtn = document.getElementById('ws-spin-btn') as HTMLButtonElement;
|
||||
const resultCard = document.getElementById('ws-result-card') as HTMLDivElement;
|
||||
const resultText = document.getElementById('ws-result-text') as HTMLSpanElement;
|
||||
const copyBtn = document.getElementById('ws-copy-btn') as HTMLButtonElement;
|
||||
const copyLabel = document.getElementById('ws-copy-label') as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById('ws-copy-icon') as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById('ws-check-icon') as HTMLSpanElement;
|
||||
const wheelWrap = document.getElementById('ws-wheel-wrap') as HTMLDivElement;
|
||||
const COLORS = [
|
||||
"#534AB7",
|
||||
"#0F6E56",
|
||||
"#993C1D",
|
||||
"#185FA5",
|
||||
"#854F0B",
|
||||
"#993556",
|
||||
"#3B6D11",
|
||||
"#A32D2D",
|
||||
];
|
||||
const TAU = 2 * Math.PI;
|
||||
|
||||
const ctx = canvas.getContext('2d')!;
|
||||
let items: string[] = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank'];
|
||||
let currentRotation = 0;
|
||||
let isSpinning = false;
|
||||
let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const textarea = document.getElementById("ws-items") as HTMLTextAreaElement;
|
||||
const errorEl = document.getElementById("ws-error") as HTMLParagraphElement;
|
||||
const canvas = document.getElementById("ws-canvas") as HTMLCanvasElement;
|
||||
const spinBtn = document.getElementById("ws-spin-btn") as HTMLButtonElement;
|
||||
const resultCard = document.getElementById(
|
||||
"ws-result-card",
|
||||
) as HTMLDivElement;
|
||||
const resultText = document.getElementById(
|
||||
"ws-result-text",
|
||||
) as HTMLSpanElement;
|
||||
const copyBtn = document.getElementById("ws-copy-btn") as HTMLButtonElement;
|
||||
const copyLabel = document.getElementById(
|
||||
"ws-copy-label",
|
||||
) as HTMLSpanElement;
|
||||
const copyIcon = document.getElementById("ws-copy-icon") as HTMLSpanElement;
|
||||
const checkIcon = document.getElementById(
|
||||
"ws-check-icon",
|
||||
) as HTMLSpanElement;
|
||||
const wheelWrap = document.getElementById(
|
||||
"ws-wheel-wrap",
|
||||
) as HTMLDivElement;
|
||||
|
||||
// ── Canvas sizing ────────────────────────────────────────────────
|
||||
function resize() {
|
||||
const size = Math.min(wheelWrap.offsetWidth, 480);
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
draw(currentRotation);
|
||||
}
|
||||
new ResizeObserver(resize).observe(wheelWrap);
|
||||
resize();
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
let items: string[] = ["Alice", "Bob", "Carol", "Dave", "Eve", "Frank"];
|
||||
let currentRotation = 0;
|
||||
let isSpinning = false;
|
||||
|
||||
// ── Drawing ──────────────────────────────────────────────────────
|
||||
function clampText(text: string, maxWidth: number): string {
|
||||
if (ctx.measureText(text).width <= maxWidth) return text;
|
||||
let s = text;
|
||||
while (s.length > 0 && ctx.measureText(s + '…').width > maxWidth) s = s.slice(0, -1);
|
||||
return s + '…';
|
||||
}
|
||||
const errors = createErrorDisplay(errorEl);
|
||||
const clipboard = new CopyFeedback(copyIcon, checkIcon);
|
||||
|
||||
function draw(rotation: number) {
|
||||
const size = canvas.width;
|
||||
const r = size / 2 - 6;
|
||||
const n = items.length;
|
||||
const seg = TAU / n;
|
||||
// ── Canvas sizing ────────────────────────────────────────────────
|
||||
function resize() {
|
||||
const size = Math.min(wheelWrap.offsetWidth, 480);
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
draw(currentRotation);
|
||||
}
|
||||
new ResizeObserver(resize).observe(wheelWrap);
|
||||
resize();
|
||||
|
||||
ctx.clearRect(0, 0, size, size);
|
||||
ctx.save();
|
||||
ctx.translate(size / 2, size / 2);
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const a0 = -Math.PI / 2 + i * seg + rotation;
|
||||
const a1 = a0 + seg;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, r, a0, a1);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = COLORS[i % COLORS.length];
|
||||
ctx.fill();
|
||||
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.13)';
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.stroke();
|
||||
|
||||
const mid = a0 + seg / 2;
|
||||
const fontSize = Math.max(9, Math.min(14, Math.floor(r * seg * 0.4)));
|
||||
ctx.save();
|
||||
ctx.rotate(mid);
|
||||
ctx.textAlign = 'right';
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.92)';
|
||||
ctx.font = `bold ${fontSize}px 'Space Grotesk', sans-serif`;
|
||||
const label = clampText(items[i], r * 0.54);
|
||||
ctx.fillText(label, r - 10, fontSize * 0.38);
|
||||
ctx.restore();
|
||||
// ── Drawing ──────────────────────────────────────────────────────
|
||||
function clampText(text: string, maxWidth: number): string {
|
||||
if (ctx.measureText(text).width <= maxWidth) return text;
|
||||
let s = text;
|
||||
while (s.length > 0 && ctx.measureText(s + "…").width > maxWidth)
|
||||
s = s.slice(0, -1);
|
||||
return s + "…";
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, r, 0, TAU);
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.stroke();
|
||||
function draw(rotation: number) {
|
||||
const size = canvas.width;
|
||||
const r = size / 2 - 6;
|
||||
const n = items.length;
|
||||
const seg = TAU / n;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, 15, 0, TAU);
|
||||
ctx.fillStyle = '#18181b';
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.22)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
ctx.clearRect(0, 0, size, size);
|
||||
ctx.save();
|
||||
ctx.translate(size / 2, size / 2);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
for (let i = 0; i < n; i++) {
|
||||
const a0 = -Math.PI / 2 + i * seg + rotation;
|
||||
const a1 = a0 + seg;
|
||||
|
||||
// ── Items ────────────────────────────────────────────────────────
|
||||
function parseItems(): string[] | null {
|
||||
const lines = textarea.value.split('\n').map(l => l.trim()).filter(Boolean);
|
||||
if (lines.length < 2) { showError(ERR_MIN2); return null; }
|
||||
if (lines.length > 24) { showError(ERR_MAX24); return null; }
|
||||
clearError();
|
||||
return lines;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, r, a0, a1);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = COLORS[i % COLORS.length];
|
||||
ctx.fill();
|
||||
|
||||
function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
|
||||
function clearError() { errorEl.textContent = ''; errorEl.classList.add('hidden'); }
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.13)";
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.stroke();
|
||||
|
||||
function applyItems() {
|
||||
const parsed = parseItems();
|
||||
if (parsed) { items = parsed; draw(currentRotation); }
|
||||
}
|
||||
const mid = a0 + seg / 2;
|
||||
const fontSize = Math.max(
|
||||
9,
|
||||
Math.min(14, Math.floor(r * seg * 0.4)),
|
||||
);
|
||||
ctx.save();
|
||||
ctx.rotate(mid);
|
||||
ctx.textAlign = "right";
|
||||
ctx.fillStyle = "rgba(255,255,255,0.92)";
|
||||
ctx.font = `bold ${fontSize}px 'Space Grotesk', sans-serif`;
|
||||
const label = clampText(items[i], r * 0.54);
|
||||
ctx.fillText(label, r - 10, fontSize * 0.38);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
textarea.addEventListener('input', () => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(applyItems, 300);
|
||||
});
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, r, 0, TAU);
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.2)";
|
||||
ctx.lineWidth = 3;
|
||||
ctx.stroke();
|
||||
|
||||
// ── Spin ─────────────────────────────────────────────────────────
|
||||
spinBtn.addEventListener('click', () => {
|
||||
if (isSpinning) return;
|
||||
const parsed = parseItems();
|
||||
if (!parsed) return;
|
||||
items = parsed;
|
||||
draw(currentRotation);
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, 15, 0, TAU);
|
||||
ctx.fillStyle = "#18181b";
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.22)";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
const n = items.length;
|
||||
const seg = TAU / n;
|
||||
const winnerIdx = Math.floor(Math.random() * n);
|
||||
|
||||
const desiredPhase = (-(winnerIdx + 0.5) * seg % TAU + TAU) % TAU;
|
||||
const currentPhase = ((currentRotation % TAU) + TAU) % TAU;
|
||||
let delta = (desiredPhase - currentPhase + TAU) % TAU;
|
||||
if (delta < 0.5) delta += TAU;
|
||||
|
||||
const jitter = (Math.random() - 0.5) * seg * 0.55;
|
||||
const fullTurns = 5 + Math.floor(Math.random() * 3);
|
||||
const totalDelta = fullTurns * TAU + delta + jitter;
|
||||
|
||||
const startRot = currentRotation;
|
||||
const duration = 4000 + Math.random() * 2000;
|
||||
const t0 = performance.now();
|
||||
|
||||
isSpinning = true;
|
||||
spinBtn.disabled = true;
|
||||
resultCard.classList.add('hidden');
|
||||
|
||||
(function animate(now: number) {
|
||||
const p = Math.min((now - t0) / duration, 1);
|
||||
const eased = 1 - Math.pow(1 - p, 3);
|
||||
currentRotation = startRot + totalDelta * eased;
|
||||
draw(currentRotation);
|
||||
|
||||
if (p < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
} else {
|
||||
currentRotation = startRot + totalDelta;
|
||||
isSpinning = false;
|
||||
spinBtn.disabled = false;
|
||||
showResult(items[winnerIdx]);
|
||||
spawnConfetti();
|
||||
}
|
||||
})(t0);
|
||||
});
|
||||
|
||||
// ── Result ───────────────────────────────────────────────────────
|
||||
function showResult(winner: string) {
|
||||
resultText.textContent = winner;
|
||||
resultCard.classList.remove('hidden');
|
||||
resultText.classList.remove('ws-pop');
|
||||
void resultText.offsetWidth;
|
||||
resultText.classList.add('ws-pop');
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
copyIcon.classList.remove('hidden');
|
||||
checkIcon.classList.add('hidden');
|
||||
}
|
||||
|
||||
copyBtn.addEventListener('click', async () => {
|
||||
const value = resultText.textContent?.trim();
|
||||
if (!value) return;
|
||||
await navigator.clipboard.writeText(value);
|
||||
copyIcon.classList.add('hidden');
|
||||
checkIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
if (copyRevertTimer) clearTimeout(copyRevertTimer);
|
||||
copyRevertTimer = setTimeout(() => {
|
||||
checkIcon.classList.add('hidden');
|
||||
copyIcon.classList.remove('hidden');
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
// ── Confetti ─────────────────────────────────────────────────────
|
||||
function spawnConfetti() {
|
||||
const cr = canvas.getBoundingClientRect();
|
||||
const cx = cr.left + cr.width / 2;
|
||||
const cy = cr.top + cr.height / 2;
|
||||
|
||||
type Particle = { el: HTMLDivElement; x: number; y: number; vx: number; vy: number };
|
||||
const particles: Particle[] = [];
|
||||
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const el = document.createElement('div');
|
||||
const w = 4 + Math.random() * 6;
|
||||
const h = 4 + Math.random() * 6;
|
||||
el.style.cssText = `position:fixed;width:${w}px;height:${h}px;` +
|
||||
`background:${COLORS[i % COLORS.length]};border-radius:1px;` +
|
||||
`pointer-events:none;left:${cx}px;top:${cy}px;will-change:transform,opacity;z-index:9999;`;
|
||||
document.body.appendChild(el);
|
||||
|
||||
const angle = Math.random() * TAU;
|
||||
const speed = 4 + Math.random() * 7;
|
||||
particles.push({
|
||||
el, x: cx, y: cy,
|
||||
vx: Math.cos(angle) * speed,
|
||||
vy: -(Math.abs(Math.sin(angle)) * speed + 2 + Math.random() * 4),
|
||||
});
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
const dur = 2500;
|
||||
const t0 = performance.now();
|
||||
const gravity = 0.2;
|
||||
// ── Items ────────────────────────────────────────────────────────
|
||||
function parseItems(): string[] | null {
|
||||
const lines = textarea.value
|
||||
.split("\n")
|
||||
.map((l) => l.trim())
|
||||
.filter(Boolean);
|
||||
if (lines.length < 2) {
|
||||
errors.show(ERR_MIN2);
|
||||
return null;
|
||||
}
|
||||
if (lines.length > 24) {
|
||||
errors.show(ERR_MAX24);
|
||||
return null;
|
||||
}
|
||||
errors.clear();
|
||||
return lines;
|
||||
}
|
||||
|
||||
(function tick(now: number) {
|
||||
const elapsed = now - t0;
|
||||
if (elapsed >= dur) { particles.forEach(p => p.el.remove()); return; }
|
||||
const opacity = 1 - elapsed / dur;
|
||||
particles.forEach(p => {
|
||||
p.vy += gravity;
|
||||
p.vx *= 0.99;
|
||||
p.x += p.vx;
|
||||
p.y += p.vy;
|
||||
p.el.style.transform = `translate(${p.x - cx}px,${p.y - cy}px) rotate(${p.x * 2}deg)`;
|
||||
p.el.style.opacity = String(Math.max(0, opacity));
|
||||
});
|
||||
requestAnimationFrame(tick);
|
||||
})(t0);
|
||||
}
|
||||
function applyItems() {
|
||||
const parsed = parseItems();
|
||||
if (parsed) {
|
||||
items = parsed;
|
||||
draw(currentRotation);
|
||||
}
|
||||
}
|
||||
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
textarea.addEventListener("input", () => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(applyItems, 300);
|
||||
});
|
||||
|
||||
// ── Spin ─────────────────────────────────────────────────────────
|
||||
spinBtn.addEventListener("click", () => {
|
||||
if (isSpinning) return;
|
||||
const parsed = parseItems();
|
||||
if (!parsed) return;
|
||||
items = parsed;
|
||||
draw(currentRotation);
|
||||
|
||||
const n = items.length;
|
||||
const seg = TAU / n;
|
||||
const winnerIdx = Math.floor(Math.random() * n);
|
||||
|
||||
const desiredPhase = (((-(winnerIdx + 0.5) * seg) % TAU) + TAU) % TAU;
|
||||
const currentPhase = ((currentRotation % TAU) + TAU) % TAU;
|
||||
let delta = (desiredPhase - currentPhase + TAU) % TAU;
|
||||
if (delta < 0.5) delta += TAU;
|
||||
|
||||
const jitter = (Math.random() - 0.5) * seg * 0.55;
|
||||
const fullTurns = 5 + Math.floor(Math.random() * 3);
|
||||
const totalDelta = fullTurns * TAU + delta + jitter;
|
||||
|
||||
const startRot = currentRotation;
|
||||
const duration = 4000 + Math.random() * 2000;
|
||||
const t0 = performance.now();
|
||||
|
||||
isSpinning = true;
|
||||
spinBtn.disabled = true;
|
||||
resultCard.classList.add("hidden");
|
||||
|
||||
(function animate(now: number) {
|
||||
const p = Math.min((now - t0) / duration, 1);
|
||||
const eased = 1 - Math.pow(1 - p, 3);
|
||||
currentRotation = startRot + totalDelta * eased;
|
||||
draw(currentRotation);
|
||||
|
||||
if (p < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
} else {
|
||||
currentRotation = startRot + totalDelta;
|
||||
isSpinning = false;
|
||||
spinBtn.disabled = false;
|
||||
showResult(items[winnerIdx]);
|
||||
spawnConfetti();
|
||||
}
|
||||
})(t0);
|
||||
});
|
||||
|
||||
// ── Result ───────────────────────────────────────────────────────
|
||||
function showResult(winner: string) {
|
||||
resultText.textContent = winner;
|
||||
resultCard.classList.remove("hidden");
|
||||
resultText.classList.remove("ws-pop");
|
||||
void resultText.offsetWidth;
|
||||
resultText.classList.add("ws-pop");
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
copyIcon.classList.remove("hidden");
|
||||
checkIcon.classList.add("hidden");
|
||||
}
|
||||
|
||||
async function copyResult() {
|
||||
const value = resultText.textContent?.trim();
|
||||
if (!value) return;
|
||||
await navigator.clipboard.writeText(value);
|
||||
clipboard.showCopied();
|
||||
copyLabel.textContent = COPIED_LABEL;
|
||||
setTimeout(() => {
|
||||
copyLabel.textContent = COPY_LABEL;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
copyBtn.addEventListener("click", copyResult);
|
||||
|
||||
// ── Confetti ─────────────────────────────────────────────────────
|
||||
function spawnConfetti() {
|
||||
const cr = canvas.getBoundingClientRect();
|
||||
const cx = cr.left + cr.width / 2;
|
||||
const cy = cr.top + cr.height / 2;
|
||||
|
||||
type Particle = {
|
||||
el: HTMLDivElement;
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
};
|
||||
const particles: Particle[] = [];
|
||||
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const el = document.createElement("div");
|
||||
const w = 4 + Math.random() * 6;
|
||||
const h = 4 + Math.random() * 6;
|
||||
el.style.cssText =
|
||||
`position:fixed;width:${w}px;height:${h}px;` +
|
||||
`background:${COLORS[i % COLORS.length]};border-radius:1px;` +
|
||||
`pointer-events:none;left:${cx}px;top:${cy}px;will-change:transform,opacity;z-index:9999;`;
|
||||
document.body.appendChild(el);
|
||||
|
||||
const angle = Math.random() * TAU;
|
||||
const speed = 4 + Math.random() * 7;
|
||||
particles.push({
|
||||
el,
|
||||
x: cx,
|
||||
y: cy,
|
||||
vx: Math.cos(angle) * speed,
|
||||
vy: -(
|
||||
Math.abs(Math.sin(angle)) * speed +
|
||||
2 +
|
||||
Math.random() * 4
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
const dur = 2500;
|
||||
const t0 = performance.now();
|
||||
const gravity = 0.2;
|
||||
|
||||
(function tick(now: number) {
|
||||
const elapsed = now - t0;
|
||||
if (elapsed >= dur) {
|
||||
particles.forEach((p) => p.el.remove());
|
||||
return;
|
||||
}
|
||||
const opacity = 1 - elapsed / dur;
|
||||
particles.forEach((p) => {
|
||||
p.vy += gravity;
|
||||
p.vx *= 0.99;
|
||||
p.x += p.vx;
|
||||
p.y += p.vy;
|
||||
p.el.style.transform = `translate(${p.x - cx}px,${p.y - cy}px) rotate(${p.x * 2}deg)`;
|
||||
p.el.style.opacity = String(Math.max(0, opacity));
|
||||
});
|
||||
requestAnimationFrame(tick);
|
||||
})(t0);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
export function popElement(el: HTMLElement) {
|
||||
el.style.transform = 'scale(1.18)';
|
||||
el.style.opacity = '0.7';
|
||||
requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => {
|
||||
el.style.transform = 'scale(1)';
|
||||
el.style.opacity = '1';
|
||||
})
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
export class CopyFeedback {
|
||||
private timer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
constructor(
|
||||
private copyIcon: HTMLElement,
|
||||
private checkIcon: HTMLElement,
|
||||
private duration = 1500
|
||||
) {}
|
||||
|
||||
showCopied() {
|
||||
this.copyIcon.classList.add('hidden');
|
||||
this.checkIcon.classList.remove('hidden');
|
||||
if (this.timer) clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => this.revert(), this.duration);
|
||||
}
|
||||
|
||||
revert() {
|
||||
this.checkIcon.classList.add('hidden');
|
||||
this.copyIcon.classList.remove('hidden');
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
if (this.timer) clearTimeout(this.timer);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
export function createErrorDisplay(errorEl: HTMLElement) {
|
||||
return {
|
||||
show(msg: string) {
|
||||
errorEl.textContent = msg;
|
||||
errorEl.classList.remove('hidden');
|
||||
},
|
||||
clear() {
|
||||
errorEl.textContent = '';
|
||||
errorEl.classList.add('hidden');
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function isInteger(val: string): boolean {
|
||||
return /^-?\d+$/.test(val.trim());
|
||||
}
|
||||
Reference in New Issue
Block a user