HTML Rundenzähler

xL_Freak

Testspieler
Moin Leude,

ich habe schon diverse sehr schicke Runden/Siegpunkte/Kommandopunkte Zähler gesehen, die es an allen Ecken und Enden zu kaufen gibt. Aber irgendwie mag ich dafür kein Geld ausgeben und einen selbst zu basteln, bin ich einfach zu faul für. Aber einen auf die schnelle programmieren, das kann ich. Da ich beabsichtige in meiner Mancave einen Laptop mit aufzustellen, ist diese Lösung für mich optimal. Und da ich das Ding nicht für mich horten möchte und vielleicht der Eine oder Andere ebenfalls was damit anfangen kann, stelle ich hier den Quellcode zur Benutzung und Weiterentwicklung zur Verfügung. Einfach kopieren und in einer html Datei speichern. Die eingebauten Grafiken sind aus dem Internet, daher braucht ihr eine aktive Verbindung. Ich könnte auch eine Offline Version basteln, aber das würde bedeuten ein Verzeichnis zur Verfügung stellen zu müssen.

Die enthaltenen Grafiken sind nicht mein Werk. Sämtliches Lob für diese gehen an: https://bakadesign.dk/warhammer-40-000-icons/

Code:
<html>
    <head>
        <!-- HTML Rundenzähler; Version 202104072013 -->
        <link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="content">
        
            <table class="outer">
                <tbody>
                    <tr>                    
                        <td class="faction gameplay" id="showSymbol1"><img class="faction left"  src="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/adeptus-astartes.svg"></td>
                        <td class="title"><img src="https://trade.games-workshop.com/wp-content/uploads/2020/05/New-40k-Logo.png" class="logo"></td>
                        <td class="faction gameplay" id="showSymbol2"><img class="faction right" src="https://bakadesign.dk/backoffice/wp-content/uploads/2018/11/Necrons.svg"></td>
                    </tr>                    
                    <tr>                    
                        <td colspan="3">                        
                            <table class="inner">
                                <tbody>
                                    <tr class="startUp">
                                        <td id="selectSymbol1" colspan="2"><img class="faction"  src="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/adeptus-astartes.svg"></td>
                                        <td class="title">vs</td>
                                        <td id="selectSymbol2" colspan="2"><img class="faction" src="https://bakadesign.dk/backoffice/wp-content/uploads/2018/11/Necrons.svg"></td>
                                    </tr>
                                    <tr class="startUp">
                                        <td class="selection" colspan="2">
                                            <select class="selFaction" id="sFac1" onchange="setFactions()">
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/sisters-of-battle.svg">Adepta Sororitas</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/adeptus-astartes.svg" selected="selected">Adeptus Astartes</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/06/Adeptus-Custodes.svg">Adeptus Custodes</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/adeptus-mechanicus.svg">Adeptus Mechanicus</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/Astra-Militarum.svg">Astra Militarum</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/10/Star-of-Chaos-02.svg">Chaos Daemons</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/chaos-star-01.svg">Chaos Space Marines</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/03/Collegia-Titanica.svg">Collegio Titanica</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/04/Avatater-of-Khaine.svg">Craftworld Eldar</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/04/Dark-Eldar.svg">Drukhari</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2020/04/Four-armed-emperor.svg">Genestealer Cults</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/11/Grey-knights.svg">Grey Knights</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2020/07/Harlequins.svg">Harlequins</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/02/Imperial-Knights.svg">Imperial Knights</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/imperial-aquila-02.svg">Imperium</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/inqusition-02.svg">Inquisition</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/11/Necrons.svg">Necron</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/04/Assassinorum.svg">Officio Assassinorum</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/11/Orks.svg">Orks</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/09/rogue-trader.svg">Rogue Trader</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2020/01/sisters-of.silence.svg">Sisters of Silence</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/11/Tau.svg">Tau</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/10/tyranid.svg">Tyraniden</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/08/Ynnead.svg">Ynnari</option>
                                            </select>
                                        </td>
                                        <td class="button">
                                            <button type="switch" onclick="switchFactions()" id="buSwitch">tauschen</button>
                                        </td>
                                        <td class="selection" colspan="2">
                                            <select class="selFaction" id="sFac2" onchange="setFactions()">
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/sisters-of-battle.svg">Adepta Sororitas</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/adeptus-astartes.svg">Adeptus Astartes</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/06/Adeptus-Custodes.svg">Adeptus Custodes</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/adeptus-mechanicus.svg">Adeptus Mechanicus</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/Astra-Militarum.svg">Astra Militarum</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/10/Star-of-Chaos-02.svg">Chaos Daemons</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/chaos-star-01.svg">Chaos Space Marines</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/03/Collegia-Titanica.svg">Collegio Titanica</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/04/Avatater-of-Khaine.svg">Craftworld Eldar</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/04/Dark-Eldar.svg">Drukhari</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2020/04/Four-armed-emperor.svg">Genestealer Cults</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/11/Grey-knights.svg">Grey Knights</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2020/07/Harlequins.svg">Harlequins</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/02/Imperial-Knights.svg">Imperial Knights</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/imperial-aquila-02.svg">Imperium</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2017/12/inqusition-02.svg">Inquisition</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/11/Necrons.svg" selected="selected">Necron</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/04/Assassinorum.svg">Officio Assassinorum</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/11/Orks.svg">Orks</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/09/rogue-trader.svg">Rogue Trader</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2020/01/sisters-of.silence.svg">Sisters of Silence</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/11/Tau.svg">Tau</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2018/10/tyranid.svg">Tyraniden</option>
                                                <option value="https://bakadesign.dk/backoffice/wp-content/uploads/2019/08/Ynnead.svg">Ynnari</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr class="title gameplay">
                                        <td colspan="5" id="tdCaption">DEPLOYMENT</td>
                                    </tr>
                                    <tr class="counter gameplay">
                                        <td id="tdTurn1" colspan="2">0</td>
                                        <td>TURN</td>
                                        <td id="tdTurn2" colspan="2">0</td>
                                    </tr>
                                    <tr class="button">
                                        <td colspan="2">
                                            <button class="start" onclick="start(1)" value="0" id="buStart1">Start</button>
                                        </td>
                                        <td>
                                            <button class="hiddenUpDown" onclick="turnDown()" id="buTurnUp">-</button>
                                            <button class="hiddenUpDown" onclick="turnUp()" id="buTurnDown">+</button>
                                        </td>
                                        <td colspan="2">
                                            <button class="start" onclick="start(2)" value="0" id="buStart2">Start</button>
                                        </td>
                                    </tr>
                                    <tr class="counter gameplay">
                                        <td id="tdCP1" colspan="2">0</td>
                                        <td>CP</td>
                                        <td id="tdCP2" colspan="2">0</td>
                                    </tr>
                                    <tr class="button gameplay">
                                        <td colspan="2">
                                            <button class="upDown" onclick="down('tdCP1', 'buCP1')" value="0" id="buCP1">-</button>
                                            <button class="upDown" onclick="up('tdCP1', 'buCP1')">+</button>
                                        </td>
                                        <td></td>
                                        <td colspan="2">
                                            <button class="upDown" onclick="down('tdCP2', 'buCP2')" value="0" id="buCP2">-</button>
                                            <button class="upDown" onclick="up('tdCP2', 'buCP2')">+</button>
                                        </td>
                                    </tr>
                                    <tr class="counter gameplay">
                                        <td id="victory1" colspan="2">0</td>
                                        <td>VP</td>
                                        <td id="victory2" colspan="2">0</td>
                                    </tr>
                                    <tr class="subcounter gameplay">
                                        <td>Secondary</td>
                                        <td>Primary</td>
                                        <td></td>
                                        <td>Primary</td>
                                        <td>Secondary</td>
                                    </tr>
                                    <tr class="subcounter gameplay">
                                        <td id="secondary1">0</td>
                                        <td id="primary1">0</td>
                                        <td></td>
                                        <td id="primary2">0</td>
                                        <td id="secondary2">0</td>
                                    </tr>
                                    <tr class="gameplay">
                                        <td class="button">
                                            <button class="upDown" onclick="VPdown('secondary', 1)" value="0" id="butsecondary1">-</button>
                                            <button class="upDown" onclick="VPup('secondary', 1)">+</button>
                                        </td>
                                        <td class="button">
                                            <button class="upDown" onclick="VPdown('primary', 1)" value="0" id="butprimary1">-</button>
                                            <button class="upDown" onclick="VPup('primary', 1)">+</button>
                                        </td>
                                        <td class="button"></td>
                                        <td class="button">
                                            <button class="upDown" onclick="VPdown('primary', 2)" value="0" id="butprimary2">-</button>
                                            <button class="upDown" onclick="VPup('primary', 2)">+</button>
                                        </td>
                                        <td class="button">
                                            <button class="upDown" onclick="VPdown('secondary', 2)" value="0" id="butsecondary2">-</button>
                                            <button class="upDown" onclick="VPup('secondary', 2)">+</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            var phase = 7;
            var p1Turn = 0;
            var p2Turn = 0;
            var p1PriVP = 0;
            var p2PriVP = 0;
            var p1SecVP = 0;
            var p2SecVP = 0;
            var active = 0;
            
            function switchFactions() 
            {
                var fac1 = document.getElementById("sFac1").value;
                var fac2 = document.getElementById("sFac2").value;
            
                $("#sFac1").val(fac2).change();
                $("#sFac2").val(fac1).change();
            }
            
            function setFactions()
            {
                var fac1 = document.getElementById("sFac1").value;
                var fac2 = document.getElementById("sFac2").value;
                $("#selectSymbol1").html('<img class="faction" src="'+fac1+'">');
                $("#selectSymbol2").html('<img class="faction" src="'+fac2+'">');
            }
            
            function start(player)
            {
                document.getElementById("buStart1").style.visibility = "hidden";
                document.getElementById("buStart2").style.visibility = "hidden";
                document.getElementById("sFac1").style.visibility = "hidden";
                document.getElementById("sFac2").style.visibility = "hidden";
                document.getElementById("buSwitch").style.visibility = "hidden";
                document.getElementById("buTurnUp").style.visibility = "visible";
                document.getElementById("buTurnDown").style.visibility = "visible";
                
                var fac1 = document.getElementById("sFac1").value;
                var fac2 = document.getElementById("sFac2").value;
                $("#showSymbol1").html('<img class="faction left" src="'+fac1+'">');
                $("#showSymbol2").html('<img class="faction right" src="'+fac2+'">');
                
                var elements = document.getElementsByClassName("startup");
                
                for(var i = 0; i < elements.length; i++){
                    elements[i].parentNode.removeChild(elements[i]);
                }
                
                var elements = document.getElementsByClassName("gameplay");
                
                for(var i = 0; i < elements.length; i++){
                    elements[i].style.visibility = "visible";
                }
                
                active = parseInt(player);
                turnUp();
            }
            
            function turnDown()
            {
                phase--;
                if(phase < 1) 
                {
                    if(p1Turn + p2Turn == 1)
                    {    
                        phase = 1;                
                    }else
                    {
                        phase = 7;
                        if(active == 1)
                        {
                            active = 2;
                            p2Turn--;
                        }else
                        {
                            active = 1;
                            p1Turn--;
                        }    
                    }
                }
                
                setPhase();
                setTurn();
                setBackground();
            }
            
            function turnUp()
            {
                phase++;
                if(phase > 7) 
                {
                    phase = 1;
                    if(active == 1)
                    {
                        active = 2;
                        p1Turn++;
                    }else
                    {
                        active = 1;
                        p2Turn++;
                    }
                }
                
                if(p1Turn + p2Turn == 11) 
                {
                    phase = 8;
                    document.getElementById("buTurnUp").style.visibility = "hidden";
                    document.getElementById("buTurnDown").style.visibility = "hidden";
                    p1Turn = 5;
                    p2Turn = 5;
                }
                
                setPhase();
                setTurn();
                setBackground();
            }
            
            function setPhase()
            {
                var caption = "";
                
                switch(phase)
                {
                    case 0:
                        caption = "DEPLOYMENT";
                        color = "#555555";
                        break;
                    case 1:
                        caption = "COMMAND PHASE";
                        color = "#993399";
                        break;
                    case 2:
                        caption = "MOVEMENT PHASE";
                        color = "#009933";
                        break;
                    case 3:
                        caption = "PSYCHIC PHASE";
                        color = "#99ccff";
                        break;
                    case 4:
                        caption = "SHOOTING PHASE";
                        color = "#ffcc00";
                        break;
                    case 5:
                        caption = "CHARGE PHASE";
                        color = "#ff4d4d";
                        break;
                    case 6:
                        caption = "FIGHTING PHASE";
                        color = "#b30000";
                        break;
                    case 7:
                        caption = "MORALE PHASE";
                        color = "#003399";
                        break;
                    case 8:
                        caption = "GAME OVER";
                        color = "#FFFFFF";
                        break;
                }
                
                $("#tdCaption").html(caption);
            }
            
            function setBackground()
            {
                var elements;
                if(active == 1)
                {
                    actEl = document.getElementsByClassName("right");
                    othEl = document.getElementsByClassName("left");
                }else
                {
                    actEl = document.getElementsByClassName("left");
                    othEl = document.getElementsByClassName("right");
                }
                
                for(var i = 0; i < actEl.length; i++){
                    actEl[i].style.backgroundColor = "#00cc66";
                    actEl[i].style.boxShadow = "0px 0px 20px #00cc66";
                }
                for(var i = 0; i < othEl.length; i++){
                    othEl[i].style.backgroundColor = "#555555";
                    othEl[i].style.boxShadow = "0px 0px 20px #555555";
                }
                document.getElementById("tdCaption").style.backgroundColor = color;
                document.getElementById("tdCaption").style.boxShadow = "0px 0px 20px "+color;
            }
            
            function setTurn()
            {                
                $("#tdTurn1").html(p1Turn);
                $("#tdTurn2").html(p2Turn);
            }
            
            function down(element, value)
            {
                var i = parseInt(document.getElementById(value).value) - 1;
                if(i < 0) i = 0;
                $("#"+element).html(i);
                $("#"+value).val(i);
            }
            
            function up(element, value)
            {
                var i = parseInt(document.getElementById(value).value) + 1;
                $("#"+element).html(i);
                $("#"+value).val(i);
            }
            
            function VPdown(element, player)
            {
                var i = parseInt(document.getElementById('but'+element+player).value) - 1;
                if(i < 0) i = 0;
                $("#"+element+player).html(i);
                $("#but"+element+player).val(i);
                
                var j = parseInt(document.getElementById('butsecondary'+player).value) + parseInt(document.getElementById('butprimary'+player).value);
                $("#victory"+player).html(j);
            }
            
            function VPup(element, player)
            {
                var i = parseInt(document.getElementById('but'+element+player).value) + 1;
                if(i > 45) i = 45;
                $("#"+element+player).html(i);
                $("#but"+element+player).val(i);
                
                var j = parseInt(document.getElementById('butsecondary'+player).value) + parseInt(document.getElementById('butprimary'+player).value);
                $("#victory"+player).html(j);
            }
            
            // define a handler
            function doc_keyUp(x) {
            console.log(x);
                switch(x.key)
                {
                    case 'a':
                        down('tdCP1', 'buCP1');
                        break;
                    case 'y':
                        down('tdVP1', 'buVP1');
                        break;
                    case 's':
                        up('tdCP1', 'buCP1', 2);
                        break;
                    case 'x':
                        up('tdVP1', 'buVP1', 3);
                        break;
                    case 'j':
                        down('tdCP2', 'buCP2');
                        break;
                    case 'n':
                        down('tdVP2', 'buVP2');
                        break;
                    case 'k':
                        up('tdCP2', 'buCP2', 2);
                        break;
                    case 'm':
                        up('tdVP2', 'buVP2', 3);
                        break;
                    case ' ':
                        turnUp();
                        break;
                    default:
                        break;
                }
            }
            // register the handler 
            document.addEventListener('keyup', doc_keyUp, false);
        </script>
    </body>
    <style>
