···
192
+
background-color: rgba(0, 0, 0, 0.7);
195
+
transition: opacity 0.2s ease-in-out;
199
+
background-color: #ffffff;
200
+
border: 2px solid #808080;
202
+
inset -2px -2px #c0c0c0,
203
+
inset 2px 2px #404040,
204
+
0 0 10px rgba(0, 0, 0, 0.5);
208
+
animation: fadeIn 0.2s ease-in-out;
209
+
position: relative; /* Ensure proper positioning of close button */
212
+
@keyframes fadeIn {
215
+
transform: translateY(-20px);
219
+
transform: translateY(0);
233
+
.input-group label {
234
+
display: inline-block;
238
+
.input-group input {
239
+
font-family: "Courier Prime", "Courier New", monospace;
241
+
background: #ffffff;
242
+
border: 2px inset #c0c0c0;
248
+
border: 1px solid #c0c0c0;
255
+
justify-content: space-between;
258
+
border-bottom: 1px solid #c0c0c0;
259
+
background-color: #f0f0f0;
266
+
border: 1px solid #c0c0c0;
267
+
border-radius: 3px;
271
+
background-color: #c0c0c0;
275
+
position: absolute;
282
+
background: #d0d0d0;
283
+
border: 1px solid #808080;
284
+
border-radius: 3px;
287
+
text-align: center;
290
+
inset -1px -1px #404040,
291
+
inset 1px 1px #ffffff;
294
+
.modal-close:hover {
295
+
background-color: #c0c0c0;
299
+
.modal-close:active {
301
+
inset 1px 1px #404040,
302
+
inset -1px -1px #ffffff;
185
-
<div class="terminal">
186
-
<div class="title-bar">
187
-
C:\PLASTIC.EXE - [Self-Modifying System v2.1]
307
+
<!-- Help Modal -->
308
+
<div id="help-modal" class="modal">
309
+
<div class="modal-content">
310
+
<div class="title-bar">
313
+
class="modal-close"
314
+
onclick="hideModal('help-modal')"
317
+
aria-label="Close help modal"
321
+
<div class="modal-body">
322
+
<h2>Keyboard Shortcuts:</h2>
324
+
<li><strong>F1</strong>: Show this help screen</li>
326
+
<strong>F2</strong>: Save the current page state
328
+
<li><strong>F3</strong>: Load a saved page state</li>
329
+
<li><strong>Esc</strong>: Close modals</li>
331
+
<strong>Ctrl+Enter</strong>: Execute code in the
190
-
<div class="content">
191
-
<p class="prompt">C:\PLASTIC> DIR</p>
336
+
<h2>How to Use PLASTIC:</h2>
339
+
Type a description of what you want to change in the
343
+
Press Ctrl+Enter or click the "GENERATE & EXECUTE"
347
+
PLASTIC will modify itself according to your
350
+
<li>Use F2 to save your modified system</li>
351
+
<li>Use F3 to load a previously saved state</li>
193
-
<div class="file-listing">
194
-
<div class="file-line">
195
-
Volume in drive C is PLASTIC-SYS
354
+
<h2>About PLASTIC:</h2>
356
+
PLASTIC.EXE is a self-modifying system that lets you
357
+
transform its interface and functionality through
358
+
natural language commands.
361
+
<div style="text-align: center; margin-top: 15px">
362
+
<div class="button" onclick="hideModal('help-modal')">
197
-
<div class="file-line">Directory of C:\PLASTIC</div>
198
-
<div class="file-line"></div>
199
-
<div class="file-line">
200
-
<span class="dir">SYSTEM <DIR></span> 12-15-95
369
+
<!-- Save Modal -->
370
+
<div id="save-modal" class="modal">
371
+
<div class="modal-content">
372
+
<div class="title-bar">
375
+
class="modal-close"
376
+
onclick="hideModal('save-modal')"
379
+
aria-label="Close save modal"
383
+
<div class="modal-body">
384
+
<h2>Save Current State</h2>
385
+
<div class="input-group">
386
+
<label for="save-name">Name:</label>
390
+
placeholder="Enter save name"
203
-
<div class="file-line">
204
-
<span class="exe">PLASTIC EXE</span> 24,576 12-15-95
396
+
justify-content: center;
401
+
<div class="button" onclick="saveCurrentHTML()">
404
+
<div class="button" onclick="hideModal('save-modal')">
207
-
<div class="file-line">
208
-
<span class="txt">README TXT</span> 1,024 12-15-95 3:42p
210
-
<div class="file-line">
211
-
<span class="txt">CONFIG SYS</span> 512 12-15-95 3:42p
408
+
<div id="save-message"></div>
410
+
<h2>Saved States</h2>
411
+
<div id="saved-list" class="save-list"></div>
416
+
<!-- Load Modal -->
417
+
<div id="load-modal" class="modal">
418
+
<div class="modal-content">
419
+
<div class="title-bar">
422
+
class="modal-close"
423
+
onclick="hideModal('load-modal')"
426
+
aria-label="Close load modal"
430
+
<div class="modal-body">
431
+
<h2>Load Saved State</h2>
432
+
<div id="load-list" class="save-list"></div>
433
+
<div id="load-message"></div>
434
+
<div style="text-align: center; margin-top: 15px">
435
+
<div class="button" onclick="hideModal('load-modal')">
213
-
<div class="file-line">4 File(s) 26,112 bytes</div>
214
-
<div class="file-line">524,288 bytes free</div>
442
+
<div class="terminal">
443
+
<div class="title-bar">
444
+
C:\PLASTIC.EXE - [Self-Modifying System v3.0]
447
+
<div class="content">
<p class="prompt">C:\PLASTIC> PLASTIC.EXE</p>
···
<h2>System Information:</h2>
229
-
<p>PLASTIC v2.1 - Self-Modifying Code System</p>
230
-
<p>Copyright (C) 1995 DUNKIRK Corp.</p>
460
+
<p>PLASTIC v3.0 - Self-Modifying Code System</p>
463
+
<a href="https://dunkirk.sh">DUNKIRK Corp (Kieran Klukas)</a
All rights reserved. Licensed to: REGISTERED USER under MIT
···
<li>Supports EGA/VGA graphics modes</li>
275
-
<h2>System Commands:</h2>
277
-
<span class="command">HELP</span>
278
-
<span class="command">DIR</span>
279
-
<span class="command">EDIT</span>
280
-
<span class="command">RUN</span>
281
-
<span class="command">EXIT</span>
════════════════════════════════════════════════════════════
288
-
<p>Runtime: 00:13:37 | Memory: 589K free | CPU: 80486DX-33</p>
290
-
WARNING: Unauthorized modification may corrupt system files
515
+
Runtime: <span id="runtime">00:13:37</span> | Memory:
516
+
<span id="memory">589K free</span> | CPU: 80486DX-33
293
-
<p class="prompt">C:\PLASTIC> <span class="cursor">_</span></p>
297
-
<span>F1=Help F2=Save F3=Load F10=Menu</span>
298
-
<span>12:34 PM</span>
522
+
><span class="hotkey" onclick="showHelp()">F1=Help</span>
523
+
<span class="hotkey" onclick="showSaveModal()"
526
+
<span class="hotkey" onclick="showLoadModal()"
531
+
<span id="time">12:00</span>
536
+
// Tool call system for AI to interact with the page
537
+
window.toolCallbacks = {
538
+
replaceElement: function (selector, newHTML) {
539
+
const element = document.querySelector(selector);
541
+
element.outerHTML = newHTML;
544
+
message: `Replaced element: ${selector}`,
549
+
message: `Element not found: ${selector}`,
553
+
updateElement: function (selector, newContent) {
554
+
const element = document.querySelector(selector);
556
+
element.innerHTML = newContent;
559
+
message: `Updated element: ${selector}`,
564
+
message: `Element not found: ${selector}`,
568
+
addElement: function (
571
+
position = "beforeend",
573
+
const parent = document.querySelector(parentSelector);
575
+
parent.insertAdjacentHTML(position, newHTML);
578
+
message: `Added element to: ${parentSelector}`,
583
+
message: `Parent not found: ${parentSelector}`,
587
+
removeElement: function (selector) {
588
+
const element = document.querySelector(selector);
593
+
message: `Removed element: ${selector}`,
598
+
message: `Element not found: ${selector}`,
602
+
updateStyle: function (selector, styleObj) {
603
+
const element = document.querySelector(selector);
605
+
Object.assign(element.style, styleObj);
608
+
message: `Updated styles for: ${selector}`,
613
+
message: `Element not found: ${selector}`,
617
+
executeJS: function (code) {
619
+
const result = eval(code);
622
+
message: "JavaScript executed",
628
+
message: `JS Error: ${error.message}`,
634
+
function executeToolCall(toolCall) {
635
+
const { function: func, arguments: args } = toolCall;
636
+
console.log("Executing tool call:", func, args);
638
+
if (window.toolCallbacks[func]) {
640
+
// Handle different function signatures
641
+
if (func === "removeElement") {
642
+
// removeElement expects just a selector
645
+
Object.keys(args)[0] ||
646
+
Object.values(args)[0];
647
+
return window.toolCallbacks[func](selector);
648
+
} else if (func === "updateStyle" && args.styleObj) {
649
+
return window.toolCallbacks[func](
653
+
} else if (func === "executeJS") {
654
+
return window.toolCallbacks[func](args.code);
655
+
} else if (func === "updateElement") {
656
+
return window.toolCallbacks[func](
660
+
} else if (func === "replaceElement") {
661
+
return window.toolCallbacks[func](
665
+
} else if (func === "addElement") {
666
+
return window.toolCallbacks[func](
667
+
args.parentSelector,
672
+
return window.toolCallbacks[func](
673
+
...Object.values(args),
679
+
message: `Error executing ${func}: ${error.message}`,
683
+
return { success: false, message: `Unknown tool: ${func}` };
async function generateAndExecute() {
const userPrompt = document.getElementById("codeEditor").value;
const statusDiv = document.getElementById("statusDisplay");
···
328
-
content: `Here is the current HTML page:\n\n${currentPageHTML}\n\nUser request: "${userPrompt}"\n\nGenerate HTML code that fits the DOS/retro terminal aesthetic for this request. Use flat colors like #00ff41 (green), #ffff00 (yellow), #00ffff (cyan), #ffffff (white), #c0c0c0 (gray), #000080 (blue), and #ff0000 (red). Use monospace fonts and simple borders. Make it look like it belongs in a 1990s DOS program. Only return the HTML code to add, no explanations.`,
711
+
content: `Here is the current HTML page:\n\n${currentPageHTML}\n\nUser request: "${userPrompt}"\n\nIMPORTANT: You must respond with ONLY one of these two formats:\n\nFORMAT 1 - Tool calls (for precise modifications):\n{"tool_calls": [{"function": "functionName", "arguments": {"param": "value"}}]}\n\nFORMAT 2 - Raw HTML (to append to page):\n<div>Your HTML content here</div>\n\nDO NOT include any explanatory text, markdown formatting, or additional commentary. Respond with ONLY the JSON or HTML.\n\nAvailable tools with correct argument formats:\n1. removeElement: {"function": "removeElement", "arguments": {"selector": ".class-name"}}\n2. updateElement: {"function": "updateElement", "arguments": {"selector": ".class-name", "newContent": "new content"}}\n3. replaceElement: {"function": "replaceElement", "arguments": {"selector": ".class-name", "newHTML": "<div>new html</div>"}}\n4. addElement: {"function": "addElement", "arguments": {"parentSelector": ".parent", "newHTML": "<div>content</div>", "position": "beforeend"}}\n5. updateStyle: {"function": "updateStyle", "arguments": {"selector": ".class-name", "styleObj": {"color": "#000000"}}}\n6. executeJS: {"function": "executeJS", "arguments": {"code": "console.log('hello');"}}\n\nUse DOS/retro aesthetic with flat colors: #000000 (black), #ffffff (white), #c0c0c0 (gray), #000080 (blue), #ff0000 (red). Use monospace fonts.`,
···
statusDiv.textContent = "AI PROCESSING...";
const data = await response.json();
344
-
console.log("API Response:", data); // Debug log
727
+
console.log("API Response:", data);
729
+
let generatedContent;
352
-
generatedCode = data.choices[0].message.content;
735
+
generatedContent = data.choices[0].message.content;
} else if (data.content) {
354
-
generatedCode = data.content;
737
+
generatedContent = data.content;
} else if (data.response) {
356
-
generatedCode = data.response;
739
+
generatedContent = data.response;
} else if (typeof data === "string") {
358
-
generatedCode = data;
741
+
generatedContent = data;
throw new Error("Unexpected API response format");
363
-
// Clean up the code (remove markdown formatting if present)
364
-
let cleanCode = generatedCode
365
-
.replace(/```html\n?/g, "")
746
+
statusDiv.textContent = "EXECUTING COMMANDS...";
748
+
// Clean up response and extract JSON if present
749
+
let cleanResponse = generatedContent.trim();
751
+
// Remove markdown formatting
752
+
cleanResponse = cleanResponse
753
+
.replace(/```json\n?/g, "")
368
-
statusDiv.textContent = "INJECTING CODE...";
756
+
// Try to extract JSON from mixed content
757
+
const jsonMatch = cleanResponse.match(
758
+
/\{[\s\S]*"tool_calls"[\s\S]*\}/,
761
+
cleanResponse = jsonMatch[0];
764
+
console.log("Cleaned response:", cleanResponse);
370
-
// Insert the generated code
371
-
document.querySelector(".content").innerHTML += cleanCode;
372
-
document.getElementById("codeEditor").value = "";
766
+
// For safety, preprocess JavaScript code in JSON to escape problematic characters
767
+
cleanResponse = cleanResponse.replace(
768
+
/"code"\s*:\s*(`|")([^`"]*?)(`|")/g,
769
+
function (match, q1, code, q3) {
770
+
// Replace all literal backslashes with double backslashes in the code string
771
+
const escapedCode = code.replace(/\\/g, "\\\\");
772
+
return `"code":${q1}${escapedCode}${q3}`;
374
-
statusDiv.textContent = "CODE EXECUTION SUCCESSFUL";
776
+
// Check if response contains tool calls
778
+
const toolResponse = safeJsonParse(cleanResponse);
780
+
toolResponse.tool_calls &&
781
+
Array.isArray(toolResponse.tool_calls)
783
+
// Execute tool calls
784
+
const results = [];
785
+
for (const toolCall of toolResponse.tool_calls) {
786
+
const result = executeToolCall(toolCall);
787
+
results.push(result);
788
+
console.log("Tool call result:", result);
790
+
statusDiv.textContent = `EXECUTED ${results.length} COMMANDS`;
792
+
// Send feedback to AI about tool results
794
+
() => sendToolFeedback(userPrompt, results),
798
+
throw new Error("Invalid tool call format");
800
+
} catch (jsonError) {
801
+
console.log("JSON parse error:", jsonError);
802
+
console.log("Raw response:", generatedContent);
803
+
console.log("Attempting to parse as HTML...");
805
+
// Not JSON, treat as HTML code
806
+
let cleanCode = generatedContent
807
+
.replace(/```html\n?/g, "")
808
+
.replace(/```\n?/g, "");
810
+
statusDiv.textContent = "INJECTING CODE...";
811
+
document.querySelector(".content").innerHTML +=
813
+
statusDiv.textContent = "CODE EXECUTION SUCCESSFUL";
816
+
document.getElementById("codeEditor").value = "";
// Clear status after 3 seconds
···
document.getElementById("statusDisplay").textContent = "";
391
-
// Handle Ctrl+Enter in textarea
833
+
async function sendToolFeedback(originalPrompt, toolResults) {
834
+
const statusDiv = document.getElementById("statusDisplay");
837
+
statusDiv.textContent = "SENDING FEEDBACK TO AI...";
839
+
const currentPageHTML = document.documentElement.outerHTML;
840
+
const resultsText = toolResults
843
+
`${r.success ? "✓" : "✗"} ${r.message}${r.result ? ` (result: ${r.result})` : ""}`,
847
+
const response = await fetch(
848
+
"https://ai.hackclub.com/chat/completions",
852
+
"Content-Type": "application/json",
854
+
body: JSON.stringify({
858
+
content: `Previous request: "${originalPrompt}"\n\nTool execution results:\n${resultsText}\n\nCurrent page state:\n${currentPageHTML}\n\nBased on the tool results, do you need to make any follow-up modifications? If everything looks good, respond with "COMPLETE". If you need to make adjustments, respond with tool calls or HTML.\n\nIMPORTANT: Respond with ONLY one of these formats:\n- "COMPLETE" (if satisfied)\n- {"tool_calls": [...]} (for modifications)\n- Raw HTML (to append content)\n\nDO NOT include explanatory text.`,
865
+
if (!response.ok) {
867
+
`HTTP ${response.status}: ${response.statusText}`,
871
+
const data = await response.json();
872
+
let followUpContent;
877
+
data.choices[0].message
879
+
followUpContent = data.choices[0].message.content;
880
+
} else if (data.content) {
881
+
followUpContent = data.content;
882
+
} else if (data.response) {
883
+
followUpContent = data.response;
885
+
throw new Error("Unexpected API response format");
888
+
followUpContent = followUpContent.trim();
889
+
console.log("Follow-up response:", followUpContent);
892
+
followUpContent === "COMPLETE" ||
893
+
followUpContent === '"COMPLETE"'
895
+
statusDiv.textContent = "AI SATISFIED - TASK COMPLETE";
896
+
setTimeout(() => (statusDiv.textContent = ""), 3000);
900
+
// Process follow-up commands
901
+
statusDiv.textContent = "AI MAKING ADJUSTMENTS...";
903
+
// Try to parse as tool calls
905
+
const jsonMatch = followUpContent.match(
906
+
/\{[\s\S]*"tool_calls"[\s\S]*\}/,
909
+
// Preprocess JavaScript code in JSON to escape problematic characters
910
+
let cleanJson = jsonMatch[0].replace(
911
+
/"code"\s*:\s*(`|")([^`"]*?)(`|")/g,
912
+
function (match, q1, code, q3) {
913
+
// Replace all literal backslashes with double backslashes in the code string
914
+
const escapedCode = code.replace(
918
+
return `"code":${q1}${escapedCode}${q3}`;
922
+
const toolResponse = safeJsonParse(cleanJson);
924
+
toolResponse.tool_calls &&
925
+
Array.isArray(toolResponse.tool_calls)
927
+
const followUpResults = [];
928
+
for (const toolCall of toolResponse.tool_calls) {
929
+
const result = executeToolCall(toolCall);
930
+
followUpResults.push(result);
932
+
"Follow-up tool result:",
936
+
statusDiv.textContent = `AI EXECUTED ${followUpResults.length} ADJUSTMENTS`;
940
+
let cleanCode = followUpContent
941
+
.replace(/```html\n?/g, "")
942
+
.replace(/```\n?/g, "");
943
+
document.querySelector(".content").innerHTML +=
945
+
statusDiv.textContent =
946
+
"AI ADDED FOLLOW-UP CONTENT";
949
+
console.log("Follow-up parsing error:", error);
950
+
statusDiv.textContent = "AI FEEDBACK ERROR";
953
+
setTimeout(() => (statusDiv.textContent = ""), 4000);
955
+
statusDiv.textContent = `FEEDBACK ERROR: ${error.message}`;
956
+
console.error("Feedback error:", error);
957
+
setTimeout(() => (statusDiv.textContent = ""), 3000);
961
+
// Debug helper for JSON parsing issues
962
+
function safeJsonParse(jsonString) {
964
+
return JSON.parse(jsonString);
966
+
console.error("JSON parse error:", error);
967
+
console.error("Problem JSON:", jsonString);
968
+
// Try to escape any unescaped control characters
969
+
const escapedJson = jsonString.replace(
970
+
/[\u0000-\u001F]/g,
975
+
"0000" + match.charCodeAt(0).toString(16)
981
+
return JSON.parse(escapedJson);
982
+
} catch (secondError) {
984
+
"Second parse attempt failed:",
987
+
throw error; // Throw the original error
992
+
function deleteSave(key) {
993
+
if (confirm("Are you sure you want to delete this save?")) {
994
+
localStorage.removeItem(key);
995
+
// Refresh the load modal to show updated list
1000
+
// Handle keyboard shortcuts
1001
+
function setupKeyboardHandlers() {
1002
+
const codeEditor = document.getElementById("codeEditor");
1004
+
// Remove any previous event listeners first (to avoid duplicates)
1005
+
codeEditor.removeEventListener("keydown", editorKeyHandler);
1006
+
// Add a new event listener
1007
+
codeEditor.addEventListener("keydown", editorKeyHandler);
1009
+
console.error("codeEditor element not found, will retry");
1010
+
// Retry after a short delay
1011
+
setTimeout(setupKeyboardHandlers, 100);
1014
+
// Global keyboard shortcuts
1015
+
document.addEventListener("keydown", function (e) {
1017
+
if (e.key === "F1") {
1018
+
e.preventDefault();
1022
+
else if (e.key === "F2") {
1023
+
e.preventDefault();
1027
+
else if (e.key === "F3") {
1028
+
e.preventDefault();
1031
+
// Escape key - Close any open modal
1032
+
else if (e.key === "Escape") {
1033
+
document.querySelectorAll(".modal").forEach((modal) => {
1034
+
if (modal.style.display === "block") {
1035
+
hideModal(modal.id);
1036
+
// Return focus to the editor after closing modal
1038
+
document.getElementById("codeEditor");
1048
+
// Define the editor key handler function
1049
+
function editorKeyHandler(e) {
1050
+
if (e.ctrlKey && e.key === "Enter") {
1051
+
e.preventDefault();
1052
+
generateAndExecute();
1056
+
// Set up the handlers immediately
1057
+
setupKeyboardHandlers();
1059
+
// Also ensure they're set up when the DOM is fully loaded
1060
+
// Modal functions
1061
+
function showModal(modalId) {
1062
+
const modal = document.getElementById(modalId);
1064
+
modal.style.display = "block";
1065
+
// Prevent body scrolling when modal is open
1066
+
document.body.style.overflow = "hidden";
1068
+
// Make the modal appear with a nice fade-in effect
1069
+
modal.style.opacity = "0";
1070
+
setTimeout(() => {
1071
+
modal.style.opacity = "1";
1074
+
// Add/refresh click handler for closing when clicking outside
1075
+
const outsideClickHandler = function (e) {
1076
+
if (e.target === modal) {
1077
+
hideModal(modalId);
1080
+
// Remove any existing handlers to avoid duplicates
1081
+
modal.removeEventListener("click", outsideClickHandler);
1082
+
modal.addEventListener("click", outsideClickHandler);
1084
+
// Trap focus within the modal
1085
+
const focusableElements = modal.querySelectorAll(
1086
+
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), .modal-close, .button',
1088
+
if (focusableElements.length > 0) {
1089
+
const firstElement = focusableElements[0];
1090
+
const lastElement =
1091
+
focusableElements[focusableElements.length - 1];
1093
+
// Focus the first element
1094
+
setTimeout(() => {
1095
+
firstElement.focus();
1098
+
// Add key event handler for tab key to trap focus
1099
+
const handleTabKey = function (e) {
1100
+
if (e.key === "Tab") {
1103
+
document.activeElement === firstElement
1105
+
e.preventDefault();
1106
+
lastElement.focus();
1109
+
document.activeElement === lastElement
1111
+
e.preventDefault();
1112
+
firstElement.focus();
1117
+
// Remove any existing handler first
1118
+
modal.removeEventListener("keydown", handleTabKey);
1119
+
modal.addEventListener("keydown", handleTabKey);
1121
+
// Store the handler on the modal object for later cleanup
1122
+
modal._tabHandler = handleTabKey;
1127
+
function hideModal(modalId) {
1128
+
const modal = document.getElementById(modalId);
1130
+
// Fade out effect
1131
+
modal.style.opacity = "0";
1133
+
// Hide the modal after animation
1134
+
setTimeout(() => {
1135
+
modal.style.display = "none";
1136
+
// Restore body scrolling when modal is closed
1137
+
document.body.style.overflow = "auto";
1140
+
// Return focus to editor when modal is closed
1141
+
const editor = document.getElementById("codeEditor");
1146
+
// Clear any error messages
1147
+
const messageElements = document.querySelectorAll(
1148
+
"#save-message, #load-message",
1150
+
messageElements.forEach((el) => {
1151
+
if (el) el.textContent = "";
1156
+
function showHelp() {
1157
+
showModal("help-modal");
1160
+
function showSaveModal() {
1161
+
document.getElementById("save-name").value = "";
1162
+
showModal("save-modal");
1163
+
// Focus the input field and select any existing text
1164
+
setTimeout(() => {
1165
+
const saveNameInput = document.getElementById("save-name");
1166
+
saveNameInput.focus();
1167
+
saveNameInput.select();
1171
+
function showLoadModal() {
1172
+
// Populate the load list
1173
+
const loadList = document.getElementById("load-list");
1174
+
loadList.innerHTML = "";
1176
+
// Get all keys in localStorage that start with 'plastic-save-'
1178
+
for (let i = 0; i < localStorage.length; i++) {
1179
+
const key = localStorage.key(i);
1180
+
if (key && key.startsWith("plastic-save-")) {
1181
+
const saveName = key.replace("plastic-save-", "");
1182
+
let timestamp = null;
1184
+
// Try to extract timestamp if it's a JSON object
1186
+
const saveData = JSON.parse(
1187
+
localStorage.getItem(key),
1189
+
timestamp = saveData.timestamp;
1191
+
// Old format, no timestamp available
1197
+
timestamp: timestamp,
1202
+
if (saves.length === 0) {
1203
+
loadList.innerHTML =
1204
+
'<div class="save-item">No saves found</div>';
1206
+
// Sort saves by timestamp (newest first) or alphabetically if no timestamp
1207
+
saves.sort((a, b) => {
1208
+
if (a.timestamp && b.timestamp) {
1209
+
return b.timestamp - a.timestamp; // Newest first
1210
+
} else if (a.timestamp) {
1211
+
return -1; // a comes first
1212
+
} else if (b.timestamp) {
1213
+
return 1; // b comes first
1215
+
return a.name.localeCompare(b.name); // Alphabetically
1219
+
saves.forEach((save) => {
1220
+
const saveItem = document.createElement("div");
1221
+
saveItem.className = "save-item";
1223
+
// Format timestamp if available
1225
+
if (save.timestamp) {
1226
+
const date = new Date(save.timestamp);
1227
+
dateStr = ` <span style="font-size: 12px; color: #808080;">(${date.toLocaleString()})</span>`;
1230
+
saveItem.innerHTML = `
1231
+
<span>${save.name}${dateStr}</span>
1233
+
<span class="hotkey" onclick="loadSave('${save.key}')" tabindex="0" role="button" aria-label="Load save ${save.name}">Load</span>
1234
+
<span class="separator">|</span>
1235
+
<span class="hotkey" onclick="deleteSave('${save.key}')" tabindex="0" role="button" aria-label="Delete save ${save.name}">Delete</span>
1238
+
// Add double-click support to load the save directly
1239
+
saveItem.addEventListener("dblclick", () =>
1240
+
loadSave(save.key),
1242
+
loadList.appendChild(saveItem);
1246
+
showModal("load-modal");
1249
+
function saveCurrentHTML() {
1250
+
const saveName = document
1251
+
.getElementById("save-name")
1254
+
const saveMessage = document.getElementById("save-message");
1255
+
saveMessage.textContent =
1256
+
"Please enter a name for your save";
1257
+
saveMessage.style.color = "#ff0000";
1258
+
setTimeout(() => {
1259
+
saveMessage.textContent = "";
1265
+
// Ensure all modals are closed in the saved HTML
1266
+
// First make a clone of the current document state
1267
+
const tempDiv = document.createElement("div");
1268
+
tempDiv.innerHTML = document.documentElement.outerHTML;
1270
+
// Find and hide all modals in the clone
1271
+
const modalElements = tempDiv.querySelectorAll(".modal");
1272
+
modalElements.forEach((modal) => {
1273
+
modal.style.display = "none";
1276
+
// Save the current state
1277
+
const saveData = {
1278
+
html: tempDiv.innerHTML,
1279
+
timestamp: new Date().getTime(),
1283
+
localStorage.setItem(
1284
+
`plastic-save-${saveName}`,
1285
+
JSON.stringify(saveData),
1288
+
const saveMessage = document.getElementById("save-message");
1289
+
saveMessage.textContent = `Saved as "${saveName}"`;
1290
+
saveMessage.style.color = "#008000";
1291
+
setTimeout(() => {
1292
+
saveMessage.textContent = "";
1293
+
hideModal("save-modal");
1296
+
const saveMessage = document.getElementById("save-message");
1297
+
saveMessage.textContent = `Error saving: ${e.message}`;
1298
+
saveMessage.style.color = "#ff0000";
1299
+
setTimeout(() => {
1300
+
saveMessage.textContent = "";
1305
+
// Add keyboard support for modals
document.addEventListener("DOMContentLoaded", function () {
394
-
.getElementById("codeEditor")
395
-
.addEventListener("keydown", function (e) {
396
-
if (e.ctrlKey && e.key === "Enter") {
1307
+
const saveNameInput = document.getElementById("save-name");
1308
+
if (saveNameInput) {
1309
+
// Remove any existing listeners to prevent duplicates
1310
+
const saveInputHandler = function (e) {
1311
+
if (e.key === "Enter") {
398
-
generateAndExecute();
1313
+
saveCurrentHTML();
1317
+
saveNameInput.removeEventListener(
1321
+
saveNameInput.addEventListener("keydown", saveInputHandler);
1325
+
.querySelectorAll(".modal-close")
1326
+
.forEach((closeBtn) => {
1327
+
closeBtn.addEventListener("keydown", function (e) {
1328
+
if (e.key === "Enter" || e.key === " ") {
1329
+
e.preventDefault();
1330
+
const modalId = this.closest(".modal").id;
1331
+
hideModal(modalId);
403
-
// Update time in status bar
404
-
setInterval(() => {
405
-
const now = new Date();
406
-
const timeStr = now.toLocaleTimeString([], {
410
-
const statusBarTime = document.querySelector(
411
-
".status-bar span:last-child",
413
-
if (statusBarTime) {
414
-
statusBarTime.textContent = timeStr;
1337
+
function loadSave(key) {
1339
+
const savedData = localStorage.getItem(key);
1344
+
saveObj = JSON.parse(savedData);
1346
+
saveObj = { html: savedData };
1351
+
"Loading will replace the current page. Continue?",
1354
+
hideModal("load-modal");
1356
+
const scriptToAdd = `
1358
+
document.addEventListener('DOMContentLoaded', function() {
1359
+
// Ensure all modals are hidden
1360
+
document.querySelectorAll('.modal').forEach(modal => {
1361
+
modal.style.display = "none";
1364
+
// Re-setup keyboard handlers
1365
+
if (typeof setupKeyboardHandlers === 'function') {
1366
+
setupKeyboardHandlers();
1372
+
// Load the saved HTML with the added script
1374
+
document.write(saveObj.html + scriptToAdd);
1378
+
const loadMessage =
1379
+
document.getElementById("load-message");
1380
+
loadMessage.textContent = "Save not found";
1381
+
loadMessage.style.color = "#ff0000";
1382
+
setTimeout(() => {
1383
+
loadMessage.textContent = "";
1387
+
const loadMessage = document.getElementById("load-message");
1388
+
loadMessage.textContent = `Error loading: ${e.message}`;
1389
+
loadMessage.style.color = "#ff0000";
1390
+
setTimeout(() => {
1391
+
loadMessage.textContent = "";
dunkirk.sh