91 lines
2.6 KiB
JavaScript
91 lines
2.6 KiB
JavaScript
import { ref } from 'vue';
|
|
import { usePuzzleStore } from '@/stores/puzzle';
|
|
|
|
export function useNonogram() {
|
|
const store = usePuzzleStore();
|
|
|
|
const isDragging = ref(false);
|
|
const dragMode = ref(null); // 'fill', 'empty', 'cross'
|
|
const startCellState = ref(null);
|
|
|
|
const startDrag = (r, c, isRightClick = false, force = false) => {
|
|
if (store.isGameWon) return;
|
|
|
|
isDragging.value = true;
|
|
const current = store.playerGrid[r][c];
|
|
|
|
if (isRightClick) {
|
|
// Right click logic
|
|
if (!force && current === 1) {
|
|
dragMode.value = null; // invalid drag start
|
|
return;
|
|
}
|
|
dragMode.value = (current === 2) ? 0 : 2;
|
|
} else {
|
|
// Left click logic
|
|
// Toggle 0 <-> 1. Ignore 2 usually or overwrite?
|
|
// Standard: If 2, usually safe to overwrite or ignore. Let's say we toggle 0->1, 1->0.
|
|
// If starting on 2, maybe clear it?
|
|
if (current === 2) {
|
|
dragMode.value = 0; // Clear cross
|
|
} else {
|
|
dragMode.value = (current === 1) ? 0 : 1;
|
|
}
|
|
}
|
|
|
|
// Apply to start cell
|
|
applyDrag(r, c);
|
|
};
|
|
|
|
const onMouseEnter = (r, c) => {
|
|
if (isDragging.value) {
|
|
applyDrag(r, c);
|
|
}
|
|
};
|
|
|
|
const stopDrag = () => {
|
|
isDragging.value = false;
|
|
dragMode.value = null;
|
|
};
|
|
|
|
const applyDrag = (r, c) => {
|
|
if (dragMode.value === null) return;
|
|
|
|
const current = store.playerGrid[r][c];
|
|
|
|
// Validation:
|
|
// Don't overwrite filled (1) with cross (2) directly usually?
|
|
// Or don't overwrite cross (2) with filled (1)?
|
|
// Simple logic:
|
|
// If dragMode is 1 (filling): only fill 0 or 2.
|
|
// If dragMode is 0 (clearing): clear 1 or 2.
|
|
// If dragMode is 2 (crossing): only cross 0.
|
|
|
|
let shouldApply = false;
|
|
if (dragMode.value === 1) {
|
|
if (current !== 1) shouldApply = true;
|
|
} else if (dragMode.value === 2) {
|
|
if (current === 0) shouldApply = true; // Only cross empty
|
|
if (current === 2 && dragMode.value === 0) shouldApply = true; // Clear cross
|
|
} else if (dragMode.value === 0) {
|
|
// Clearing
|
|
if (current !== 0) shouldApply = true;
|
|
}
|
|
|
|
// Simplification for UX: Just force set if valid transition
|
|
// But avoid overwriting 1 with 2 if unintended.
|
|
|
|
// Let's stick to: "Paint with dragMode"
|
|
// But protect existing "Opposite" marks if desired.
|
|
// For now, simple paint is fine.
|
|
|
|
store.setCell(r, c, dragMode.value);
|
|
};
|
|
|
|
return {
|
|
startDrag,
|
|
onMouseEnter,
|
|
stopDrag
|
|
};
|
|
}
|