From 8d16e2d14ea9dafaea0af6c357ce1c09fefa0fde Mon Sep 17 00:00:00 2001 From: pommicket Date: Wed, 6 Sep 2023 11:01:59 -0400 Subject: multiple creations --- index.html | 38 ++++++++++++++++++--- move.svg | 2 +- pugl.js | 109 +++++++++++++++++++++++++++++++++++++++++++++---------------- style.css | 26 +++++++++++++-- 4 files changed, 139 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 5f2eb85..4369b6e 100644 --- a/index.html +++ b/index.html @@ -20,12 +20,23 @@
-
- pugl +
+ pugl - +
+ + + + +
@@ -101,6 +112,23 @@
+ +

saved creations

+
+
+
+
+ +
+ + +

delete creation ""?

+
+
+ + +
+
diff --git a/move.svg b/move.svg index 69f4ff5..bf408e0 100644 --- a/move.svg +++ b/move.svg @@ -1,3 +1,3 @@ - + diff --git a/pugl.js b/pugl.js index c4acbf5..7361fdb 100644 --- a/pugl.js +++ b/pugl.js @@ -1,10 +1,5 @@ 'use strict'; -/* -TODO: -- multiple creations -*/ - const APP_ID = 'dh3YgVZQdX1Q'; function generate_creation_id() { @@ -2357,6 +2352,7 @@ function export_widgets_to_local_storage() { localStorage.setItem(`${APP_ID}-${creation_id}-description`, widget_str); creation_metadata[creation_id] = { lastViewed: Date.now(), + title: get_creation_title(), }; localStorage.setItem(`${APP_ID}-metadata`, JSON.stringify(creation_metadata)); } @@ -2370,13 +2366,37 @@ function load_creation(id) { const result = import_widgets( localStorage.getItem(`${APP_ID}-${id}-description`) ); - if (result.error) return result; - return true; + if (result.error) { + show_error(result.error); + } } function new_creation() { creation_id = generate_creation_id(); - return import_widgets(null); + const result = import_widgets(null); + if (result.error) { + show_error(result.error); + } +} + +function load_most_recent_or_create_new() { + let load = undefined; + if (creation_metadata) { + // load creation with largest lastViewed time + for (const id in creation_metadata) { + if ( + !load || + creation_metadata[id].lastViewed > creation_metadata[load].lastViewed + ) { + load = id; + } + } + } + if (load) { + load_creation(load); + } else { + new_creation(); + } } function get_shader_source() { @@ -2501,6 +2521,58 @@ function startup() { document.getElementById('about-dialog').showModal(); }); + document.getElementById('list-creations').addEventListener('click', () => { + const container = document.getElementById('creations'); + container.innerHTML = ''; + const creations_dialog = document.getElementById('creations-dialog'); + creations_dialog.showModal(); + for (const id in creation_metadata) { + const metadata = creation_metadata[id]; + const entry = document.createElement('div'); + entry.classList.add('creation-entry'); + const title = document.createElement('h4'); + title.classList.add('creation-entry-title'); + title.appendChild(document.createTextNode(metadata.title)); + entry.appendChild(title); + const lastViewed = document.createElement('div'); + lastViewed.classList.add('creation-entry-last-viewed'); + lastViewed.appendChild( + document.createTextNode( + 'Last viewed: ' + new Date(metadata.lastViewed).toLocaleString() + ) + ); + entry.appendChild(lastViewed); + entry.addEventListener('click', () => { + load_creation(id); + creations_dialog.close(); + }); + container.appendChild(entry); + } + }); + + document.getElementById('delete-creation').addEventListener('click', () => { + document.getElementById('delete-creation-title').innerText = + get_creation_title(); + document.getElementById('delete-dialog').showModal(); + }); + + document + .getElementById('delete-creation-confirm') + .addEventListener('click', () => { + delete creation_metadata[creation_id]; + localStorage.removeItem(`${APP_ID}-${creation_id}-description`); + localStorage.setItem( + `${APP_ID}-metadata`, + JSON.stringify(creation_metadata) + ); + creation_id = undefined; + load_most_recent_or_create_new(); + }); + + document.getElementById('new-creation').addEventListener('click', () => { + new_creation(); + }); + document.getElementById('resolution-form').addEventListener('submit', () => { render_width = resolution_x_element.value; render_height = resolution_y_element.value; @@ -2654,26 +2726,7 @@ void main() { }); creation_metadata = parse_json(localStorage.getItem(`${APP_ID}-metadata`)); - let result; - if (creation_metadata) { - // load creation with largest lastViewed time - let load = undefined; - for (const id in creation_metadata) { - if ( - !load || - creation_metadata[id].lastViewed > creation_metadata[load].lastViewed - ) { - load = id; - } - } - result = load_creation(load); - } else { - creation_metadata = {}; - result = new_creation(); - } - if (result.error) { - show_error(result); - } + load_most_recent_or_create_new(); frame(0.0); diff --git a/style.css b/style.css index e2981cb..12f5986 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,6 @@ :root { --color-text: #ddd; + --color-link: #8fc; } body { @@ -15,7 +16,7 @@ dialog { a, a:visited { - color: #8fc; + color: var(--color-link); } h1, @@ -219,7 +220,7 @@ input[type='checkbox'] { summary { cursor: pointer; } -#title { +#top-area { vertical-align: middle; font-weight: bold; font-size: 0.5cm; @@ -227,6 +228,9 @@ summary { #title-icon { height: 1cm; } +#creation-buttons { + margin-top: 0.2em; +} #resolution-form input[type='number'] { width: 4em; } @@ -326,3 +330,21 @@ th { margin: 0; padding: 0.2em; } + +.creation-entry { + cursor: pointer; + border-bottom: 2px solid white; + padding: 6px; +} + +.creation-entry:hover { + background: #fff4; +} + +.creation-entry-title { + color: var(--color-link); +} + +.creation-entry-last-viewed { + font-style: italic; +} -- cgit v1.2.3