GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 13:21:41 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
data/scripts/main.js
View File

@@ -56,6 +56,7 @@ function initiate() {
cardArt.onload = function() { cardArt.onload = function() {
// cardImageUpdated(); // cardImageUpdated();
cardMasterUpdated(); cardMasterUpdated();
document.getElementById("artPlaceholderImage").src = this.src
} }
setSymbol.onload = function() { setSymbol.onload = function() {
updateSetSymbol(); updateSetSymbol();
@@ -66,7 +67,7 @@ function initiate() {
//Load the mana symbol images //Load the mana symbol images
loadManaSymbolImages(); loadManaSymbolImages();
//Loads up anything that uses Sortable.js //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 //Other little things
window.date = new Date() window.date = new Date()
document.getElementById("inputInfoNumber").value = date.getFullYear() document.getElementById("inputInfoNumber").value = date.getFullYear()
@@ -127,7 +128,7 @@ class frameImage {
var tempElement = document.createElement("div"); var tempElement = document.createElement("div");
tempElement.id = "frameIndex" + frameList.indexOf(this); tempElement.id = "frameIndex" + frameList.indexOf(this);
tempElement.classList.add("cardMasterElement"); 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 return tempElement
} }
framePickerElement(targetElement) { framePickerElement(targetElement) {

31
data/site/styles.css
View File

@@ -266,31 +266,40 @@ footer a:hover {
background-color: var(--clear-light); background-color: var(--clear-light);
border: 1px solid var(--light-color); border: 1px solid var(--light-color);
border-radius: 0.25em; border-radius: 0.25em;
padding: 0.5em;
margin-top: 0.25em; 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 { .cardMasterElement img {
max-height: 2em; max-height: 1.5em;
max-width: 2em; max-width: 1.5em;
position: absolute; position: absolute;
transform: translate(1em, -0.35em); transform: translate(0.1em, 0);
} }
.cardmasterElement img.cardMasterElementMaskImage { .cardmasterElement img.cardMasterElementMaskImage {
transform: translate(3.5em, -0.35em); transform: translate(1.7em, 0);
} }
.cardMasterElementMoving { .cardMasterElementMoving {
background-color: var(--clear-dark); background-color: var(--clear-dark);
} }
.closeCardMasterElement { .closeCardMasterElement {
cursor: pointer; cursor: pointer;
position: absolute; text-align: center;
/*top: 50%;*/
left: 96%;
/*padding: 12px 16px;*/
/*transform: translate(0%, -50%);*/
} }
.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 { #framePicker, #maskPicker {
max-height: 260pt; max-height: 260pt;

2
index.html
View File

@@ -37,7 +37,7 @@
</div> </div>
<div id="selectedFramePreview">No frame selected</div> <div id="selectedFramePreview">No frame selected</div>
<div id="cardMaster"> <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>
<div class="bar"></div> <div class="bar"></div>
<div>Upload your own frame images:</div> <div>Upload your own frame images:</div>