Spell name field

src/grid.mjs

@@ -1,7 +1,7 @@
 import { setPiece } from './piece.mjs';
 import { removePiece, createEditor, exportPiece, importPiece } from './piece.mjs';
 import './util.mjs';
-import { spellData } from './main.mjs';
+import { nameField, spellData } from './main.mjs';
 
 export function createGrid(grid, width, height, editor = null, selected = null) {
 	let cells = [];
@@ -77,6 +77,7 @@ export function importGrid(from, cells) {
 	// TODO validation and error messages
 	spellData.modsRequired = from.modsRequired;
 	spellData.spellName = from.spellName;
+	nameField.value = from.spellName;
 	for (let pieceData of from.spellList) {
 		setPiece(cells[pieceData.x][pieceData.y], importPiece(pieceData.data));
 	}

src/index.html

@@ -17,7 +17,13 @@
 				<div data-piece-name></div>
 				<div data-piece-desc></div>
 			</div>
-			<div class="grid" id="spell-grid"></div>
+			<div class="vertical">
+				<div class="grid" id="spell-grid"></div>
+				<div class="horizontal hjustify">
+					<div>Name:</div>
+					<input type="text" id="spell-name" style="width: 80%;">
+				</div>
+			</div>
 			<div class="vertical catalog-container">
 				<div class="horizontal">
 					<i class="fa-solid fa-magnifying-glass"></i>

src/main.mjs

@@ -11,14 +11,15 @@ await init(wasmUrl);
 const size = 9;
 export const width = size, height = size;
 const grid = document.querySelector('#spell-grid');
+export const nameField = document.querySelector('#spell-name');
 const search = document.querySelector('#search');
 const exportButton = document.querySelector('#export');
 const importButton = document.querySelector('#import');
 const deleteButton = document.querySelector('#delete');
 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: 'PsiEdit', modsRequired: [] };
+export let spellData = { spellName: '', modsRequired: [] };
 selectCell(cells, selected, 4, 4);
 
 const pieceList = document.querySelector('#piece-catalog');
@@ -73,6 +74,7 @@ function deletePiece() {
 	createEditor(editor, selected);
 }
 
+nameField.addEventListener('input', () => spellData.spellName = nameField.value);
 search.addEventListener('input', filterCatalog);
 exportButton.addEventListener('click', exportSpell);
 importButton.addEventListener('click', importSpell);