549 lines
15 KiB
JavaScript
549 lines
15 KiB
JavaScript
// SPDX-FileCopyrightText: Copyright 2024 Fabio Iotti
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
// @ts-check
|
|
|
|
const page = /** @type {HTMLDivElement} */(document.getElementById('page'));
|
|
const pageImg = /** @type {HTMLImageElement} */(page.querySelector('img'));
|
|
const pageWordTemplate = /** @type {HTMLDivElement} */(page.querySelector('.word'));
|
|
const pageSymbolTemplate = /** @type {HTMLDivElement} */(page.querySelector('.symbol'));
|
|
const pageLinkTemplate = /** @type {HTMLDivElement} */(page.querySelector('.link'));
|
|
|
|
const nav = /** @type {HTMLDivElement} */(document.getElementById('nav'));
|
|
|
|
const prevPageButton = /** @type {HTMLButtonElement} */(document.getElementById('prev_page'));
|
|
const nextPageButton = /** @type {HTMLButtonElement} */(document.getElementById('next_page'));
|
|
const goToTocButton = /** @type {HTMLButtonElement} */(document.getElementById('go_to_toc'));
|
|
const pageSelect = /** @type {HTMLSelectElement} */(document.getElementById('page_select'));
|
|
const pageSelectOptionTemplate = /** @type {HTMLOptionElement} */(pageSelect.querySelector('option'));
|
|
|
|
const modeViewButton = /** @type {HTMLButtonElement} */(document.getElementById('mode_view'));
|
|
const modeWordButton = /** @type {HTMLButtonElement} */(document.getElementById('mode_word'));
|
|
const modeSymbolButton = /** @type {HTMLButtonElement} */(document.getElementById('mode_symbol'));
|
|
const modeLinkButton = /** @type {HTMLButtonElement} */(document.getElementById('mode_link'));
|
|
|
|
//#region Page selection
|
|
|
|
const TOC_PAGE_ID = "pg02";
|
|
|
|
/** @type {{ [id: string]: { src: string, label: string } }} */
|
|
const PAGES = {
|
|
"pg02": { src: "res/manual/page02.png", label: "02" },
|
|
"pg03": { src: "res/manual/page03-04.png", label: "03-04" },
|
|
"pg05": { src: "res/manual/page05-06.png", label: "05-06" },
|
|
"pg07": { src: "res/manual/page07-08.png", label: "07-08" },
|
|
"pg09": { src: "res/manual/page09-10.png", label: "09-10" },
|
|
"pg11": { src: "res/manual/page11-12.png", label: "11-12" },
|
|
"pg13": { src: "res/manual/page13-14.png", label: "13-14" },
|
|
"pg15": { src: "res/manual/page15-16.png", label: "15-16" },
|
|
"pg17": { src: "res/manual/page17-18.png", label: "17-18" },
|
|
"pg19": { src: "res/manual/page19-20.png", label: "29-20" },
|
|
"pg21": { src: "res/manual/page21-22.png", label: "21-22" },
|
|
"pg23": { src: "res/manual/page23-24.png", label: "23-24" },
|
|
"pg25": { src: "res/manual/page25-26.png", label: "25-26" },
|
|
"pg27": { src: "res/manual/page27-28.png", label: "27-28" },
|
|
"pg29": { src: "res/manual/page29-30.png", label: "29-30" },
|
|
"pg31": { src: "res/manual/page31-32.png", label: "31-32" },
|
|
"pg33": { src: "res/manual/page33-34.png", label: "33-34" },
|
|
"pg35": { src: "res/manual/page35-36.png", label: "35-36" },
|
|
"pg37": { src: "res/manual/page37-38.png", label: "37-38" },
|
|
"pg39": { src: "res/manual/page39-40.png", label: "39-40" },
|
|
"pg41": { src: "res/manual/page41-42.png", label: "41-42" },
|
|
"pg43": { src: "res/manual/page43-44.png", label: "43-44" },
|
|
"pg45": { src: "res/manual/page45-46.png", label: "45-46" },
|
|
"pg47": { src: "res/manual/page47-48.png", label: "47-48" },
|
|
"pg49": { src: "res/manual/page49-50.png", label: "49-50" },
|
|
"pg51": { src: "res/manual/page51-52.png", label: "51-52" },
|
|
"pg53": { src: "res/manual/page53-54.png", label: "53-54" },
|
|
"pg55": { src: "res/manual/page55.png", label: "55" },
|
|
};
|
|
|
|
const goToPage = (id) => {
|
|
pageImg.src = PAGES[id]?.src;
|
|
|
|
if (pageSelect.value != id)
|
|
pageSelect.value = id;
|
|
|
|
localStorage.setItem('tunic_manual_translation.page', id);
|
|
|
|
loadPageElements(pageSelect.value);
|
|
};
|
|
|
|
for (const id in PAGES) {
|
|
const opt = /** @type {HTMLOptionElement} */(pageSelectOptionTemplate.cloneNode(true));
|
|
opt.value = id;
|
|
opt.textContent = PAGES[id].label;
|
|
|
|
pageSelectOptionTemplate.parentElement?.insertBefore(opt, pageSelectOptionTemplate);
|
|
}
|
|
pageSelectOptionTemplate.remove();
|
|
|
|
pageSelect.addEventListener('change', ev => {
|
|
ev.preventDefault();
|
|
goToPage(pageSelect.value);
|
|
});
|
|
|
|
const goToPrevPage = () => {
|
|
const pageIds = Object.keys(PAGES);
|
|
const pageIndex = pageIds.indexOf(pageSelect.value);
|
|
goToPage((pageIndex == 0 || pageIndex == -1) ? pageIds[pageIds.length - 1] : pageIds[pageIndex - 1]);
|
|
};
|
|
|
|
const goToNextPage = () => {
|
|
const pageIds = Object.keys(PAGES);
|
|
const pageIndex = pageIds.indexOf(pageSelect.value);
|
|
goToPage((pageIndex == pageIds.length - 1 || pageIndex == -1) ? pageIds[0] : pageIds[pageIndex + 1]);
|
|
};
|
|
|
|
prevPageButton.addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
goToPrevPage();
|
|
});
|
|
|
|
nextPageButton.addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
goToNextPage();
|
|
});
|
|
|
|
goToTocButton.addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
goToPage(TOC_PAGE_ID);
|
|
});
|
|
|
|
pageSelect.value = localStorage.getItem('tunic_manual_translation.page') ?? Object.keys(PAGES)[0];
|
|
|
|
//#endregion
|
|
|
|
//#region Edit mode selection
|
|
|
|
/** @typedef {'VIEW' | 'WORD' | 'SYMBOL' | 'LINK'} EditMode */
|
|
/** @type {EditMode} */
|
|
let currentEditMode = 'VIEW';
|
|
|
|
/** @type {Record<EditMode, HTMLButtonElement>} */
|
|
const MODE_BUTTON = {
|
|
'VIEW': modeViewButton,
|
|
'WORD': modeWordButton,
|
|
'SYMBOL': modeSymbolButton,
|
|
'LINK': modeLinkButton,
|
|
};
|
|
|
|
/** @type {Record<EditMode, string>} */
|
|
const MODE_CLASSES = {
|
|
'VIEW': 'mode-view',
|
|
'WORD': 'mode-word',
|
|
'SYMBOL': 'mode-symbol',
|
|
'LINK': 'mode-link',
|
|
};
|
|
|
|
const setEditMode = (/** @type {EditMode} */mode) => {
|
|
MODE_BUTTON[currentEditMode]?.classList.remove('active');
|
|
MODE_BUTTON[mode]?.classList.add('active');
|
|
|
|
document.body.classList.remove(MODE_CLASSES[currentEditMode]);
|
|
document.body.classList.add(MODE_CLASSES[mode]);
|
|
|
|
currentEditMode = mode;
|
|
|
|
localStorage.setItem('tunic_manual_translation.edit_mode', currentEditMode);
|
|
};
|
|
|
|
modeViewButton.addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
setEditMode('VIEW');
|
|
});
|
|
|
|
modeWordButton.addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
setEditMode('WORD');
|
|
});
|
|
|
|
modeSymbolButton.addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
setEditMode('SYMBOL');
|
|
});
|
|
|
|
modeLinkButton.addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
setEditMode('LINK');
|
|
});
|
|
|
|
currentEditMode = /** @type {EditMode|null} */(localStorage.getItem('tunic_manual_translation.edit_mode')) ?? 'VIEW';
|
|
setEditMode(currentEditMode);
|
|
|
|
//#endregion
|
|
|
|
//#region Element placement
|
|
|
|
/** @type {{ lastPos: { clientX: number, clientY: number }, start: { clientX: number, clientY: number }, end: { clientX: number, clientY: number }, el: HTMLDivElement } | null} */
|
|
let currentDrawingElement = null;
|
|
|
|
/** @satisfies {Partial<Record<EditMode, HTMLDivElement>>} */
|
|
const DRAWING_ELEMENT_TEMPLATES = {
|
|
'WORD': pageWordTemplate,
|
|
'SYMBOL': pageSymbolTemplate,
|
|
'LINK': pageLinkTemplate,
|
|
};
|
|
|
|
/** @satisfies {Partial<Record<EditMode, string>>} */
|
|
const DRAWING_ELEMENT_CLASSES = {
|
|
'WORD': 'word',
|
|
'SYMBOL': 'symbol',
|
|
'LINK': 'link',
|
|
};
|
|
|
|
/**
|
|
* @param {EditMode} type
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} width
|
|
* @param {number} height
|
|
*/
|
|
const addNewElement = (type, x, y, width, height) => {
|
|
const id = uuidv4();
|
|
|
|
const pages = data.pages ??= {};
|
|
const page = pages[pageSelect.value] ??= { };
|
|
|
|
/** @type {page[keyof page]} */
|
|
let element;
|
|
switch (type) {
|
|
case 'WORD':
|
|
element = page.words ??= {};
|
|
break;
|
|
|
|
case 'SYMBOL':
|
|
element = page.symbols ??= {};
|
|
break;
|
|
|
|
case 'LINK':
|
|
element = page.links ??= {};
|
|
break;
|
|
|
|
default:
|
|
throw new Error(`Invalid type: ${type}`);
|
|
}
|
|
|
|
element[id] = { x, y, w: width, h: height };
|
|
|
|
saveUpdatedData();
|
|
|
|
// Refresh page.
|
|
loadPageElements(pageSelect.value);
|
|
};
|
|
|
|
/**
|
|
* @param {EditMode} type
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} width
|
|
* @param {number} height
|
|
* @param {(() => void) | null} onRemove
|
|
* @param {(() => void) | null} onClick
|
|
*/
|
|
const createDrawingElement = (type, x, y, width, height, onRemove = null, onClick = null) => {
|
|
const el = /** @type {HTMLDivElement} */(DRAWING_ELEMENT_TEMPLATES[type].cloneNode(true));
|
|
el.classList.add(DRAWING_ELEMENT_CLASSES[type]);
|
|
setElPosition(el, x, y, width, height);
|
|
|
|
el.addEventListener('mousedown', ev => {
|
|
ev.preventDefault();
|
|
});
|
|
|
|
if (onRemove) {
|
|
/** @type {HTMLDivElement} */(el.querySelector('.remove')).addEventListener('click', ev => {
|
|
if (ev.defaultPrevented || ev.button != 0)
|
|
return;
|
|
|
|
ev.preventDefault();
|
|
onRemove();
|
|
});
|
|
}
|
|
|
|
if (onClick) {
|
|
el.addEventListener('click', ev => {
|
|
if (ev.defaultPrevented || ev.button != 0)
|
|
return;
|
|
|
|
ev.preventDefault();
|
|
onClick();
|
|
});
|
|
}
|
|
|
|
page.appendChild(el);
|
|
|
|
return el;
|
|
};
|
|
|
|
const setElPosition = (el, x, y, width, height) => {
|
|
el.style.setProperty('--left', String(x));
|
|
el.style.setProperty('--top', String(y));
|
|
el.style.setProperty('--width', String(width));
|
|
el.style.setProperty('--height', String(height));
|
|
}
|
|
|
|
const updateCurrentDrawingElPosition = (place = false) => {
|
|
if (!currentDrawingElement)
|
|
return;
|
|
|
|
let x = currentDrawingElement.start.clientX - currentPan.x;
|
|
let y = currentDrawingElement.start.clientY - currentPan.y;
|
|
let w = currentDrawingElement.end.clientX - currentDrawingElement.start.clientX;
|
|
let h = currentDrawingElement.end.clientY - currentDrawingElement.start.clientY;
|
|
|
|
if (w < 0) {
|
|
x += w;
|
|
w = -w;
|
|
}
|
|
|
|
if (h < 0) {
|
|
y += h;
|
|
h = -h;
|
|
}
|
|
|
|
setElPosition(currentDrawingElement.el, x, y, w, h);
|
|
|
|
if (place && w + h > 16 && w > 4 && h > 4)
|
|
addNewElement(currentEditMode, x, y, w, h);
|
|
};
|
|
|
|
page.addEventListener('mousedown', ev => {
|
|
if (ev.defaultPrevented || ev.button != 0 || !Object.hasOwn(DRAWING_ELEMENT_TEMPLATES, currentEditMode))
|
|
return;
|
|
|
|
ev.preventDefault();
|
|
|
|
currentDrawingElement = {
|
|
lastPos: { clientX: ev.clientX, clientY: ev.clientY},
|
|
start: { clientX: ev.clientX, clientY: ev.clientY },
|
|
end: { clientX: ev.clientX, clientY: ev.clientY },
|
|
el: createDrawingElement(currentEditMode, 0, 0, 0, 0),
|
|
};
|
|
|
|
updateCurrentDrawingElPosition();
|
|
});
|
|
|
|
window.addEventListener('mousemove', ev => {
|
|
if (ev.defaultPrevented || ev.button != 0 || !currentDrawingElement)
|
|
return;
|
|
|
|
ev.preventDefault();
|
|
|
|
currentDrawingElement.end.clientX += ev.clientX - currentDrawingElement.lastPos.clientX;
|
|
currentDrawingElement.end.clientY += ev.clientY - currentDrawingElement.lastPos.clientY;
|
|
updateCurrentDrawingElPosition();
|
|
|
|
currentDrawingElement.lastPos = { clientX: ev.clientX, clientY: ev.clientY };
|
|
});
|
|
|
|
window.addEventListener('mouseup', ev => {
|
|
if (ev.defaultPrevented || ev.button != 0 || !currentDrawingElement)
|
|
return;
|
|
|
|
ev.preventDefault();
|
|
|
|
currentDrawingElement.end.clientX += ev.clientX - currentDrawingElement.lastPos.clientX;
|
|
currentDrawingElement.end.clientY += ev.clientY - currentDrawingElement.lastPos.clientY;
|
|
|
|
updateCurrentDrawingElPosition(true);
|
|
|
|
currentDrawingElement.el.remove();
|
|
|
|
currentDrawingElement = null;
|
|
});
|
|
|
|
for (const el of Object.values(DRAWING_ELEMENT_TEMPLATES))
|
|
el.remove();
|
|
|
|
//#endregion
|
|
|
|
//#region View mode (page panning)
|
|
|
|
/** @type {{ clientX: number, clientY: number } | null} */
|
|
let panningLastPos = null;
|
|
|
|
let currentPan = { x: 0, y: 0 };
|
|
|
|
const panBy = (x, y) => {
|
|
currentPan.x += x;
|
|
currentPan.y += y;
|
|
|
|
page.style.setProperty('--left', String(currentPan.x));
|
|
page.style.setProperty('--top', String(currentPan.y));
|
|
|
|
localStorage.setItem('tunic_manual_translation.pan_x', String(currentPan.x));
|
|
localStorage.setItem('tunic_manual_translation.pan_y', String(currentPan.y));
|
|
};
|
|
|
|
page.addEventListener('mousedown', ev => {
|
|
if (ev.defaultPrevented || ev.button != 0 || currentEditMode != 'VIEW')
|
|
return;
|
|
|
|
ev.preventDefault();
|
|
|
|
panningLastPos = { clientX: ev.clientX, clientY: ev.clientY };
|
|
});
|
|
|
|
window.addEventListener('mousemove', ev => {
|
|
if (ev.defaultPrevented || ev.button != 0 || !panningLastPos)
|
|
return;
|
|
|
|
ev.preventDefault();
|
|
panBy(ev.clientX - panningLastPos.clientX, ev.clientY - panningLastPos.clientY);
|
|
panningLastPos = { clientX: ev.clientX, clientY: ev.clientY };
|
|
});
|
|
|
|
window.addEventListener('mouseup', ev => {
|
|
if (ev.defaultPrevented || ev.button != 0 || !panningLastPos)
|
|
return;
|
|
|
|
ev.preventDefault();
|
|
panBy(ev.clientX - panningLastPos.clientX, ev.clientY - panningLastPos.clientY);
|
|
panningLastPos = null;
|
|
});
|
|
|
|
currentPan.x = Number(localStorage.getItem('tunic_manual_translation.pan_x')) || 0;
|
|
currentPan.y = Number(localStorage.getItem('tunic_manual_translation.pan_y')) || 0;
|
|
panBy(0, 0);
|
|
|
|
//#endregion
|
|
|
|
//#region Database
|
|
|
|
/** @typedef {string} GUID */
|
|
|
|
/** @typedef {{ x: number, y: number, w: number, h: number }} WordData */
|
|
|
|
/** @typedef {{ x: number, y: number, w: number, h: number }} SymbolData */
|
|
|
|
/** @typedef {{ x: number, y: number, w: number, h: number, ref?: string }} LinkData */
|
|
|
|
/** @typedef {{ words?: Record<GUID, WordData>, symbols?: Record<GUID, SymbolData>, links?: Record<GUID, LinkData> }} PageData */
|
|
|
|
/** @typedef {{ pages?: Record<string, PageData> }} Database */
|
|
|
|
/** @type {Database} */
|
|
let data = {};
|
|
|
|
/** @type {Record<GUID, HTMLDivElement>} */
|
|
let currentPageElements = {};
|
|
|
|
const uuidv4 = () => self.crypto.randomUUID();
|
|
|
|
const loadPageElements = (pageId) => {
|
|
for (const id in currentPageElements)
|
|
currentPageElements[id].remove();
|
|
|
|
if (!data.pages)
|
|
return;
|
|
|
|
/** @type {PageData} */
|
|
const pageData = Object.hasOwn(data.pages, pageId) ? data.pages[pageId] : {};
|
|
|
|
const pageWords = pageData.words;
|
|
for (const id in pageWords) {
|
|
const data = pageWords[id];
|
|
const el = createDrawingElement('WORD', data.x, data.y, data.w, data.h, () => {
|
|
// When removed...
|
|
delete currentPageElements[id];
|
|
delete pageWords[id];
|
|
saveUpdatedData();
|
|
el.remove();
|
|
}, () => {
|
|
// When clicked...
|
|
// TODO
|
|
console.log("clicked word", id);
|
|
});
|
|
|
|
currentPageElements[id] = el;
|
|
}
|
|
|
|
const pageSymbols = pageData.symbols;
|
|
for (const id in pageSymbols) {
|
|
const data = pageSymbols[id];
|
|
const el = createDrawingElement('SYMBOL', data.x, data.y, data.w, data.h, () => {
|
|
// When removed...
|
|
delete currentPageElements[id];
|
|
delete pageSymbols[id];
|
|
saveUpdatedData();
|
|
el.remove();
|
|
}, () => {
|
|
// When clicked...
|
|
// TODO
|
|
console.log("clicked symbol", id);
|
|
});
|
|
|
|
currentPageElements[id] = el;
|
|
}
|
|
|
|
const pageLinks = pageData.links;
|
|
for (const id in pageLinks) {
|
|
const data = pageLinks[id];
|
|
const el = createDrawingElement('LINK', data.x, data.y, data.w, data.h, () => {
|
|
// When removed...
|
|
delete currentPageElements[id];
|
|
delete pageLinks[id];
|
|
saveUpdatedData();
|
|
el.remove();
|
|
}, () => {
|
|
// When clicked...
|
|
// TODO
|
|
console.log("clicked link", id);
|
|
});
|
|
|
|
currentPageElements[id] = el;
|
|
}
|
|
};
|
|
|
|
const saveUpdatedData = () => {
|
|
localStorage.setItem('tunic_manual_translation.data', JSON.stringify(data));
|
|
console.debug("Updated data:", JSON.stringify(data));
|
|
};
|
|
|
|
data = /** @type {Database | null}*/(JSON.parse(localStorage.getItem('tunic_manual_translation.data') || 'null')) ?? data;
|
|
|
|
//#endregion
|
|
|
|
//#region Keyboard shortcuts
|
|
|
|
window.addEventListener('keyup', ev => {
|
|
console.log(ev.key);
|
|
switch (ev.key) {
|
|
case 'ArrowLeft':
|
|
goToPrevPage();
|
|
break;
|
|
|
|
case 'ArrowRight':
|
|
goToNextPage();
|
|
break;
|
|
|
|
case 'i':
|
|
case 'I':
|
|
goToPage(TOC_PAGE_ID);
|
|
break;
|
|
|
|
case 'v':
|
|
case 'V':
|
|
setEditMode('VIEW');
|
|
break;
|
|
|
|
case 'w':
|
|
case 'W':
|
|
setEditMode('WORD');
|
|
break;
|
|
|
|
case 's':
|
|
case 'S':
|
|
setEditMode('SYMBOL');
|
|
break;
|
|
|
|
case 'l':
|
|
case 'L':
|
|
setEditMode('LINK');
|
|
break;
|
|
}
|
|
});
|
|
|
|
//#endregion
|
|
|
|
goToPage(pageSelect.value);
|