Automatically trigger an OnClick event of a specific component in React - javascript

I'm a beginner to React and Javascript and I'm attempting to create Minesweeper in React from scratch. I've run into an issue where I want to replicate the functionality of Minesweeper where if you click a tile with zero mines around it, the surrounding tiles will automatically reveal themselves. However, I'm having trouble figuring out how to do that. My instinct is to grab the surrounding tiles by an id, and somehow manually trigger the OnClick event, but as far as I'm aware my Tile component has no knowledge of other Tile components and thus no way of accessing them. And I don't see how I could do it from my Board component. Any advice would be greatly appreciated!
Board Component:
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
height: 8,
width: 8,
num_mines: 10
}
game_logic.initalizeGame(8,8,10);
game_logic.createGame();
}
render() {
var all_tiles = [];
for (var i = 0; i < this.state.height; i++) {
var row_tiles = [];
for (var j = 0; j < this.state.width; j++) {
row_tiles.push(<Tile key={'Tile ' + (i*this.state.height + j)} value={game_logic.tile_values[i][j]} />)
}
all_tiles[i] = row_tiles;
}
return (
<div>
{all_tiles.map((value, index) => {
return <div key={'Row ' + index}>{value}</div>
})}
</div>
)
}
}
export default Board;
Tile Component:
class Tile extends React.Component {
constructor(props) {
super(props);
this.state = {
imgSrc: null,
imgAlt: '',
value: '',
};
}
tileClick = (e) => {
//left click: unveil tile
if (e.type === "click" && this.state.imgAlt === '') {
if (this.props.value < 0) {
this.setState({value: '', imgSrc: mine, imgAlt: "mine"});
}
else {
this.setState({value: this.props.value})
if (this.props.value === 0) {
//automatically left click all 8 surrounding tiles
}
}
}
//right click: mark or unmark tile
else if (e.type === "contextmenu") {
e.preventDefault();
if (this.state.value === '' && this.state.imgAlt !== "mine") {
if (this.state.imgAlt !== '') {
this.setState({imgSrc: null, imgAlt: ''});
}
else {
this.setState({imgSrc: flag, imgAlt: "flag"});
}
}
}
}
render() {
return (
<button
className="tile"
onClick={this.tileClick} onContextMenu={this.tileClick}>
<img src={this.state.imgSrc} alt={this.state.imgAlt} />
{this.state.value}
</button>
);
}
}
export default Tile;


