Currently, I am developing a unique roulette feature that spins horizontally (from right to left). I'm exploring ways to dynamically utilize @keyframes to apply translateX() with values based on the outcome of each spin. For example, if the result of a round is 5, the roulette will move a certain number of pixels to land on the corresponding number specified by the server.
Below is the code snippet for the roulette functionality:
import React, { useState, useEffect } from "react";
import { socket } from "../../App.js";
import "./roulette.css";
export default class Roulette extends React.Component {
constructor(props) {
super(props);
this.socket = socket;
this.roulette = React.createRef();
this.state = {
result: null,
};
}
componentDidMount() {
this.setState({
backgroundPositionX: (this.roulette.current.offsetWidth - 78) / 2
});
this.socket.on("roulette.roll", position => {
//TODO: Determine the amount of translation needed from the server
});
}
render() {
return (
<div className="main-r flex items-center justify-center">
<div ref={this.roulette} className="roulette relative">
<div
style={{backgroundPosition: this.state.backgroundPositionX + "px" + "0"}}
className="roulette-bg h-full w-full"
></div>
<div className="roulette-marker absolute"></div>
</div>
</div>
);
}
}