Animacja z równoczesnym losowaniem

Witam, od razu z góry przepraszam jeśli to nie ten dział.
ostatnio siedząc w szkole na lekcji stwierdziłem że zrobię sobie jakąś grę znam php/html/css dobrze lecz chciałbym zrobić sobie ruletke w JS , mam taką prostą grafikę :

i chciałbym ją okodować w JS tak aby się kręciła i przy odpowiedniej liczbie lub kolorze wpisywala do zmiennej co wylecialo nie chodzi mi o jakies gotowce typu z CS:GO to ma byc skrypt for fun na nudne lekcje wiec potrzebuje pomocy jakiegoś nakierowania jak sie do tego zabrać z góry dziękuje

• gotowa grafika ci nie potrzebna (a nawet będzie tylko przeszkadzać w prawidłowym wyliczeniu pozycji), bo w HTML/CSS możesz zrobić liczby (i użyć czegoś w rodzaju transform: rotate(20deg); żeby je obracać, kółko też się da zrobić (sztuczka z border-radius: 50%.

Żeby narysować kółko, możesz przelecieć JavaScriptem w pętli po kolejnych kątach (tj. zielone pole z liczbą 0 ma jakiś kąt, szare pole z liczbą 1 ma inny kąt etc.) i obrócić każdą liczbę o dany kąt, mając promień r i kąt alpha (domyślnie kąt się podaje w radianach, a nie w stopniach), łatwo wyliczysz ją za pomocą cosinusa i sinusa.
x = Math.cos(alpha) * r
y = Math.sin(alpha) * r

i chciałbym ją okodować w JS tak aby się kręciła

możesz zapakować całe kółko w jakiegoś dodatkowego diva, np. <div id="wrapper">....... tutaj kółko </div> i potem temu divowi ustawiać właściwość transform w CSS, powodując jego obrócenie.

jaka jest aktualna liczba, możesz wyliczyć z aktualnego kątu obrotu całego koła.

myślałem wlasnie o rozwiązaniu matematycznym tylko na kratce jest łatwiej to obliczyć niz w programie ale dzięki za odowiedz może ktoś napisze inne rozwiązanie