agentscript
Version:
AgentScript Model in Model/View architecture
112 lines (104 loc) • 3.92 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>AgentScript Examples (WebDAV)</title>
<style>
body {
font-family: sans-serif;
margin: 40px;
background: #fafafa;
}
.example-card {
border: 1px solid #ccc;
padding: 16px;
margin-bottom: 20px;
width: 300px;
cursor: pointer;
background: white;
border-radius: 6px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.example-thumb {
width: 100%;
}
.example-title {
font-size: 20px;
margin-top: 8px;
}
.example-description {
font-size: 14px;
color: #555;
}
</style>
</head>
<body>
<h1>Select an Example</h1>
<div class="example-card" data-model="Template">
<img class="example-thumb" src="./thumbs/template.png" />
<div class="example-title">Template</div>
<div class="example-description">
A starting point for simple models.
</div>
</div>
<div class="example-card" data-model="Ants">
<img class="example-thumb" src="./thumbs/ants.png" />
<div class="example-title">Ants</div>
<div class="example-description">
Turtles follow pheromones to food.
</div>
</div>
<script type="module">
// import { getWebDAVClient } from './getWebDAVClient.js'
import { getWebDAVClient } from '../editor/getWebDAVClient.js'
const client = getWebDAVClient()
function getUserName() {
let name = localStorage.getItem('webdavUser')
if (!name) {
name = 'user-' + Math.floor(Math.random() * 10000)
localStorage.setItem('webdavUser', name)
}
return name
}
async function ensureDir(path) {
try {
const stat = await client.stat(path)
if (!stat.isDirectory)
throw new Error(`${path} is not a directory`)
} catch (err) {
if (err.status === 404) {
await client.createDirectory(path)
} else {
throw err
}
}
}
async function ensureExampleCopied(model, user) {
const base = `/agentscript/users/${user}/${model}`
try {
await client.stat(`${base}/Model.js`)
} catch {
const src = `/agentscript/ide/examples/${model}`
await ensureDir(`/agentscript/users/${user}`)
await ensureDir(base)
await Promise.all([
client.copyFile(`${src}/Model.js`, `${base}/Model.js`),
client.copyFile(`${src}/View.js`, `${base}/View.js`),
client.copyFile(
`${src}/index.html`,
`${base}/index.html`
),
])
}
}
document.querySelectorAll('[data-model]').forEach(el => {
el.addEventListener('click', async () => {
const model = el.dataset.model
const user = getUserName()
await ensureExampleCopied(model, user)
window.location.href = `/editor/editor.html?user=${user}&model=${model}`
})
})
</script>
</body>
</html>