agentscript
Version:
AgentScript Model in Model/View architecture
134 lines (121 loc) • 5.19 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">
This is a template for starting out a new Model from scratch. It
has a very simple TemplateModel that shows use of turtles and
links, along with an index.html file providing a View and an
Animator to run the model.
</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">
Ants find the shortest path to food by leaving a trail of
evaporating pheromones in their environment. A classic example
of stigmergic behavior.
</div>
</div>
<div class="example-card" data-model="Fire">
<img class="example-thumb" src="./thumbs/fire.png" />
<div class="example-title">Fire</div>
<div class="example-description">
Fire spreading on patches based on neighbor probabilities.
</div>
</div>
<div class="example-card" data-model="Diffusion">
<img class="example-thumb" src="./thumbs/diffuse.png" />
<div class="example-title">Diffusion</div>
<div class="example-description">
Diffusion is the process by which particles move from an area of
higher concentration to an area of lower concentration. Here two
turtles travel through patches, dropping a random value on
patches and diffusing these values.
</div>
</div>
<script type="module">
// import getWebDAVClient from '../editor/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 ensureExampleCopied(model, user) {
const base = `/agentscript/users/${user}/${model}`
const src = `/agentscript/ide/examples/${model}`
try {
console.log(`📁 Checking if ${base}/Model.js exists...`)
await client.stat(`${base}/Model.js`)
console.log(`✅ ${model} already copied for user ${user}`)
} catch {
console.warn(`🛠 Copying ${model} to ${base}...`)
try {
await client.createDirectory(base)
const files = ['Model.js', 'View.js', 'index.html']
for (const file of files) {
console.log(`📤 Copying ${file}...`)
await client.copyFile(
`${src}/${file}`,
`${base}/${file}`
)
}
console.log(`✅ All files copied to ${base}`)
} catch (err) {
console.error(`❌ Failed to copy ${model}:`, err)
alert(`Error copying ${model}: see console for details`)
}
}
}
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>