MeowcaTheoRange/DiceApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simple Mode, Dice Coloring, and sum fixes

Browse source
This commit is contained in:
MeowcaTheoRange 2022-06-19 11:53:01 -05:00
parent e0a09d0d04
commit 9070b56cb4
2 changed files with 52 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
index.html
View file

@ -9,12 +9,13 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head> </head>
<body> <body class="compactMode">
<div class="headerBar"> <div class="headerBar">
<div style="float: left; text-align: left;"> <div style="float: left; text-align: left;">
Dice Tool Dice Tool
</div> </div>
<div style="float: right; text-align: right;"> <div style="float: right; text-align: right;">
<button class="material-icons toc" onclick="document.body.classList.toggle('compactMode');">build</button>
<button class="material-icons" onclick="rollAllDie(cont)">shuffle</button> <button class="material-icons" onclick="rollAllDie(cont)">shuffle</button>
<button class="material-icons" onclick="if (confirm('Are you sure you want to remove everything?')) $('.content').find('.die').remove()">cancel</button> <button class="material-icons" onclick="if (confirm('Are you sure you want to remove everything?')) $('.content').find('.die').remove()">cancel</button>
</div> </div>
@ -28,25 +29,26 @@
<templates> <templates>
<template id="dieUI"><div class="die rollable{IS_COUNTER}" id="{RAND_ID}" draggable="true" ondragstart="drag(event)"> <template id="dieUI"><div class="die rollable{IS_COUNTER}" id="{RAND_ID}" draggable="true" ondragstart="drag(event)">
<div> <div>
<span class="material-icons icon ident">casino</span><input class="title" placeholder="Name" type="text" value="{TITLE_DIE}" onfocusout="this.setAttribute('value', this.value);" /> <span class="material-icons icon ident">casino</span><input class="title hos" placeholder="Name" type="text" value="{TITLE_DIE}" onfocusout="this.setAttribute('value', this.value);" />
<button class="material-icons icon indi neg" onclick="tp(this).remove()">delete</button><br /> <input class="die-color hos" type="color" value="transparent" onchange="this.setAttribute('value', this.value);this.parentElement.parentElement.style.backgroundColor = this.value;" />
<button class="material-icons icon indi neg" onclick="tp(this).remove()">delete</button><br class="hos" />
<div class="hideIfCounter"><button class="material-icons icon indi pos" title="Roll die" onclick="rollDie(ht(tpp(this)))">shuffle</button></div> <div class="hideIfCounter"><button class="material-icons icon indi pos" title="Roll die" onclick="rollDie(ht(tpp(this)))">shuffle</button></div>
</div> </div>
<div style="text-align: right;"> <div style="text-align: right;">
<button class="material-icons icon" onclick="changeVal(ht($(this)), -1)">remove</button> <button class="material-icons icon hos" onclick="changeVal(ht($(this)), -1)">remove</button>
<button class="material-icons icon" onclick="changeVal(ht($(this)), 1)">add</button> <button class="material-icons icon hos" onclick="changeVal(ht($(this)), 1)">add</button>
<span class="hideIfCounter"><button class="material-icons icon" title="Cut die to value" onclick="cutVal(ht(tp(this)))">content_cut</button></span><br /> <span class="hideIfCounter hos"><button class="material-icons icon" title="Cut die to value" onclick="cutVal(ht(tp(this)))">content_cut</button></span><br />
<span><h2 class="die-value">{DIE_VALUE}</h2><span class="hideIfCounter"> / <input class="die-sides" type="number" min="1" max="10000" value="{DIE_SIDES}" onfocusout="this.setAttribute('value', this.value);" /></span></span> <span><h2 class="die-value">{DIE_VALUE}</h2><span class="hideIfCounter hos"> / <input class="die-sides" type="number" min="1" max="10000" value="{DIE_SIDES}" onfocusout="this.setAttribute('value', this.value);" /></span></span>
</div> </div>
</div></template> </div></template>
<template id="dieBagUI"><div class="die bag" id="{RAND_ID}" draggable="true" ondragstart="drag(event)"> <template id="dieBagUI"><div class="die bag" id="{RAND_ID}" draggable="true" ondragstart="drag(event)">
<div> <div>
<span class="material-icons icon ident">folder</span><input class="title" placeholder="Name" type="text" value="{TITLE_DIE}" onfocusout="this.setAttribute('value', this.value);" /> <span class="material-icons icon ident">folder</span><input class="title hos" placeholder="Name" type="text" value="{TITLE_DIE}" onfocusout="this.setAttribute('value', this.value);" /><input class="die-color hos" tabIndex="0" type="color" value="transparent" onchange="this.setAttribute('value', this.value);this.parentElement.parentElement.style.backgroundColor = this.value;" />
<button class="material-icons icon indi neg" onclick="if (confirm('Are you sure you want to remove this bag?')) tp(this).remove()">delete</button><br /> <button class="material-icons icon indi neg" onclick="if (confirm('Are you sure you want to remove this bag?')) tp(this).remove()">delete</button><br class="hos" />
<button class="material-icons icon indi pos" title="Roll all dies inside" onclick="rollAllDie(ht(tp(this)))">shuffle</button> <button class="material-icons icon indi pos" title="Roll all dies inside" onclick="rollAllDie(ht(tp(this)))">shuffle</button>
<button class="material-icons icon indi pos" title="Add Dice" onclick="addDie(tp(this).find('.dropHere').get(0))">add_circle</button> <button class="material-icons icon indi pos hos" title="Add Dice" onclick="addDie(tp(this).find('.dropHere').get(0))">add_circle</button>
<button class="material-icons icon indi pos" title="Add Counter" onclick="addDie(tp(this).find('.dropHere').get(0), 1, 'Counter', true)">pin</button> <button class="material-icons icon indi pos hos" title="Add Counter" onclick="addDie(tp(this).find('.dropHere').get(0), 1, 'Counter', true)">pin</button>
<button class="material-icons icon indi pos" title="Add Bag" onclick="addDieBag(tp(this).find('.dropHere').get(0))">create_new_folder</button> <button class="material-icons icon indi pos hos" title="Add Bag" onclick="addDieBag(tp(this).find('.dropHere').get(0))">create_new_folder</button>
</div> </div>
<div class="dropHere"></div> <div class="dropHere"></div>
</div></template> </div></template>

