forked from GithubMirrors/cardconjurer
box
This commit is contained in:
Kyle
83
boxGenerator.html
Normal file
83
boxGenerator.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html5>
|
||||
<html>
|
||||
<head>
|
||||
<script async src="data/scripts/cookies.js"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="data/site/favicons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="data/site/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="data/site/favicons/favicon-16x16.png">
|
||||
<link rel="manifest" href="data/site/favicons/site.webmanifest">
|
||||
</head>
|
||||
<body>
|
||||
<title>CC - Box Generator</title>
|
||||
<link rel="stylesheet" href="askScryfallStyles.css">
|
||||
<div>
|
||||
<div class="title darkLayer">
|
||||
Box Generator
|
||||
</div>
|
||||
<div class="layer slideFromRight">
|
||||
Pixels Per Inch:
|
||||
<input id='inputPPI' type='number' min='1' step='1' max='1200' value='72'>
|
||||
Material thickness:
|
||||
<input id='inputMaterialThickness' type='number' min='0.01' step='0.01' max='2' value='0.25'>
|
||||
Number of rows:
|
||||
<input id='inputRowCount' type='number' step='1' min='1' max='5' value='1'>
|
||||
Row length (interior):
|
||||
<input id='inputRowLength' type='number' step='0.25' min='1' max='60' value='12'>
|
||||
Card width (sleeved):
|
||||
<input id='inputCardWidth' type='number' step='0.1' min='1' max='5' value='2.5'>
|
||||
Card height (sleeved):
|
||||
<input id='inputCardHeight' type='number' step='0.1' min='1' max='7' value='3.5'>
|
||||
Wiggle room:
|
||||
<input id='inputWiggleRoom' type='number' step='0.01' min='0' max='1' value='0.125'>
|
||||
Vertical Tab Count:
|
||||
<input id='inputVerticalTabCount' type='number' step='1' min='2' max='20' value='5'>
|
||||
Horizontal Tab Count (down the rows):
|
||||
<input id='inputHorizontalTabCount1' type='number' step='1' min='2' max='20' value='15'>
|
||||
Horizontal Tab Count (across the rows):
|
||||
<input id='inputHorizontalTabCount2' type='number' step='1' min='2' max='20' value='5'><br><br>
|
||||
<button onclick='generateSVGs()'>Generate & Download SVGs</button>
|
||||
</div>
|
||||
<div class="layer darkLayer slideFromLeft">
|
||||
<div class="paragraph indent">
|
||||
Generate cool boxes!
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer slideFromRight">
|
||||
<div class="paragraph indent">
|
||||
So fun!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script defer src="data/site/other/boxGenerator/boxGenerator.js"></script>
|
||||
</body>
|
||||
<footer class='footer'>
|
||||
<div>
|
||||
Card Conjurer by Kyle Burton<br>
|
||||
<select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'>
|
||||
<option value='lightMode'>Light Mode</option>
|
||||
<option value='darkMode'>Dark Mode</option>
|
||||
<option value='dayRave'>Day Rave</option>
|
||||
<option value='nightRave'>Night Rave</option>
|
||||
<option value='scholarMode'>Scholar Mode</option>
|
||||
</select>
|
||||
<script>
|
||||
document.getElementById('inputColorPalette').value = getCookie('colorPalette')
|
||||
</script>
|
||||
</div>
|
||||
<div>
|
||||
Navigation<br>
|
||||
<a href='index.html'>Card Creator</a><br>
|
||||
<a href='life.html'>Life Counter</a><br>
|
||||
<a href='askscryfall.html'>Ask Scryfall</a>
|
||||
</div>
|
||||
<div>
|
||||
Legal<br>
|
||||
<a href='termsofuse.html'>Terms of Use</a><br>
|
||||
<a href='disclaimer.html'>Disclaimer</a>
|
||||
</div>
|
||||
<script defer src="data/scripts/animations.js"></script>
|
||||
</footer>
|
||||
<html>
|
||||
191
data/site/other/boxGenerator/boxGenerator.js
Normal file
191
data/site/other/boxGenerator/boxGenerator.js
Normal file
@@ -0,0 +1,191 @@
|
||||
var sides = document.createElement('svg')
|
||||
var lid = document.createElement('svg')
|
||||
var bottom = document.createElement('svg')
|
||||
var front = document.createElement('svg')
|
||||
var back = document.createElement('svg')
|
||||
|
||||
function sizeSVG(svg, width, height) {
|
||||
svg.setAttribute('width', width + 'px')
|
||||
svg.setAttribute('height', height + 'px')
|
||||
}
|
||||
|
||||
function generateSVGs() {
|
||||
//setup variables
|
||||
var ppi = parseInt(document.getElementById('inputPPI').value)
|
||||
var padding = ppi
|
||||
var materialThickness = parseFloat(document.getElementById('inputMaterialThickness').value) * ppi
|
||||
var rowCount = parseInt(document.getElementById('inputRowCount').value)
|
||||
var rowLength = parseFloat(document.getElementById('inputRowLength').value) * ppi
|
||||
var cardWidth = parseFloat(document.getElementById('inputCardWidth').value + document.getElementById('inputWiggleRoom').value) * ppi
|
||||
var cardHeight = parseFloat(document.getElementById('inputCardHeight').value + document.getElementById('inputWiggleRoom').value) * ppi
|
||||
// var wiggleRoom = parseFloat(document.getElementById('inputWiggleRoom').value) * ppi
|
||||
var verticalTabCount = parseInt(document.getElementById('inputVerticalTabCount').value)
|
||||
if (verticalTabCount % 2 == 0) {
|
||||
verticalTabCount += 1
|
||||
}
|
||||
var verticalTabLength = cardHeight / verticalTabCount
|
||||
var horizontalTabCount1 = parseInt(document.getElementById('inputHorizontalTabCount1').value)
|
||||
if (horizontalTabCount1 % 2 == 0) {
|
||||
horizontalTabCount1 += 1
|
||||
}
|
||||
var horizontalTabLength1 = rowLength / horizontalTabCount1
|
||||
var horizontalTabCount2 = parseInt(document.getElementById('inputHorizontalTabCount2').value)
|
||||
if (horizontalTabCount2 % 2 == 0) {
|
||||
horizontalTabCount2 += 1
|
||||
}
|
||||
var horizontalTabLength2 = (rowCount * (materialThickness + cardWidth) - materialThickness) / horizontalTabCount2
|
||||
//side svg
|
||||
sizeSVG(sides, rowLength + 2 * materialThickness + 2 * padding, cardHeight + 3 * materialThickness + 2 * padding)
|
||||
var sidePath = '<path fill="transparent" stroke="red" d="M' + padding + ' ' + padding + 'h' + (rowLength + 2 * materialThickness) + 'v' + materialThickness + 'h' + (-materialThickness) + 'v' + materialThickness + 'h' + materialThickness
|
||||
for (var i = 0; i < verticalTabCount; i ++) {
|
||||
sidePath += 'v' + verticalTabLength
|
||||
if (i % 2 == 1) {
|
||||
sidePath += 'h' + materialThickness
|
||||
} else {
|
||||
sidePath += 'h' + (-materialThickness)
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < horizontalTabCount1; i ++) {
|
||||
if (i % 2 == 0) {
|
||||
sidePath += 'v' + materialThickness
|
||||
} else {
|
||||
sidePath += 'v' + (-materialThickness)
|
||||
}
|
||||
sidePath += 'h' + (-horizontalTabLength1)
|
||||
}
|
||||
sidePath += 'v' + (-materialThickness)
|
||||
for (var i = 0; i < verticalTabCount; i ++) {
|
||||
if (i % 2 == 1) {
|
||||
sidePath += 'h' + materialThickness
|
||||
} else {
|
||||
sidePath += 'h' + (-materialThickness)
|
||||
}
|
||||
sidePath += 'v' + (-verticalTabLength)
|
||||
}
|
||||
sidePath += 'h' + materialThickness + 'v' + (-materialThickness) + 'h' + (-materialThickness) + 'Z"></path>'
|
||||
sides.innerHTML = sidePath
|
||||
|
||||
//back
|
||||
sizeSVG(back, materialThickness + rowCount * (materialThickness + cardWidth) + 2 * padding, 2 * (materialThickness + padding) + cardHeight + materialThickness)
|
||||
var backPath = '<path fill="transparent" stroke="red" d="M' + (padding + materialThickness) + ' ' + padding + 'h' + (rowCount * (materialThickness + cardWidth) - materialThickness) + 'v' + materialThickness + 'h' + materialThickness + 'v' + materialThickness + 'h' + (-materialThickness)
|
||||
for (var i = 0; i < verticalTabCount; i++) {
|
||||
backPath += 'v' + verticalTabLength
|
||||
if (i % 2 == 0) {
|
||||
backPath += 'h' + materialThickness
|
||||
} else {
|
||||
backPath += 'h' + (-materialThickness)
|
||||
}
|
||||
}
|
||||
backPath += 'v' + materialThickness + 'h' + (-materialThickness)
|
||||
for (var i = 0; i < horizontalTabCount2 - 1; i++) {
|
||||
backPath += 'h' + (-horizontalTabLength2)
|
||||
if (i % 2 == 1) {
|
||||
backPath += 'v' + materialThickness
|
||||
} else {
|
||||
backPath += 'v' + (-materialThickness)
|
||||
}
|
||||
}
|
||||
backPath += 'h' + (-horizontalTabLength2 - materialThickness) + 'v' + (-materialThickness) + 'h' + materialThickness
|
||||
for (var i = 0; i < verticalTabCount; i++) {
|
||||
backPath += 'v' + (-verticalTabLength)
|
||||
if (i % 2 == 1) {
|
||||
backPath += 'h' + materialThickness
|
||||
} else {
|
||||
backPath += 'h' + (-materialThickness)
|
||||
}
|
||||
}
|
||||
backPath += 'v' + (-materialThickness) + 'h' + materialThickness + 'Z"></path><path fill="transparent" stroke="red" d="M' + ((materialThickness + rowCount * (materialThickness + cardWidth) + 2 * padding) / 2 - cardWidth / 4) + ' ' + (padding + materialThickness) + 'h' + (cardWidth / 2) + 'v' + materialThickness + 'h' + (-cardWidth / 2) + 'Z"></path>'
|
||||
back.innerHTML = backPath
|
||||
console.log(back)
|
||||
|
||||
//front
|
||||
sizeSVG(front, materialThickness + rowCount * (materialThickness + cardWidth) + 2 * padding, 2 * padding + materialThickness + cardHeight)
|
||||
var frontPath = '<path fill="transparent" stroke="red" d="M' + (padding + materialThickness) + ' ' + padding + 'h' + (rowCount * (materialThickness + cardWidth) - materialThickness)
|
||||
for (var i = 0; i < verticalTabCount; i++) {
|
||||
frontPath += 'v' + verticalTabLength
|
||||
if (i % 2 == 0) {
|
||||
frontPath += 'h' + materialThickness
|
||||
} else {
|
||||
frontPath += 'h' + (-materialThickness)
|
||||
}
|
||||
}
|
||||
frontPath += 'v' + materialThickness + 'h' + (-materialThickness)
|
||||
for (var i = 0; i < horizontalTabCount2 - 1; i++) {
|
||||
frontPath += 'h' + (-horizontalTabLength2)
|
||||
if (i % 2 == 1) {
|
||||
frontPath += 'v' + materialThickness
|
||||
} else {
|
||||
frontPath += 'v' + (-materialThickness)
|
||||
}
|
||||
}
|
||||
frontPath += 'h' + (-horizontalTabLength2 - materialThickness) + 'v' + (-materialThickness) + 'h' + materialThickness
|
||||
for (var i = 0; i < verticalTabCount - 1; i++) {
|
||||
frontPath += 'v' + (-verticalTabLength)
|
||||
if (i % 2 == 1) {
|
||||
frontPath += 'h' + materialThickness
|
||||
} else {
|
||||
frontPath += 'h' + (-materialThickness)
|
||||
}
|
||||
}
|
||||
frontPath += 'Z"></path>'
|
||||
front.innerHTML = frontPath
|
||||
|
||||
//bottom
|
||||
sizeSVG(bottom, materialThickness + rowCount * (materialThickness + cardWidth) + 2 * padding, rowLength + 2 * materialThickness + 2 * padding)
|
||||
var bottomPath = '<path fill="transparent" stroke="red" d="M' + (padding + materialThickness) + ' ' + (padding + materialThickness) + 'h' + horizontalTabLength2
|
||||
for (var i = 1; i < horizontalTabCount2; i++) {
|
||||
if (i % 2 == 0) {
|
||||
bottomPath += 'v' + materialThickness
|
||||
} else {
|
||||
bottomPath += 'v' + (-materialThickness)
|
||||
}
|
||||
bottomPath += 'h' + horizontalTabLength2
|
||||
}
|
||||
bottomPath += 'v' + horizontalTabLength1
|
||||
for (var i = 1; i < horizontalTabCount1; i++) {
|
||||
if (i % 2 == 1) {
|
||||
bottomPath += 'h' + materialThickness
|
||||
} else {
|
||||
bottomPath += 'h' + (-materialThickness)
|
||||
}
|
||||
bottomPath += 'v' + horizontalTabLength1
|
||||
}
|
||||
bottomPath += 'h' + (-horizontalTabLength2)
|
||||
for (var i = 1; i < horizontalTabCount2; i++) {
|
||||
if (i % 2 == 1) {
|
||||
bottomPath += 'v' + materialThickness
|
||||
} else {
|
||||
bottomPath += 'v' + (-materialThickness)
|
||||
}
|
||||
bottomPath += 'h' + (-horizontalTabLength2)
|
||||
}
|
||||
for (var i = 1; i < horizontalTabCount1; i++) {
|
||||
bottomPath += 'v' + (-horizontalTabLength1)
|
||||
if (i % 2 == 0) {
|
||||
bottomPath += 'h' + materialThickness
|
||||
} else {
|
||||
bottomPath += 'h' + (-materialThickness)
|
||||
}
|
||||
}
|
||||
bottomPath += 'Z"></path>'
|
||||
bottom.innerHTML = bottomPath
|
||||
|
||||
//lid
|
||||
sizeSVG(lid, materialThickness + rowCount * (materialThickness + cardWidth) + 2 * padding, rowLength + 2 * materialThickness + 2 * padding)
|
||||
var lidPath = '<path fill="transparent" stroke="red" d="M' + (padding + materialThickness) + ' ' + (padding + materialThickness) + 'H' + ((materialThickness + rowCount * (materialThickness + cardWidth)) / 2 + padding - cardWidth / 4) + 'v' + (-materialThickness) + 'h' + (cardWidth / 2) + 'v' + materialThickness + 'H' + (rowCount * (materialThickness + cardWidth) + padding) + 'V' + (rowLength + materialThickness + padding) + 'h' + materialThickness + 'v' + materialThickness + 'H' + padding + 'v' + (-materialThickness) + 'h' + materialThickness + 'Z"></path>'
|
||||
lid.innerHTML = lidPath
|
||||
console.log(lid)
|
||||
|
||||
downloadSVG([[sides, "sides.svg"], [lid, "lid.svg"], [bottom, "bottom.svg"], [front, "front.svg"], [back, "back.svg"]])
|
||||
}
|
||||
|
||||
function downloadSVG(svgsToDownload) {
|
||||
for (var i = 0; i < svgsToDownload.length; i++) {
|
||||
var dataURL = 'data:image/svg+xml,' + encodeURIComponent((new XMLSerializer).serializeToString(svgsToDownload[i][0]))
|
||||
var downloadElement = document.createElement('a')
|
||||
document.body.appendChild(downloadElement)
|
||||
downloadElement.setAttribute('href', dataURL)
|
||||
downloadElement.setAttribute('download', svgsToDownload[i][1])
|
||||
downloadElement.click()
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user