Indicator on the middle of two results

[AlvaroFalcon]

Hey, awesome library but im having one issue:

I have a TopChildren with the following css:

.arrow { z-index: 10; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 70px solid white; position: relative; top: -1rem; margin: auto; }

but it does not always point to a result, sometimes it points in the middle, any clue of why this might be happening?

[IvanAdmaers]

Hi, Alvaro. If you need this roulette to be stopped in the center of item, then pass the prop ‘options={{ stopInCenter: true }}’. Or you’re looking for something else?On 5 Aug 2024, at 10:12 p.m., Alvaro Eduardo Falcón Morales @.***> wrote: Hey, awesome library but im having one issue: I have a TopChildren with the following css: .arrow { z-index: 10; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 70px solid white; position: relative; top: -1rem; margin: auto; } but it does not always point to a result, sometimes it points in the middle, any clue of why this might be happening?

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: @.***>

[AlvaroFalcon]

I think that might work! will try it out, thank you very much.

Will reply whenever I have the time to test it if it works, thanks

[AlvaroFalcon]

I've got a roulette with game images, after adding that option this issue is still happening, may I be doing something wrong?

here is an example.

I've noted that resizing the windows the position changes, might it be related to width?

[IvanAdmaers]

It looks like you’ve changed padding between items or items width. The roulette calculating offset based on items width. If items width or padding between them had been change the roulette calculating offset incorrect. To fix it, you need to use design plugin. The prop called: ‘designPlugin‘ (see README.md). Example: https://github.com/IvanAdmaers/react-roulette-pro/blob/main/src/designs/Regular/Regular.tsx.By using this, you’ll let the roulette know your items width and height, so it can calculate its offset right.On 6 Aug 2024, at 6:42 PM, Alvaro Eduardo Falcón Morales @.***> wrote: I've got a roulette with game images, after adding that option this issue is still happening, may I be doing something wrong? imagen.png (view on web) here is an example

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

[IvanAdmaers]

If you won’t be able to fix it, send me a link to codesandboxOn 6 Aug 2024, at 6:42 PM, Alvaro Eduardo Falcón Morales @.***> wrote: I've got a roulette with game images, after adding that option this issue is still happening, may I be doing something wrong? imagen.png (view on web) here is an example

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

[AlvaroFalcon]

Sorry missed the message.

Thank you for your reply, the thing is that I already have my custom design:

import React from 'react';
import {IDesignPlugin} from "react-roulette-pro";
import {EmptyGameIcon} from "../resources/Icons";

const TopChildren = () => {
  return (
    <div
      className={`arrow`}
    />
  );
};

const PrizeItem = ({ image, text }: { image: string, text: string | undefined }) => {
  return (
    <div className={'roulette-pro-regular-prize-item-wrapper center'}>
      <div className="roulette-pro-regular-image-wrapper">
        <img src={image} alt={text || "Game"} className="roulette-pro-regular-prize-item-image"/>
      </div>
    </div>
  );
}

const EmptyPrizeItem = () => {
  return (
    <div>
      <EmptyGameIcon/>
    </div>
  );

}

const gameDesign = () => (): IDesignPlugin => {
      const prizeItemWidth: number = 120;
      const prizeItemHeight: number = 160;

      return {
        topChildren: (
          <TopChildren/>
        ),
        bottomChildren:null,
        prizeItemWidth,
        prizeItemHeight,
        prizeItemRenderFunction: ({ image, text }) => {
          return (
            <>
              {image === "" ? <EmptyPrizeItem/> : <PrizeItem image={image} text={text}/>}
            </>
          );
        },
      };
    };

export default gameDesign;

Will try to fix it, otherwise I'll be attaching a codesandbox as you mentioned, thank you

edit:

forgot that I've added this CSS

.roulette-pro-prize-list {
  gap: 1rem !important;
}

[IvanAdmaers]

Try to remove the .roulette-pro-prize-list class. If the roulette will stop correct, this means you need to change your const prizeItemWidth: number = 120. Let me known after you try it

[IvanAdmaers]

No problem. Just keep in mind that prizeItemWidth needs to be correct and include all paddings. For example, item width is 100px. And it has padding-x: 20px. Total width is: 100 + 20 * 2 = 140px. Feel free to contact me here if you need any helpOn 8 Aug 2024, at 12:56 a.m., Alvaro Eduardo Falcón Morales @.***> wrote: Sorry missed the message. Thank you for your reply, the thing is that I already have my custom design: import React from 'react'; import {IDesignPlugin} from "react-roulette-pro"; import {EmptyGameIcon} from "../resources/Icons";

