84 lines
1.6 KiB
Svelte
84 lines
1.6 KiB
Svelte
<script>
|
|
export let title
|
|
export let data
|
|
export let showCanvas = false
|
|
export let showWebGL = false
|
|
export let showAudio = false
|
|
|
|
let canvas = null
|
|
let webgl = null
|
|
let audio = null
|
|
|
|
$: if (showCanvas && canvas) {
|
|
const ctx = canvas.getContext('2d')
|
|
ctx.textBaseline = 'top'
|
|
ctx.font = '14px Arial'
|
|
ctx.fillText('Canvas test', 2, 2)
|
|
}
|
|
|
|
$: if (showWebGL && webgl) {
|
|
const gl = webgl.getContext('webgl') || webgl.getContext('experimental-webgl')
|
|
if (gl) {
|
|
gl.clearColor(0.1, 0.2, 0.3, 1.0)
|
|
gl.clear(gl.COLOR_BUFFER_BIT)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="section">
|
|
<h2>{title}</h2>
|
|
|
|
{#if showCanvas}
|
|
<canvas bind:this={canvas} width="300" height="100" style="border: 1px solid #ccc;"></canvas>
|
|
{/if}
|
|
|
|
{#if showWebGL}
|
|
<canvas bind:this={webgl} width="100" height="100"></canvas>
|
|
{/if}
|
|
|
|
{#if showAudio}
|
|
<audio bind:this={audio} controls></audio>
|
|
{/if}
|
|
|
|
<pre>{JSON.stringify(data, null, 2)}</pre>
|
|
</div>
|
|
|
|
<style>
|
|
.section {
|
|
background: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.section h2 {
|
|
margin-top: 0;
|
|
color: #495057;
|
|
font-size: 1.2em;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
pre {
|
|
background: #fff;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
overflow-x: auto;
|
|
font-size: 0.85em;
|
|
line-height: 1.4;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
canvas {
|
|
display: block;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
audio {
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|