mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-04 10:50:00 +00:00
71 lines
1.8 KiB
HTML
71 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> -->
|
|
<!-- SPDX-License-Identifier: MIT -->
|
|
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Slint Slide Puzzle Demo (Web Assembly version)</title>
|
|
</head>
|
|
<link rel="stylesheet" href="https://slint.dev/css/demos-v1.css">
|
|
<style>
|
|
body {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
max-width: none;
|
|
}
|
|
|
|
#container {
|
|
display: grid;
|
|
justify-items: stretch;
|
|
align-content: stretch;
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: max-content auto max-content;
|
|
}
|
|
|
|
</style>
|
|
|
|
<body>
|
|
<div id="spinner" style="position: absolute; top: 50%; width: 100%">
|
|
<div class="spinner">Loading...</div>
|
|
</div>
|
|
<div id="container">
|
|
<p>This is the <a href="https://slint.dev">Slint</a> Slide Puzzle compiled to WebAssembly. Note that the wasm
|
|
build is done for demonstration purposes. Native applications are the real target of the toolkit.
|
|
</p>
|
|
<canvas id="canvas"></canvas>
|
|
<p class="links">
|
|
<a href="https://github.com/slint-ui/slint/blob/master/examples/slide_puzzle/">
|
|
View Source Code on GitHub</a> -
|
|
<a href="https://slint.dev/editor?load_demo=examples/slide_puzzle/slide_puzzle.slint">
|
|
Open in SlintPad
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<script type="module">
|
|
import init from './pkg/slide_puzzle.js';
|
|
async function loadWasm() {
|
|
try {
|
|
await init();
|
|
} catch (error) {
|
|
const errorMessage = error.toString();
|
|
if (!errorMessage.includes("Using exceptions for control flow, don't mind me")) {
|
|
alert('Error loading WASM: ' + errorMessage);
|
|
}
|
|
}
|
|
}
|
|
loadWasm().finally(() => {
|
|
document.getElementById("spinner").remove();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|