const TopChildren = () => { return ( <div className={arrow} /> ); };

const PrizeItem = ({ image, text }: { image: string, text: string | undefined }) => { return ( <div className={'roulette-pro-regular-prize-item-wrapper center'}>

</div>

); }

const EmptyPrizeItem = () => { return (

);

}

const gameDesign = () => (): IDesignPlugin => { const prizeItemWidth: number = 120; const prizeItemHeight: number = 160;

  return {
    topChildren: (
      <TopChildren/>
    ),
    bottomChildren:null,
    prizeItemWidth,
    prizeItemHeight,
    prizeItemRenderFunction: ({ image, text }) => {
      return (
        <>
          {image === "" ? <EmptyPrizeItem/> : <PrizeItem image={image} text={text}/>}
        </>
      );
    },
  };
};

export default gameDesign;

Will try to fix it, otherwise I'll be attaching a codesandbox as you mentioned, thank you

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

[AlvaroFalcon]

Sorry missed this, will try over the weekend and let you know, thanks for the help.

[AlvaroFalcon]

Didn't have much time sorry, but I've tried removing the CSS class and changed the width to 120 as mentioned and im getting this:

here is my code:

import React from 'react';
import {IDesignPlugin} from "react-roulette-pro";
import {EmptyGameIcon} from "../resources/Icons";

const TopChildren = () => {
  return (
    <div
      className={`arrow`}
    />
  );
};

const PrizeItem = ({ image, text }: { image: string, text: string | undefined }) => {
  return (
    <div className={'roulette-pro-regular-prize-item-wrapper center'}>
      <div className="roulette-pro-regular-image-wrapper">
        <img src={image} alt={text || "Game"} className="roulette-pro-regular-prize-item-image"/>
      </div>
    </div>
  );
}

const EmptyPrizeItem = () => {
  return (
    <div>
      <EmptyGameIcon/>
    </div>
  );

}

const gameDesign = () => (): IDesignPlugin => {
      const prizeItemWidth: number = 120;
      const prizeItemHeight: number = 160;

      return {
        topChildren: (
          <TopChildren/>
        ),
        bottomChildren:null,
        prizeItemWidth,
        prizeItemHeight,
        prizeItemRenderFunction: ({ image, text }) => {
          return (
            <>
              {image === "" ? <EmptyPrizeItem/> : <PrizeItem image={image} text={text}/>}
            </>
          );
        },
      };
    };

export default gameDesign;

spacing from inspector

Thank you for the support

[IvanAdmaers]

Hi, @AlvaroFalcon. Could you provide your RoulettePro props? I mean:

      <RoulettePro
        prizes={prizeList}
        prizeIndex={prizeIndex}
        start={start}
       ...etc
      />

[AlvaroFalcon]

        <Roulette prizes={formedPrizeList.length > 0 ? formedPrizeList : formedEmptyList}
                  prizeIndex={prizeIndex} start={start}
                  onPrizeDefined={handlePrizeDefined}
                  options={{stopInCenter: true}}
                  designPlugin={gameDesign()}
        />

There you go, thanks

[IvanAdmaers]

Try to add these styles and let me know if anything changes

[IvanAdmaers]

Also, if the roulette stops after its items (like here), then you should check your prizeIndex

[AlvaroFalcon]

still happening this

code to generate the list of item prizes, just in case

const getFormedPrizeList = (prizeList: PrizeType[]) => {
  const reproductionArray = (array: PrizeType[] = [], length = 0) => [
    ...Array(length)
      .fill('_')
      .map(() => array[Math.floor(Math.random() * array.length)]),
  ];
  return [
    ...prizeList,
    ...reproductionArray(prizeList, prizeList.length * 3),
    ...prizeList,
    ...reproductionArray(prizeList, prizeList.length),
  ].map((prize, index) => ({...prize, id: index}));
}

const emptyPrizeArray: PrizeType[] = Array(20).fill({id: 1, image: "" }, 0, 20).map((_, index) => ({id: index, image: ""}));

[IvanAdmaers]

When this happens, how many items in the prizes array do you have and what is the value of prizeIndex?