This commit is contained in:
Kyle
2019-11-30 11:04:23 -08:00
parent 3933ca573a
commit 36461c3527
3 changed files with 26 additions and 16 deletions

View File

@@ -56,6 +56,7 @@ function initiate() {
cardArt.onload = function() {
// cardImageUpdated();
cardMasterUpdated();
document.getElementById("artPlaceholderImage").src = this.src
}
setSymbol.onload = function() {
updateSetSymbol();
@@ -66,7 +67,7 @@ function initiate() {
//Load the mana symbol images
loadManaSymbolImages();
//Loads up anything that uses Sortable.js
var sortable = Sortable.create(cardMaster, {animation: 150, ghostClass: "cardMasterElementMoving"});
var sortable = Sortable.create(cardMaster, {animation: 150, ghostClass: "cardMasterElementMoving", handle: ".handle"});
//Other little things
window.date = new Date()
document.getElementById("inputInfoNumber").value = date.getFullYear()
@@ -127,7 +128,7 @@ class frameImage {
var tempElement = document.createElement("div");
tempElement.id = "frameIndex" + frameList.indexOf(this);
tempElement.classList.add("cardMasterElement");
tempElement.innerHTML = this.displayName + " (" + targetMask + ") <input type='number' min='0' max='100' value='100' class='inputOpacity' oninput='cardMasterUpdated()'><input type='checkbox' onchange='cardMasterUpdated()'><img src=" + this.image.src + "><img class='cardMasterElementMaskImage' src=" + maskList[maskNameList.indexOf(targetMask.replace(" - Right", ""))].src + "><span class='closeCardMasterElement' onclick='deleteCardMasterElement(event)'>x</span></div>";
tempElement.innerHTML = "<span class='handle'>|||</span><div>" + this.displayName + " (" + targetMask + ") <br><input type='number' min='0' max='100' value='100' class='inputOpacity' oninput='cardMasterUpdated()'><input type='checkbox' onchange='cardMasterUpdated()'><img src=" + this.image.src + "><img class='cardMasterElementMaskImage' src=" + maskList[maskNameList.indexOf(targetMask.replace(" - Right", ""))].src + "></div><span class='closeCardMasterElement' onclick='deleteCardMasterElement(event)'>x</span>";
return tempElement
}
framePickerElement(targetElement) {
@@ -829,4 +830,4 @@ function textCodeTutorial() {
}
// //textCodeTutorial()
textCodeTutorial()
textCodeTutorial()

View File

@@ -266,31 +266,40 @@ footer a:hover {
background-color: var(--clear-light);
border: 1px solid var(--light-color);
border-radius: 0.25em;
padding: 0.5em;
margin-top: 0.25em;
display: grid;
grid-template-columns: 2em auto 1em;
align-items: center;
}
.cardMasterElement > .handle {
cursor: all-scroll;
padding: 1em 0.5em;
text-align: center;
}
.cardMasterElement img {
max-height: 2em;
max-width: 2em;
max-height: 1.5em;
max-width: 1.5em;
position: absolute;
transform: translate(1em, -0.35em);
transform: translate(0.1em, 0);
}
.cardmasterElement img.cardMasterElementMaskImage {
transform: translate(3.5em, -0.35em);
transform: translate(1.7em, 0);
}
.cardMasterElementMoving {
background-color: var(--clear-dark);
}
.closeCardMasterElement {
cursor: pointer;
position: absolute;
/*top: 50%;*/
left: 96%;
/*padding: 12px 16px;*/
/*transform: translate(0%, -50%);*/
text-align: center;
}
.frameOption img, .maskOption img, .cardMasterElement img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
#framePicker, #maskPicker {
max-height: 260pt;
@@ -378,4 +387,4 @@ footer a:hover {
input[type="checkbox"], .frameOption, .maskOption, .button {
cursor: pointer;
}
}

View File

@@ -37,7 +37,7 @@
</div>
<div id="selectedFramePreview">No frame selected</div>
<div id="cardMaster">
<div id="frameIndex-1" class="cardMasterElement">Card Art Placeholder <img src="file:///C:/Users/Kyle%20Burton/Documents/GitHub/CardConjurer/data/images/m15WFull.png"></div>
<div id="frameIndex-1" class="cardMasterElement"><span class="handle">|||</span><div>Card Art Placeholder <img id="artPlaceholderImage"></div><span></span></div>
</div>
<div class="bar"></div>
<div>Upload your own frame images:</div>