Fix: Button for screenshot is positioned correctly

webxr-cube/src/components/ARBottomBar.tsx

@@ -5,24 +5,41 @@ interface ARBottomBarProps {
     onSelect: (name: string) => void;
 }
 
-export const ARBottomBar: React.FC<ARBottomBarProps> = ({ objectOptions, onSelect }) => {
+export const ARBottomBar: React.FC<ARBottomBarProps> = ({
+                                                            objectOptions,
+                                                            onSelect,
+                                                        }) => {
     return (
         <div
             style={{
                 position: "absolute",
                 bottom: 0,
                 width: "100%",
-        height: "90px",
+                height: "100px",
                 background: "rgba(0, 0, 0, 0.6)",
                 display: "flex",
                 alignItems: "center",
-        justifyContent: "space-around",
+                justifyContent: "flex-start",
                 color: "white",
                 zIndex: 10,
                 pointerEvents: "auto",
                 backdropFilter: "blur(10px)",
+                overflowX: "auto",
+                whiteSpace: "nowrap",
+                padding: "0 10px",
+                scrollbarWidth: "none", // hides scrollbar in Firefox
+                msOverflowStyle: "none", // hides scrollbar in IE
             }}
         >
+            {/* hide scrollbar for WebKit browsers */}
+            <style>
+                {`
+          div::-webkit-scrollbar {
+            display: none;
+          }
+        `}
+            </style>
+
             {objectOptions.map((obj) => (
                 <button
                     key={obj.name}
@@ -33,6 +50,8 @@ export const ARBottomBar: React.FC<ARBottomBarProps> = ({ objectOptions, onSelec
                         borderRadius: "10px",
                         padding: "10px 20px",
                         fontSize: "16px",
+                        marginRight: "10px",
+                        flex: "0 0 auto",
                     }}
                     onClick={() => onSelect(obj.name)}
                 >

webxr-cube/src/components/XRRenderer.tsx

 // Import necessary tools and libraries
-import React, { useEffect, useRef, useState } from "react";
+import React, {useEffect, useRef, useState} from "react";
+import type {WebGLRenderer} from "three";
 import * as THREE from "three";
-import { XRButton } from "three/examples/jsm/webxr/XRButton";
-import { BlockManager } from "./BlockManager"; // manages placed 3D objects in the scene
-import { Cube } from "../model/Cube";          // custom class for a simple cube
-import { GLTFModel } from "../model/GLTFModel"; // custom loader for .glb 3D models
-import { ARBottomBar } from "./ARBottomBar";
+import {XRButton} from "three/examples/jsm/webxr/XRButton";
+import {BlockManager} from "./BlockManager"; // manages placed 3D objects in the scene
+import {Cube} from "../model/Cube"; // custom class for a simple cube
+import {GLTFModel} from "../model/GLTFModel"; // custom loader for .glb 3D models
+import {ARBottomBar} from "./ARBottomBar";
 import {RoomEnvironment} from "three/examples/jsm/environments/RoomEnvironment";
 import {addLightToScene, createCamera, createPlacementRing, createRenderer, setSceneBackground} from "./Setup.ts";
-import type {WebGLRenderer} from "three";    // bottom UI for selecting objects
+
+import {ModelType} from "../model/ModelType.ts"; // bottom UI for selecting objects
 
 
 function createARButton(renderer: WebGLRenderer, overlayRef: React.RefObject<HTMLDivElement>) {
@@ -134,16 +136,21 @@ export const XRRenderer: React.FC = () => {
       let objectToAdd;
 
       // Choose what object to add based on selection
-      if (name === "Cube") {
+      if (name === ModelType.CUBE) {
         objectToAdd = new Cube(position);
-      } else if (name === "Watermill") {
-        objectToAdd = new GLTFModel("/watermill.glb", position, "/Textures/colormap.png");
-      } else if (name === "Tree") {
-        objectToAdd = new GLTFModel("/tree.glb", position, "/Textures/colormap.png");
+      } else if (name === ModelType.WATERMILL) {
+        objectToAdd = new GLTFModel("/fantasy/watermill.glb", position, "/fantasy/colormap.png");
+      } else if (name === ModelType.TREE) {
+        objectToAdd = new GLTFModel("/fantasy/tree.glb", position, "/fantasy/colormap.png");
+      } else if (name === ModelType.CROISSANT) {
+        objectToAdd = new GLTFModel("/food/croissant.glb", position, "/food/colormap.png");
       } else {
         objectToAdd = new Cube(position); // fallback
       }
 
+      const audio = new Audio('/sounds/cash.mp3');
+      audio.play();
+
       // Add the object to the scene (via manager)
       blockManager.addObject(objectToAdd);
     };
@@ -228,8 +235,8 @@ export const XRRenderer: React.FC = () => {
               aria-label="Save snapshot"
               style={{
                 position: "absolute",
-                top: 12,
-                right: 12,
+                top: "4rem",
+                right: "1.5rem",
                 zIndex: 1000,
                 padding: "10px 12px",
                 borderRadius: 12,
@@ -247,9 +254,10 @@ export const XRRenderer: React.FC = () => {
           {isSessionActive && (
               <ARBottomBar
                   objectOptions={[
-                    { name: "Cube", emoji: "🧊" },
-                    { name: "Watermill", emoji: "🌊" },
-                    { name: "Tree", emoji: "🌳" },
+                    { name: ModelType.CUBE, emoji: "🧊" },
+                    { name: ModelType.WATERMILL, emoji: "🌊" },
+                    { name: ModelType.TREE ,emoji: "🌳" },
+                    { name: ModelType.CROISSANT, emoji: "🥐" },
                   ]}
                   onSelect={handleSelect}
               />

webxr-cube/src/model/ModelType.ts

+export enum ModelType {
+    CUBE = 'Cube',
+    FOUNTAIN = "Fountain",
+    TREE = "Tree",
+    WATERMILL = "Watermill",
+    WHEEL = "Wheel",
+    WINDMILL = "Windmill",
+    BREAD = "Bread",
+    BURGER = "Burger",
+    CROISSANT = "Croissant",
+    PIZZA_BOX = "Pizza Box",
+}
+
+
+
+