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