You need the child component to be able to see and do something with the parent's game_logic.tile_values. While it'd be possible to pass the values down from the parent and try to do something with them there, it'd be easier to put the click handlers in the parent so everything can be accessed from there easily.
You'll also need to change around the way you handle state. Having each individual component have its own state will make cross-component communication very difficult, but that's what you need in order for the change in one component (tile) to affect other tiles. Put the state of whether a tile's been revealed or not in the parent.
class Board extends React.Component {
constructor(props) {
super(props);
game_logic.initalizeGame(8,8,10);
game_logic.createGame();
this.state = {
height: 8,
width: 8,
num_mines: 10,
revealed: Array.from(
{ length: 8 },
() => new Array(8).fill(false)
);
}
}
handleReveal = (x, y, visited = new Set()) => {
const tileKey = x + '_' + y;
// if out of bounds, or if visited before, don't do anything
if (visited.has(tileKey) || game_logic.tile_values[x]?.[y] === undefined) return;
visited.add(tileKey);
const isZero = game_logic.tile_values[x][y] === 0;
this.setState({
...this.state,
revealed: this.state.map(
(row, i) => i !== x
? row
: row.map(
(tileState, j) => y === j ? true : tileState
)
)
});
if (isZero) {
handleReveal(x - 1, y);
handleReveal(x + 1, y);
handleReveal(x, y - 1);
handleReveal(x, y + 1);
}
};
Now that the parent component has handleReveal, pass it down to each tile. When there's a left click, call the passed down handleReveal, and have the children tiles decide what image to render by checking whether the parent's revealed state for that X and Y is true or false.
The Tiles probably shouldn't have state themselves except for whether they've been flagged or not. The imgSrc can be determined directly from the props, as can the value. Better not to duplicate state over both parents and children - doing it that way makes things messy and hard to deal with, especially when it comes to updates.


Hello You have to update line
{this.state.value}
with the below
{this.state.value}

Related

How to scroll while selecting items with mouse in vue

Hi i'm facing the very challenging & interesting problem of scroll during selection of items with mouse drag in both direction i,e up and down
here is a screen shot
Here is my code : https://codesandbox.io/s/select-ivwq8j?file=/src/overridden/Drag-select.vue
Drag-select.vue is the file where drag selection logic is written.
which fires change when files selection gets changed.
I receive those change event here <drag-select-container #change="dragSelect($event)">
Edit 1: after IVO GELO comment
I have added inside drag() function
try{
let containerEl = document.querySelector('#wrapping_container');
let container = containerEl.getBoundingClientRect();
if(box.top > (container.top )){
containerEl.scrollTop = box.top - 50;
return true;
}
}catch(e){
console.log(e);
}
Edit code here: https://codesandbox.io/s/select-ivwq8j?file=/src/overridden/Drag-select.vue
It is very interesting and challenging problem so
Please help me thanks in advance!!

I recommend you use DragSelect js library.
Working Demo
https://codesandbox.io/s/select-forked-tnmnwk?file=/src/components/HelloWorld.vue
mounted() {
const vm = this;
const ds = new DragSelect({
selectables: document.querySelectorAll(".selectable-nodes"),
area: document.getElementById("area"),
draggability: false,
});
ds.subscribe("elementselect", function ({ item }) {
vm.selectedItems.push();
});
ds.subscribe("elementunselect", function ({ item }) {
const index = vm.selectedItems.indexOf(item.getAttribute("customAttribute"));
if (index > -1) {
vm.selectedItems.splice(index, 1);
}
});
}

I found a solution for your question. I rewrite your code in a completely different way. Here is a demo that you can test it. Actually it contains two main component. Parent component that is called "HelloCompo" and its code comes here:
HelloCompo:
<template>
<!-- This is a component that uses "MyDrag" component. -->
<div id="wrapping_container" class="hello">
<!-- Here we insert "MyDrag" component that emits custom "change" event when the selection of element is changed according to user drag. -->
<my-drag #change="dragSelect">
<div
class="item"
:class="{ selected: ( index >= minMax[1] && index <= minMax[0] ) }"
:key="item"
v-for="(item, index) in [1, 2, 3, 4,5,6,7,8,9,10,11,12,13,14,15,16]"
>
{{ item }}
</div>
</my-drag>
</div>
</template>
<script>
import MyDrag from "./MyDrag";
export default {
name: "HelloCompo",
components: {MyDrag},
data() {
return {
selectedItems: [],
};
},
computed: {
minMax: function () {
/* This computed property uses data returned by "MyDrag" component to define the maximum and minimum range to accept "selected" class. */
let max = -1;
let min = -1;
if (this.selectedItems.length > 0) {
max = Math.max(...this.selectedItems);
min = Math.min(...this.selectedItems);
}
return [max-1, min-1]
}
},
methods: {
dragSelect: function (selectedList) {
// console.log(selectedList);
/* this Method is used to set "selectedItems" data after each change in selected drag. */
this.selectedItems = selectedList;
}
},
}
</script>
<style scoped>
.item {
display: block;
width: 230px;
height: 130px;
background: orange;
margin-top: 9px;
line-height: 23px;
color: #fff;
}
.selected {
background: red !important;
}
#wrapping_container{
background:#e7e7e7;
}
</style>
And child component that is called "MyDrag":
MyDrag:
<template>
<section id="parentAll">
<!-- I used "#mousedown" and ... for calling methods instead of using all functions in mounted hook. -->
<div class="minHr" ref="container" #mousedown="startDrag" #mouseup="endDrag" #mousemove="whileDrag">
<slot></slot>
</div>
<!-- This canvas is shown only when the user is dragging on the page. -->
<canvas ref="myCanvas" v-if="showCanvas" #mouseup="endDrag" #mousemove="whileDrag"></canvas>
</section>
</template>
<script>
export default {
name: "MyDrag",
data() {
return {
dragStatus: false, // used for detecting mouse drag
childrenArr: [], // used to store the information of children of 'ref="container"' that comes from "slot"
startEvent: null, // used to detect mouse position on mousedown
endEvent: null, // used to detect mouse position on mouseup
direction: "topBottom", // used to detect the direction of dragging
selectedArr: [], // used to store the selected "divs" after dragging
heightContainer: null, // used to detect the height of 'ref="container"' dynamically
widthContainer: null, // used to detect the width of 'ref="container"' dynamically
/* These data used to draw rectangle on canvas while the user is dragging */
rect: {
startX: null,
startY: null,
w: null,
h: null
},
startDragData: {
x: null,
y: null
},
whileDragData: {
x: null,
y: null,
CLY: null
},
showCanvas: false // used to show or hide <canvas></canvas>
}
},
methods: {
childrenInfo: function () {
/* This method is called on "mounted()" hook to gather information about children of 'ref="container"' that comes from <slot></slot> */
const { container } = this.$refs;
const stylesDiv = window.getComputedStyle(container, null);
this.widthContainer = parseFloat( stylesDiv.getPropertyValue("width") );
this.heightContainer = parseFloat( stylesDiv.getPropertyValue("height") );
let children = container.childNodes;
children.forEach((item, index) => {
let childObj = {
offsetTop: item.offsetParent.offsetTop + item.offsetTop,
offsetHeight: item.offsetHeight
}
this.childrenArr.push(childObj);
})
},
startDrag: function (event) {
/* This method is called at mousedown and detect the click or right click. after that it sets some data like "showCanvas". */
if(event.button === 0) {
this.dragStatus = true;
this.startEvent = event.pageY;
this.startDragData.x = event.pageX;
this.startDragData.y = event.pageY;
this.showCanvas = false;
}
},
whileDrag: async function (event) {
/* This method is called when the user is dragging. Because I want to be confident about showing <canvas> before doing other parts of code, I used "async" function for this method. */
if (this.dragStatus) {
await this.showMethod();
console.log("dragging");
this.whileDragData.x = event.pageX;
this.whileDragData.y = event.pageY;
this.whileDragData.CLY = event.clientY
await this.canvasMethod();
} else {
this.showCanvas = false;
}
},
endDrag: function (event) {
/* This method is called at mouseup. After that it calls other methods to calculate the "divs" that were selected by user. */
if(event.button === 0) {
console.log("end drag");
this.dragStatus = false;
this.showCanvas = false;
this.endEvent = event.pageY;
this.calculateDirection();
this.calculateSelected();
}
},
showMethod: function () {
/* This method is used to set "showCanvas" data at proper time. */
this.showCanvas = true;
},
calculateDirection: function () {
/* This method is used to detect the direction of dragging. */
if (this.startEvent <= this.endEvent) {
this.direction = "topBottom";
} else {
this.direction = "bottomTop";
}
},
calculateSelected: function () {
/* This method is responsible to find out which "divs" were selected while the user was dragging. After that it emits "this.selectedArr" data to the parent component. */
this.selectedArr = [];
let endIndex = null;
let startIndex = null;
this.childrenArr.forEach( (item, index) => {
if ( (item.offsetTop < this.endEvent) && ( (item.offsetTop + item.offsetHeight) > this.endEvent) ) {
endIndex = index;
console.log(endIndex);
}
if ( (item.offsetTop < this.startEvent) && ( (item.offsetTop + item.offsetHeight) > this.startEvent) ) {
startIndex = index;
console.log(startIndex);
}
});
if( endIndex !== null ) {
if (this.direction === "topBottom") {
for (let i = startIndex; i <= endIndex; i++ ) {
this.selectedArr.push(i+1);
}
} else {
for (let i = startIndex; i >= endIndex; i-- ) {
this.selectedArr.push(i+1);
}
}
}
this.$emit("change", this.selectedArr);
},
canvasMethod: function () {
/* This method is used to show a rectangle when user drags on page. It also could understand that the user is near the top or bottom of page, and then it scrolls the page when the user is dragging. */
const { myCanvas } = this.$refs;
myCanvas.width = this.widthContainer;
myCanvas.height = this.heightContainer;
const html = document.documentElement;
let ctx = myCanvas.getContext('2d');
this.rect.startX = this.startDragData.x - myCanvas.offsetParent.offsetLeft;
this.rect.startY = this.startDragData.y - myCanvas.offsetParent.offsetTop;
this.rect.w = (this.whileDragData.x - myCanvas.offsetParent.offsetLeft) - this.rect.startX;
this.rect.h = (this.whileDragData.y - myCanvas.offsetParent.offsetTop) - this.rect.startY ;
if ( Math.abs(this.whileDragData.CLY - window.innerHeight) < 12) {
console.log("near");
html.scrollTop += 25;
}
if ( Math.abs(this.whileDragData.CLY) < 12 ) {
html.scrollTop -= 25;
}
if ( (this.whileDragData.y > (myCanvas.offsetParent.offsetTop + myCanvas.offsetHeight) - 25) || (this.whileDragData.y < myCanvas.offsetParent.offsetTop + 25) ) {
ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
}
ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
ctx.setLineDash([6]);
ctx.strokeRect(this.rect.startX, this.rect.startY, this.rect.w, this.rect.h);
},
},
mounted() {
this.childrenInfo();
}
}
</script>
<style scoped>
.minHr {
min-height: 900px;
}
#parentAll {
position: relative;
}
#parentAll canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
I used a <canvas> to draw rectangle when the user is dragging. The main difference of my code with your is that it shows the selected items after the dragging process was finished. It works in both upward dragging and downward dragging and also when the user is want to continue dragging beyond the window area (scrolling).

