Skip to content

Commit

Permalink
web dev
Browse files Browse the repository at this point in the history
  • Loading branch information
arcadeperfect committed Sep 3, 2024
1 parent c819504 commit 94b983a
Show file tree
Hide file tree
Showing 9 changed files with 714 additions and 53 deletions.
104 changes: 104 additions & 0 deletions .idea/workspace.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
100 changes: 100 additions & 0 deletions index copy.html
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>

108 changes: 104 additions & 4 deletions index.html
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>
Loading

0 comments on commit 94b983a

Please sign in to comment.