body
{
    font-family: "Abel", Verdana, Arial;
    font-size: 14px;
    background-color: #555555;
    text-align: center;
    font-weight: bold;
}

.upDown
{
    font-family: "Source Sans Pro", Verdana, Arial;
    background-color: #293d3d;
    border-style: solid;
    border-color: #e0ebeb;
    border-width: 1px;
    color: white;
    text-align: center;
    font-size: 12px;
    border-radius: 25%;
    margin: 0 2px;
    width: 30px;
    line-height: 28px;
    padding: 0;
    cursor: pointer;
}

.hiddenUpDown
{
    font-family: "Source Sans Pro", Verdana, Arial;
    background-color: #293d3d;
    border-style: solid;
    border-color: #e0ebeb;
    border-width: 1px;
    color: white;
    text-align: center;
    font-size: 12px;
    border-radius: 25%;
    margin: 0 2px;
    width: 30px;
    line-height: 28px;
    padding: 0;
    cursor: pointer;
    visibility: hidden;
}

.start
{
    font-family: "Source Sans Pro", Verdana, Arial;
    background-color: #293d3d;
    border-style: solid;
    border-color: #e0ebeb;
    border-width: 1px;
    color: white;
    text-align: center;
    font-size: 12px;
    border-radius: 15%;
    margin: 0 2px;
    width: 80px;
    line-height: 28px;
    padding: 0;
    cursor: pointer;
}

