mirror of https://github.com/sotrh/learn-wgpu
some fixes to web
parent
19c1c08b62
commit
bd6721dde2
@ -1,34 +1,72 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wasm-example">
|
<div id="wasm-example">
|
||||||
<div class="error" v-if="error">
|
<div class="error" v-if="error">
|
||||||
{{ error }}
|
{{ error }}
|
||||||
</div>
|
</div>
|
||||||
|
<button v-if="!exampleStarted && !autoLoad" @click="loadExample()" :disabled="loading">Try {{exampleName}}!</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// Found at https://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript
|
||||||
|
function toTitleCase(str) {
|
||||||
|
return str.replace(
|
||||||
|
/\w\S*/g,
|
||||||
|
function(txt) {
|
||||||
|
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: { example: "" },
|
props: {
|
||||||
|
example: "",
|
||||||
|
autoLoad: false,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
error: {
|
error: "",
|
||||||
value: "",
|
loading: false,
|
||||||
required: true,
|
exampleStarted: false,
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async mounted() {
|
computed: {
|
||||||
await this.$nextTick();
|
exampleName() {
|
||||||
|
return toTitleCase(this.example);
|
||||||
try {
|
|
||||||
const init = await import(`./wasm/${this.example}/${this.example}.js`);
|
|
||||||
init().then(() => {
|
|
||||||
console.log("WASM Loaded");
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
this.error = `An error occurred loading "${this.example}": ${e}`;
|
|
||||||
console.error(e);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
async loadExample() {
|
||||||
|
this.loading = true;
|
||||||
|
try {
|
||||||
|
const init = await import(`./wasm/${this.example}/${this.example}.js`);
|
||||||
|
init().then(() => {
|
||||||
|
console.log("WASM Loaded");
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
// TODO: Figure out a better way to ignore "control flow" errors
|
||||||
|
if (`${e}` != "Error: Using exceptions for control flow, don't mind me. This isn't actually an error!") {
|
||||||
|
this.error = `An error occurred loading "${this.example}": ${e}`;
|
||||||
|
console.error(e);
|
||||||
|
this.exampleStarted = false;
|
||||||
|
} else {
|
||||||
|
this.exampleStarted = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
await this.$nextTick()
|
||||||
|
if (this.autoLoad) {
|
||||||
|
await this.loadExample()
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#wasm-example canvas {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue