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

restyle

Browse Source
This commit is contained in:
Kyle
2020-07-24 11:54:43 -07:00
parent d5b0c93cb1
commit b990a8bbe6
14 changed files with 254 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
data/scripts/animations.js
View File

@@ -1,5 +1,5 @@
//CSS & HTML stuff
window.layerElements = document.querySelectorAll('.layer')
window.animatedElements = document.querySelectorAll('.animated')
window.addEventListener('resize', windowResized)
window.addEventListener('scroll', windowScrolled)
windowResized()
@@ -9,10 +9,10 @@ function windowResized() {
windowScrolled()
}
function windowScrolled() {
for (var i = 0; i < layerElements.length; i++) {
var positionFromTop = (layerElements[i].getBoundingClientRect().top + layerElements[i].getBoundingClientRect().bottom) / 2
for (var i = 0; i < animatedElements.length; i++) {
var positionFromTop = (animatedElements[i].getBoundingClientRect().top + animatedElements[i].getBoundingClientRect().bottom) / 2
if (positionFromTop - windowHeight <= 0) {
layerElements[i].classList.add('revealedLayer')
animatedElements[i].classList.add('revealedAnimation')
}
}
}

38
data/scripts/main.js
View File

@@ -81,7 +81,7 @@ cardArt.onload = function() {
}
function setSymbolFromGatherer() {
if (document.getElementById('inputSetCode').value.toLowerCase() == 'cc') {
var newSetSymbolSource = 'https://cardconjurer.com/data/images/cardImages/misc/cc-' + document.getElementById('inputSetRarity').value.toLowerCase()
var newSetSymbolSource = '/data/images/cardImages/misc/cc-' + document.getElementById('inputSetRarity').value.toLowerCase()
if (document.getElementById('inputSetRarity').value == '') {
newSetSymbolSource += 'c'
}
@@ -154,7 +154,7 @@ class cardPlaceholder {
cardMasterElement() {
var temporaryElement = document.createElement('div')
temporaryElement.id = 'uniqueNumber' + this.uniqueNumber
temporaryElement.classList.add('cardMasterElement')
temporaryElement.classList.add('cardMasterElement', 'interactable')
temporaryElement.innerHTML = '<span class="handle">|||</span><div style="grid-column: 2 / 4">' + this.name + '</div><span></span>'
return temporaryElement
}
@@ -199,7 +199,7 @@ class cardImage {
cardMasterElement() {
var temporaryElement = document.createElement('div')
temporaryElement.id = 'uniqueNumber' + this.uniqueNumber
temporaryElement.classList.add('cardMasterElement')
temporaryElement.classList.add('cardMasterElement', 'interactable')
temporaryElement.innerHTML = '<div class="handle">|||</div><div><img src="' + this.image.src + '"><img src="' + maskImageList[maskNameList.indexOf(this.masks[0])].src + '"></div><div>' + this.name + ' - ' + this.masks.toString().replace(',', ', ') + '</div><span class="delete" onclick="deleteCardObject(event)">X</span>'
temporaryElement.onclick = function() {
if (document.getElementById('cardMasterElementEditor').classList.contains('hidden') && !deletingCardObject) {
@@ -214,8 +214,8 @@ class cardImage {
document.getElementById('cardMasterElementEditorScale').value = scaleX(selectedObject.width)
document.getElementById('cardMasterElementEditorOpacity').value = selectedObject.opacity * 100
document.getElementById('cardMasterElementEditorErase').checked = selectedObject.erase
Array.from(document.getElementById('cardMaster').children).forEach(element => element.classList.remove('cardMasterElementSelected'))
this.classList.add('cardMasterElementSelected')
Array.from(document.getElementById('cardMaster').children).forEach(element => element.classList.remove('selected'))
this.classList.add('selected')
}
return temporaryElement
}
@@ -292,31 +292,31 @@ class frameImage {
this.masks = masks
this.framePickerElement = document.createElement('div')
this.framePickerElement.id = 'frameIndex' + frameImageListIndex
this.framePickerElement.classList.add(frameClass)
this.framePickerElement.classList.add(frameClass, 'interactable')
this.framePickerElement.onclick = this.frameOptionClicked
this.framePickerElement.innerHTML = '<img src=' + this.image.src + '>'
document.getElementById('framePicker').appendChild(this.framePickerElement)
}
frameOptionClicked() {
Array.from(document.getElementById('framePicker').children).forEach(element => element.classList.remove('frameOptionSelected'))
this.classList.add('frameOptionSelected')
Array.from(document.getElementById('framePicker').children).forEach(element => element.classList.remove('selected'))
this.classList.add('selected')
if (parseInt(this.id.replace('frameIndex', '')) != selectedFrameImage) {
selectedFrameImage = parseInt(this.id.replace('frameIndex', ''))
document.getElementById('maskPicker').innerHTML = ''
frameImageList[parseInt(this.id.replace('frameIndex', ''))].masks.forEach(array => document.getElementById('maskPicker').innerHTML += '<div id="maskOption' + maskNameList.indexOf(array) + '" onclick="maskOptionClicked(event)"><img src="' + maskImageList[maskNameList.indexOf(array)].src + '">' + array + '</div>')
document.getElementById('maskPicker').children[0].classList.add('maskOptionSelected')
frameImageList[parseInt(this.id.replace('frameIndex', ''))].masks.forEach(array => document.getElementById('maskPicker').innerHTML += '<div id="maskOption' + maskNameList.indexOf(array) + '" class="interactable" onclick="maskOptionClicked(event)"><img src="' + maskImageList[maskNameList.indexOf(array)].src + '">' + array + '</div>')
document.getElementById('maskPicker').children[0].classList.add('selected')
selectedMaskImage = parseInt(document.getElementById('maskPicker').children[0].id.replace('maskOption', ''))
updateSelectedFramePreview()
}
}
}
function maskOptionClicked(event) {
Array.from(document.getElementById('maskPicker').children).forEach(element => element.classList.remove('maskOptionSelected'))
Array.from(document.getElementById('maskPicker').children).forEach(element => element.classList.remove('selected'))
if (event.target.nodeName == 'IMG') {
event.target.parentElement.classList.add('maskOptionSelected')
event.target.parentElement.classList.add('selected')
selectedMaskImage = parseInt(event.target.parentElement.id.replace('maskOption', ''))
} else {
event.target.classList.add('maskOptionSelected')
event.target.classList.add('selected')
selectedMaskImage = parseInt(event.target.id.replace('maskOption', ''))
}
updateSelectedFramePreview()
@@ -407,12 +407,12 @@ function getFloat(input) {
function loadTextOptions(textArray) {
document.getElementById('textPicker').innerHTML = ''
cardTextList = textArray
cardTextList.forEach((item, index) => document.getElementById('textPicker').innerHTML += '<div id="' + index + '" onclick="textOptionClicked(event, ' + index + ')">' + item.name + '</div>')
cardTextList.forEach((item, index) => document.getElementById('textPicker').innerHTML += '<div id="' + index + '" onclick="textOptionClicked(event, ' + index + ')" class="interactable">' + item.name + '</div>')
document.getElementById('textPicker').children[0].click()
}
function textOptionClicked(event, index) {
Array.from(document.getElementById('textPicker').children).forEach(element => element.classList.remove('selectedText'))
event.target.classList.add('selectedText')
Array.from(document.getElementById('textPicker').children).forEach(element => element.classList.remove('selected'))
event.target.classList.add('selected')
selectedTextObject = cardTextList[index]
document.getElementById('textEditorText').value = selectedTextObject.text
document.getElementById('textEditorX').value = scaleX(selectedTextObject.x)
@@ -846,8 +846,8 @@ function beforeAfter(targetString, beforeString, afterString) {
}
function toggleTabs(clickedElement, targetId) {
Array.from(clickedElement.parentElement.children).forEach(element => element.classList.remove('tabOptionSelected'))
clickedElement.classList.add('tabOptionSelected')
Array.from(clickedElement.parentElement.children).forEach(element => element.classList.remove('selected'))
clickedElement.classList.add('selected')
Array.from(document.getElementById(targetId).parentElement.children).forEach(element => element.classList.add('hidden'))
document.getElementById(targetId).classList.remove('hidden')
}
@@ -941,7 +941,7 @@ function textCodeReference() {
function notify(message, color) {
document.getElementsByClassName('notificationContainer')[0].innerHTML += `
<div class='notification' style='background-color: ` + color + `'>
<div class='notification interactable' style='border-top-color: ` + color + `'>
<div>` + message + `</div>
<div class='deleteNotification' onclick='this.parentElement.parentNode.removeChild(this.parentElement)'>X</div>
</div>

23
data/scripts/palettes/darkMode.js
View File

@@ -1,10 +1,19 @@
rootStyles.setProperty('--background-color', '#3a3838')
rootStyles.setProperty('--background-color-contrast', '#242424')
rootStyles.setProperty('--interactable-color', '#2b2b2b')
rootStyles.setProperty('--interactable-selected-color', '#1d1d1d')
rootStyles.setProperty('--input-color', '#2b2b2b')
rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--site-background', '#3a3838')
rootStyles.setProperty('--layer-background', '#242424')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666')
rootStyles.setProperty('--interactable-selected', '#99ee99')
rootStyles.setProperty('--font-color', '#efefef')
rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'darkMode')
// rootStyles.setProperty('--background-color', '#3a3838')
// rootStyles.setProperty('--background-color-contrast', '#242424')
// rootStyles.setProperty('--interactable-color', '#2b2b2b')
// rootStyles.setProperty('--interactable-selected-color', '#1d1d1d')
// rootStyles.setProperty('--input-color', '#2b2b2b')
// rootStyles.setProperty('--input-font-color', '#efefef')
// rootStyles.setProperty('--font-color', '#efefef')
// rootStyles.setProperty('--font-color-contrast', '#efefef')
// rootStyles.setProperty('--body-background', 'none')
// setCookie('colorPalette', 'darkMode')

18
data/scripts/palettes/dayRave.js
View File

@@ -1,12 +1,10 @@
rootStyles.setProperty('--background-color', '#d0d0d0')
rootStyles.setProperty('--background-color-contrast', '#f5f5f5')
rootStyles.setProperty('--interactable-color', '#dfdfdf')
rootStyles.setProperty('--interactable-selected-color', '#cccccc')
rootStyles.setProperty('--input-color', '#dadada')
rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '#f5f5f5')
rootStyles.setProperty('--layer-background', '#e4e4e4')
rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
rootStyles.setProperty('--interactable-selected', '#00aa00')
rootStyles.setProperty('--font-color', '#000000')
rootStyles.setProperty('--body-background', 'url(/data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'dayRave')
//Cycles through a rainbow!
@@ -23,7 +21,7 @@ var currentColorIndex = 0
function changeColor() {
var colors = indexToColor(currentColorIndex)
var lightColors = indexToColor(currentColorIndex + lightLead)
rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
}
function indexToColor(colorIndex) {

16
data/scripts/palettes/lightMode.js
View File

@@ -1,10 +1,8 @@
rootStyles.setProperty('--background-color', '#f5f5f5')
rootStyles.setProperty('--background-color-contrast', '#d0d0d0')
rootStyles.setProperty('--interactable-color', '#dfdfdf')
rootStyles.setProperty('--interactable-selected-color', '#cccccc')
rootStyles.setProperty('--input-color', '#dadada')
rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--site-background', '#f5f5f5')
rootStyles.setProperty('--layer-background', '#e4e4e4')
rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
rootStyles.setProperty('--interactable-selected', '#00aa00')
rootStyles.setProperty('--font-color', '#000000')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'lightMode')
setCookie('colorPalette', 'lightMode')

19
data/scripts/palettes/nightRave.js
View File

@@ -1,13 +1,12 @@
rootStyles.setProperty('--background-color', '#3a3838')
rootStyles.setProperty('--background-color-contrast', '#242424')
rootStyles.setProperty('--interactable-color', '#2b2b2b')
rootStyles.setProperty('--interactable-selected-color', '#1d1d1d')
rootStyles.setProperty('--input-color', '#2b2b2b')
rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '#3a3838')
rootStyles.setProperty('--layer-background', '#242424')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666')
rootStyles.setProperty('--interactable-selected', '#99ee99')
rootStyles.setProperty('--font-color', '#efefef')
rootStyles.setProperty('--body-background', 'url(/data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'nightRave')
console.log('oh no')
//Cycles through a rainbow!
if (currentColorIndex == undefined) {
@@ -23,7 +22,7 @@ var currentColorIndex = 0
function changeColor() {
var colors = indexToColor(currentColorIndex)
var lightColors = indexToColor(currentColorIndex + lightLead)
rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
}
function indexToColor(colorIndex) {