61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import { useTemplateRef, watch } from "vue"
|
|
// @ts-ignore
|
|
import * as Sk from "skulpt"
|
|
import { code, input, output, turtleRunId } from "../composables/code"
|
|
|
|
const turtleCanvas = useTemplateRef("turtle")
|
|
|
|
function builtinRead(x: any) {
|
|
if (
|
|
Sk.builtinFiles === undefined ||
|
|
Sk.builtinFiles["files"][x] === undefined
|
|
)
|
|
throw "文件没有找到：'" + x + "'"
|
|
return Sk.builtinFiles["files"][x]
|
|
}
|
|
|
|
function runSkulptTurtle() {
|
|
const canvas = turtleCanvas.value
|
|
if (!canvas) return
|
|
canvas.innerHTML = ""
|
|
// Prevent UI from being stuck forever on infinite loops (still runs on main thread).
|
|
// Skulpt checks this limit periodically and throws a timeout error.
|
|
;(Sk as any).execLimit = 5000
|
|
;(Sk as any).execStart = new Date()
|
|
Sk.configure({
|
|
output: console.log,
|
|
read: builtinRead,
|
|
inputfun: function () {
|
|
return input.value
|
|
},
|
|
__future__: Sk.python3,
|
|
})
|
|
Sk.TurtleGraphics = {
|
|
target: canvas,
|
|
width: canvas.clientWidth,
|
|
height: canvas.clientHeight,
|
|
}
|
|
Sk.misceval
|
|
.asyncToPromise(function () {
|
|
return Sk.importMainWithBody("<stdin>", false, code.value, true)
|
|
})
|
|
.catch((err: any) => {
|
|
output.value += String(err)
|
|
})
|
|
}
|
|
|
|
watch(turtleRunId, () => runSkulptTurtle())
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="turtle" class="canvas"></div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|