MarkEEaton
/
ar-scavenger-hunt
mirror of https://github.com/MarkEEaton/ar-scavenger-hunt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

switch html to embedded in a-scene

This commit is contained in:
Mark Eaton 2023-07-26 20:30:58 -04:00
parent dfb0756877
commit 91f742f3b4
2 changed files with 29 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -1,17 +1,10 @@
<meta name="viewport">
<!-- Group homepage -->
<body style="margin: 0; overflow: hidden;">
<div id="startend-container">
<div id="starter" class="startend">
<p>Welcome to the Library's <strong>Scavenger Hunt</strong>!</span></p>
<p>Find the items listed under "Check your progress"</p>
<p>Tap on the shapes when you find the items!</p>
<button type="button" class="btn btn-success btn-lg" id="startbutton">Start!</button>
</div>
<div id="ender" class="startend>
</div>
</div>
<div id="header-container">
<body style="overflow: hidden; width: 100vw;">
<a-scene style="max-height: 100vh; max-width: 100vw; border: 3px solid red" embedded markerhandler arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3_HAMMING63;" device-orientation-permission-ui="enabled: false">
<div id="header-container" style="position: fixed;">
<div id="header">
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@ -24,10 +17,19 @@
</ul>
</div>
</div>
<div id="starter" class="startend">
<p>Welcome to the Library's <strong>Scavenger Hunt</strong>!</span></p>
<p>Find the items listed under "Check your progress"</p>
<p>Tap on the shapes when you find the items!</p>
<button type="button" class="btn btn-success btn-lg" id="startbutton">Start!</button>
</div>
<div id="ender" class="startend">
<p><strong>🎉 Congratulations! 🎉</strong> You've found all of the items!</p>
<p>Show this screen to the librarians at the reference desk to claim your prize!</p>
</div>
</div>
<div id="scene-container">
<div id="scene">
<a-scene embedded markerhandler arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3_HAMMING63;" device-orientation-permission-ui="enabled: false">
<a-entity camera>
<a-marker type="barcode" value="0" look-at="[camera]" id="anchorzero">
<a-box position="0 0.5 0" material="color: red;" animation="property: rotation; to: 360 360 0; loop: true; dur: 3000; easing: linear;"></a-box>
</a-marker>
@ -37,8 +39,6 @@
<a-marker type="barcode" value="2" look-at="[camera]" id="anchortwo">
<a-cylinder position="0 0.5 0" material="color: green;" animation="property: rotation; to: 360 360 0; loop: true; dur: 3000; easing: linear;"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</div>
</div>
</a-entity>
</a-scene>
</body>

23
js-css.html
View File

@ -5,26 +5,22 @@
<style>
#arjsDebugUIContainer { display: none; }
body { margin: auto !important; max-width: 100vw !important; }
#startend-container { max-height: 100%; max-width: 100%; padding: 20px; margin: auto; text-align: center; }
body { display: flex; justify-content: center; align-items: center; }
#starter { background-color: #ccc; border-radius: 5px; padding: 30px; font-size: 2em; text-align: center; }
@media screen and (orientation: portrait) {
#starter { font-size: 3em; }
#starter { font-size: 2.2em; }
}
#ender { display: none; }
#scene-container { width: 100%; }
#scene { margin-left: 300px; }
#ender { display: none; background-color: #ccc; border-radius: 5px; padding: 30px; font-size: 2em; text-align: center; position: relative; }
#header-container { width: 100%; }
#header { width: 100vw; margin: 0 auto; text-align: left; padding: 5px; }
#header-container { z-index: 45; width: 100vw; padding: 20px; }
#header { padding: 5px; }
@media screen and (orientation: landscape) {
#header-container { max-height: 100vh; max-width: 100vw; }
#header { text-align: left; margin: auto auto; }
body { margin-top: 0 !important; }
}
.dropdown { float: left; z-index: 50; }
.dropdown-menu li { font-size: 2em; padding: 2px 20px; }
.dropdown-menu li { white-space: nowrap; }
.dropdown { z-index: 50; }
.dropdown-menu li { font-size: 2em; padding: 2px 20px; white-space: nowrap; }
#fsize { font-size: 2em; }
</style>
@ -33,13 +29,13 @@ body { margin: auto !important; max-width: 100vw !important; }
<script>
function getStarted() {
document.getElementById("startend-container").style.display = "none";
document.getElementById("starter").style.display = "none";
}
window.onload = function () {
let startlistener = document.getElementById("startbutton");
startlistener.addEventListener("click", getStarted);
}
}
</script>
<script>
@ -64,6 +60,7 @@ AFRAME.registerComponent('markerhandler', {
},
check: function (markers) {
if (Object.is(JSON.stringify(markers), JSON.stringify({ reference: true, circulation: true, photocopier: true })) == true) {
document.getElementById("ender").style.display = "block";
}
},
});