I am trying to access the position and orientation of right and left controller so that I can apply different transformations like rotation, scaling and translation. However, I am not being able to get the status of controllers as useController cannot be used in event handler as shown below in the code. How can I solve it???
import { OrbitControls, Box } from "#react-three/drei";
import { XR, VRButton, ARButton, Interactive, useController, useXR, Controllers, RayGrab, useInteraction } from "#react-three/xr";
import { Canvas, useThree, useFrame, events } from "#react-three/fiber";
import { MeshPhongMaterial } from "three";
import { Suspense } from "react";
import { useState } from "react";
import { useRef } from 'react'
export default function App() {
const boxRef = useRef();
const Paddle = () => {
// useFrame(() => {
// const rightController = useController('right');
// const leftController = useController('left');
// setRightController(rightController);
// setLeftController(leftController);
// // console.log(leftController, rightController);
// })
}
// when squeezed button is pressed, scale the object by two times
function handleSqueezeStart(event) {
console.log("Squeeze started : ", event);
const leftController = useController("left");
const rightController = useController("right");
// Make sure that both controller are on, else will cause error
let distance = euclideanDistance(rightController.grip.position, leftController.grip.position);
console.log("controller position", rightController.grip.position, leftController.grip.position)
console.log("Start Distance between controllers : ", distance);
setStartDistance(distance);
setStartRotation(rightController.grip.rotation);
}
const handleSqueezeEnd = (event) => {
console.log("Squeezing : ", event);
console.log("right Controller : ", rightController);
// Make sure that both controller are on, else will cause error
let distance = euclideanDistance(rightController.grip.position, leftController.grip.position);
console.log("controller position", rightController.grip.position, leftController.grip.position)
console.log("End Distance between controllers : ", distance);
setEndDistance(distance);
// set scaling of the object
boxRef.current.scale.x = calculateScale(startDistance, endDistance, boxRef.current.scale);
boxRef.current.scale.y = calculateScale(startDistance, endDistance, boxRef.current.scale);
boxRef.current.scale.z = calculateScale(startDistance, endDistance, boxRef.current.scale);
// set rotation of the object
setEndRotation(rightController.grip.rotation);
console.log("start rotation : ", startRotation);
console.log("end rotation : ", endRotation);
let newRotation = calculateRotation(startRotation, endRotation, boxRef.current.rotation);
console.log("Old Rotation : ", boxRef.current.rotation);
console.log("New Rotation : ", newRotation);
boxRef.current.rotation.x = newRotation.x;
boxRef.current.rotation.y = newRotation.y;
boxRef.current.rotation.z = newRotation.z;
}
return (
<>
<VRButton />
<div style={{ width: "100vw", height: "100vh" }}>
<Canvas camera={{ position: [0, 2, -10] }}>
<XR>
<Controllers
/** Optional material props to pass to controllers' ray indicators */
rayMaterial={{ color: 'blue' }}
/** Whether to hide controllers' rays on blur. Default is `false` */
hideRaysOnBlur={false}
/>
<color attach="background" args={["#111"]} />
<ambientLight intensity={2} />
<pointLight position={[20, 10, -10]} intensity={2} />
<primitive object={new THREE.AxesHelper(2)} />
<primitive object={new THREE.GridHelper(20, 20)} />
<OrbitControls />
<RayGrab>
<Interactive
onSqueezeStart={(event) => handleSqueezeStart(event)}
// onSqueeze={(event) => handleSqueeze(event)}
onSqueezeEnd={(event) => handleSqueezeEnd(event)}
>
<Box ref={boxRef} key="companionCube" position={[0, 0, -5]}>
<boxGeometry args={[2, 2, 2]} />
<meshPhongMaterial />
</Box>
</Interactive>
</RayGrab>
<Suspense fallback={null}>
<Paddle />
</Suspense>
</XR>
</Canvas>
</div>
</>
);
}
Related
I have a button on the site and a ToolTip to it, which describes the action of the button.
But there is one bug that I can not solve (and I'm already starting to doubt if there is a solution to this problem).
Description of the problem: when the user hovers over the icon, a tooltip appears - everything works fine here. But if at this moment the table is scrolling, then the tooltip flies out of bounds. It's hard to describe, take a look
Pay attention to how the tooltip (if the cursor is hovered over) flies up or down when scrolling.
Tell me how to solve this problem?
<div>
<Tooltip
title="Delete"
arrow
componentsProps={{
tooltip: {
sx: {
bgcolor: '#a3a3a3',
'& .MuiTooltip-arrow': {
color: '#a3a3a3',
},
},
},
}}
PopperProps={{
modifiers: [
{
name: "offset",
options: {
offset: [0, -8],
},
},
],
}}>
<DeleteForeverIcon/>
</Tooltip>
</div>
Instruction: hover over any cell from the first column, wait for the tooltip to appear. Then scroll the wheel up or down and see how the tooltip goes outside the table
P.s. Please note that this question has already been answered. And in principle this solution is working. But I had a lot of problems when adding this solution to my real code. Probably a simple solution for me here would be to simply cancel the scrolling when you hover over the button. Tell me how this can be done (but keep in mind that position: fixed is not suitable in this case)
My approach is different, where each tooltip maintains its own state. It is using IntersectionObserver to determine if the ToolTip component is viewable. When the component is no longer viewable, it will hide the Popper (the tooltip popup) by setting the CSS to display: 'none' via the sx prop on PopperProps.
Codesandbox Example: Here
Here is the modified file FileDownloadButton.jsx:
import React from "react";
import FileDownloadIcon from "#mui/icons-material/FileDownload";
import { ButtonGroup, Tooltip } from "#mui/material";
export default function FileDownloadButton() {
const tipRef = React.useRef(null);
const [inView, setInView] = React.useState(false);
const cb = (entries) => {
const [entry] = entries;
entry.isIntersecting ? setInView(true) : setInView(false);
};
React.useEffect(() => {
const options = {
root: null,
rootMargin: "0px"
};
const ref = tipRef.current;
const observer = new IntersectionObserver(cb, options);
if (ref) observer.observe(ref);
return () => {
if (ref) observer.unobserve(ref);
};
}, [tipRef]);
return (
<ButtonGroup>
<div>
<Tooltip
ref={tipRef}
title="Download record "
arrow
componentsProps={{
tooltip: {
sx: {
bgcolor: "#a3a3a3",
"& .MuiTooltip-arrow": {
color: "#a3a3a3"
}
}
}
}}
PopperProps={{
sx: { display: inView ? "block" : "none" },
modifiers: [
{
name: "offset",
options: {
offset: [0, -8]
}
}
]
}}
>
<FileDownloadIcon />
</Tooltip>
</div>
</ButtonGroup>
);
}
Changes for reference
Change 1
export default function FileDownloadButton() {
const tipRef = React.useRef(null);
const [inView, setInView] = React.useState(false);
const cb = (entries) => {
const [entry] = entries;
entry.isIntersecting ? setInView(true) : setInView(false);
};
React.useEffect(() => {
const options = {
root: null,
rootMargin: "0px"
};
const ref = tipRef.current;
const observer = new IntersectionObserver(cb, options);
if (ref) observer.observe(ref);
return () => {
if (ref) observer.unobserve(ref);
};
}, [tipRef]);
Change 2
PopperProps={{
sx: { display: inView ? "block" : "none" },
Update 1
Original poster wants toggle
Codesandbox example
import React, { useState } from "react";
import FileDownloadIcon from "#mui/icons-material/FileDownload";
import { ButtonGroup, IconButton, Tooltip } from "#mui/material";
import VisibilityOffIcon from "#mui/icons-material/VisibilityOff";
import VisibilityIcon from "#mui/icons-material/Visibility";
export default function FileDownloadButton() {
const [click, setClick] = useState(true);
const tipRef = React.useRef(null);
const [inView, setInView] = React.useState(false);
const cb = (entries) => {
const [entry] = entries;
entry.isIntersecting ? setInView(true) : setInView(false);
};
React.useEffect(() => {
const options = {
root: null,
rootMargin: "0px"
};
const ref = tipRef.current;
const observer = new IntersectionObserver(cb, options);
if (ref) observer.observe(ref);
return () => {
if (ref) observer.unobserve(ref);
};
}, [tipRef]);
return (
<ButtonGroup>
<div>
<Tooltip
ref={tipRef}
title={click ? "Show item" : "Hide Item"}
arrow
componentsProps={{
tooltip: {
sx: {
bgcolor: "#a3a3a3",
"& .MuiTooltip-arrow": {
color: "#a3a3a3"
}
}
}
}}
PopperProps={{
sx: { display: inView ? "block" : "none" },
modifiers: [
{
name: "offset",
options: {
offset: [0, -8]
}
}
]
}}
>
<IconButton onClick={() => setClick(!click)}>
{click ? <VisibilityOffIcon /> : <VisibilityIcon />}
</IconButton>
</Tooltip>
</div>
</ButtonGroup>
);
}
I think this is browser specific issue. When I checked the given url( https://codesandbox.io/s/silly-grass-1lb3qw) in firefox browser it was working fine(but not in the chrome). Later figured that out hover while scrolling on element will work differently in the chrome compare to other browsers since latest versions.
I made following changes to make it work in chrome. Basically whenever we hover any item then the material tooltip is being added to the document. So what I did was I have attached an scroll event and if there is any material tooltip element is present I just simply removed it.
DeviceTable.jsx
export default function DevicesTable() {
const tableRef = useRef();
function removeElementsByClass(className){
const elements = document.getElementsByClassName(className);
while(elements.length > 0){
elements[0].remove();
}
}
useEffect(() => {
if (tableRef.current) {
tableRef.current.addEventListener("scroll", (e) => {
// CLASS NAME OF THE TOOLTIP ATTACHED TO THE DOM. THERE ARE MULTIPLE CLASSES BUT I FOUND FOLLOWING CLASSNAME TO BE UNIQUE. PLEASE CROSS CHECK FROM YOUR END AS WELL.
//YOU CAN CHECK THIS BY PASSING open={true} attribute on <Tooltip> AND INSPECT DOM
removeElementsByClass("css-yk351k-MuiTooltip-tooltip")
});
}
return () => {
if(tableRef.current) {
tableRef.current.removeEventListener("scroll", ()=>{});
}
}
}, []);
return (
<TableContainer className="TableContainerGridStyle">
<Table className="TableStyle">
<DevicesTableHeader />
// CHANGED LINE
<TableBody ref={tableRef} className="TableBodyStyle">
<DevicesTableCell />
<DevicesTableCell />
<DevicesTableCell />
<DevicesTableCell />
<DevicesTableCell />
<DevicesTableCell />
<DevicesTableCell />
<DevicesTableCell />
<DevicesTableCell />
<DevicesTableCell />
<DevicesTableCell />
</TableBody>
</Table>
</TableContainer>
);
}
Apart from the above I think you can use another alternatives like followCursor, setting the position relative attribute to the table cell(TableCellStyle) or body. But these don't solve the problem fully.
As you are passing Table component as props children to the StateLabel component so in order to display/render we need to update StateLabel component to use props.children
export default function StateLabel({children}) {
return <div>{children}</div>;
}
Div hover not working when scrolling in chrome
My app is a dashboard of MUI <Card />s that can be dragged-and-dropped (d&d) to reorder them. The d&d logic is implemented using react-dnd and has been working well so far.
However, when I add a <DataGridPro /> as the child of a draggable <Card />, the datagrid's native Column ordering - which also is done by dragging-and-dropping - breaks. Dragging a column once or twice generates the following crash:
Invariant Violation
Cannot call hover while not dragging.
▼ 5 stack frames were expanded.
at invariant (https://bfz133.csb.app/node_modules/
react-dnd/invariant/dist/index.js:19:15
checkInvariants
https://bfz133.csb.app/node_modules/dnd-core/dist/actions/dragDrop/hover.js:33:40
DragDropManagerImpl.hover
https://bfz133.csb.app/node_modules/dnd-core/dist/actions/dragDrop/hover.js:18:5
Object.eval [as hover]
https://bfz133.csb.app/node_modules/dnd-core/dist/classes/DragDropManagerImpl.js:25:38
HTML5BackendImpl.handleTopDrop
https://bfz133.csb.app/node_modules/react-dnd-html5-backend/dist/HTML5BackendImpl.js:455:20
▲ 5 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
This error overlay is powered by `react-error-overlay` used in `create-react-app`.
You can begin dragging, the crash only happens when you let go of the mouse button.
The expected behavior is that I should be able to d&d the columns, to change their order, without issues.
Things I've tried
Removing the <DataGridPro /> and replacing that <Card /> with a text-type Card (see the code in the sandbox below) shows that d&d logic works fine with no crashes;
Disabling my app's d&d by commenting out all the relevant code causes the <DataGridPro />'s colum reordering to work as expected;
The above suggests the root cause lies in having both D&Ds work without causing an internal conflict in react-dnd, which led to me trying:
Browsing the documentation to find a way to instruct the component to use my own DndProvider or DndManager, but I couldn't find that in the API - sorry if I misread it!
Googling for the error message "Cannot call hover while not dragging", while limiting myself to contexts including the MUI library or react-dnd, yielded limited results. I found a Chrome bug that was fixed on v. 77.0.3865.120, my Chrome version is 101.0.4951.64 .
EDIT: Found this bug, but it's closed. Should I open a new one? I'd like some input on this, as I wouldn't like to bother the developers if the problem is in my code.
Minimum verified reproducible example
I made a sandbox! Click here to see it
Datagrid Component:
import React from "react";
import { DataGridPro } from "#mui/x-data-grid-pro";
import { useDemoData } from "#mui/x-data-grid-generator";
export function MyDatagridPro() {
const { data } = useDemoData({
dataSet: "Commodity",
rowLength: 5,
maxColumns: 6
});
return <DataGridPro {...data} />;
}
Card widget:
import React, { useRef } from "react";
import {
Card,
CardHeader,
CardContent,
Grid,
Typography,
Divider
} from "#mui/material";
import { useDrag, useDrop } from "react-dnd";
import { MyDatagridPro } from "./MyDatagridPro";
export function MyContentCard(props) {
const domRef = useRef(null);
const [{ isDragging }, dragBinder, previewBinder] = useDrag(
() => ({
type: "mycard",
item: () => ({
orderIndex: props.orderIndex
}),
collect: (monitor) => ({
isDragging: monitor.isDragging()
})
}),
[props]
);
const [{ handlerId, isOver }, dropBinder] = useDrop(
() => ({
accept: "mycard",
collect: (monitor) => ({
handlerId: monitor.getHandlerId(),
isOver: !!monitor.isOver()
}),
canDrop: (item, monitor) => {
if (!domRef.current) return false;
const draggingOrderIndex = item.orderIndex;
const hoveringOrderIndex = props.orderIndex;
if (draggingOrderIndex === hoveringOrderIndex) return false;
const hoverRectangleBound = domRef.current?.getBoundingClientRect();
const [hoverItemX, hoverItemY] = [
hoverRectangleBound.right - hoverRectangleBound.left,
hoverRectangleBound.bottom - hoverRectangleBound.top
];
const mousePosition = monitor.getClientOffset();
const [hoverMouseX, hoverMouseY] = [
mousePosition.x - hoverRectangleBound.left,
mousePosition.y - hoverRectangleBound.top
];
if (
(hoverMouseX < 0 || hoverMouseX > hoverItemX) &&
(hoverMouseY < 0 || hoverMouseY > hoverItemY)
) {
return false;
}
return true;
},
drop: (item) => {
props.swapper(item.orderIndex, props.orderIndex);
}
}),
[props]
);
return (
<Grid item xs={5}>
<Card
ref={(element) => {
if (element) {
domRef.current = element;
previewBinder(dropBinder(domRef));
}
}}
sx={{
height: `calc(6 * 4.5rem)`,
opacity: isDragging ? 0.3 : 1,
display: "flex",
flexDirection: "column",
border: isOver ? "2px solid rgba(0,0,0,0.5);" : ""
}}
data-handler-id={handlerId}
>
<CardHeader ref={dragBinder} title={props.title} />
<Divider />
<CardContent
sx={{
height: "100%",
display: "flex",
flexDirection: "column"
}}
>
{props.type === "text" && <Typography>{props.content}</Typography>}
{props.type === "datagrid" && <MyDatagridPro />}
</CardContent>
</Card>
</Grid>
);
}
export default MyContentCard;
App.js:
import React, { useState } from "react";
import { Grid } from "#mui/material";
import { createDragDropManager } from "dnd-core";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { MyContentCard } from "./MyContentCard";
export const dndManager = createDragDropManager(HTML5Backend);
export default function App() {
const [cards, setCards] = useState([
{
type: "datagrid",
title: "Card 01 - A MUI DataGridPro",
content: ""
},
{
type: "text",
title: "Card 02 - Some text",
content: "Text that belongs to card 2"
}
]);
function swapCards(indexA, indexB) {
const newState = cards.slice();
const cardA = Object.assign({}, cards[indexA]);
newState[indexA] = Object.assign({}, cards[indexB]);
newState[indexB] = cardA;
setCards(newState);
}
return (
<DndProvider manager={dndManager}>
<Grid
container
spacing={1}
columns={10}
p={2}
pb={3}
mt={0}
mb={0}
// flex="1 1 auto"
overflow="auto"
sx={{
backgroundColor: "lightgray"
}}
>
{cards.map((card, i) => {
return (
<MyContentCard
key={i}
type={card.type}
title={card.title}
content={card.content}
orderIndex={i}
swapper={swapCards}
/>
);
})}
</Grid>
</DndProvider>
);
}
I'm using leaflet and react-leaflet libraries to create a map inside a React Js app as well as Material UI library for the core UI components.
I'm creating a custom cluster and marker components (using React component, not using image/icon file) for the cluster and marker inside the map. I'm using react-leaflet-markercluster for the custom cluster feature and the pie chart from Apache Echarts library for the custom cluster component.
Problem
The problem I'm facing is the useEffect hook inside my CustomCluster component is never triggered.
Steps to produce
Run the playground here: https://codesandbox.io/s/stackoverflow-custom-cluster-react-leaflet-s2wwsh
This is the initial state
Press the zoom out button (top left corner)
We can see that the 3 markers become a single cluster. The console prints the cluster value from the CustomCluster component but there is no "update chart" message. It means that the useEffect hook is not triggered.
Press again the zoom out button
We can see that all 4 markers become a single cluster. The console prints the updated cluster value from the CustomCluster component but again there is no "update chart" message. It means that the useEffect hook is not triggered again.
Code
App.jsx
const customClusterIcon = (cluster, dummyLocationList) => {
return L.divIcon({
// className: 'marker-cluster-custom',
// html: `<span>${cluster.getChildCount()}</span>`,
// iconSize: L.point(40, 40, true),
className: "custom-icon",
html: ReactDOMServer.renderToString(
<ThemeProvider theme={customTheme}>
<StyledEngineProvider injectFirst>
<CustomCluster cluster={cluster} locationList={dummyLocationList} />
</StyledEngineProvider>
</ThemeProvider>
)
});
};
<MarkerClusterGroup
showCoverageOnHover={false}
spiderfyDistanceMultiplier={2}
iconCreateFunction={(cluster) =>
customClusterIcon(cluster, dummyLocationList)
}
>
{dummyLocationList.map((item, index) => (
<Marker
key={index}
position={[item.latitude, item.longitude]}
icon={L.divIcon({
className: "custom-icon",
html: ReactDOMServer.renderToString(
<ThemeProvider theme={customTheme}>
<StyledEngineProvider injectFirst>
<CustomMarker
movingStatus={item.status}
label={item.deviceName}
/>
</StyledEngineProvider>
</ThemeProvider>
)
})}
/>
))}
</MarkerClusterGroup>
CustomCluster.jsx
const CustomCluster = (props) => {
const { cluster, locationList } = props;
const classes = useStyles();
const chartRef = useRef();
let clusterLocationList = [];
cluster.getAllChildMarkers().forEach((itemCluster) => {
locationList.forEach((itemLocation) => {
if (
itemCluster._latlng.lat === itemLocation.latitude &&
itemCluster._latlng.lng === itemLocation.longitude
)
clusterLocationList.push(itemLocation);
});
});
const chartOption = {
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: true,
position: "inner"
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" }
]
}
]
};
useEffect(() => {
console.log("update chart");
let chart;
if (chartRef.current !== null) chart = init(chartRef.current);
const resizeChart = () => {
chart?.resize();
};
window.addEventListener("resize", resizeChart);
if (chartRef.current !== null) {
const chart = getInstanceByDom(chartRef.current);
chart.setOption(chartOption);
}
return () => {
chart?.dispose();
window.removeEventListener("resize", resizeChart);
};
}, [cluster]);
console.log(cluster);
return (
<>
{/* AVATAR */}
<Avatar>{cluster.getChildCount()}</Avatar>
{/* PIE CHART */}
<Box className={classes.chartContainer}>
<Box ref={chartRef} className={classes.chart} />
</Box>
</>
);
};
export default CustomCluster;
Question
Based on some articles on the internet, the useEffect hook is not triggered on React server-side render (SSR) for example here https://codewithhugo.com/react-useeffect-ssr/.
So what's the solution for this case?
The goal is to create a custom cluster feature using a pie chart.
Here is the sample http://bl.ocks.org/gisminister/10001728 but it uses Vanilla Js, not React Js.
After selecting an image i am rendering it in two places, one is in react-easy-crop(4:3 aspect ratio) and another is in separate div(960w*510h).so when ever i change my crop position in react-easy-crop.my another div should move it position as well.listening to onchangecrop event from react-easy-crop
onCropChange = (crop) => {
//crop has x and y of translated value in px
pageObj = `${crop.x * -1}% ${crop.y * -1}%`.toLowerCase();
//pageObj will have x and y position in percentage.
}
If I understand you correctly, you want to display a preview image. If so, you can use a canvas to manipulate the original image and cut and re-posisioning it.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Cropper from 'react-easy-crop'
export class App extends Component {
canvas = {}
state = {
image: 'https://www.gravatar.com/avatar/3d721f4c46282afc254f3ea0cd05df30?s=170&d=identicon&r=PG',
crop: { x: 0, y: 0 },
zoom: 1,
aspect: 4 / 3,
croppedAreaPixels: {}
}
onCropChange = crop => {
this.setState({ crop })
}
onCropComplete = (croppedArea, croppedAreaPixels) => {
console.log(croppedArea, croppedAreaPixels);
const ctx = this.canvas.getContext('2d');
const image = document.getElementById('source');
this.canvas.setAttribute('width', croppedAreaPixels.width);
this.canvas.setAttribute('height', croppedAreaPixels.height);
ctx.drawImage(image, croppedAreaPixels.x, croppedAreaPixels.y, croppedAreaPixels.width, croppedAreaPixels.height, 0, 0, croppedAreaPixels.width, croppedAreaPixels.height);
this.setState({
croppedAreaPixels
})
}
onZoomChange = zoom => {
this.setState({ zoom })
}
render() {
const { image, croppedAreaPixels, crop, zoom, aspect } = this.state;
return (
<>
<img id="source" style={{display: 'none'}} src={image} />
<canvas ref={canvas => this.canvas = canvas} width={croppedAreaPixels.width} height={croppedAreaPixels.height}></canvas>
<Cropper
image={image}
crop={crop}
zoom={zoom}
aspect={aspect}
onCropChange={this.onCropChange}
onCropComplete={this.onCropComplete}
onZoomChange={this.onZoomChange}
/>
</>
)
}
}
render(<App />, document.getElementById('root'));
And working demo:
https://stackblitz.com/edit/react-easy-crop-with-preview
And with background-position approach, instead of canvas.
https://stackblitz.com/edit/react-easy-crop-with-preview-with-bg-position
I'm developing a simple game fight animation using react. To start the fight, I've a button with onClick event: onClick={this.fight.bind(this)}. Now I want to update some state variable in the anytime something changes like this:
import React, { Component } from 'react';
import { ProgressBar, Row, Col } from 'react-bootstrap';
const playerA = {
_id: 1,
name: "playerA name",
life: 100,
speed: 50,
}
const playerB = {
_id: 1,
name: "playerB name",
life: 100,
speed: 40,
}
export default class App extends Compornent {
constructor() {
super();
this.state={
playerA : playerA ,
playerB : playerB ,
aLife: 100,
bLife: 100,
};
this.fight = this.fight.bind(this);
};
fight(a,b){
lifeA=this.state.playerA.live;
lifeB=this.state.playerB.live;
speedA=this.state.playerA.speed;
speedB=this.state.playerB.speed;
dmg = 10
while (lifeA>0 && lifeB>0) {
if (speedA > speedb) {
lifeA = lifeA - dmg;
setTimeout(() => {
this.setState({ aLife: lifeA });
}, 1000);
speedB = speedB + 10;
} else {
lifeB = lifeB - dmg;
setTimeout(() => {
this.setState({ bLife: lifeA });
}, 1000);
speedA = speedA + 10;
}
}
render() {
return (
<Row>
<ProgressBar bsStyle="success" now={this.state.aLife} srOnly/>
<ProgressBar bsStyle="success" now={this.state.bLife} srOnly/>
</Row>
<Row>
<Button bsStyle="danger" bsSize="large" onClick={this.fight.bind(this)}>Start Fight</Button>
</Row>
);
}
}
My expectation is to see the progress bars beeing update every 1 second. But it only updates once. When the fight funtion has finisched beein executed.
refer to the ReactJs official documents, you don't have to bind this again in the render function, since you have already done the binding in Constructor Function
<Button bsStyle="danger" bsSize="large" onClick={this.fight.bind(this)}>Start Fight</Button>
should be
<Button bsStyle="danger" bsSize="large" onClick={this.fight}>Start Fight</Button>
I finally get this done by completely rewriting the while loop using setInterval whith a bool condition: ((npcPlayerLife > 0) && (advPlayerLife > 0)) and then stop when the condition in no more meet.
I have this help someone.