Discussion on: Wheel of Fortune with CSS

[Samuel]

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]

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

[Mads Stoumann]

Great, looks good!