Skip to content

Add: 3D Virtual robotics maze #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lakshya-2440 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add: 3D Virtual robotics maze #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
61dbd8f
Added a Assemble a robot in 3D feature
Lakshya-2440 Mar 25, 2026
82d84c4
Initial commit for 3dmaze branch
Lakshya-2440 Mar 30, 2026
0020929
fixes
Lakshya-2440 Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,404 changes: 2,404 additions & 0 deletions 3D/app.js
View file
Open in desktop

Large diffs are not rendered by default.

1,703 changes: 1,703 additions & 0 deletions 3D/assemble-app.js
View file
Open in desktop

Large diffs are not rendered by default.

69 changes: 69 additions & 0 deletions 3D/assemble-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background: #000;
}

body {
display: grid;
place-items: center;
position: relative;
font-family: "Segoe UI", Arial, sans-serif;
}

:root {
--tutorial-border: rgba(96, 165, 250, 0.55);
--tutorial-kicker: #93c5fd;
--tutorial-close-bg: rgba(30, 41, 59, 0.95);
--tutorial-close-text: #e2e8f0;
--tutorial-close-hover-bg: rgba(51, 65, 85, 0.98);
--tutorial-action-border: rgba(34, 197, 94, 0.65);
--tutorial-action-bg: rgba(20, 83, 45, 0.95);
--tutorial-action-text: #f0fdf4;
--tutorial-action-hover-bg: rgba(22, 101, 52, 1);
}

#simCanvas {
width: min(100vw, calc(100vh * 16 / 9));
height: min(100vh, calc(100vw * 9 / 16));
max-width: 100vw;
max-height: 100vh;
display: block;
background: #000;
}

#cameraVideo {
display: none;
}

