Addon piece import

src/index.html

@@ -34,9 +34,21 @@
 					<button id="import" data-tooltip="Import spell"><i class="fa-solid fa-file-import"></i></button>
 					<button id="export" data-tooltip="Export spell"><i class="fa-solid fa-file-export"></i></button>
 					<button id="delete" data-tooltip="Delete piece"><i class="fa-solid fa-trash"></i></button>
+					<button id="sources" data-tooltip="Addons"><i class="fa-solid fa-puzzle-piece"></i></button>
 				</div>
 			</div>
 		</main>
+		<div class="dialog center" hidden>
+			<div class="piece-sources">
+				<div class="title text-center">Addons</div>
+				<button id="close-sources" data-tooltip="Close"><i class="fa-solid fa-times"></i></button>
+				<div class="horizontal vcenter-items">
+					<input type="url" id="source-url" placeholder="Piece list URL">
+					<button id="add-source" data-tooltip="Add source"><i class="fa-solid fa-plus"></i></button>
+				</div>
+				<div class="sources-list" id="source-list"></div>
+			</div>
+		</div>
 		<script type="module" src="main.mjs"></script>
 	</body>
 </html>

src/main.mjs

@@ -16,29 +16,60 @@ const search = document.querySelector('#search');
 const exportButton = document.querySelector('#export');
 const importButton = document.querySelector('#import');
 const deleteButton = document.querySelector('#delete');
+const addonsButton = document.querySelector('#sources');
 export let selected = {};
 export let editor = { element: document.querySelector('#piece-config'), controls: [], params: [], comment: null };
 export let cells = createGrid(grid, width, height, editor, selected);
 export let spellData = { spellName: '', modsRequired: [] };
 selectCell(cells, selected, 4, 4);
 
 const pieceList = document.querySelector('#piece-catalog');
+const pieceSourcesDialog = document.querySelector('.piece-sources').parentElement;
+const sourceList = document.querySelector('#source-list');
+const addSourceButton = document.querySelector('#add-source');
+const sourceURL = document.querySelector('#source-url');
+pieceSourcesDialog.addEventListener('click', () => pieceSourcesDialog.hidden = true);
+addonsButton.addEventListener('click', () => pieceSourcesDialog.hidden = false);
 export let pieces = {};
 import psiPieces from './pieces/psi.html?url';
 import phiPieces from './pieces/phi.html?url';
+export let pieceSources = {};
 import { spellToSnbt } from 'psi-spell-encode-wasm';
