JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="wheelOfFortuneStyle.css" type="text/css" >
    <script src="helper.js"></script>
    <script src="wheel.js"></script>
    <script src="letterChoosing.js"></script>
    <script src="puzzle.js"></script>
    <script src="player.js"></script>
    <script src="wheelOfFortune.js"></script>
    <title>OnnenPyörä</title>
    
    <script>
    
    const XMLNS = "http://www.w3.org/2000/svg";
const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ";
const VOWELS = "AEIOUYÅÄÖ";

function randInt(a, b) {return a + Math.floor(Math.random()*(b-a+1));}



var Sector = function(type, value, color) {
    this.type = type;
    this.value = value;
    this.color = color;
};



var Wheel = function(sectors) {
    this.sectors = sectors;
    
    this.svg = null;
    this.x = 0;
    this.y = 0;
    this.scaleX = 1;
    this.scaleY = 1;
    this.rotation = 0;
    

    function makePiePart(from, to, color) {
        var ret = document.createElementNS(XMLNS, "path");
        var d = ["M", from.x, from.y,
                 "A", 1, 1, 0, 0, 0, to.x, to.y,
                 "L", 0, 0];
        //debugger;
        ret.setAttribute("d", d.join(" "));
        //ret.setAttribute("stroke", "black");
        ret.setAttribute("stroke-width", 0.02);
        ret.setAttribute("fill", color);
        return ret;
    }

    
    this.svg = document.createElementNS(XMLNS, "g");
    
    var angDelta = -2*Math.PI/this.sectors.length;
    var center = {x:0, y:0};
    var p1 = {x:1, y:0};
    var p2 = {x: Math.cos(angDelta), y:Math.sin(angDelta)};
    
    for (let i=0; i<this.sectors.length; i++) {
        let sect = makePiePart(p1, p2, this.sectors[i].color);
        this.svg.appendChild(sect);
        p1 = p2;
        let theta = (i+2)*angDelta;
        p2 = {x: Math.cos(theta), y: Math.sin(theta)};
    }
    
};



Wheel.prototype.updateTransform = function() {
   ...

CSS

.puzzle {
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 3%;
    margin-top: 3%;
    font: 2.8em Monospace;
}



.buttons button {
    margin: 5px;
    min-width: 100px;
    min-height: 25px;
    font: 1.7em Helvetica;
    
    
}

.buttons input {
    margin: 1%;
    min-width: 20%;
    min-height: 5%;
}

.chooseArea {
    position: absolute;
    left: 5%;
    top: 20%;
    width: 90%;
    height: 60%;
    background: rgba(50, 50, 50, 0.95);
    
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
    padding-top: 5%;
}

.chooseArea button {
    margin: 1%;
    min-width: 15%;
    min-height: 15%;
    font: 2em Helvetica;
}


.infoBox {
    position: absolute;
    right: 1%;
    top: 28%;
    background: rgba(90, 0, 200, 0.26);
    padding: 1.3%;
    min-width: 20%;
    font: 1.6em Helvetica;
}

.infoBox span {
    
    font: 1.6em Helvetica;
}

JavaScript

//ks yltä