Skip to content

Commit

Permalink
fix copy buttons, html tags, and favicon
Browse files Browse the repository at this point in the history
  • Loading branch information
mockersf committed Oct 1, 2024
1 parent 5ae2be3 commit 5843ed5
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 40 deletions.
Binary file added wasm/android-chrome-192x192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wasm/android-chrome-512x512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wasm/apple-touch-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wasm/favicon-16x16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wasm/favicon-32x32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wasm/favicon.ico
Binary file not shown.
124 changes: 84 additions & 40 deletions wasm/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@
<html lang="en">

<head>
<link rel="icon" href="/vleue_navigator.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-rust.min.js"></script>
<title>
Expand All @@ -16,7 +19,7 @@
top: 0;
left: 0;
width: 100%;
background-color: rgba(31, 41, 55, 0.9); /* bg-gray-800 with opacity */
background-color: rgba(31, 41, 55, 0.9);
display: none;
align-items: center;
justify-content: center;
Expand All @@ -35,12 +38,17 @@
font-weight: bold;
color: white;
}
.copy-button {
transition: background-color 0.3s ease;

pre[class*="language-"] {
position: relative;
}

.copy-button:active {
transform: scale(0.95);
pre[class*="language-"] button {
position: absolute;
top: 5px;
right: 5px;
padding: 2px 4px;
transition: background-color 0.3s ease;
}
</style>
</head>
Expand All @@ -49,7 +57,7 @@

<div class="bg-gray-800 text-white py-20">
<div class="container mx-auto text-center flex items-center justify-center">
<img src="/vleue_navigator.png" alt="Vleue Navigator Logo" class="w-20 h-20 mr-4">
<img src="vleue_navigator.png" alt="Vleue Navigator Logo" class="w-20 h-20 mr-4">
<div>
<h1 class="text-5xl font-bold mb-4">Vleue Navigator</h1>
<p class="text-xl">Efficient NavMesh and pathfinding solutions for your Bevy projects</p>
Expand All @@ -60,8 +68,10 @@ <h1 class="text-5xl font-bold mb-4">Vleue Navigator</h1>
<footer class="bg-gray-800 text-white py-4">
<div class="container mx-auto text-center">
<p>
<a href="/~https://github.com/vleue/vleue_navigator" class="text-blue-500 hover:underline">GitHub Repository</a> |
<a href="https://docs.rs/vleue_navigator/latest/vleue_navigator/" class="text-blue-500 hover:underline">Documentation</a>
<a href="/~https://github.com/vleue/vleue_navigator" class="text-blue-500 hover:underline">GitHub
Repository</a> |
<a href="https://docs.rs/vleue_navigator/latest/vleue_navigator/"
class="text-blue-500 hover:underline">Documentation</a>
</p>
</div>
</footer>
Expand All @@ -79,15 +89,17 @@ <h1 class="text-3xl font-bold mb-4">Features</h1>
<li>Layers support for targeted updated</li>
<li>Layers can overlap</li>
</ul>
</div>

<div class="container mx-auto p-4">

<h1 class="text-3xl font-bold mb-4">How to Use</h1>

<div class="mb-8">
<h2 class="text-2xl font-bold mb-2">Installation</h2>
<div class="relative">
<pre class="p-4 rounded overflow-x-auto"><code class="language-shell">cargo add vleue_navigator</code></pre>
<button class="copy-button absolute top-0 right-0 mt-1 mr-1 bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600" onclick="copyToClipboard('cargo add vleue_navigator', this)">Copy</button>
<pre
class="p-4 rounded overflow-x-auto"><code class="language-shell">cargo add vleue_navigator</code></pre>
</div>
</div>

Expand All @@ -108,9 +120,10 @@ <h2 class="text-2xl font-bold mb-2">Usage</h2>
...
.run();
}</code></pre>
You can then spawn a NavMesh entity:
<div class="relative">
<pre class="p-4 rounded overflow-x-auto"><code class="language-rust">fn spawn_navmesh(mut commands: Commands) {
</div>
You can then spawn a NavMesh entity:
<div class="relative">
<pre class="p-4 rounded overflow-x-auto"><code class="language-rust">fn spawn_navmesh(mut commands: Commands) {
commands.spawn(NavMeshBundle {
settings: NavMeshSettings {
// Define the outer borders of the navmesh.
Expand All @@ -126,10 +139,11 @@ <h2 class="text-2xl font-bold mb-2">Usage</h2>
..NavMeshBundle::with_default_id()
});
}</code></pre>
Using the NavMesh to find a path:
</div>
Using the NavMesh to find a path:

<div class="relative">
<pre class="p-4 rounded overflow-x-auto"><code class="language-rust">pub fn find_path(navmeshes: Res<Assets<NavMesh>>, navmesh: Query<(&Handle<NavMesh>, Ref<NavMeshStatus>)>) {
<div class="relative">
<pre class="p-4 rounded overflow-x-auto"><code class="language-rust">pub fn find_path(navmeshes: Res<Assets<NavMesh>>, navmesh: Query<(&Handle<NavMesh>, Ref<NavMeshStatus>)>) {
let (navmesh_handle, status) = navmesh.single();
if status != NavMeshStatus::Built {
// NavMesh is not ready yet.
Expand All @@ -147,22 +161,27 @@ <h2 class="text-2xl font-bold mb-2">Usage</h2>
}
}
}</code></pre>
<button class="copy-button absolute top-0 right-0 mt-1 mr-1 bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600" onclick="copyToClipboard(`// Example usage of Vleue Navigator\nuse vleue_navigator::NavMesh;\n\nfn main() {\n let navmesh = NavMesh::new();\n // Add your pathfinding logic here\n}`, this)">Copy</button>
</div>
</div>

</div>

<div class="container mx-auto p-4">

<h1 class="text-3xl font-bold mb-4">Examples</h1>
<div class="flex flex-col space-y-8">
<a href="primitive_3d.html" class="flex items-center">
<img src="screenshots/primitive_3d.png" class="object-cover w-1/2" alt="Auto updating a NavMesh from Bevy shapes" />
<img src="screenshots/primitive_3d.png" class="object-cover w-1/2"
alt="Auto updating a NavMesh from Bevy shapes" />
<div class="ml-8 text-xl">Auto updating a NavMesh from Bevy shapes</div>
</a>
<a href="auto_navmesh_aabb.html" class="flex items-center flex-row-reverse">
<img src="screenshots/auto_navmesh_aabb.png" class="object-cover w-1/2" alt="Auto updating a NavMesh from Bevy Aabb component" />
<img src="screenshots/auto_navmesh_aabb.png" class="object-cover w-1/2"
alt="Auto updating a NavMesh from Bevy Aabb component" />
<div class="mr-8 text-xl">Auto updating a NavMesh from Bevy `Aabb` component</div>
</a>
<a href="auto_navmesh_primitive.html" class="flex items-center">
<img src="screenshots/auto_navmesh_primitive.png" class="object-cover w-1/2" alt="NavMesh updated using primitive shapes" />
<img src="screenshots/auto_navmesh_primitive.png" class="object-cover w-1/2"
alt="NavMesh updated using primitive shapes" />
<div class="ml-8 text-xl">NavMesh updated using primitive shapes (rectangle, circle, ...)</div>
</a>
<a href="demo.html" class="flex items-center flex-row-reverse">
Expand All @@ -174,19 +193,22 @@ <h1 class="text-3xl font-bold mb-4">Examples</h1>
<h2 class="text-2xl font-bold mt-8 mb-4">Avian integration</h2>
<div class="flex flex-wrap">
<a href="auto_navmesh_avian2d.html" class="m-5 text-xl flex flex-col items-center">
<img src="screenshots/auto_navmesh_avian2d.png" class="object-cover" alt="Auto updating a NavMesh with colliders from Avian2d" />
<img src="screenshots/auto_navmesh_avian2d.png" class="object-cover"
alt="Auto updating a NavMesh with colliders from Avian2d" />
<div class="mt-2">Auto updating a NavMesh with colliders from Avian2d</div>
</a>
<a href="auto_navmesh_avian3d.html" class="m-5 text-xl flex flex-col items-center">
<img src="screenshots/auto_navmesh_avian3d.png" class="object-cover" alt="Auto updating a NavMesh with colliders from Avian3d" />
<img src="screenshots/auto_navmesh_avian3d.png" class="object-cover"
alt="Auto updating a NavMesh with colliders from Avian3d" />
<div class="mt-2">Auto updating a NavMesh with colliders from Avian3d</div>
</a>
</div>

<h2 class="text-2xl font-bold mt-8 mb-4">Others</h2>
<div class="flex flex-wrap">
<a href="many.html" class="m-5 text-xl flex flex-col items-center">
<img src="screenshots/many.png" class="object-cover" alt="Spawn many agents and run a lot of concurrent pathfinding tasks" />
<img src="screenshots/many.png" class="object-cover"
alt="Spawn many agents and run a lot of concurrent pathfinding tasks" />
<div class="mt-2">Spawn many agents and run a lot of concurrent pathfinding tasks</div>
</a>
<a href="lines.html" class="m-5 text-xl flex flex-col items-center">
Expand All @@ -206,7 +228,8 @@ <h2 class="text-2xl font-bold mt-8 mb-4">Others</h2>
<div class="mt-2">Navmesh from random obstacles</div>
</a>
<a href="auto_navmesh_aabb.html" class="m-5 text-xl flex flex-col items-center">
<img src="screenshots/auto_navmesh_aabb.png" class="object-cover" alt="NavMesh automatically updated from obstacles using Aabb" />
<img src="screenshots/auto_navmesh_aabb.png" class="object-cover"
alt="NavMesh automatically updated from obstacles using Aabb" />
<div class="mt-2">NavMesh automatically updated from obstacles using `Aabb`</div>
</a>
</div>
Expand All @@ -216,25 +239,25 @@ <h2 class="text-2xl font-bold mt-8 mb-4">Others</h2>
<h1 class="text-3xl font-bold mb-4">Reading List of implemented and used techniques</h1>
<ul class="list-disc pl-5 mb-8">
<li><a class="text-blue-500 hover:underline"
href="https://www.ijcai.org/proceedings/2017/0070.pdf">Compromise-free Pathfinding on a Navigation
Mesh</a></li>
href="https://www.ijcai.org/proceedings/2017/0070.pdf">Compromise-free Pathfinding on a
Navigation Mesh</a></li>
<li><a class="text-blue-500 hover:underline"
href="https://hull-repository.worktribe.com/preview/376364/000870493786962263.pdf">Line
Generalisation by Repeated Elimination of Points</a></li>
<li><a class="text-blue-500 hover:underline"
href="https://en.wikipedia.org/wiki/Constrained_Delaunay_triangulation">Constrained Delaunay
Triangulation</a></li>
<li><a class="text-blue-500 hover:underline"
href="https://mcmains.me.berkeley.edu/pubs/DAC05OffsetPolygon.pdf">Polygon Offsetting by Computing
Winding Numbers</a></li>
href="https://mcmains.me.berkeley.edu/pubs/DAC05OffsetPolygon.pdf">Polygon Offsetting by
Computing Winding Numbers</a></li>
</ul>
</div>

<div class="container mx-auto p-4">
<h1 class="text-3xl font-bold mb-4">Example Videos</h1>
<h1 class="text-3xl font-bold mb-4">Showcase Videos</h1>
<ul class="list-disc pl-5 mb-8">
<li><a class="text-blue-500 hover:underline" href="https://www.youtube.com/watch?v=Zi9EMAdHp4M">Pathfinding
many agents</a></li>
with many agents</a></li>
<li><a class="text-blue-500 hover:underline" href="https://www.youtube.com/watch?v=wYRrvWaLjJ8">Parameters
for NavMesh generation</a></li>
</ul>
Expand All @@ -254,13 +277,34 @@ <h1>Vleue Navigator</h1>
stickyMenu.style.display = 'none';
}
});
function copyToClipboard(text, button) {
navigator.clipboard.writeText(text).then(() => {
const copyButtonLabel = "Copy";

let blocks = document.querySelectorAll("pre");

blocks.forEach((block) => {
if (navigator.clipboard) {
let button = document.createElement("button");
button.className = "rounded bg-gray-600 hover:bg-gray-800"

button.innerText = copyButtonLabel;
block.appendChild(button);

button.addEventListener("click", async () => {
button.className = "rounded bg-gray-400"
await copyCode(block);
setTimeout(() => {
button.className = "rounded bg-gray-600 hover:bg-gray-800"
}, 400);
});
}
});

async function copyCode(block) {
let code = block.querySelector("code");
let text = code.innerText;

}, (err) => {
console.error('Could not copy text: ', err);
});
await navigator.clipboard.writeText(text);
}
</script>

</html>
</html>
19 changes: 19 additions & 0 deletions wasm/site.webmanifest
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "./android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

0 comments on commit 5843ed5

Please sign in to comment.