Support for custom roulette elements

[pahas]

Hi. I'd really like to see support for custom roulette spinning elements. Overall the package is great and many thanks for it, but I'm really missing this feature, if you don't have plans on implementing this I guess I'll have to modify it myself :(

[IvanAdmaers]

Hello, @pahas! Thank you for your interest in this package.

I have an idea to make a custom render function for the roulette elements.
It'll look something like this:

<RoulettePro
renderFunction={({ id, image, text }) => (
  <div key={id}>
    {/* Your custom element here */}
  </div>
)}
/>

I'll implement it soon. Approximately on the weekend.

Thank you for your support.

[IvanAdmaers]

And by the way. You can modify this package whatever you want because it is under the MIT license.

[IvanAdmaers]

🥳 React Roulette Pro 1.3.0 is released 🥳

New props:
prizeRenderFunction - a function that renders your roulette prize items. Customize your prize items as you need.
prizeWidth - a prize width in px.

Examples are in the AdvancedUsage.js

I hope it'll help you. If I can make something else just let me know.

Thank you for your support. I really appreciate it!

[pahas]

Thanks, I have been playing myself with this package for some time and almost got what I needed. BTW I meant more raw solution for prizes, because I use my own React element for the prize cards, the API doesn't kinda suit me, but I made some modifications for myself so it's ok, I guess this is not a common usage.

Also, would you ever be interested in implementing something like current center element highlighting or when the roulette ends, make the card bigger. I'll attach an example design so you can understand. (the center gray card)

[IvanAdmaers]

Your idea looks interesting. I’ll play with it tomorrow and let you know. Thank you!

[IvanAdmaers]

About something like current center element highlighting.

You can highlighting the center element by using box-shadow.

About make the card bigger when the roulette ends.

It's possible to make it with useRef. We can add a ref to the prize item that should win and when the roulette stop spinning add some styles like transform scale. I've added your idea to my implement list it but It won't be implemented soon because it requires architecture change and I'll do it when I have enough time.

If you have any more ideas or questions just write them. I'll try to help!

[pahas]

Okay, but do you have any idea how to keep center element highlighted? I guess that's what requires arch changes?

[IvanAdmaers]

To keep center element highlighted when the roulette spinning you should add something like this:

.roulette-pro-prizes-container::after {
  content: "";
  width: 200px;
  height: 234px;
  background-color: transparent;
  position: absolute;
  z-index: 999;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(calc(-50% + 4px));
  margin: auto;
  /* box-shadow: 0 0 50px 20px royalblue; */
  border: 3px solid royalblue;
  overflow: hidden;
}

But when the roulette stop spinning this border is still active.

How to fix:

// Outside the component
const css = document.createElement('style');
css.textContent = `
.roulette-pro-prizes-container::after {
  content: "";
  width: 200px;
  height: 234px;
  background-color: transparent;
  position: absolute;
  z-index: 999;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(calc(-50% + 4px));
  margin: auto;
  border: 3px solid royalblue;
  overflow: hidden;
}
`;

// Inside the component
const [showBorder, setShowBorder] = useState(true);

  const handlePrizeDefined = useCallback(() => {
    console.log('🥳 Prize defined! 🥳');

    setShowBorder(false);
  }, []);

  useEffect(() => {
    if (!showBorder) {
      return document.head.lastElementChild.remove();
    }

    document.head.appendChild(css);
  }, [showBorder]);

---

If you want to highlight the element after the roulette stop spinning:

// Inside the component
const [highlight, setHighlight] = useState(false);

  const handlePrizeDefined = useCallback(() => {
    console.log('🥳 Prize defined! 🥳');

    setHighlight(true);
  }, []);


  useEffect(() => {
    if (!highlight) {
      return;
    }

    const element = document.querySelector(
      `.roulette-pro-prize-item:nth-child(${prizeIndex + 1})`,
    );

    const currentStyle = element.getAttribute('style');
    element.style = `
      ${currentStyle}
      position: relative;
      z-index: 999;
      box-shadow: 0 0 50px 20px royalblue;
    `;
  }, [highlight, prizeIndex]);

Is this what you are looking for?

[pahas]

Initially I thought about something like when the roulette is spinning, element which shows up in center should be bigger for few milliseconds, but now I guess generally this isn't a good practice and my design has changed. Thanks anyways for efforts! I'll close the issue now