-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c819504
commit 94b983a
Showing
9 changed files
with
714 additions
and
53 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"liveServer.settings.port": 5501 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Bevy Vector Style</title> | ||
<style> | ||
body, html { | ||
margin: 0; | ||
padding: 0; | ||
height: 100%; | ||
} | ||
.container { | ||
display: flex; | ||
flex-direction: column; | ||
height: 100vh; | ||
} | ||
.row { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
padding: 20px; | ||
} | ||
.header { | ||
flex: 0 0 auto; | ||
} | ||
.content { | ||
flex: 1 0 auto; | ||
overflow: hidden; /* Prevents scrolling within this container */ | ||
} | ||
.footer { | ||
flex: 0 0 auto; | ||
} | ||
#wasm-container { | ||
width: 50%; | ||
height: 0; | ||
padding-bottom: 56.25%; /* 16:9 aspect ratio */ | ||
position: relative; | ||
background-color: red; | ||
} | ||
#wasm-container canvas { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div class="container"> | ||
<div class="row header"> | ||
<h1>Bevy Vector Style</h1> | ||
</div> | ||
|
||
<div class="row content"> | ||
<div id="wasm-container"></div> | ||
</div> | ||
|
||
<div class="row header"> | ||
<h2>Second Header</h2> | ||
</div> | ||
|
||
<div class="row footer"> | ||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p> | ||
</div> | ||
</div> | ||
|
||
<script type="module"> | ||
import init from './out/bevy_wireframe.js'; | ||
|
||
async function run() { | ||
const wasmContainer = document.getElementById('wasm-container'); | ||
|
||
// Create a mutation observer to watch for the canvas being added to the body | ||
const observer = new MutationObserver((mutations) => { | ||
for (let mutation of mutations) { | ||
for (let node of mutation.addedNodes) { | ||
if (node.tagName === 'CANVAS') { | ||
node.style.width = '100%'; | ||
node.style.height = '100%'; | ||
wasmContainer.appendChild(node); | ||
observer.disconnect(); // Stop observing once we've moved the canvas | ||
} | ||
} | ||
} | ||
}); | ||
|
||
// Start observing the document body for changes | ||
observer.observe(document.body, { childList: true }); | ||
|
||
// Initialize the WebAssembly module | ||
await init(); | ||
} | ||
|
||
run(); | ||
</script> | ||
</body> | ||
</html> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,114 @@ | ||
<!DOCTYPE html> | ||
<!-- <!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Bevy Wireframe</title> | ||
<title>Bevy Vector Style</title> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<div class="container"> | ||
<div class="row header"> | ||
<h1>Bevy Vector Style</h1> | ||
</div> | ||
<div class="row content"> | ||
<div id="wasm-container"></div> | ||
</div> | ||
<div class="row header"> | ||
<h2>Second Header</h2> | ||
</div> | ||
<div class="row footer"> | ||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p> | ||
</div> | ||
</div> | ||
<script type="module"> | ||
import init from './out/bevy_wireframe.js'; | ||
async function run() { | ||
const wasmContainer = document.getElementById('wasm-container'); | ||
// Create a mutation observer to watch for the canvas being added to the body | ||
const observer = new MutationObserver((mutations) => { | ||
for (let mutation of mutations) { | ||
for (let node of mutation.addedNodes) { | ||
if (node.tagName === 'CANVAS') { | ||
node.style.width = '100%'; | ||
node.style.height = '100%'; | ||
wasmContainer.appendChild(node); | ||
observer.disconnect(); // Stop observing once we've moved the canvas | ||
} | ||
} | ||
} | ||
}); | ||
// Start observing the document body for changes | ||
observer.observe(document.body, { childList: true }); | ||
// Initialize the WebAssembly module | ||
await init(); | ||
} | ||
run(); | ||
</script> | ||
</body> | ||
</html> --> | ||
|
||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Bevy Vector Style</title> | ||
<link rel="stylesheet" href="styles.css"> | ||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono&display=swap" rel="stylesheet"> | ||
</head> | ||
<body class="color-scheme-home"> | ||
<div class="grid"> | ||
<div class="main-column"> | ||
<h1 class="main-heading">Bevy Vector Style</h1> | ||
<div id="wasm-container"></div> | ||
<h2>Second Header</h2> | ||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p> | ||
</div> | ||
<div class="sidebar-column"> | ||
<div class="social-links"> | ||
<div><a href="#">Link 1</a></div> | ||
<div><a href="#">Link 2</a></div> | ||
<div><a href="#">Link 3</a></div> | ||
</div> | ||
<a href="/" class="big-side-text">SIDEBAR</a> | ||
</div> | ||
</div> | ||
|
||
<script type="module"> | ||
import init from './out/bevy_wireframe.js'; | ||
init(); | ||
|
||
async function run() { | ||
const wasmContainer = document.getElementById('wasm-container'); | ||
|
||
const observer = new MutationObserver((mutations) => { | ||
for (let mutation of mutations) { | ||
for (let node of mutation.addedNodes) { | ||
if (node.tagName === 'CANVAS') { | ||
node.style.width = '100%'; | ||
node.style.height = '100%'; | ||
wasmContainer.appendChild(node); | ||
observer.disconnect(); | ||
} | ||
} | ||
} | ||
}); | ||
|
||
observer.observe(document.body, { childList: true }); | ||
|
||
await init(); | ||
} | ||
|
||
run(); | ||
</script> | ||
</body> | ||
</html> | ||
</html> |
Oops, something went wrong.