.mode-jump {
position: fixed;
top: 18px;
right: 18px;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border: 1px solid rgba(96, 165, 250, 0.75);
border-radius: 999px;
background: rgba(8, 15, 24, 0.9);
color: #e0f2fe;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 11px;
font-weight: 700;
backdrop-filter: blur(10px);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mode-jump:hover {
background: rgba(30, 58, 138, 0.95);
border-color: rgba(147, 197, 253, 0.95);
color: #ffffff;
}

98 changes: 98 additions & 0 deletions 3D/assemble.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Gesture Robot Maze Playground</title>
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script>
window.__assetVersion = Date.now().toString();
const sharedStylesheet = document.createElement("link");
sharedStylesheet.rel = "stylesheet";
sharedStylesheet.href = `./tutorial.css?v=${window.__assetVersion}`;
document.head.appendChild(sharedStylesheet);
const stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href = `./assemble-style.css?v=${window.__assetVersion}`;
document.head.appendChild(stylesheet);
Comment thread
Lakshya-2440 marked this conversation as resolved.
</script>
</head>
<body>
<div class="tutorial-pop" id="assembly-tutorial" role="dialog" aria-modal="true" aria-labelledby="assembly-tutorial-title">
<div class="tutorial-card" tabindex="-1">
<button class="tutorial-close" id="assembly-tutorial-close" aria-label="Close tutorial">×</button>
<div class="tutorial-kicker">Quick Start</div>
<h2 id="assembly-tutorial-title">3D Assembly</h2>
<p>Use your right hand to move the robot:</p>
<ul>
<li><strong>1 finger</strong> = move forward</li>
<li><strong>2 fingers</strong> = move backward</li>
<li><strong>3 fingers</strong> = move right</li>
<li><strong>4 fingers</strong> = move left</li>
</ul>
<button class="tutorial-action" id="assembly-tutorial-dismiss">Got It</button>
</div>
</div>
<a href="./index.html" class="mode-jump" aria-label="Move to 3D maze page">Move to Maze</a>
<canvas id="simCanvas" width="1920" height="1080"></canvas>
<video id="cameraVideo" autoplay playsinline muted></video>
<script>
const assemblyTutorial = document.getElementById("assembly-tutorial");
const assemblyTutorialCard = assemblyTutorial.querySelector(".tutorial-card");
const assemblyTutorialClose = document.getElementById("assembly-tutorial-close");
const assemblyTutorialDismiss = document.getElementById("assembly-tutorial-dismiss");
const assemblyReturnTarget = document.querySelector(".mode-jump");
const tutorialFocusSelector = 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const getAssemblyFocusable = () => Array.from(assemblyTutorial.querySelectorAll(tutorialFocusSelector));
const closeAssemblyTutorial = () => assemblyTutorial.classList.add("is-hidden");
const handleAssemblyTutorialKeydown = (event) => {
if (assemblyTutorial.classList.contains("is-hidden")) {
return;
}
if (event.key === "Escape") {
event.preventDefault();
closeAssemblyTutorial();
assemblyReturnTarget?.focus();
return;
}
if (event.key !== "Tab") {
return;
}
const focusableElements = getAssemblyFocusable();
if (focusableElements.length === 0) {
event.preventDefault();
assemblyTutorialCard.focus();
return;
}
const firstFocusable = focusableElements[0];
const lastFocusable = focusableElements[focusableElements.length - 1];
if (event.shiftKey && document.activeElement === firstFocusable) {
event.preventDefault();
lastFocusable.focus();
} else if (!event.shiftKey && document.activeElement === lastFocusable) {
event.preventDefault();
firstFocusable.focus();
}
};

document.addEventListener("keydown", handleAssemblyTutorialKeydown);
assemblyTutorialClose.addEventListener("click", () => {
closeAssemblyTutorial();
assemblyReturnTarget?.focus();
});
assemblyTutorialDismiss.addEventListener("click", () => {
closeAssemblyTutorial();
assemblyReturnTarget?.focus();
});
assemblyTutorialClose.focus();
</script>
<script>
const appScript = document.createElement("script");
appScript.defer = true;
appScript.src = `./assemble-app.js?v=${window.__assetVersion}`;
Comment thread
Lakshya-2440 marked this conversation as resolved.
document.body.appendChild(appScript);
</script>
Comment thread
Lakshya-2440 marked this conversation as resolved.
</body>
</html>
105 changes: 105 additions & 0 deletions 3D/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Robot Maze | Alpha One Labs</title>
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script>
window.__robotViewMode = "maze";
window.__assetVersion = Date.now().toString();
const sharedStylesheet = document.createElement("link");
sharedStylesheet.rel = "stylesheet";
sharedStylesheet.href = `./tutorial.css?v=${window.__assetVersion}`;
document.head.appendChild(sharedStylesheet);
const stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href = `./style.css?v=${window.__assetVersion}`;
document.head.appendChild(stylesheet);
Comment thread
Lakshya-2440 marked this conversation as resolved.
</script>
</head>
<body>
<div class="tutorial-pop" id="maze-tutorial" role="dialog" aria-modal="true" aria-labelledby="maze-tutorial-title">
<div class="tutorial-card" tabindex="-1">
<button class="tutorial-close" id="maze-tutorial-close" aria-label="Close tutorial">×</button>
<div class="tutorial-kicker">Quick Start</div>
<h2 id="maze-tutorial-title">3D Maze</h2>
<p>Use your right hand to move the robot:</p>
<ul>
<li><strong>1 finger</strong> = move forward</li>
<li><strong>2 fingers</strong> = move backward</li>
<li><strong>3 fingers</strong> = move right</li>
<li><strong>4 fingers</strong> = move left</li>
Comment thread
Lakshya-2440 marked this conversation as resolved.
<li><strong>M</strong> = new maze</li>
</ul>
<button class="tutorial-action" id="maze-tutorial-dismiss">Got It</button>
</div>
</div>
<nav class="route-nav" aria-label="Playground pages">
<a href="../index.html">Main</a>
<a href="../home.html">2D Robotics</a>
<a href="./assemble.html">3D Assembly</a>
<a href="./index.html" class="is-active" aria-current="page">3D Maze</a>
</nav>
<canvas id="simCanvas" width="1920" height="1080"></canvas>
<video id="cameraVideo" autoplay playsinline muted></video>
<script>
const mazeTutorial = document.getElementById("maze-tutorial");
const mazeTutorialCard = mazeTutorial.querySelector(".tutorial-card");
const mazeTutorialClose = document.getElementById("maze-tutorial-close");
const mazeTutorialDismiss = document.getElementById("maze-tutorial-dismiss");
const mazeReturnTarget = document.querySelector(".route-nav a.is-active") ?? document.querySelector(".route-nav a");
const tutorialFocusSelector = 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const getMazeFocusable = () => Array.from(mazeTutorial.querySelectorAll(tutorialFocusSelector));
const closeMazeTutorial = () => mazeTutorial.classList.add("is-hidden");
const handleMazeTutorialKeydown = (event) => {
if (mazeTutorial.classList.contains("is-hidden")) {
return;
}
if (event.key === "Escape") {
event.preventDefault();
closeMazeTutorial();
mazeReturnTarget?.focus();
return;
}
if (event.key !== "Tab") {
return;
}
const focusableElements = getMazeFocusable();
if (focusableElements.length === 0) {
event.preventDefault();
mazeTutorialCard.focus();
return;
}
const firstFocusable = focusableElements[0];
const lastFocusable = focusableElements[focusableElements.length - 1];
if (event.shiftKey && document.activeElement === firstFocusable) {
event.preventDefault();
lastFocusable.focus();
} else if (!event.shiftKey && document.activeElement === lastFocusable) {
event.preventDefault();
firstFocusable.focus();
}
};

document.addEventListener("keydown", handleMazeTutorialKeydown);
mazeTutorialClose.addEventListener("click", () => {
closeMazeTutorial();
mazeReturnTarget?.focus();
});
mazeTutorialDismiss.addEventListener("click", () => {
closeMazeTutorial();
mazeReturnTarget?.focus();
});
mazeTutorialClose.focus();
</script>
<script>
const appScript = document.createElement("script");
appScript.defer = true;
appScript.src = `./app.js?v=${window.__assetVersion}`;
document.body.appendChild(appScript);
</script>
</body>
</html>
74 changes: 74 additions & 0 deletions 3D/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background: #000;
}

