DEV Community

Wheel of Fortune with CSS

Mads Stoumann on May 23, 2024

A "Wheel of Fortune" component just popped up in my feed. I always spin, but never win! Anyway, this type of component is often built with <canv...

Read full post

Temani Afif • May 23 '24

The height calculation is actually not correct. You need to consider the polygon shape around the circle to find the correct height (the circumscribed polygon)

It's equal to height: calc(2*50cqi*tan(180deg/var(--_items))); that you can simplify by setting the ratio aspect-ratio: 1/calc(2*tan(180deg/var(--_items))); to avoid using the width value twice.

With this you won't have issue when you apply the clip-path

Mads Stoumann • May 23 '24 • Edited

AH, perfect — thank you! You truly are the master of CSS Shapes. I've added an update, and will use your input for the follow-up article with spinning.

Samuel • Jan 19

Thank you for this amazing article! Everything works flawlessly, as long as it's more than 3 items. For anything less than three, I get some very weird behaviors (these are 1 item, 2 items, and 3 items):

I am trying to find a fix for these, although I suspect it will have to be in js instead of css. I will come back and let you know my solution.

Mads Stoumann • Jan 20

Weird — let me know your findings, otherwise I can look into it in the weekend.

Samuel • Jan 26

I found a solution, but it's not mathematical in nature, it's kinda brute-force, especially the clip-path on the 3-item spinner. I tried all sorts of math for the clip-paths, but none of it worked close to well, and if you think about the problem, there really isn't a need for complex maths for one or two items.

NOTE: I added a data-itemCount property on the UL element to make this easier.

.wheel-of-fortune {
  [...]
  ul {
    [...]
    & li {
     [...]
    }
    &[data-itemCount="1"] {
      li {
        aspect-ratio: 1/1;
        display: block;
        rotate: 0;
        clip-path: none;
        width: 100cqi;
      }
    }
    &[data-itemCount="2"] {
      li {
        height: 100cqi;
        clip-path: none;
      }
    }
    &[data-itemCount="3"] {
      li {
        aspect-ratio: 1 / 2;
        clip-path: polygon(-35% -100%, 100% 50%, 0% 145%);
      }
    }
  }
}

As another "optimization," I switched out the correct answer logic because it wasn't working well for me when the spinner landed on or near boundaries. I calculate it like a spinner would - by position.

NOTE: my spinner element has a header for a title, so I use the header to find the correct value at the position.

        const spinnerElement = document.querySelector('.spinner-with-header');
        const headerElement = spinnerElement.querySelector('.header');
    function getResultsAtTop() {
        if (!spinnerElement) return null;

        const rect = headerElement.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const topY = rect.top + rect.height + 30; // 30 pixels below the header
        const element = document.elementFromPoint(centerX, topY);
        if (element?.parentElement !== spinnerElement) return null;
        return element?.textContent?.trim() || null;
    }

I have a full customizable svelte componenent at github.com/skamansam/ultimate-spin.... The companion site is at rudeboy.dev/ultimate-spinner/

Samuel • Jan 26 • Edited

Here is the codepen forked from the one above, with my modifications in it -

Mads Stoumann • Jan 26

Great, looks good!

Vladyslav Dev • Dec 12 '24

I really like your implementation because all libs create a wheel using canvas but i need the one to be highly customizable. Please help me to add logic to spin the wheel to the predefined (from backend or mocked) sector!

Mads Stoumann • Dec 12 '24

You just need to set newEndDegree manually, matching your predefined destination.

Martin Prihoda • Nov 10 '24

Has anyone solved the return value of the winning field? For example index for li tag. I have something, but the results are +- one position.

Martin Prihoda • Nov 10 '24

I think it’s resolved ( Link on Codepen.io ).

// --------------------------------------------
// append code for getting index of wheel spim
// --------------------------------------------
const rangeAngles = [
  {index:  0, from: 345, to: 360},
  {index:  0, from:   0, to:  15},
  {index:  1, from:  15, to:  45},
  {index:  2, from:  45, to:  75},
  {index:  3, from:  75, to: 105},
  {index:  4, from: 105, to: 135},
  {index:  5, from: 135, to: 165},
  {index:  6, from: 165, to: 195},
  {index:  7, from: 195, to: 225},
  {index:  8, from: 225, to: 255},
  {index:  9, from: 255, to: 285},
  {index: 10, from: 285, to: 315},
  {index: 11, from: 315, to: 345},
];

// position at zero level
const calculateZeroAngle = (finalAngle) => {
  let zeroAngle = 360 - finalAngle + 90;
  zeroAngle = ((zeroAngle % 360) + 360) % 360;
  zeroAngle = Math.round(zeroAngle * 10) / 10;
  return zeroAngle;
};

// Save the final degree to determine the winning segment
animation.onfinish = async () => {
  const finalAngle = ((newEndDegree % 360) + 360) % 360;
  const zeroAngle = calculateZeroAngle( finalAngle );
  const indexfOfWinner = rangeAngles.find( a => a.from < zeroAngle && a.to >= zeroAngle ).index
  alert( `Index of Winner: ${indexfOfWinner}` )
};

Mads Stoumann • Nov 13 '24

const normalizeAngle = (finalAngle) => {
  return (360 - finalAngle + 90) % 360;
};

const items = wheel.children.length;
const segment = 360 / items;
const offset = 15;

animation.onfinish = () => {
  const finalAngle = newEndDegree % 360;
  const normalizedAngle = normalizeAngle(finalAngle);
  const winner = Math.floor(((normalizedAngle + offset) % 360) / segment);
  console.log(wheel.children[winner].textContent);
};

Mads Stoumann • Nov 13 '24

Cool!

Mads Stoumann • Nov 12 '24

Please share — I need to think about it too!

Jocom Vag • May 30 '24

Always here for an interesting CSS project. Kudos.

Mads Stoumann • May 30 '24

Thanks!

Debajyati Dey • May 24 '24

wholesome wheel! :)
Beautiful project!

Mads Stoumann • May 24 '24

Thank you!

Eckehard • May 26 '24

I suppose this would be easier done in pure Javasript using CSS only where It's appropriate (e.g. the animation). Is it really worth the effort doing anything in CSS?

LcsGa • Aug 23 '24

I don't think that'd be easier in javascript. Whenever you have something visual, the right tool for that is CSS. When it's easier in pure JS, this usually mean that you lack knowledge with CSS.

Eckehard • Aug 23 '24

Oh, have fun to rebuild the [solarsystem][dev.to/cookiemonsterdev/solar-syst...] with pure CSS. There are good reasons the S in
CSS comes from "style", not from graphics...

Troy Forsyth • Dec 1 '24

So I found this posting a few days ago. I used the code pen and am trying to make this into a dynamically loading setup. Everything is fine with the wedges until you get below 4 slices. At 3 and less it breaks. I feel like it's something to do with the aspect ration of the LI tags.

Any thoughts?

Samuel • Jan 26

I have a solution here: dev.to/skamansam/comment/2l9ni