-await Promise.allSettled([psiPieces, phiPieces].map(loadPieceDesc));
+await Promise.allSettled([psiPieces, phiPieces].map(addPieceSource));
 
 parseURLArgs();
 
 async function loadPieceDesc(url) {
 	let desc = await loadHTML(url);
 	let loaded = await loadPieces(desc);
-	Object.assign(pieces, loaded);
+	return loaded;
+}
+
+addSourceButton.addEventListener('click', () => addPieceSource(sourceURL.value));
+sourceURL.addEventListener('keydown', e => { if (e.key == 'Enter') addPieceSource(sourceURL.value); });
+
+async function addPieceSource(url) {
+	let pieces = await loadPieceDesc(url);
+	let item = sourceList.div('source-item', 'horizontal', 'vcenter-items', 'hjustify');
+	item.dataset.tooltip = `Repo: ${pieces.repo} (${pieces.branch})\nURL: ${url}\nPieces: ${Object.keys(pieces.pieces).length}`;
+	let name = item.div('source-name');
+	name.textContent = pieces.namespace;
+	let remove = item.button('source-remove');
+	remove.dataset.tooltip = 'Remove';
+	remove.i('fa-solid', 'fa-minus');
+	remove.addEventListener('click', () => removePieceSource(url, item));
+	pieceSources[url] = pieces.pieces;
+	rebuildCatalog();
+}
+
+function removePieceSource(url, item) {
+	item.remove();
+	delete pieceSources[url];
 	rebuildCatalog();
 }
 
 function rebuildCatalog() {
+	pieces = Object.assign({}, ...Object.values(pieceSources));
 	pieceList.innerHTML = '';
 	Object.values(pieces).sort((a, b) => getSortingName(a) > getSortingName(b)).forEach(piece => {
 		let item = pieceList.div('catalog-item');

src/piece.mjs

@@ -176,7 +176,7 @@ export async function loadPieces(html) {
 	});
 	if (!repo || !namespace) {
 		console.error('Missing metadata in piece list');
-		return pieces;
+		throw new Error('Missing metadata in piece list');
 	}
 	if (!branch) {
 		console.warn('Missing branch metadata in piece list, defaulting to master');
@@ -202,7 +202,12 @@ export async function loadPieces(html) {
 		e.dataset.tooltip = e.dataset.name + '\n' + e.dataset.desc;
 		pieces[e.dataset.key] = e;
 	});
-	return pieces;
+	return {
+		repo: repo,
+		namespace: namespace,
+		branch: branch,
+		pieces: pieces
+	};
 }
 
 export function exportPiece(piece) {

src/sources.css

@@ -0,0 +1,29 @@
+.piece-sources {
+	position: absolute;
+	z-index: 1000;
+	padding: var(--pixel-size);
+	background-color: var(--color-tooltip-bg);
+	border: 2px solid var(--color-tooltip-edge);
+}
+
+#source-url {
+	flex-grow: 1;
+}
+
+.piece-sources button {
+	width: calc(10 * var(--pixel-size));
+	height: calc(10 * var(--pixel-size));
+}
+
+.source-item {
+	user-select: text;
+	padding-left: var(--pixel-size);
+}
+
+#close-sources {
+	width: calc(6 * var(--pixel-size));
+	height: calc(6 * var(--pixel-size));
+	position: absolute;
+	top: calc(-5 * var(--pixel-size));
+	right: calc(-5 * var(--pixel-size));
+}

src/style.css

@@ -2,6 +2,7 @@
 @import 'grid.css';
 @import 'piece.css';
 @import 'catalog.css';
+@import 'sources.css';
 @import 'theme.css';
 
 body {

src/theme.css

@@ -34,6 +34,12 @@ input, textarea {
 
 textarea::-webkit-resizer { background: var(--color-fg); }
 
+.piece-sources * { font: calc(6 * var(--pixel-size)) mc; }
+
+.source-item:hover { background: var(--color-catalog-hover); }
+
+.dialog { background-color: rgba(0, 0, 0, calc(64 / 255)); }
+
 [data-value] { font: calc(8 * var(--pixel-size) * var(--scale-value)) mc; }
 textarea[data-value] { font: calc(6 * var(--pixel-size) * var(--scale-value)) mc; }
 

src/util.css

@@ -49,6 +49,10 @@ body * .center, body * .vcenter {
 	flex-direction: column;
 }
 
+.vcenter-items {
+	align-items: center;
+}
+
 [data-tooltip]::after {
 	transition: opacity linear 0.2s;
 	opacity: 0;
@@ -70,3 +74,15 @@ body * .center, body * .vcenter {
 	opacity: 1;
 	z-index: 3001;
 }
+
+.dialog {
+	z-index: 5000;
+}
+
+.dialog[hidden] {
+	display: none;
+}
+
+.text-center {
+	text-align: center;
+}

src/util.mjs

@@ -1,13 +1,19 @@
-export function div(...classes) {
-	let elem = document.createElement('div');
+export function appendElem(parent, tag, ...classes) {
+	let elem = document.createElement(tag);
 	elem.classList.add(...classes);
+	parent.append(elem);
 	return elem;
 }
-Node.prototype.div = function(...classes) {
-	let elem = div(...classes);
-	this.append(elem);
-	return elem;
-};
+
+function elemFn(tag) {
+	Node.prototype[tag] = function(...classes) {
+		return appendElem(this, tag, ...classes);
+	};
+}
+
+elemFn('div');
+elemFn('button');
+elemFn('i');
 
 export async function loadHTML(url) {
 	let text = await fetch(url).then(r => r.text());