body {
display: grid;
place-items: center;
position: relative;
font-family: "Segoe UI", Arial, sans-serif;
}

:root {
--tutorial-border: rgba(103, 232, 249, 0.5);
--tutorial-kicker: #67e8f9;
--tutorial-close-bg: rgba(30, 41, 59, 0.95);
--tutorial-close-text: #e2e8f0;
--tutorial-close-hover-bg: rgba(51, 65, 85, 0.98);
--tutorial-action-border: rgba(34, 197, 94, 0.65);
--tutorial-action-bg: rgba(20, 83, 45, 0.95);
--tutorial-action-text: #f0fdf4;
--tutorial-action-hover-bg: rgba(22, 101, 52, 1);
}

#simCanvas {
width: min(100vw, calc(100vh * 16 / 9));
height: min(100vh, calc(100vw * 9 / 16));
max-width: 100vw;
max-height: 100vh;
display: block;
background: #000;
}

#cameraVideo {
display: none;
}

.route-nav {
position: fixed;
top: 18px;
left: 18px;
z-index: 10;
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: min(560px, calc(100vw - 36px));
}

.route-nav a {
color: #d6f7ff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 11px;
font-weight: 700;
padding: 10px 14px;
border: 1px solid rgba(103, 232, 249, 0.3);
border-radius: 999px;
background: rgba(4, 14, 18, 0.82);
backdrop-filter: blur(12px);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.route-nav a:hover,
.route-nav a.is-active {
background: rgba(22, 78, 99, 0.92);
border-color: rgba(103, 232, 249, 0.8);
color: #ffffff;
}

Loading
Loading