table
{
    text-align: center;
    margin: 0 auto;
}

.logo
{
    height: 250px;
}

.faction
{
    border-radius: 9px;
    box-shadow: 0px 0px 20px #555555;
    max-height: 250px;
    min-width: 250px;
}

.title
{
    font-size: 96px;
}

.counter
{
    font-size: 72px;
}

.subcounter
{
    font-size: 48px;
}

#tdCaption
{
    width: 900px;
    border-radius: 9px;
    box-shadow: 0px 0px 20px #555555;
}

.gameplay
{
    visibility: hidden;
    transition: opacity 2s;
}

.startup
{
    transition: opacity 2s;
}
    </style>
</html>

Bekannte Mängel:
  • keine Chaos Knights enthalten
  • Craftworld Eldar haben das Khaine Symbol
  • Genstealer Cults haben das Pauper Princess Symbol
Mängel an den SVG Grafiken kann ich erst dann beheben, wenn die entsprechenden Symbole zur Verfügung gestellt werden (nicht meine Arbeit).

Release History:
v202107041453 - Erste Veröffentlichung
v202107042013 - Unterteilung in Primary und Secondary Victory Points
 
Zuletzt bearbeitet:

xL_Freak

Testspieler
Gute Frage. Die erste Version, ohne Phasen ohne Obergrenzen, also pures Hochzählen hat mich vielleicht zwei Stunden gekostet.
Zehn Stunden bis zu der präsentierten Version.
 
Oben