Onnenpyörä

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    
    <title>Wheel of Fortune</title>
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

    
    <script>
    
    


//--------------------
//helper.js
//____________________

const XMLNS = "http://www.w3.org/2000/svg";
const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ";
const VOWELS = "AEIOUYÅÄÖ";
const CONSONANTS = ALPHABET.split("").filter(d=>VOWELS.indexOf(d)<0).join("");


var lettersForFreq = "AITNESLOKUÄMVRJHYPDÖGBFCWÅQ";
var probsForLetters = [11.62, 10.71, 9.88, 8.67, 8.2, 7.86, 5.76, 5.31, 5.27, 5, 4.81, 3.51, 2.45, 2.16, 1.93, 1.82, 1.8, 1.66, 0.84, 0.47, 0.11, 0.05, 0.05, 0.03, 0.01, 0.01, 0.01];
var LETTERPROBS = {};
for (let i=0; i<lettersForFreq.length; i++) {
    LETTERPROBS[lettersForFreq.charAt(i)] = probsForLetters[i];
}

/*

const LETTERPROBS = { 
    
    "A": 10.167,
    "B": 1.492,
    "C": 2.782,
    "D": 4.253,	
    "E": 9.702,
    "F": 0.228,
    "G": 1.015,
    "H": 6.094,
    "I": 7.966,
    "J": 2.153,
    "K": 3.772,
    "L": 4.025,
    "M": 2.406, 
    "N": 6.749,
    "O": 7.507,
    "P": 1.929,
    "Q": 0.095,
    "R": 5.987,
    "S": 6.327,
    "T": 9.056,
    "U": 2.758,
    "V": 0.978,
    "W": 0.360,
    "X": 0.050,
    "Y": 0.464,
    "Z": 0.074,
    "Å": 0.01,
    "Ä": 1.5,
    "Ö": 0.1
};

*/

const DELAY_BEFORE_START_ROUND = 1200;
const REVEAL_SOLUTION_TIME = 700;
const DELAY_FOR_INFOBOX = 1500;
const DELAY_BEFORE_LETTER_FOUNDS = 200;
const DELAY_FOR_LETTER_TURN = 300;
const DELAY_BEFORE_WRONG_GUESS_REVEAL = 600;
const DELAY_BEFORE_CORR_GUESS_REVEAL = 600;
const DELAY_FOR_TURN_CHANGE = 1700;
const BANKCRUPT_BLACKOUT_TIME = 1500;
const DELAY_FOR_QUICK_GAME_CAN_GUESS_AGAIN = 2000;
const DELAY_AFTER_QUICK_GAME = 1700;
const OPP_TYPE_SPEED_PER_LETTER = 150;


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

CSS

.gameArea {
    position: relative;
    max-width: 1200px;
}


.wheelRim {
    /*filter: drop-shadow(0px 10px 20px rgba(60,60,60, 0.7)); works in mozilla, not chrome */
    stroke: rgb(168, 101, 9);
}

.wheelPointer {
    /*filter: drop-shadow(0px 20px 30px rgba(0,0,0, 0.5));*/
    fill: rgb(150, 150, 150);
}

.puzzle {
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 0.1%;
    margin-top: 2%;
    font: 2.8em Monospace;
    line-height: 1.5;
}

.hintBeforeSetup {
    opacity: 0;
    transition opacity 0.6s;
}


.categoryText {
    display: inline-block;
    font: 0.35em Helvetica;
    margin-left: 4%;
}



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

.buttons button:hover {
    background: orange;
}

.buttons button:disabled {
    background: #ccc;
}

.buttons input {
    margin: 1%;
    min-width: 45%;
    min-height: 4%;
    font: 3.2vmin Helvetica;
}

.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%;
    
    animation: chooserAppear 300ms;
}

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


.playersArea {
    position: absolute;
    right: 1%;
    top: 24%;
    /*background: rgba(90, 90, 90, 0.26);*/
    padding: 1.3%;
    min-width: 20%;
    border: 2px dashed black;
    
}


.infoBox {
    position: relative;
    right: 1%;
    background: rgba(90, 0, 200, 0.26);
    color: #444;
    padding: 1.3%;
    min-width: 20%;
    font: 1.2em Helvetica;
    margin-bottom: 2%;
}

.infoBox.inTurn {
    background: rgba(0, 200, 200, 0.8);
    color: black;
}

.bankcruptInfo {
    transition: transform 1.5s ease-in-out;
    color: "#eee";
    background: rgba(11, 11, 11, 0.9);
    transform:...