<div id="split-blue" class="splitBlue">
    <button id="split1a" class="splitItem" onClick="splitSelected = 1;">1</button>
    <button id="split2a" class="splitItem" onClick="splitSelected = 2;">2</button>
    <button id="split3a" class="splitItem" onClick="splitSelected = 3;">3</button>
</div>

<div id="split-red" class="splitRed">
    <button id="split1b" class="splitItem" onClick="splitSelected = 1;">1</button>
    <button id="split2b" class="splitItem" onClick="splitSelected = 2;">2</button>
    <button id="split3b" class="splitItem" onClick="splitSelected = 3;">3</button>
</div>

<div class="red" id="red">
    <div class="handContainer">
        <div class="hand" id="0" onclick="select(0);" data-amount="1">
            <div class="stick"></div>
        </div>
    </div>
    <div class="handContainer">
        <div class="hand" id="2" onclick="select(2);" data-amount="1">
            <div class="stick"></div>
        </div>
    </div>
</div>

<div class="blue" id="blue">
    <div class="handContainer">
        <div class="hand" id="1" onclick="select(1);" data-amount="1">
            <div class="stick"></div>
        </div>
    </div>
    <div class="handContainer">
        <div class="hand" id="3" onclick="select(3);" data-amount="1">
            <div class="stick"></div>
        </div>
    </div>
</div>

<div style="display: flex; height: 100vh; position: fixed; align-items: center;">
    <div id="wonBG" class="wonBackground">
        <t id="won" class="won"></t><br>
        <svg onclick="reset();" class="retry" viewBox="0 0 520 520" width="30vh" title="replay">
        <path d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"/>
        </svg>
    </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');

:root{
    background: yellowgreen;
}
*{
    margin: 0px;
}
.stick{
    width: 40px;
    height: 40vh;
    background: #49311d;
    border: solid black 4px;
    border-radius: 25px;
    transition: all 0.2s;
}
.blue, .red{
    display: flex;
    position: fixed;
    width: 100%;
    height: 10vh;
    left: 0px;
    bottom: 0px;
    justify-content: space-evenly;
    align-items: center;
    background: blue;
    transition: all 0.2s;
    box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
}
.red{
    top: 0px;
    background: red;
}
.handContainer{
    display: flex;
    justify-content: center;
    width: 245px;
}
.hand{
    display: flex;
    height: 40vh;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: yellowgreen;
    border: solid yellowgreen 6px;
    cursor: pointer;
}
.hand:hover > .stick{
    height: 50vh;
}
.splitBlue, .splitRed{
    z-index: 20;
    display: none;
    position: fixed;
    bottom: 10vh;
    left: 0px;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.5s;
}
.splitRed{
    top: 10vh;
}
.splitItem{
    display: none;
    width: 40px;
    height: 40px;
    background: white;
    border: solid black 2px;
    border-radius: 20px;
    font-size: 25px;
    font-family: Nanum Gothic;
    transition: all 0.2s;
    margin-left: 10px;
}
.splitItem:hover{
    width: 50px;
    height: 50px;
    border-radius: 25px;
}
.empty{
    width: 40px;
    height: 9vh;
    background: yellowgreen;
    border: solid yellowgreen 4px;
}
.wonBackground{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    height: 75vh;
    width: 100%;
    left: calc(100% * -1);
    background-color: white;
    font-family: Rampart One;
    text-align: center;
    transition: all 0.4s;
}
.won{
    text-align: center;
    font-size: 30vh;
}
.retry{
    height: 20vh;
    width: 20vh;
    cursor: pointer;
    transition: all 0.7s;
}
.retry:hover{
    transform: rotate(360deg);
}

var d = document,
    selected = 'waiting',
    turn = 'blue',
    team = ['red','blue','red','blue','selectOne'],
    handSelected = 4,
    targetHandSelected = 4,
    splitSelected = 5;

function id(targetId){
    return d.getElementById(targetId);
}

function amount(targetId){
    return parseInt(id(targetId).dataset.amount);
}

function select(num){
    if(handSelected == 4){
        if(id(num).dataset.amount > 0){
            selected = num;
        }
    }
    else{
        selected = num;
    }
    return;
}

function setAmount(targetid, num){
    id(targetid).dataset.amount = num;
    return;
}

