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/
Erklärung zu externen Verweisen:
Zeile 4 - Der hier verwendete Link ermöglicht die Schriftart Abel. Das Programm würde auch ohne funktionieren.
Zeile 5 - Einbindung von JQuery der Version 3.4.1 für das Programm. Es ist eine freie Sammlung von JavaScript Funktionalitäten, die es mir vereinfachen dieses Dokument zu steuern. Wer sich vorher genauer drüber informieren will, kann hier gerne nachschlagen:
de.wikipedia.org
Bekannte Mängel:
Benutzung:
Um den HTML Rundenzähler bei euch zu verwenden, kopiert einfach den ganzen Code und fügt ihn auf eurem PC in eine simple Textdatei (kein Word) ein. Benennt diese Datei im Anschluss einfach von *.txt in *.html um. Sobald ihr dieses Dokument nun startet, könnt ihr den Zähler nutzen. Zur vollständigen Funktionalität des Zählers ist eine Anbindung ans Internet notwendig. Eine Offline-Version ist denkbar, würde aber mehr Installtionsarbeit verlangen.
TL;DR: Kein Internet, kein HTML Rundenzähler. Benutzt Würfel, sorry ?
Release History:
v202107041453 - Erste Veröffentlichung
v202107042013 - Unterteilung in Primary und Secondary Victory Points
v202104151329 - Auswahl der Battle Size für Start CP und automatische CP Erhöhung beim Rundenwechsel.
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/
Erklärung zu externen Verweisen:
Zeile 4 - Der hier verwendete Link ermöglicht die Schriftart Abel. Das Programm würde auch ohne funktionieren.
Zeile 5 - Einbindung von JQuery der Version 3.4.1 für das Programm. Es ist eine freie Sammlung von JavaScript Funktionalitäten, die es mir vereinfachen dieses Dokument zu steuern. Wer sich vorher genauer drüber informieren will, kann hier gerne nachschlagen:
jQuery – Wikipedia
Code:
<html>
<head>
<!-- HTML Rundenzähler; Version 202104151329 -->
<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="button">
<td class="selection" colspan="5">
<select class="selSize" id="selSize">
<option value="3">Combat Patrol</option>
<option value="6">Incursion</option>
<option value="12">Strike Force</option>
<option value="18">Onslaught</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(1)" value="0" id="buCP1">-</button>
<button class="upDown" onclick="up(1)">+</button>
</td>
<td></td>
<td colspan="2">
<button class="upDown" onclick="down(2)" value="0" id="buCP2">-</button>
<button class="upDown" onclick="up(2)">+</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 active = 0;
var p1CP = 0;
var p2CP = 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 setSize()
{
p1CP = document.getElementById("selSize").value;
p2CP = document.getElementById("selSize").value;
$("#tdCP1").html(p1CP);
$("#tdCP2").html(p2CP);
}
function start(player)
{
setSize();
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("selSize").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--;
down(1);
}else
{
active = 1;
p1Turn--;
down(2);
}
}
}
setPhase();
setTurn();
setBackground();
}
function turnUp()
{
phase++;
if(phase > 7)
{
phase = 1;
if(active == 1)
{
active = 2;
p1Turn++;
up(1);
}else
{
active = 1;
p2Turn++;
up(2);
}
}
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(player)
{
if(player == 1)
{
p1CP--;
}else
{
p2CP--;
}
setCP();
}
function up(player)
{
if(player == 1)
{
p1CP++;
}else
{
p2CP++;
}
setCP();
}
function setCP()
{
$("#tdCP1").html(p1CP);
$("#tdCP2").html(p2CP);
}
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
Benutzung:
Um den HTML Rundenzähler bei euch zu verwenden, kopiert einfach den ganzen Code und fügt ihn auf eurem PC in eine simple Textdatei (kein Word) ein. Benennt diese Datei im Anschluss einfach von *.txt in *.html um. Sobald ihr dieses Dokument nun startet, könnt ihr den Zähler nutzen. Zur vollständigen Funktionalität des Zählers ist eine Anbindung ans Internet notwendig. Eine Offline-Version ist denkbar, würde aber mehr Installtionsarbeit verlangen.
TL;DR: Kein Internet, kein HTML Rundenzähler. Benutzt Würfel, sorry ?
Release History:
v202107041453 - Erste Veröffentlichung
v202107042013 - Unterteilung in Primary und Secondary Victory Points
v202104151329 - Auswahl der Battle Size für Start CP und automatische CP Erhöhung beim Rundenwechsel.
Zuletzt bearbeitet:
