agentscript
Version:
AgentScript Model in Model/View architecture
93 lines (75 loc) • 4.36 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File System Access Example</title>
<script type="module">
import FileAccess from '../src/FileAccess.js';
const jsonString = `[{"command":"reset()","id":1728927569824,"name":"reset","position":{"x":33,"y":70},"type":"button"},{"command":"anim.setFps(value)","id":1728682054456,"max":"50","min":"0","name":"fps","position":{"x":177,"y":36},"step":"1","type":"range","value":"30"},{"id":1729270887157,"type":"output","name":"ticks","position":{"x":336,"y":37},"monitor":"model.ticks","fps":"10","command":null},{"id":1729463191305,"type":"range","name":"patchSize","command":"view.reset(value)","position":{"x":191,"y":155},"min":"1","max":"15","step":"1","value":"10"},{"id":1729463877025,"type":"button","name":"downloadCanvas","command":"view.downloadCanvas()","position":{"x":56,"y":232}},{"id":1729464380401,"type":"range","name":"turtleSize","command":"view.drawOptions.turtlesSize = value","position":{"x":33,"y":159},"min":"1","max":"10","step":"1","value":"3"},{"id":1729535684833,"type":"button","name":"downloadJson","command":"util.downloadJsonModule(json, 'elements.js')","position":{"x":190,"y":231}},{"id":1729638667060,"type":"dropdown","name":"shape","command":"view.drawOptions.turtlesShape = value","position":{"x":98,"y":34},"options":["circle","dart","person","bug","arrow"],"selected":"bug"},{"id":1730141024864,"type":"checkbox","name":"run","command":"checked ? anim.start() : anim.stop()","position":{"x":33,"y":35},"checked":false},{"id":1731189397631,"type":"output","name":"foodSeekers","command":null,"position":{"x":349,"y":149},"monitor":"model.foodSeekers","fps":"10"},{"id":1732139806352,"type":"plot","name":"foodSeekers, nestSeekers","command":null,"position":{"x":34,"y":406},"width":"450","height":"150","pens":["foodSeekers","nestSeekers"],"fps":"60"},{"id":1732212640249,"type":"output","name":"nestSeekers","command":null,"position":{"x":352,"y":202},"monitor":"model.nestSeekers","fps":"10"}]`
const json = JSON.parse(jsonString)
let fileAccess;
document.addEventListener("DOMContentLoaded", () => {
// Initialize FileAccess with a specific file name
fileAccess = new FileAccess("fileSysData");
// Attach event listeners to buttons
document.getElementById("saveJson").addEventListener("click", async () => {
const data = json
await fileAccess.writeJson(data);
console.log("JSON saved.");
});
document.getElementById("loadJson").addEventListener("click", async () => {
const data = await fileAccess.readJson();
if (data) {
document.getElementById("output").textContent = JSON.stringify(data, null, 2);
console.log("Loaded JSON:", data);
} else {
console.log("No JSON data loaded.");
}
});
document.getElementById("clearHandle").addEventListener("click", async () => {
await fileAccess.clearFileHandle();
console.log("File handle cleared.");
});
document.getElementById("revokePermissions").addEventListener("click", async () => {
await fileAccess.revokePermissions();
console.log("Permissions revoked.");
});
document.getElementById("resetAll").addEventListener("click", async () => {
await fileAccess.resetAll();
console.log("File handle cleared and permissions reset.");
});
});
</script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
}
pre {
margin-top: 20px;
padding: 10px;
border: 1px solid
background:
font-family: monospace;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>File System Access Example</h1>
<p>Use the buttons below to test saving, loading, and resetting file access:</p>
<button id="saveJson">Save JSON</button>
<button id="loadJson">Load JSON</button>
<button id="clearHandle">Clear File Handle</button>
<button id="revokePermissions">Revoke Permissions</button>
<button id="resetAll">Reset All</button>
<h2>Loaded JSON:</h2>
<pre id="output">Nothing loaded yet...</pre>
</body>
</html>