Added dice tray resizing to match screen size
This commit is contained in:
parent
90e6e43c1d
commit
fd5998ea17
@ -13,6 +13,7 @@ function MapDice() {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
}}
|
||||
|
@ -24,7 +24,7 @@ function DiceButtons({ diceRolls, onDiceAdd }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex>
|
||||
<Flex sx={{ justifyContent: "center", flexWrap: "wrap", width: "100%" }}>
|
||||
<DiceButton
|
||||
title="Add D20"
|
||||
count={diceCounts.d20}
|
||||
|
@ -102,8 +102,7 @@ function DiceControls({
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "24px",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<DiceButtons
|
||||
|
@ -2,6 +2,7 @@ import React, { useRef, useEffect } from "react";
|
||||
import * as BABYLON from "babylonjs";
|
||||
import * as AMMO from "ammo.js";
|
||||
import "babylonjs-loaders";
|
||||
import ReactResizeDetector from "react-resize-detector";
|
||||
|
||||
function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
|
||||
const sceneRef = useRef();
|
||||
@ -25,7 +26,7 @@ function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
|
||||
|
||||
let camera = new BABYLON.TargetCamera(
|
||||
"camera",
|
||||
new BABYLON.Vector3(0, 27, 0),
|
||||
new BABYLON.Vector3(0, 34, 0),
|
||||
scene
|
||||
);
|
||||
camera.fov = 0.65;
|
||||
@ -54,20 +55,6 @@ function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
|
||||
selectedMeshDeltaPositionRef.current = delta;
|
||||
}
|
||||
});
|
||||
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
engine.resize();
|
||||
for (let entry of entries) {
|
||||
canvasRef.current.width = entry.contentRect.width;
|
||||
canvasRef.current.height = entry.contentRect.height;
|
||||
}
|
||||
});
|
||||
|
||||
resizeObserver.observe(containerRef.current);
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}, [onSceneMount]);
|
||||
|
||||
const selectedMeshRef = useRef();
|
||||
@ -110,16 +97,30 @@ function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
|
||||
onPointerUp();
|
||||
}
|
||||
|
||||
function handleResize(width, height) {
|
||||
const engine = engineRef.current;
|
||||
engine.resize();
|
||||
canvasRef.current.width = width;
|
||||
canvasRef.current.height = height;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ width: "100%", height: "100%", overflow: "hidden" }}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
ref={containerRef}
|
||||
>
|
||||
<canvas
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerUp={handlePointerUp}
|
||||
ref={canvasRef}
|
||||
/>
|
||||
<ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
|
||||
<canvas
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerUp={handlePointerUp}
|
||||
ref={canvasRef}
|
||||
/>
|
||||
</ReactResizeDetector>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -218,8 +218,9 @@ function DiceTray({ isOpen }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "300px",
|
||||
height: "600px",
|
||||
width: "500px",
|
||||
maxWidth: "calc(50vh - 48px)",
|
||||
paddingBottom: "200%",
|
||||
borderRadius: "4px",
|
||||
display: isOpen ? "block" : "none",
|
||||
position: "relative",
|
||||
|
@ -6,7 +6,7 @@ import albedo from "./albedo.jpg";
|
||||
import metalRoughness from "./metalRoughness.jpg";
|
||||
import normal from "./normal.jpg";
|
||||
|
||||
export const diceTraySize = { width: 8, height: 16 };
|
||||
export const diceTraySize = { width: 10, height: 20 };
|
||||
|
||||
export default async function createDiceTray(scene, shadowGenerator) {
|
||||
let mesh = (
|
||||
|
Binary file not shown.
Loading…
Reference in New Issue
Block a user