mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
big changes coming...
This commit is contained in:
Kyle
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 195 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 928 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 981 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 982 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 786 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
@@ -1,22 +0,0 @@
|
||||
var fullAbilityList = new Array()
|
||||
|
||||
function loadAbilities() {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4) {
|
||||
fullAbilityList = xhttp.responseText.split("$$$")
|
||||
for (var i = 0; i < 3; i ++) {
|
||||
fullAbilityList[i] = fullAbilityList[i].split(";")
|
||||
}
|
||||
}
|
||||
}
|
||||
xhttp.open("GET", "data/site/other/askScryfall/planeswalkerAbilities.txt", true);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
function randomAbility(index) {
|
||||
possibleAbilities = fullAbilityList[index]
|
||||
document.getElementById("askScryfallResult").innerHTML = possibleAbilities[Math.floor(Math.random() * (possibleAbilities.length - 1))].replace(/\\"/g, '"')
|
||||
}
|
||||
|
||||
loadAbilities()
|
||||
@@ -1,78 +0,0 @@
|
||||
<!DOCTYPE html PUBLIC>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ask Scryfall - Ability List Generator</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
var plusAbilities = new Array()
|
||||
var minusAbilities = new Array()
|
||||
var ultimateAbilities = new Array()
|
||||
function importPlaneswalkers(request) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var planeswalkerList = this.responseText.split('oracle_text":"')
|
||||
var planeswalkerNameList = this.responseText.replace(/","name":"/g, "").split('"name":"')
|
||||
//console.log(planeswalkerNameList)
|
||||
var iAdjust = 0
|
||||
for (var i = 1; i < planeswalkerList.length; i++) {
|
||||
var planeswalkerAbilityList = planeswalkerList[i].split('",')[0].split(/\\n/g)
|
||||
var planeswalkerName = planeswalkerNameList[i - iAdjust].split(/",/g)[0]
|
||||
if (planeswalkerName.includes(" // ")) {
|
||||
planeswalkerName = planeswalkerName.split(" // ")[1]
|
||||
}
|
||||
for (var n = 0; n < planeswalkerAbilityList.length; n++) {
|
||||
if (planeswalkerAbilityList[n].includes(":")) {
|
||||
var abilityText = planeswalkerAbilityList[n].substr(planeswalkerAbilityList[n].indexOf(": ") + 2)
|
||||
if (abilityText != undefined) {
|
||||
//console.log(abilityText, planeswalkerName, iAdjust)
|
||||
abilityText = abilityText.replace(planeswalkerName, "Urza, Academy Headmaster")
|
||||
var abilityType = planeswalkerAbilityList[n].split(":")[0]
|
||||
if (!abilityType.includes("X")) {
|
||||
if (abilityType.includes("+")) {
|
||||
//plus
|
||||
plusAbilities[plusAbilities.length] = abilityText
|
||||
} else if (abilityType.includes("\u2212") && parseInt(abilityType.replace("\u2212", "")) > 4) {
|
||||
//ult
|
||||
ultimateAbilities[ultimateAbilities.length] = abilityText
|
||||
} else if (abilityType.includes("\u2212") || abilityType == "0") {
|
||||
//minus
|
||||
minusAbilities[minusAbilities.length] = abilityText
|
||||
} else {
|
||||
//do nothing
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (i < planeswalkerList.length - 1 && planeswalkerList[i - 1].includes('"card_faces"')) {
|
||||
iAdjust += 1
|
||||
}
|
||||
}
|
||||
if (this.responseText.includes('"has_more":true')) {
|
||||
importPlaneswalkers(this.responseText.split('"next_page":"')[1].split('","data"')[0].replace(/\\u0026/g, "&"))
|
||||
} else {
|
||||
var allAbilities = [plusAbilities, minusAbilities, ultimateAbilities]
|
||||
let csvContent = "data:text/csv;charset=utf-8,";
|
||||
|
||||
allAbilities.forEach(function(rowArray) {
|
||||
csvContent += rowArray.join(";") + "$$$";
|
||||
})
|
||||
var encodedUri = encodeURI(csvContent)
|
||||
window.open(encodedUri)
|
||||
}
|
||||
} else if (this.readyState == 4 && this.status == 404) {
|
||||
alert("An error occurred. Please try again.");
|
||||
}
|
||||
}
|
||||
xhttp.open("GET", request, true);
|
||||
xhttp.send();
|
||||
}
|
||||
importPlaneswalkers("https://api.scryfall.com/cards/search?order=released&q=type%3Dplaneswalker")
|
||||
</script>
|
||||
</html>
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 653 KiB |
File diff suppressed because one or more lines are too long
@@ -1,362 +0,0 @@
|
||||
//============================================//
|
||||
// Card Conjurer, by Kyle Burton //
|
||||
//============================================//
|
||||
console.log("1.1")
|
||||
//define variables
|
||||
var playerCount, startingLifeTotal, firstPlayerWide = false, lastPlayerWide = false, playerList = [], rowHeight = 0, columnWidth = 0, rowCount = 0, isFullscreen = true, mouseClickId = 0, noSleep = new NoSleep(), canEnableNoSleep = false
|
||||
//Setup the enabler for no sleep
|
||||
document.addEventListener("click", enableNoSleep, false);
|
||||
function enableNoSleep() {
|
||||
if (canEnableNoSleep) {
|
||||
document.removeEventListener("click", enableNoSleep, false);
|
||||
noSleep.enable();
|
||||
}
|
||||
}
|
||||
//This function sets everything up
|
||||
function fullscreen() {
|
||||
//Full screen!
|
||||
grid = document.getElementById("gridShell")
|
||||
if (grid.requestFullscreen) {
|
||||
grid.requestFullscreen()
|
||||
} else if (grid.mozRequestFullScreen) {
|
||||
grid.mozRequestFullScreen()
|
||||
} else if (grid.webkitRequestFullscreen) {
|
||||
grid.webkitRequestFullscreen()
|
||||
} else if (grid.msRequestFullscreen) {
|
||||
grid.msRequestFullscreen()
|
||||
} else {
|
||||
isFullscreen = false
|
||||
document.getElementById("return").classList.add("permaHidden")
|
||||
document.getElementById("gridShell").classList.add("fullscreenUnavailable")
|
||||
}
|
||||
}
|
||||
function startGame() {
|
||||
canEnableNoSleep = document.getElementById("inputWakeLock").checked
|
||||
fullscreen()
|
||||
document.getElementById("return").classList.remove("hidden")
|
||||
//hide the settings and grab player count and starting life total
|
||||
document.getElementById("settings").classList.add("hidden")
|
||||
playerCount = parseInt(document.getElementById("inputPlayerCount").value)
|
||||
startingLifeTotal = parseInt(document.getElementById("inputStartingLife").value)
|
||||
//determine the layout based on player count
|
||||
if (playerCount % 2 == 0) {
|
||||
if (playerCount >= 6) {
|
||||
firstPlayerWide = true
|
||||
lastPlayerWide = true
|
||||
}
|
||||
} else {
|
||||
lastPlayerWide = true
|
||||
}
|
||||
//Make all the player boxes
|
||||
for (var i = 1; i <= playerCount; i ++) {
|
||||
//determine if the current box is rotated or widened
|
||||
var rotation, wide = false
|
||||
var orientationIndexAdjust = 0
|
||||
if (firstPlayerWide) {
|
||||
orientationIndexAdjust += 1
|
||||
}
|
||||
if (i == 1 && firstPlayerWide) {
|
||||
rotation = 180
|
||||
} else if (i == playerCount && lastPlayerWide) {
|
||||
rotation = 0
|
||||
} else if ((i + orientationIndexAdjust) % 2 == 0) {
|
||||
rotation = 270
|
||||
} else {
|
||||
rotation = 90
|
||||
}
|
||||
if ((i == 1 && firstPlayerWide) || (i == playerCount && lastPlayerWide)) {wide = true}
|
||||
playerList[i - 1] = new playerBox(i, rotation, wide)
|
||||
document.getElementById("inputPlayer").innerHTML += "<option value='" + i + "'>Player " + i + "</option>"
|
||||
}
|
||||
//Determine the grid size
|
||||
if (isFullscreen) {
|
||||
columnWidth = screen.width / 2 - 2
|
||||
} else {
|
||||
columnWidth = window.innerWidth / 2 - 2
|
||||
}
|
||||
rowCount = (playerCount - playerCount % 2) / 2 + 1
|
||||
if (playerCount == 2 || playerCount == 4) {
|
||||
rowCount -= 1
|
||||
}
|
||||
// console.log("Row count: " + rowCount)
|
||||
if (isFullscreen) {
|
||||
rowHeight = screen.height / rowCount - 2
|
||||
// console.log("Full screen, rowHeight: " + rowHeight)
|
||||
// console.log("screen.height: " + screen.height)
|
||||
} else {
|
||||
var heightToUse = window.innerHeight
|
||||
if (document.documentElement.clientHeight > heightToUse) {
|
||||
// console.log("document.documentElement.clientHeight: " + document.documentElement.clientHeight)
|
||||
heightToUse = document.documentElement.clientHeight
|
||||
}
|
||||
rowHeight = heightToUse / rowCount - 2
|
||||
// console.log("Not full screen, rowHeight: " + rowHeight)
|
||||
// console.log("window.innerHeight: " + window.innerHeight)
|
||||
}
|
||||
//Now that all the player boxes are made, they must be configured
|
||||
for (var i = 1; i <= playerCount; i++) {
|
||||
configurePlayerBox(i)
|
||||
}
|
||||
drawAllPlayerBoxes()
|
||||
}
|
||||
function playerBox(playerBoxID, canvasRotation, wide) {
|
||||
//Actually needed vars
|
||||
this.id = playerBoxID
|
||||
this.rotation = canvasRotation
|
||||
this.life = startingLifeTotal
|
||||
this.canvas = document.createElement("canvas")
|
||||
this.direction = 0
|
||||
this.holdTime = 0
|
||||
this.touchId = 0.5
|
||||
this.color = "#222222"
|
||||
this.textColor = "#ffffff"
|
||||
this.image = new Image()
|
||||
this.image.customVarID = playerBoxID
|
||||
this.image.onload = function() {drawPlayerBox(this.customVarID)}
|
||||
//vars to make navigation easier
|
||||
this.canvas.customVarID = playerBoxID
|
||||
this.canvas.customVarContext = this.canvas.getContext("2d")
|
||||
this.canvas.customVarContext.customVarCanvas = this.canvas
|
||||
//css classes
|
||||
this.canvas.classList.add("playerBox")
|
||||
if (wide) {
|
||||
this.canvas.classList.add("widePlayerBox")
|
||||
}
|
||||
//add it to the html
|
||||
document.getElementById("mainGrid").appendChild(this.canvas)
|
||||
}
|
||||
function configurePlayerBox(playerBoxID) {
|
||||
//All of this configures the size/shape/orientation of the player boxes
|
||||
var currentPlayer = playerList[playerBoxID - 1]
|
||||
var context = currentPlayer.canvas.customVarContext
|
||||
currentPlayer.canvas.width = columnWidth
|
||||
if (playerList[playerBoxID - 1].canvas.classList.contains("widePlayerBox")) {
|
||||
currentPlayer.canvas.width = columnWidth * 2 + 2
|
||||
}
|
||||
currentPlayer.canvas.height = rowHeight
|
||||
context.translate(currentPlayer.canvas.width / 2, currentPlayer.canvas.height / 2)
|
||||
context.rotate(Math.PI / 180 * currentPlayer.rotation)
|
||||
}
|
||||
|
||||
function resetLife() {
|
||||
for (var i = 1; i <= playerCount; i++) {
|
||||
playerList[i - 1].life = startingLifeTotal
|
||||
}
|
||||
document.getElementById('menu').classList.add('hidden')
|
||||
drawAllPlayerBoxes()
|
||||
}
|
||||
function updateColorSelector() {
|
||||
document.getElementById("inputPlayerColor").value = playerList[parseInt(document.getElementById("inputPlayer").value) - 1].color
|
||||
document.getElementById("inputTextColor").value = playerList[parseInt(document.getElementById("inputPlayer").value) - 1].textColor
|
||||
}
|
||||
function updateBackgroundColor(color) {
|
||||
playerList[parseInt(document.getElementById("inputPlayer").value) - 1].color = color
|
||||
drawPlayerBox(parseInt(document.getElementById("inputPlayer").value))
|
||||
}
|
||||
function updateTextColor(color) {
|
||||
playerList[parseInt(document.getElementById("inputPlayer").value) - 1].textColor = color
|
||||
drawPlayerBox(parseInt(document.getElementById("inputPlayer").value))
|
||||
}
|
||||
function loadImage(event, destination) {
|
||||
var input = event.target
|
||||
var reader = new FileReader()
|
||||
reader.onload = function() {
|
||||
var dataURL = reader.result
|
||||
destination.src = dataURL
|
||||
}
|
||||
reader.readAsDataURL(input.files[0])
|
||||
}
|
||||
var savedArtList = [], cardArtUrlList = [], cardArtArtistList = []
|
||||
function inputCardArtName(cardArtNameInput) {
|
||||
var xhttp = new XMLHttpRequest()
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
savedArtList = this.responseText.split('"art_crop":"')
|
||||
savedArtList.splice(0, 1)
|
||||
document.getElementById("inputCardArtNameNumber").max = savedArtList.length
|
||||
document.getElementById("inputCardArtNameNumber").value = 1
|
||||
for (i = 0; i < savedArtList.length; i ++) {
|
||||
cardArtUrlList[i] = savedArtList[i].split('","border_crop":')[0]
|
||||
}
|
||||
for (i = 0; i < savedArtList.length; i ++) {
|
||||
cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","border_color":'))
|
||||
}
|
||||
inputCardArtNameNumber(1)
|
||||
}
|
||||
}
|
||||
xhttp.open("GET", "https://api.scryfall.com/cards/search?order=released&unique=art&q=name%3D" + cardArtNameInput.replace(/ /g, "_"), true)
|
||||
xhttp.send()
|
||||
}
|
||||
function inputCardArtNameNumber(cardArtNameNumberInput) {
|
||||
playerList[parseInt(document.getElementById('inputPlayer').value) - 1].image.src = cardArtUrlList[cardArtNameNumberInput - 1]
|
||||
}
|
||||
document.getElementById("mainGrid").addEventListener("touchmove", function(event) {
|
||||
event.preventDefault()
|
||||
}, false)
|
||||
function rollRNG() {
|
||||
document.getElementById("rngOutput").innerHTML = Math.floor(Math.random() * (parseInt(document.getElementById("inputRNGMax").value) - parseInt(document.getElementById("inputRNGMin").value) + 1) + parseInt(document.getElementById("inputRNGMin").value))
|
||||
}
|
||||
function drawPlayerBox(playerBoxID) {
|
||||
var currentPlayerBox = playerList[playerBoxID - 1]
|
||||
var context = currentPlayerBox.canvas.customVarContext
|
||||
context.textBaseline = "middle"
|
||||
var tempFontSize = 100
|
||||
context.font = "100pt belerenbsc"
|
||||
context.fillStyle = currentPlayerBox.color
|
||||
var tempCanvasHeight = currentPlayerBox.canvas.height, tempCanvasWidth = currentPlayerBox.canvas.width
|
||||
if (playerList[playerBoxID - 1].rotation == 90 || playerList[playerBoxID - 1].rotation == 270) {
|
||||
tempCanvasHeight = tempCanvasWidth
|
||||
tempCanvasWidth = currentPlayerBox.canvas.height
|
||||
}
|
||||
context.fillRect(tempCanvasWidth / -2, tempCanvasHeight / -2, tempCanvasWidth, tempCanvasHeight)
|
||||
if (currentPlayerBox.image.src != "") {
|
||||
var imageToDraw = currentPlayerBox.image
|
||||
if (imageToDraw.width / imageToDraw.height > tempCanvasWidth / tempCanvasHeight) {
|
||||
//The image is wider and should be fitted to its height
|
||||
context.drawImage(imageToDraw, tempCanvasHeight / imageToDraw.height * imageToDraw.width / -2, tempCanvasHeight / -2, tempCanvasHeight / imageToDraw.height * imageToDraw.width, tempCanvasHeight)
|
||||
} else {
|
||||
//The image is taller and should be fitted to its width
|
||||
context.drawImage(imageToDraw, tempCanvasWidth / -2, tempCanvasWidth / imageToDraw.width * imageToDraw.height / -2, tempCanvasWidth, tempCanvasWidth / imageToDraw.width * imageToDraw.height)
|
||||
}
|
||||
}
|
||||
if (currentPlayerBox.life < 1) {
|
||||
context.fillStyle = "#0008"
|
||||
context.fillRect(tempCanvasWidth / -2, tempCanvasHeight / -2, tempCanvasWidth, tempCanvasHeight)
|
||||
context.fillStyle = "#800"
|
||||
} else {
|
||||
context.fillStyle = playerList[playerBoxID - 1].textColor
|
||||
}
|
||||
while (context.measureText(currentPlayerBox.life).width >= tempCanvasWidth) {
|
||||
tempFontSize -= 1
|
||||
context.font = tempFontSize + "pt belerenbsc"
|
||||
}
|
||||
var horizontalShift = -1 * parseInt(context.measureText(currentPlayerBox.life).width) / 2
|
||||
context.strokeStyle = "black"
|
||||
context.lineWidth = 5
|
||||
context.strokeText(currentPlayerBox.life, horizontalShift, 0)
|
||||
context.fillText(currentPlayerBox.life, horizontalShift, 0)
|
||||
}
|
||||
function drawAllPlayerBoxes() {
|
||||
for (var i = 1; i <= playerList.length; i ++) {
|
||||
drawPlayerBox(i)
|
||||
}
|
||||
}
|
||||
//Event Listener magic! (always records mouse/touch positions so the loop can work without events)
|
||||
var touchX = [], touchY = []
|
||||
document.getElementById("mainGrid").addEventListener("mousedown", startMouseCoordinates, true)
|
||||
window.addEventListener("mousemove", updateMouseCoordinates, true)
|
||||
window.addEventListener("mouseup", endMouseCoordinates, true)
|
||||
function startMouseCoordinates() {
|
||||
mouseClickId += 1
|
||||
playerList[event.target.customVarID - 1].touchId = mouseClickId
|
||||
singleTap(event.target)
|
||||
}
|
||||
function updateMouseCoordinates() {
|
||||
touchX[0] = event.clientX
|
||||
touchY[0] = event.clientY}
|
||||
function endMouseCoordinates() {
|
||||
for (var i = 1; i <= playerList.length; i++) {
|
||||
playerList[i - 1].touchId = 0.5
|
||||
}
|
||||
}
|
||||
window.addEventListener("touchstart", switchToTouchEvents, true)
|
||||
function switchToTouchEvents() {
|
||||
window.removeEventListener("touchstart", switchToTouchEvents, true)
|
||||
document.getElementById("mainGrid").removeEventListener("mousedown", startMouseCoordinates, true)
|
||||
window.removeEventListener("mousemove", updateMouseCoordinates, true)
|
||||
window.removeEventListener("mouseup", endMouseCoordinates, true)
|
||||
document.getElementById("mainGrid").addEventListener("touchstart", startTouch, true)
|
||||
window.addEventListener("touchmove", moveTouch, true)
|
||||
window.addEventListener("touchend", endTouch, true)
|
||||
}
|
||||
function startTouch() {
|
||||
playerList[event.changedTouches[0].target.customVarID - 1].touchId = event.changedTouches[0].identifier
|
||||
moveTouch()
|
||||
singleTap(event.changedTouches[0].target)
|
||||
}
|
||||
function moveTouch() {
|
||||
touchX = [], touchY = []
|
||||
for (var i = 0; i < event.touches.length; i ++) {
|
||||
touchX[i] = event.touches[i].clientX
|
||||
touchY[i] = event.touches[i].clientY
|
||||
}
|
||||
}
|
||||
function endTouch() {
|
||||
for (var i = 1; i <= playerList.length; i++) {
|
||||
if (playerList[i - 1].touchId == event.changedTouches[0].identifier) {
|
||||
playerList[i - 1].touchId = 0.5
|
||||
}
|
||||
}
|
||||
moveTouch()
|
||||
}
|
||||
//Tap (and click) functions
|
||||
function singleTap(targetPlayerBox) {
|
||||
// console.log("Box #" + targetPlayerBox.customVarID + " was pressed")
|
||||
var playerBoxBounds = targetPlayerBox.getBoundingClientRect()
|
||||
// console.log("Bounds:")
|
||||
// console.log(playerBoxBounds)
|
||||
var tappedPlayerBox = playerList[targetPlayerBox.customVarID - 1]
|
||||
var lifeAdjust = 0
|
||||
// console.log("Rotation: " + tappedPlayerBox.rotation)
|
||||
// console.log("touchX: " + touchX[touchX.length - 1] + "\ntouchY: " + touchY[touchY.length - 1])
|
||||
if (tappedPlayerBox.rotation == 0 || tappedPlayerBox.rotation == 180) {
|
||||
// console.log(touchX[touchX.length - 1])
|
||||
// console.log(playerBoxBounds.width / 2 + playerBoxBounds.left)
|
||||
if (touchX[touchX.length - 1] > playerBoxBounds.width / 2 + playerBoxBounds.left) {
|
||||
lifeAdjust = 1
|
||||
} else {
|
||||
lifeAdjust = -1
|
||||
}
|
||||
} else {
|
||||
// console.log(touchY[touchY.length - 1])
|
||||
// console.log(playerBoxBounds.height / 2 + playerBoxBounds.top)
|
||||
if (touchY[touchY.length - 1] > playerBoxBounds.height / 2 + playerBoxBounds.top) {
|
||||
lifeAdjust = 1
|
||||
} else {
|
||||
lifeAdjust = -1
|
||||
}
|
||||
}
|
||||
if (tappedPlayerBox.rotation == 180 || tappedPlayerBox.rotation == 270) {
|
||||
lifeAdjust *= -1
|
||||
}
|
||||
// console.log(lifeAdjust)
|
||||
tappedPlayerBox.direction = lifeAdjust
|
||||
tappedPlayerBox.life += lifeAdjust
|
||||
drawPlayerBox(tappedPlayerBox.id)
|
||||
setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 500)
|
||||
}
|
||||
function clockCheck(tappedPlayerBox, lastTapID) {
|
||||
if (tappedPlayerBox.touchId == lastTapID) {
|
||||
tappedPlayerBox.life += tappedPlayerBox.direction
|
||||
drawPlayerBox(tappedPlayerBox.id)
|
||||
if (tappedPlayerBox.holdTime >= 150) {
|
||||
setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 10)
|
||||
} else if (tappedPlayerBox.holdTime >= 50) {
|
||||
setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 50)
|
||||
} else {
|
||||
setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 100)
|
||||
}
|
||||
tappedPlayerBox.holdTime += 1
|
||||
} else {
|
||||
tappedPlayerBox.holdTime = 0
|
||||
}
|
||||
}
|
||||
//Hopefully stops the pesky double-tap zoom:
|
||||
var doubleTouchStartTimestamp = 0
|
||||
document.getElementById("mainGrid").addEventListener("touchstart", function() {
|
||||
var now = +(new Date())
|
||||
if (doubleTouchStartTimestamp + 500 > now){
|
||||
event.preventDefault()
|
||||
}
|
||||
doubleTouchStartTimestamp = now
|
||||
})
|
||||
//Updated :D
|
||||
|
||||
var inputsToRemoveAutocorrect = document.querySelectorAll("input");
|
||||
|
||||
inputsToRemoveAutocorrect.forEach(input => {
|
||||
input.setAttribute("autocomplete", "off")
|
||||
input.setAttribute("autocorrect", "off")
|
||||
input.setAttribute("autocapitalize", "off")
|
||||
input.setAttribute("spellcheck", false)
|
||||
})
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 810 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
@@ -1,134 +0,0 @@
|
||||
var svg = document.getElementById('displaySVG');
|
||||
var svgWidth = 500, svgHeight = 500, setSymbolWidth = 300, setSymbolHeight = 300;
|
||||
var svgStroke = svg.children[1]
|
||||
var svgFill = svg.children[2]
|
||||
svg.setAttribute('width', svgWidth);
|
||||
svg.setAttribute('height', svgHeight);
|
||||
var imageType = 'svg';
|
||||
var canvas = document.getElementById('displayCanvas');
|
||||
canvas.width = svgWidth
|
||||
canvas.height = svgHeight
|
||||
var context = canvas.getContext('2d');
|
||||
var setSymbolImage = new Image();
|
||||
setSymbolImage.onload = drawSetSymbol;
|
||||
var setSymbolPath = '';
|
||||
fetchSVGData('https://raw.githubusercontent.com/andrewgioia/Keyrune/master/svg/rtr.svg');
|
||||
|
||||
|
||||
function fetchSVGData(url) {
|
||||
hideShow();
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && xhttp.status != 404) {
|
||||
imageType = 'svg'
|
||||
setSymbolPath = xhttp.responseText.split('d="')[1].split('"></path>')[0];
|
||||
svgStroke.setAttribute('d', setSymbolPath);
|
||||
svgFill.setAttribute('d', setSymbolPath);
|
||||
var svgPathBoundingBox = svgStroke.getBBox();
|
||||
if (svgPathBoundingBox.width > svgPathBoundingBox.height) {
|
||||
scaleAmount = setSymbolWidth / svgPathBoundingBox.width;
|
||||
} else {
|
||||
scaleAmount = setSymbolHeight / svgPathBoundingBox.height;
|
||||
}
|
||||
svgStroke.setAttribute('transform', 'scale(' + scaleAmount + ') translate(' + parseFloat(((svgWidth - svgPathBoundingBox.width * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.x) + ', ' + parseFloat(((svgHeight - svgPathBoundingBox.height * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.y) + ')');
|
||||
svgFill.setAttribute('transform', 'scale(' + scaleAmount + ') translate(' + parseFloat(((svgWidth - svgPathBoundingBox.width * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.x) + ', ' + parseFloat(((svgHeight - svgPathBoundingBox.height * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.y) + ')');
|
||||
decorateSVG();
|
||||
}
|
||||
}
|
||||
xhttp.open('GET', url, true);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
function decorateSVG() {
|
||||
if (imageType == 'svg') {
|
||||
var setSymbolGradient = document.getElementById('inputSetSymbolRarity').value;
|
||||
var setSymbolStrokeColor = 'black';
|
||||
if (setSymbolGradient == 'Common') {
|
||||
setSymbolStrokeColor = 'white'
|
||||
}
|
||||
svgStroke.setAttribute('stroke', setSymbolStrokeColor)
|
||||
svgFill.setAttribute('fill', 'url(#grad' + setSymbolGradient + ')');
|
||||
} else {
|
||||
drawSetSymbol()
|
||||
}
|
||||
}
|
||||
|
||||
function downloadSetSymbolImage(linkElement) {
|
||||
linkElement.download = 'setSymbol.' + imageType
|
||||
if (imageType == 'svg') {
|
||||
var serializer = new XMLSerializer();
|
||||
var source = serializer.serializeToString(svg);
|
||||
|
||||
//add name spaces.
|
||||
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
|
||||
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
|
||||
}
|
||||
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
|
||||
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
|
||||
}
|
||||
|
||||
//add xml declaration
|
||||
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
|
||||
|
||||
//convert svg source to URI data scheme.
|
||||
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
|
||||
|
||||
//set url value to a element's href attribute.
|
||||
linkElement.href = url;
|
||||
} else {
|
||||
var setSymbolDownload = canvas.toDataURL();
|
||||
linkElement.href = setSymbolDownload;
|
||||
}
|
||||
}
|
||||
|
||||
function uploadImage(event) {
|
||||
var input = event.target;
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
imageType = 'png';
|
||||
hideShow();
|
||||
setSymbolImage.src = reader.result;
|
||||
}
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
|
||||
function drawSetSymbol() {
|
||||
var scaleAmount;
|
||||
if (setSymbolImage.width > setSymbolImage.height) {
|
||||
scaleAmount = setSymbolWidth / setSymbolImage.width;
|
||||
} else {
|
||||
scaleAmount = setSymbolHeight / setSymbolImage.height;
|
||||
}
|
||||
context.globalCompositeOperation = 'source-over';
|
||||
context.clearRect(0, 0, svgWidth, svgHeight);
|
||||
var x1 = (svgWidth - setSymbolImage.width * scaleAmount) / 2, y1 = (svgHeight - setSymbolImage.height * scaleAmount) / 2, x2 = x1 + setSymbolImage.width * scaleAmount, y2 = y1 + setSymbolImage.height * scaleAmount;
|
||||
context.drawImage(setSymbolImage, x1, y1, x2 - x1, y2 - y1);
|
||||
context.globalCompositeOperation = 'source-in';
|
||||
var gradient = context.createLinearGradient(x1, y1, x2, y1);
|
||||
var gradientColors = document.getElementById('grad' + document.getElementById('inputSetSymbolRarity').value).innerHTML.split('stop-color:');
|
||||
gradient.addColorStop(0, gradientColors[1].split(';')[0]);
|
||||
gradient.addColorStop(0.5, gradientColors[2].split(';')[0]);
|
||||
gradient.addColorStop(1, gradientColors[3].split(';')[0]);
|
||||
context.fillStyle = gradient;
|
||||
context.fillRect(x1, y1, x2 - x1, y2 - y1);
|
||||
}
|
||||
|
||||
function hideShow() {
|
||||
if (imageType == 'svg') {
|
||||
if (svg.classList.contains('hidden')) {
|
||||
svg.classList.remove('hidden');
|
||||
}
|
||||
if (!canvas.classList.contains('hidden')) {
|
||||
canvas.classList.add('hidden');
|
||||
}
|
||||
} else {
|
||||
if (canvas.classList.contains('hidden')) {
|
||||
canvas.classList.remove('hidden');
|
||||
}
|
||||
if (!svg.classList.contains('hidden')) {
|
||||
svg.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -35,67 +35,43 @@
|
||||
font-family: goudymedieval;
|
||||
src: url("../fonts/goudy-medieval.ttf");
|
||||
}
|
||||
|
||||
:root {
|
||||
--shifting-color-1: #00c300;
|
||||
--shifting-color-1-light: #c8ff64;
|
||||
--light-color: #eee;
|
||||
--dark-color: #333;
|
||||
--clear-light: #fff3;
|
||||
--clear-mid: #fff6;
|
||||
--clear-dark: #fff9;
|
||||
--clear-darker: #aaa3;
|
||||
--clear-darkerer: #aaa6;
|
||||
--background-gradient: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
|
||||
}
|
||||
|
||||
/*Background & Footer*/
|
||||
html {
|
||||
background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
|
||||
background-attachment: fixed;
|
||||
overflow-x: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-size: 16pt;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-image: url(images/lowpoly.png);
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
footer {
|
||||
background-color: var(--dark-color);
|
||||
padding: 2rem;
|
||||
font: 0.5em gothammedium;
|
||||
color: var(--light-color);
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
|
||||
/*Canvas*/
|
||||
canvas {
|
||||
width: calc(100%);
|
||||
height: auto;
|
||||
max-width: 750px;
|
||||
max-height: 1050px;
|
||||
.cardMasterElement {
|
||||
font: 1rem belerenbsc;
|
||||
border: 1px solid black;
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 0.125rem;
|
||||
display: grid;
|
||||
grid-template-columns: 2rem auto 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
.canvasContainer {
|
||||
text-align: center;
|
||||
.cardMasterElement > .handle {
|
||||
cursor: move;
|
||||
padding: 1rem 0.5rem;
|
||||
text-align: center;
|
||||
border: 1px solid green;
|
||||
}
|
||||
.cardMasterElementMoving {
|
||||
background-color: gray;
|
||||
}
|
||||
.cardMasterElement > .delete {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border: 1px solid red;
|
||||
}
|
||||
.cardMasterElement.cardMasterElementSelected {
|
||||
border: 5px solid green;
|
||||
}
|
||||
|
||||
|
||||
/*Grids*/
|
||||
.mainGrid {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: auto;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.splitGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
@@ -105,406 +81,54 @@ canvas {
|
||||
grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
.autoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
|
||||
|
||||
/*Misc elements*/
|
||||
.download {
|
||||
text-align: center;
|
||||
font: 1.5rem belerenbsc;
|
||||
}
|
||||
.pageTitle {
|
||||
font: 3rem belerenbsc;
|
||||
text-align: center;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
.bar {
|
||||
background-image: url(../images/manaSymbols/63.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 2px;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
}
|
||||
.imgPreview {
|
||||
width: 100%;
|
||||
}
|
||||
.layer {
|
||||
padding: 2rem 2rem;
|
||||
color: black;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
background-color: var(--light-color);
|
||||
background-image: url(images/layerBackground.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
/*Donate Grid Stuff!*/
|
||||
.donateHalfGrid > img {
|
||||
width: 90%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
/*Various text modifications*/
|
||||
.title {
|
||||
text-align: center;
|
||||
font: 1.5rem belerenbsc;
|
||||
}
|
||||
.truncate {
|
||||
word-break: break-word;
|
||||
}
|
||||
.paragraph {
|
||||
font: mplantin;
|
||||
text-align: left;
|
||||
}
|
||||
.indent {
|
||||
text-indent: 2rem;
|
||||
}
|
||||
|
||||
|
||||
/*General modifications*/
|
||||
.hidden:not(.visibilityOverride) {
|
||||
display: none;
|
||||
}
|
||||
.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
.selectable {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
|
||||
/*Hyperlinks*/
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
footer a {
|
||||
color: white;
|
||||
}
|
||||
footer a:hover {
|
||||
color: var(--shifting-color-1-light);
|
||||
}
|
||||
|
||||
|
||||
/*Controls the area taken by the canvas*/
|
||||
@media screen and (min-width: 905pt) {
|
||||
/*Makes room for the canvas and controls to be side by side*/
|
||||
.mainGrid {
|
||||
padding: 1rem;
|
||||
grid-template-columns: calc(750px + 2px) auto;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: calc(750px + 2rem)) {
|
||||
/*The canvas can be full size and doesn't have to scale anymore*/
|
||||
canvas {
|
||||
width: 750px;
|
||||
height: 1050px;
|
||||
}
|
||||
}
|
||||
/*The screen is big enough (larger than phone, likely) to use a larger font*/
|
||||
@media screen and (min-width: 375pt) {
|
||||
html {
|
||||
font-size: 24pt;
|
||||
}
|
||||
}
|
||||
/*The screen is big enough for the samples to lay side by side. Also, the donate section can be displayed horizontally.*/
|
||||
@media screen and (min-width: 750pt) {
|
||||
.samples {
|
||||
grid-template-columns: 33.33% 33.33% 33.33% !important;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.samples #sample1 {
|
||||
width: 90%;
|
||||
transform: rotate(-10deg) translate(10%, 8%);
|
||||
}
|
||||
.samples #sample2 {
|
||||
z-index: 10;
|
||||
}
|
||||
.samples #sample3 {
|
||||
width: 90%;
|
||||
transform: rotate(10deg) translate(-10%, 8%);
|
||||
}
|
||||
.donateHalfGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 16rem auto;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.donateHalfGrid > img {
|
||||
width: 15rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
/*These control tooltips for mobile devices vs. desktops/laptops*/
|
||||
/*@media screen and (min-width: 1024px) {
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1023px) {
|
||||
.tooltip:focus .tooltiptext, div.tooltip > input:focus + .tooltiptext, div.tooltip > textarea:focus + .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}*/
|
||||
/*Allows the footer to be displayed horizontally on Desktop*/
|
||||
@media screen and (min-width: 375pt) {
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*WIP (or I'm too lazy to sort these)*/
|
||||
.tabMenu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
.tabOption, .textTabButton {
|
||||
font: 1rem belerenbsc;
|
||||
text-align: center;
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
transition: 0.5s;
|
||||
}
|
||||
.tabOption:hover, .textTabButton:hover {
|
||||
background-color: var(--clear-mid);
|
||||
transition: 0s;
|
||||
}
|
||||
.tabOption.tabOptionSelected, .textTabButton.activeTextTab {
|
||||
background-color: var(--clear-dark);
|
||||
}
|
||||
.tabContent:not(.tabVisible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cardMasterElement {
|
||||
font: 0.75rem belerenbsc;
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
display: grid;
|
||||
grid-template-columns: 2rem auto 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
.cardMasterElement > .handle {
|
||||
cursor: all-scroll;
|
||||
padding: 1rem 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.cardMasterElement img {
|
||||
max-height: 1.3rem;
|
||||
max-width: 1.3rem;
|
||||
position: absolute;
|
||||
transform: translate(0.1rem, 0);
|
||||
}
|
||||
.cardmasterElement img.cardMasterElementMaskImage {
|
||||
transform: translate(1.5rem, 0);
|
||||
}
|
||||
.cardMasterElement img.cardMasterElementMaskImage.zoom:hover {
|
||||
transform: translate(1.5rem, 0) scale(3);
|
||||
}
|
||||
.cardMasterElementMoving {
|
||||
background-color: var(--clear-dark);
|
||||
}
|
||||
.closeCardMasterElement {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.frameOption img, .maskOption img, .cardMasterElement img {
|
||||
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;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border: 1px solid var(--light-color);
|
||||
border: 1px solid black;
|
||||
}
|
||||
.frameOption {
|
||||
#framePicker > div {
|
||||
height: 3rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.frameOption img {
|
||||
#framePicker img {
|
||||
max-width: 3rem;
|
||||
max-height: 3rem;
|
||||
}
|
||||
.maskOption img {
|
||||
#maskPicker img {
|
||||
max-width: 1.5rem;
|
||||
max-height: 1.5rem;
|
||||
}
|
||||
.frameOption.frameOptionSelected, .maskOption.maskOptionSelected {
|
||||
background-color: var(--clear-dark);
|
||||
#framePicker > div.frameOptionSelected, #maskPicker > div.maskOptionSelected {
|
||||
background-color: green;
|
||||
}
|
||||
.maskOption, .frameOption {
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
#maskPicker > div, #framePicker > div {
|
||||
background-color: gray;
|
||||
border: 1px solid blue;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.maskOption {
|
||||
font-size: 0.75rem;
|
||||
margin-left: 0.5rem;
|
||||
#maskPicker > div {
|
||||
/*margin-left: 0.5rem;*/
|
||||
padding: 0.25rem;
|
||||
width: calc(100% - 1.3rem);
|
||||
/*width: calc(100% - 1.3rem);*/
|
||||
}
|
||||
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 6rem;
|
||||
max-height: 18rem;
|
||||
resize: vertical;
|
||||
#textPicker > div {
|
||||
border: 1px solid black;
|
||||
padding: 1rem;
|
||||
}
|
||||
.textTabButton {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.textTab {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
#textPicker > div.selectedText {
|
||||
border: 5px solid green;
|
||||
}
|
||||
|
||||
.input, .textarea, .button, .select {
|
||||
font: 0.75rem mplantin;
|
||||
background-color: var(--light-color);
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0px 0.2rem;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
.input.inputOpacity {
|
||||
width: 2.4rem;
|
||||
}
|
||||
|
||||
|
||||
/* Text code tutorial */
|
||||
#textCodeTutorial {
|
||||
font-size: 0.75rem;
|
||||
display: grid;
|
||||
grid-template-columns: 4.5rem auto;
|
||||
}
|
||||
#textCodeTutorial > div {
|
||||
padding: 0.25rem 0;
|
||||
background-color: var(--clear-mid);
|
||||
}
|
||||
#textCodeTutorial > div:nth-child(4n), #textCodeTutorial > div:nth-child(4n - 1) {
|
||||
background-color: var(--clear-light);
|
||||
}
|
||||
|
||||
|
||||
input[type="checkbox"], .frameOption, .maskOption, .button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* image links */
|
||||
.proxyFactoryLimitedGrid {
|
||||
margin: 0;
|
||||
max-width: calc(100vw - 4rem);
|
||||
}
|
||||
.donateGrid {
|
||||
margin: 0;
|
||||
max-width: calc(100vw - 4rem);
|
||||
}
|
||||
.imageLinkGrid {
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
|
||||
/* border: 1px solid red;*/
|
||||
}
|
||||
.showBackgroundThrough {
|
||||
display: inline-block;
|
||||
background: url(images/lowpoly.png) left top no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.imageLink {
|
||||
width: calc(100% - 1rem);
|
||||
padding: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: 4rem auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
border: 1px solid var(--dark-color);
|
||||
}
|
||||
.imageLink:hover {
|
||||
background-color: var(--clear-darkerer);
|
||||
}
|
||||
.imageLink > img {
|
||||
max-height: 3rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
.imageLink > div {
|
||||
word-break: break-all;
|
||||
font: 1.5rem belerenbsc;
|
||||
}
|
||||
|
||||
.visitorCount {
|
||||
display: none;
|
||||
}
|
||||
.visitorCount > a > img {
|
||||
max-height: 0.5rem;
|
||||
}
|
||||
.visitorCountTrigger:hover + .visitorCount {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.samples {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.samples img {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.zoom {
|
||||
transition: 0.2s;
|
||||
}
|
||||
.zoom:hover {
|
||||
transform: scale(3);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
canvas {
|
||||
border:1px solid black;
|
||||
}
|
||||
Reference in New Issue
Block a user