39
style.css
View file

@ -111,6 +111,7 @@ body {padding:0;margin:0;background-color:var(--mainColorThemedLight);}
border: none; border: none;
border-radius: 40px; border-radius: 40px;
transition: background 0.25s; transition: background 0.25s;
vertical-align: middle;
} }
.headerBar button:hover { .headerBar button:hover {
@ -168,6 +169,23 @@ div.die {
display: none; display: none;
} }
.compactMode .hos {
display: none;
}
div.hideIfCounter {
display: inline-block;
}
body:not(.compactMode) .headerBar button.toc {
color: var(--posColor);
}
.compactMode div.die h2 {
height: 32px;
line-height: 32px;
margin-top: -16px;
margin-right: 8px;
}
div.bag { div.bag {
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: auto auto; grid-template-rows: auto auto;
@ -219,6 +237,26 @@ div.die input {
transition: border 0.25s, border-radius 0.25s, background-color 0.25s; transition: border 0.25s, border-radius 0.25s, background-color 0.25s;
vertical-align: middle; vertical-align: middle;
} }
div.die input[type=color] {
height: 34px;
width: 34px;
margin-left: -8px;
position: absolute;
left: -100px;
}
div.die input[type=color]:hover {
position: static;
}
div.die input[type=color]:focus {
position: static;
}
div.die input[type=text]:hover + input[type=color] {
position: static;
}
div.die .die-value { div.die .die-value {
vertical-align: middle; vertical-align: middle;
} }
@ -255,7 +293,6 @@ div.die button {
background-color: transparent; background-color: transparent;
border: 1px solid var(--mainFGTP); border: 1px solid var(--mainFGTP);
color: var(--mainFG); color: var(--mainFG);
outline: none;
transition: background-color 0.25s; transition: background-color 0.25s;
} }