function reset(){
    selected = 0,
    handSelected = 0,
    targetHandSelected = 0,
    turn = 'blue',
    setAmount('0', 1),
    setAmount('1', 1),
    setAmount('2', 1),
    setAmount('3', 1);
    id('wonBG').style = 'left: calc(100% * -1);';
    id('won').innerHTML = '';
    render();
    playerTurn();
    return;
}

function render(){
    for (let i = 0; i < 4; i++) {
        if(amount(i) == 0){
            id(i).innerHTML = '<div class="empty"></div>';
        }
        else{
            id(i).innerHTML = '<div class="stick"></div>'.repeat(amount(i));
        }
    }
    return;
}

function playerTurn(){ // handOneSelected & handTwoSelected are there so the program can wait on the player
    selected = 4;
    handSelected = 4;
    targetHandSelected = 4;
    if(turn == 'blue'){ // sets clolours
        id('red').style = 'background: #fc5b5b;';
        id('blue').style = 'background: blue;';
    }
    else{
        id('red').style = 'background: red;';
        id('blue').style = 'background: #6e5bfc;';
    }
    // check is player has won
    if(amount('0') == 0 && amount('2') == 0){ // red dead (redemption)
        id('won').innerHTML = 'Blue Won!';
        id('wonBG').style = 'left: 0px;';
    }
    else if(amount('1') == 0 && amount('3') == 0){ // blue dead
        id('won').innerHTML = 'Red Won!';
        id('wonBG').style = 'left: 0px;';
    }
    else{
        handOneSelected();
    }
    return;
}
function handOneSelected(){ // just loop till' they click somthing
    if(team[selected] == turn){ // if the selected
        handSelected = selected;
        if(turn == 'blue'){
            turn = 'red';
        }
        else{
            turn = 'blue';
        }
        // legacy Selection
        // id(handSelected).style = 'border: solid white 10px; background: white;'
        id(handSelected).innerHTML = '<div class="stick" style="background: white;"></div>'.repeat(amount(handSelected));
        selected = 4;
        handTwoSelected();
        return;
    }
    else{
        setTimeout(handOneSelected, 100);
        return;
    }
}
function handTwoSelected(){
    if(selected != 4 && handSelected != selected){
        if(team[handSelected] == team[selected]){ // is they choose to split it
            if(amount(handSelected) != 1 && amount(selected) < 4){
                targetHandSelected = selected;
                selected = 4;
                id(handSelected).style = '';
                splitSticks();
            }
            else{
                setTimeout(handTwoSelected, 50);
            }
        }
        else{
            targetHandSelected = selected;
            selected = 4;
            id(handSelected).style = '';
            setSticks(handSelected,targetHandSelected);
            playerTurn();
        }
    }
    else{
        setTimeout(handTwoSelected, 50);
    }
    return;
}

function setSticks(stick, stickTarget){ // if you choose the other team
    setAmount(stickTarget, amount(stick) + amount(stickTarget));
    if(amount(stickTarget) > 4){
        setAmount(stickTarget, 0);
    }
    render();
    return;
}
function splitSticks(){ // if you choose yourself
    id('split-' + team[handSelected]).style = 'display: flex;';
    splitSelected = 5;
    // all these check if the target can handle these without dieing and if the selected hand has it
    if(amount(handSelected) >= 2 && amount(targetHandSelected) <= 3){
        id('split1a').style = 'display: block;';
        id('split1b').style = 'display: block;';
    }
    if(amount(handSelected) >= 3 && amount(targetHandSelected) <= 2){
        id('split2a').style = 'display: block;';
        id('split2b').style = 'display: block;';
    }
    if(amount(handSelected) == 4 && amount(targetHandSelected) <= 1){
        id('split3a').style = 'display: block;';
        id('split3b').style = 'display: block;';
    }
    splitSticksWait();
    return;
}
function splitSticksWait(){
    if(splitSelected != 5){
        setAmount(handSelected, amount(handSelected) - splitSelected);
        setAmount(targetHandSelected, amount(targetHandSelected) + splitSelected);
        id('split-' + team[handSelected]).style = 'display: none;';
        id('split1a').style = 'display: none;';
        id('split1b').style = 'display: none;';
        id('split2a').style = 'display: none;';
        id('split2b').style = 'display: none;';
        id('split3a').style = 'display: none;';
        id('split3b').style = 'display: none;';
        render();
        playerTurn();
        return;
    }
    else{
        setTimeout(splitSticksWait, 50);
        return;
    }
}
playerTurn();