Refactor: Extract utils, cleanup timer logic, fix share screenshot
This commit is contained in:
@@ -1,11 +1,10 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { usePuzzleStore } from '@/stores/puzzle';
|
||||
import { useTimer } from '@/composables/useTimer';
|
||||
import { formatTime } from '@/utils/timeUtils';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
|
||||
const store = usePuzzleStore();
|
||||
const { formatTime } = useTimer();
|
||||
const { t } = useI18n();
|
||||
|
||||
const isVisible = ref(false);
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { usePuzzleStore } from '@/stores/puzzle';
|
||||
import { useTimer } from '@/composables/useTimer';
|
||||
import { formatTime } from '@/utils/timeUtils';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { RotateCcw, RefreshCw, Eye, Undo } from 'lucide-vue-next';
|
||||
|
||||
const store = usePuzzleStore();
|
||||
const { formatTime } = useTimer();
|
||||
const { t } = useI18n();
|
||||
|
||||
const formattedTime = computed(() => formatTime(store.elapsedTime));
|
||||
|
||||
@@ -3,17 +3,20 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { Fireworks } from 'fireworks-js';
|
||||
import { usePuzzleStore } from '@/stores/puzzle';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { useTimer } from '@/composables/useTimer';
|
||||
import { formatTime } from '@/utils/timeUtils';
|
||||
import { playFanfare, cleanupAudio } from '@/utils/audio';
|
||||
import {
|
||||
buildShareUrl,
|
||||
downloadShareSVG as utilsDownloadShareSVG,
|
||||
downloadShareImage as utilsDownloadShareImage,
|
||||
createShareBlob
|
||||
} from '@/utils/shareUtils';
|
||||
import { Download, FileCode } from 'lucide-vue-next';
|
||||
import { calculateDifficulty } from '@/utils/puzzleUtils';
|
||||
|
||||
const store = usePuzzleStore();
|
||||
const { t } = useI18n();
|
||||
const { formatTime } = useTimer();
|
||||
const fireworksRef = ref(null);
|
||||
let fireworksInstance = null;
|
||||
let audioContext = null;
|
||||
let masterGain = null;
|
||||
const shareInProgress = ref(false);
|
||||
|
||||
const formattedTime = computed(() => formatTime(store.elapsedTime));
|
||||
@@ -29,57 +32,6 @@ const handleKeyDown = (e) => {
|
||||
}
|
||||
};
|
||||
|
||||
const playFanfare = async () => {
|
||||
const AudioCtx = window.AudioContext || window.webkitAudioContext;
|
||||
if (!AudioCtx) return;
|
||||
audioContext = new AudioCtx();
|
||||
if (audioContext.state === 'suspended') {
|
||||
try {
|
||||
await audioContext.resume();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
masterGain = audioContext.createGain();
|
||||
masterGain.gain.value = 0.25; // Slightly louder but softer tone
|
||||
masterGain.connect(audioContext.destination);
|
||||
|
||||
const now = audioContext.currentTime;
|
||||
|
||||
const playNote = (freq, startTime, duration) => {
|
||||
const osc = audioContext.createOscillator();
|
||||
const gain = audioContext.createGain();
|
||||
|
||||
// Mix of sine and triangle for a bell-like quality
|
||||
osc.type = 'sine';
|
||||
osc.frequency.value = freq;
|
||||
|
||||
// Envelope for elegant bell/chime sound
|
||||
gain.gain.setValueAtTime(0, startTime);
|
||||
gain.gain.linearRampToValueAtTime(0.4, startTime + 0.05); // Soft attack
|
||||
gain.gain.exponentialRampToValueAtTime(0.01, startTime + duration); // Long release
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(masterGain);
|
||||
|
||||
osc.start(startTime);
|
||||
osc.stop(startTime + duration + 0.1);
|
||||
};
|
||||
|
||||
// C Major 7 Arpeggio sequence (C5, E5, G5, B5, C6) - Elegant & Uplifting
|
||||
const sequence = [
|
||||
{ freq: 523.25, time: 0.0, dur: 0.8 }, // C5
|
||||
{ freq: 659.25, time: 0.1, dur: 0.8 }, // E5
|
||||
{ freq: 783.99, time: 0.2, dur: 0.8 }, // G5
|
||||
{ freq: 987.77, time: 0.3, dur: 0.8 }, // B5 (Maj7)
|
||||
{ freq: 1046.50, time: 0.4, dur: 2.0 }, // C6 (High C resolve)
|
||||
// Add a bass root note at the end for fullness
|
||||
{ freq: 523.25, time: 0.4, dur: 2.0 } // C5
|
||||
];
|
||||
|
||||
sequence.forEach(note => playNote(note.freq, now + note.time, note.dur));
|
||||
};
|
||||
|
||||
const triggerVibration = () => {
|
||||
if (!('vibrate' in navigator)) return;
|
||||
const isCoarse = window.matchMedia?.('(pointer: coarse)')?.matches;
|
||||
@@ -89,286 +41,19 @@ const triggerVibration = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const buildShareCanvas = () => {
|
||||
const grid = store.playerGrid;
|
||||
if (!grid || !grid.length) return null;
|
||||
const appUrl = 'https://nonograms.7u.pl/';
|
||||
const size = store.size;
|
||||
const maxBoard = 640;
|
||||
const cellSize = Math.max(8, Math.floor(maxBoard / size));
|
||||
const boardSize = cellSize * size;
|
||||
const padding = 28;
|
||||
const headerHeight = 64;
|
||||
const footerHeight = 28;
|
||||
const infoHeight = 40; // New space for difficulty/guide info
|
||||
const width = boardSize + padding * 2;
|
||||
const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
|
||||
const scale = window.devicePixelRatio || 1;
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width * scale;
|
||||
canvas.height = height * scale;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return null;
|
||||
ctx.scale(scale, scale);
|
||||
const bg = ctx.createLinearGradient(0, 0, width, height);
|
||||
bg.addColorStop(0, '#1b2a4a');
|
||||
bg.addColorStop(1, '#0a1324');
|
||||
ctx.fillStyle = bg;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.35)';
|
||||
ctx.fillRect(12, 12, width - 24, height - 24);
|
||||
ctx.fillStyle = '#e8fbff';
|
||||
ctx.font = '700 26px "Segoe UI", sans-serif';
|
||||
ctx.fillText(t('app.title'), padding, padding + 10);
|
||||
ctx.font = '600 16px "Segoe UI", sans-serif';
|
||||
ctx.fillText(`${t('win.time')} ${formattedTime.value}`, padding, padding + 34);
|
||||
|
||||
// Difficulty & Density Info
|
||||
const densityPercent = Math.round(store.currentDensity * 100);
|
||||
const difficultyKey = calculateDifficulty(store.currentDensity);
|
||||
let diffColor = '#33ff33';
|
||||
if (difficultyKey === 'extreme') diffColor = '#ff3333';
|
||||
else if (difficultyKey === 'hardest') diffColor = '#ff9933';
|
||||
else if (difficultyKey === 'harder') diffColor = '#ffff33';
|
||||
|
||||
const difficultyText = t(`difficulty.${difficultyKey}`);
|
||||
ctx.font = '600 14px "Segoe UI", sans-serif';
|
||||
|
||||
// Right aligned difficulty info
|
||||
const diffLabel = `${t('win.difficulty')} ${difficultyText} (${densityPercent}%)`;
|
||||
const diffWidth = ctx.measureText(diffLabel).width;
|
||||
ctx.fillStyle = diffColor;
|
||||
ctx.fillText(diffLabel, width - padding - diffWidth, padding + 34);
|
||||
|
||||
const gridX = padding;
|
||||
const gridY = padding + headerHeight;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.06)';
|
||||
ctx.fillRect(gridX, gridY, boardSize, boardSize);
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.12)';
|
||||
ctx.lineWidth = 1;
|
||||
for (let i = 0; i <= size; i++) {
|
||||
const x = gridX + i * cellSize;
|
||||
const y = gridY + i * cellSize;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, gridY);
|
||||
ctx.lineTo(x, gridY + boardSize);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(gridX, y);
|
||||
ctx.lineTo(gridX + boardSize, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.fillStyle = '#00f2fe';
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
|
||||
ctx.lineWidth = Math.max(1.5, Math.floor(cellSize * 0.12));
|
||||
for (let r = 0; r < size; r++) {
|
||||
for (let c = 0; c < size; c++) {
|
||||
const state = grid[r]?.[c];
|
||||
if (state === 1) {
|
||||
const x = gridX + c * cellSize + 1;
|
||||
const y = gridY + r * cellSize + 1;
|
||||
ctx.fillRect(x, y, cellSize - 2, cellSize - 2);
|
||||
} else if (state === 2) {
|
||||
const x = gridX + c * cellSize + cellSize * 0.2;
|
||||
const y = gridY + r * cellSize + cellSize * 0.2;
|
||||
const d = cellSize * 0.6;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x + d, y + d);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + d, y);
|
||||
ctx.lineTo(x, y + d);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Guide Usage Info (Dirty Flag)
|
||||
if (store.guideUsageCount > 0) {
|
||||
ctx.fillStyle = '#ff4d4d';
|
||||
ctx.font = '600 14px "Segoe UI", sans-serif';
|
||||
|
||||
const totalCells = store.size * store.size;
|
||||
const percent = Math.min(100, Math.round((store.guideUsageCount / totalCells) * 100));
|
||||
const guideText = t('win.usedGuide', { count: store.guideUsageCount, percent });
|
||||
|
||||
ctx.fillText(`⚠️ ${guideText}`, padding, height - padding - footerHeight + 10);
|
||||
}
|
||||
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.75)';
|
||||
ctx.font = '500 14px "Segoe UI", sans-serif';
|
||||
ctx.fillText(appUrl, padding, height - padding + 6);
|
||||
return canvas;
|
||||
};
|
||||
|
||||
const buildShareSVG = () => {
|
||||
const grid = store.playerGrid;
|
||||
if (!grid || !grid.length) return null;
|
||||
|
||||
const appUrl = 'https://nonograms.7u.pl/';
|
||||
const size = store.size;
|
||||
const maxBoard = 640;
|
||||
const cellSize = Math.max(8, Math.floor(maxBoard / size));
|
||||
const boardSize = cellSize * size;
|
||||
const padding = 28;
|
||||
const headerHeight = 64;
|
||||
const footerHeight = 28;
|
||||
const infoHeight = 40;
|
||||
const width = boardSize + padding * 2;
|
||||
const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
|
||||
|
||||
// Colors
|
||||
const bgGradientStart = '#1b2a4a';
|
||||
const bgGradientEnd = '#0a1324';
|
||||
const overlayColor = 'rgba(0, 0, 0, 0.35)';
|
||||
const textColor = '#e8fbff';
|
||||
const gridColor = 'rgba(255, 255, 255, 0.06)';
|
||||
const gridLineColor = 'rgba(255, 255, 255, 0.12)';
|
||||
const filledColor = '#00f2fe';
|
||||
const crossColor = 'rgba(255, 255, 255, 0.5)';
|
||||
const urlColor = 'rgba(255, 255, 255, 0.75)';
|
||||
|
||||
// Difficulty Logic
|
||||
const densityPercent = Math.round(store.currentDensity * 100);
|
||||
const diffInfo = calculateDifficulty(store.currentDensity, store.size);
|
||||
const difficultyKey = diffInfo.level;
|
||||
let diffColor = '#33ff33';
|
||||
if (difficultyKey === 'extreme') diffColor = '#ff3333';
|
||||
else if (difficultyKey === 'hardest') diffColor = '#ff9933';
|
||||
else if (difficultyKey === 'harder') diffColor = '#ffff33';
|
||||
const difficultyText = t(`difficulty.${difficultyKey}`);
|
||||
const diffLabel = `${t('win.difficulty')} ${difficultyText} (${densityPercent}%)`;
|
||||
|
||||
let svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">`;
|
||||
|
||||
// Background
|
||||
svgContent += `
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="${bgGradientStart}"/>
|
||||
<stop offset="100%" stop-color="${bgGradientEnd}"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#bg)"/>
|
||||
<rect x="12" y="12" width="${width - 24}" height="${height - 24}" fill="${overlayColor}"/>
|
||||
`;
|
||||
|
||||
// Text: Title & Time
|
||||
svgContent += `
|
||||
<text x="${padding}" y="${padding + 28}" font-family="Segoe UI, sans-serif" font-weight="700" font-size="26" fill="${textColor}">${t('app.title')}</text>
|
||||
<text x="${padding}" y="${padding + 56}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="16" fill="${textColor}">${t('win.time')} ${formattedTime.value}</text>
|
||||
`;
|
||||
|
||||
// Text: Difficulty (Right Aligned - manual approx or end anchor)
|
||||
svgContent += `
|
||||
<text x="${width - padding}" y="${padding + 56}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="${diffColor}" text-anchor="end">${diffLabel}</text>
|
||||
`;
|
||||
|
||||
const gridX = padding;
|
||||
const gridY = padding + headerHeight;
|
||||
|
||||
// Grid Background
|
||||
svgContent += `<rect x="${gridX}" y="${gridY}" width="${boardSize}" height="${boardSize}" fill="${gridColor}"/>`;
|
||||
|
||||
// Grid Lines
|
||||
let gridLines = '';
|
||||
for (let i = 0; i <= size; i++) {
|
||||
const pos = i * cellSize;
|
||||
// Vertical
|
||||
gridLines += `<line x1="${gridX + pos}" y1="${gridY}" x2="${gridX + pos}" y2="${gridY + boardSize}" stroke="${gridLineColor}" stroke-width="1"/>`;
|
||||
// Horizontal
|
||||
gridLines += `<line x1="${gridX}" y1="${gridY + pos}" x2="${gridX + boardSize}" y2="${gridY + pos}" stroke="${gridLineColor}" stroke-width="1"/>`;
|
||||
}
|
||||
svgContent += gridLines;
|
||||
|
||||
// Cells
|
||||
let cells = '';
|
||||
const lineWidth = Math.max(1.5, Math.floor(cellSize * 0.12));
|
||||
|
||||
for (let r = 0; r < size; r++) {
|
||||
for (let c = 0; c < size; c++) {
|
||||
const state = grid[r]?.[c];
|
||||
const cx = gridX + c * cellSize;
|
||||
const cy = gridY + r * cellSize;
|
||||
|
||||
if (state === 1) { // Filled
|
||||
cells += `<rect x="${cx + 1}" y="${cy + 1}" width="${cellSize - 2}" height="${cellSize - 2}" fill="${filledColor}"/>`;
|
||||
} else if (state === 2) { // Cross
|
||||
const d = cellSize * 0.6;
|
||||
const off = cellSize * 0.2;
|
||||
cells += `
|
||||
<path d="M${cx + off} ${cy + off} L${cx + off + d} ${cy + off + d} M${cx + off + d} ${cy + off} L${cx + off} ${cy + off + d}"
|
||||
stroke="${crossColor}" stroke-width="${lineWidth}" stroke-linecap="round"/>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
svgContent += cells;
|
||||
|
||||
// Guide Usage
|
||||
if (store.guideUsageCount > 0) {
|
||||
const totalCells = store.size * store.size;
|
||||
const percent = Math.min(100, Math.round((store.guideUsageCount / totalCells) * 100));
|
||||
const guideText = t('win.usedGuide', { count: store.guideUsageCount, percent });
|
||||
svgContent += `<text x="${padding}" y="${height - padding - footerHeight + 10}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="#ff4d4d">⚠️ ${guideText}</text>`;
|
||||
}
|
||||
|
||||
// URL
|
||||
svgContent += `<text x="${padding}" y="${height - padding + 6}" font-family="Segoe UI, sans-serif" font-weight="500" font-size="14" fill="${urlColor}">${appUrl}</text>`;
|
||||
|
||||
svgContent += '</svg>';
|
||||
return svgContent;
|
||||
};
|
||||
|
||||
const canvasToBlob = (canvas) => new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), 'image/png'));
|
||||
|
||||
const createShareBlob = async () => {
|
||||
const canvas = buildShareCanvas();
|
||||
if (!canvas) return null;
|
||||
return canvasToBlob(canvas);
|
||||
};
|
||||
const getShareData = () => ({
|
||||
grid: store.playerGrid,
|
||||
size: store.size,
|
||||
currentDensity: store.currentDensity,
|
||||
guideUsageCount: store.guideUsageCount
|
||||
});
|
||||
|
||||
const downloadShareSVG = () => {
|
||||
const svgString = buildShareSVG();
|
||||
if (!svgString) return;
|
||||
const blob = new Blob([svgString], { type: 'image/svg+xml' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `nonogram-${store.size}x${store.size}.svg`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
utilsDownloadShareSVG(getShareData(), t, formattedTime.value);
|
||||
};
|
||||
|
||||
const downloadShareImage = async () => {
|
||||
const blob = await createShareBlob();
|
||||
if (!blob) return;
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `nonogram-${store.size}x${store.size}.png`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const buildShareUrl = (target, text, url) => {
|
||||
const encodedText = encodeURIComponent(text);
|
||||
const encodedUrl = encodeURIComponent(url);
|
||||
if (target === 'x') {
|
||||
return `https://x.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`;
|
||||
}
|
||||
if (target === 'facebook') {
|
||||
return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}"e=${encodedText}`;
|
||||
}
|
||||
if (target === 'whatsapp') {
|
||||
return `https://wa.me/?text=${encodeURIComponent(`${text} ${url}`)}`;
|
||||
}
|
||||
return '';
|
||||
await utilsDownloadShareImage(getShareData(), t, formattedTime.value);
|
||||
};
|
||||
|
||||
const shareTo = async (target) => {
|
||||
@@ -382,7 +67,7 @@ const shareTo = async (target) => {
|
||||
try {
|
||||
// Try native share first if available (supports images)
|
||||
if (navigator.share && navigator.canShare) {
|
||||
const blob = await createShareBlob();
|
||||
const blob = await createShareBlob(getShareData(), t, formattedTime.value);
|
||||
if (blob) {
|
||||
const file = new File([blob], `nonogram-${store.size}x${store.size}.png`, { type: 'image/png' });
|
||||
if (navigator.canShare({ files: [file] })) {
|
||||
@@ -406,10 +91,6 @@ const shareTo = async (target) => {
|
||||
}
|
||||
|
||||
// Fallback: Direct Link + Download
|
||||
// Open window immediately if possible (though we awaited above, so it might be blocked,
|
||||
// but we can't do much about it if we want to try native share first).
|
||||
// Ideally, for Desktop, navigator.share is undefined so we skip the await above.
|
||||
|
||||
if (shareUrl) {
|
||||
window.open(shareUrl, '_blank', 'noopener');
|
||||
}
|
||||
@@ -450,11 +131,7 @@ onUnmounted(() => {
|
||||
if ('vibrate' in navigator) {
|
||||
navigator.vibrate(0);
|
||||
}
|
||||
if (audioContext) {
|
||||
audioContext.close();
|
||||
audioContext = null;
|
||||
}
|
||||
masterGain = null;
|
||||
cleanupAudio();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user