How to toggle a rectangle grid using react-leaflet's LayerControl?

I want to show or hide a grid of rectangles (the overlay) over a map (the base layer).
I'm using the react Leaflet layers control : doc
Problem : My grid shows all the time even if I uncheck the check box
My grid :
class Grid extends MapControl {
createLeafletElement(props) {
const {
leaflet: { map },
} = props;
const minLng = -4.89;
const minLat = 41.29;
const maxLng = 9.65;
const maxLat = 51.22
const nbColumn = 10;
const nbRow = 10;
const rectWidth = maxLng - minLng;
const rectHeight = maxLat - minLat;
const incrLat = rectHeight / nbColumn;
const incrLng = rectWidth / nbRow;
let column = 0;
let lngTemp = minLng;
let latTemp = minLat;
let rect;
const arrRect = [];
while (column < nbColumn) {
let row = 0;
latTemp = minLat;
while (row < nbRow) {
const cellBounds = [[latTemp, lngTemp], [latTemp + incrLat, lngTemp + incrLng]];
rect = L.rectangle(cellBounds, {color: "#1EA0AA", weight: 1}).addTo(map);
arrRect.push(rect);
latTemp += incrLat;
row += 1;
}
lngTemp += incrLng;
column += 1;
}
return rect;
}
}
In my leaflet component :
class Leaflet extends Component {
...
render() {
return (
<Map
<LayersControl>
<LayersControl.BaseLayer name="Open Street Map" checked="true">
<TileLayer attribution='© OpenStreetMap
contributors'
url={this.state.url}
/>
</LayersControl.BaseLayer>
<LayersControl.Overlay name="Grid1">
<LayerGroup>
<Grid />
</LayerGroup>
</LayersControl.Overlay>
</LayersControl>

I did not manage to load your grid so I provide another simpler grid example.
To control the Grid's visibility you need to use react-leaflet's updateLeafletElement method to trigger prop changes on your custom react-leaflet component. Pass a showGrid prop to be able to control Grid's visibility.
updateLeafletElement(fromProps, toProps) {
const { map } = this.props.leaflet;
if (toProps.showGrid !== fromProps.showGrid) {
toProps.showGrid
? this.leafletElement.addTo(map)
: this.leafletElement.removeFrom(map);
}
}
then in your map component listen to leaflet's overlayadd & overlayremove to be able to toggle a local flag which will control the visibility of the grid using an effect:
useEffect(() => {
const map = mapRef.current.leafletElement;
map.on("overlayadd", (e) => {
if (e.name === "Grid1") setShowGrid(true);
});
map.on("overlayremove", (e) => {
if (e.name === "Grid1") setShowGrid(false);
});
}, []);
<LayersControl.Overlay
checked={showGrid}
name="Grid1"
>
<LayerGroup>
<Grid showGrid={showGrid} />
</LayerGroup>
</LayersControl.Overlay>
Edit:
The App component as class based component it will look like this:
export default class AppWithNoHooks extends Component {
state = {
showGrid: false
};
mapRef = createRef();
componentDidMount() {
const map = this.mapRef.current.leafletElement;
map.on("overlayadd", (e) => {
if (e.name === "Grid1") this.setState({ showGrid: true });
});
map.on("overlayremove", (e) => {
if (e.name === "Grid1") this.setState({ showGrid: false });
});
}
...
I don't get the error you mentioned.
Demo

React Hooks not changing object state until I scroll the page

I'm new with React, and I'm having a problem rendering a component ("setBoard" don't take effect until I scroll the page):
function GameManager() {
const [board, setBoard] = useState(new Board)
const handleKeyDown = useCallback(event => {
if (board.hasWon()) {
return;
}
if (event.keyCode >= 37 && event.keyCode <= 40) {
event.preventDefault();
var direction = event.keyCode - 37;
setBoard(board.move(direction))
}
}, [])
useEffect(() => {
window.addEventListener('keydown', handleKeyDown)
return() => {window.removeEventListener('keydown', handleKeyDown)}
}, [handleKeyDown])
return (
// <div onTouchStart={this.handleTouchStart.bind(this)} onTouchEnd={this.handleTouchEnd.bind(this)}>
<div>
<div class="heading" >
<button class="restart-button" onClick={restartGame} onTouchEnd={restartGame}>New Game</button>
< Score score={board.score} />
</div>
<BoardView board={board} />
</div>
);
}
My component was not re rendering, but the values of object "board" were changing:
return( </div> <BoardView board={board} /> </div>)
After some research, I found that React compares if the object has changed with Object.is, and the response is true, maybe because how I coded "board":
Board.prototype.move = function (direction) {
// 0 -> left, 1 -> up, 2 -> right, 3 -> down
this.clearOldTiles();
for (var i = 0; i < direction; ++i) {
this.cells = rotateLeft(this.cells);
}
var hasChanged = this.moveLeft();
for (var i = direction; i < 4; ++i) {
this.cells = rotateLeft(this.cells);
}
if (hasChanged) {
this.addRandomTile();
}
this.setPositions();
return this;
};
Maybe I should return something different than "return this" in .move()??
Any ideas??? (:
Thanks for reading!
EDIT:
Now is working, but I'm not sure if it was the best approach:
Changed the props in the component, instead of all the object:
<BoardView boardTiles={board.tiles} boardCells={board.cells} />
Now, it should update when board.tiles or board.cells changes.
Also change the way I set the object state (vars separately)
board.move(direction)
setBoard(prevBoard => ({...prevBoard, tiles: board.tiles, cells: board.cells, score: board.score}))
Is this way efficient? can be optimized?
Thanks!

Warning: setState(...): Can only update a mounted or mounting component. This usually means

I am working on an exercise in the Udemy Advanced Webdeveloper Bootcamp. The exercise asked to come up with a page of 32 boxes that randomly change colour (every x seconds). My solution is not exactly that. I change the color of all 32 boxes at the same time. It almost works. I get random 32 boxes initially, but does not change the color later. My console tells me I am doing something wrong with the setState. But I cannot figure out what. I think my changeColor is a pure function:
import React, { Component } from 'react';
import './App.css';
class Box extends Component {
render() {
var divStyle = {
backgroundColor: this.props.color
}
return(
<div className="box" style={divStyle}></div>
);
}
}
class BoxRow extends Component {
render() {
const numOfBoxesInRow = 8;
const boxes = [];
for(var i=0; i < numOfBoxesInRow; i++) {
boxes.push(<Box color={this.props.colors[i]} key={i+1}/>);
}
return(
<div className="boxesWrapper">
{boxes}
</div>
);
}
}
class BoxTable extends Component {
constructor(props) {
super(props);
this.getRandom = this.getRandom.bind(this);
this.changeColors = this.changeColors.bind(this);
this.state = {
randomColors: this.getRandom(this.props.allColors, 32) // hardcoding
};
this.changeColors();
}
changeColors() {
setInterval(
this.setState({randomColors: this.getRandom(this.props.allColors, 32)}), 5000);
}
getRandom(arr, n) {
var result = new Array(n),
len = arr.length,
taken = new Array(len);
if (n > len)
throw new RangeError("getRandom: more elements taken than available");
while (n--) {
var x = Math.floor(Math.random() * len);
result[n] = arr[x in taken ? taken[x] : x];
taken[x] = --len in taken ? taken[len] : len;
}
return result;
}
render () {
const numOfRows = 4;
const rows = [];
for(let i=0; i < numOfRows; i++) {
rows.push(
<BoxRow colors={this.state.randomColors.slice(8*i,8*(1+i))} key={i+1}/>
)
}
return (
<div className="rowsWrapper">
{rows}
</div>
);
}
}
BoxTable.defaultProps = {
allColors: ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige",
"Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood",
"CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk",
"Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey",
"DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange",
"DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue",
"DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink",
"DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite",
"ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray",
"Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo",
"Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon",
"LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray",
"LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen",
"LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue",
"LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon",
"MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple",
"MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise",
"MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin",
"NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed",
"Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed",
"PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple",
"Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown",
"SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray",
"SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle",
"Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"]
}
export default BoxTable

You are calling this.setState before the component has mounted (from the constructor). Try instead making your first this.ChangeColors from the componentDidMount lifecycle function.
Additionally, it's not a bad idea to clear the interval when it unmounts in componentWillUnMount
Edit: By changing the interval to call after the first wait you do prevent the error, for now. I'd recommend using the lifecycle functions to build good habits. It's just a temporary assignment, but in a full project you'd be putting yourself at risk to break the component again later by making it possible to call this.setState before it is reliably mounted.

You need to use a lambda function in order to use setState inside setInterval
setInterval(() => {
this.setState({randomColors: this.getRandom(this.props.allColors,
32)});
}, 5000)

try to change your changeColors function to like this:
changeColors() {
setInterval(() => this.setState({randomColors: this.getRandom(this.props.allColors, 32)}), 5000);
}
the first param of setInterval is function, in your original code you already executed this setState and didn't passed the function itself

You will need to update the state after the component creation phase, inside componentDidMount()
class BoxTable extends Component {
constructor(props) {
super(props);
this.getRandom = this.getRandom.bind(this);
this.changeColors = this.changeColors.bind(this);
this.state = {
randomColors: this.getRandom(this.props.allColors, 32) // hardcoding
};
// delete this line
//this.changeColors();
}
// replace changeColors by componentDidMount,
// this function will be called automatically by react
componentDidMount() {
setInterval(
this.setState({randomColors: this.getRandom(this.props.allColors, 32)}), 5000);
}
getRandom(arr, n) {
var result = new Array(n),
len = arr.length,
taken = new Array(len);
if (n > len)
throw new RangeError("getRandom: more elements taken than available");
while (n--) {
var x = Math.floor(Math.random() * len);
result[n] = arr[x in taken ? taken[x] : x];
taken[x] = --len in taken ? taken[len] : len;
}
return result;
}
render () {
const numOfRows = 4;
const rows = [];
for(let i=0; i < numOfRows; i++) {
rows.push(
<BoxRow colors={this.state.randomColors.slice(8*i,8*(1+i))} key={i+1}/>
)
}
return (
<div className="rowsWrapper">
{rows}
</div>
);
}
}

How to practically replay a list of mouse coordinates after they have been inputted

This is a continuation of another thread.
I have recorded mouse coordinates on the mousemove event with a timestamp, I now want to replay this collection of coordinates and move a mock cursor (img) according to it.
I have tried implementing the solution from the previous thread but I don't know how to practically do it.
This is what needs to happen:
Move img to position
Take time difference from current position to next position
Wait for that amount of time
Move img to next position
I have tried working with setInterval and a timeout function but it doesn't work how its supposed to, try out the code and maybe you can come up with a solution.
Only thing you need to run this is an image to act as the cursor.
import React from 'react'
import cursor from '../../assets/images/cursor.png'
export default class Tracker extends React.Component {
constructor() {
super()
this.state = {
tracking: [],
replay: false,
replayPoint: null,
}
}
onMouseMove = event => {
let newArr = this.state.tracking.slice()
newArr.push({ time: Date.now(), x: event.clientX, y: event.clientY })
this.setState({ tracking: newArr })
}
stopTracking = () => {
window.removeEventListener('mousemove', this.onMouseMove)
this.setState({ replay: true, replayPoint: { x: 0, y: 0 } })
this.state.tracking.forEach(function(p, i, array) {
let that = this
if (i + 1 < array.length) {
let interval = array[i + 1].time - p.time
setTimeout(function() {
that.moveCursor(p)
that.sleep(interval)
}, interval)
}
}, this)
}
moveCursor = p => {
this.setState({
replayPoint: { x: p.x, y: p.y },
})
}
sleep(milliseconds) {
var start = new Date().getTime()
for (var i = 0; i < 1e7; i++) {
if (new Date().getTime() - start > milliseconds) {
break
}
}
}
render() {
let cursor = this.state.replay && <Cursor cords={this.state.replayPoint} />
return (
<div>
{cursor}
<button onClick={this.stopTracking}>Stop tracking</button>
</div>
)
}
componentDidMount() {
window.addEventListener('mousemove', this.onMouseMove)
}
}
class Cursor extends React.PureComponent {
render() {
const { x, y } = this.props.cords
console.log('move to ' + x + ' - ' + y)
return (
<div>
<img
src={cursor}
style={{
left: x + 'px',
top: y + 'px',
position: 'fixed',
width: '20px',
}}
/>
</div>
)
}
}

Categories

Resources