Custom D20

BaronOfDice Verified independent store

→

#svgAdjustTools{ position: absolute; left: 0; top: 0; } #svgAdjustTools span{ display: block; height: 40px; width: 40px; margin-top:10px; cursor: pointer; } .product-options{displa y: none;} .ap-options__text-container{display: none;} #color1{ display: block; margin: 15px auto; } .activeSwatch {box-shadow: 0 0 0 1px #000000, 0 0 0 3px #ffffff, 0 0 0 5px #000000 !important;} .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0;} .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider {background-color: #2196F3;} input:focus + .slider {box-shadow: 0 0 1px #2196F3;} input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider.round {border-radius: 34px;} .slider.round:before {border-radius: 50%;} .qtySlideContainer {max-width: 350px; appearance: none; -webkit-appearance: none;} .qtySlideContainer input{ border-radius: 15px; border-style: outset; border-color: #a4aeba; border-width: 3px; padding: 0px 3px; height: auto !important; appearance: none; -webkit-appearance: none; } .qtySlideContainer input::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; width: 15px; /* Set a specific slider handle width */ height: 15px; /* Slider handle height */ background: #173153; /* Green background */ cursor: pointer; /* Cursor on hover */ border-radius: 50%; } .qtySlideContainer input::-moz-range-thumb { width: 15px; /* Set a specific slider handle width */ height: 15px; /* Slider handle height */ background: #173153; /* Green background */ cursor: pointer; /* Cursor on hover */ border-radius: 50%; } .optionsPanel { width: 100%; max-width: 440px; padding: 30px 30px; border-radius: 40px; box-shadow: 0px 0px 16px rgb(128 128 128 / 30%); /* box-shadow: 0px 8px 40px rgb(128 128 128 / 15%); */ margin: auto; } datalist { display: flex; justify-content: space-between; writing-mode: horizontal-tb; width: 100%; max-width: 350px; font-size: 10px; } #d20outline{transition: opacity 1s ease-in-out;} .renders{transition: opacity 1s ease-in-out;} .product-info__block{display: "none";} .product-info.product-info--sticky {width: 100% !important; background: white;} #product-media {display: none !important;} .product-grid__container>.product-grid__content {width: 100%;} .add-to-cart {width: 100%;} .medium-up--one-half * {box-sizing: border-box;} .flex-container {display: flex; flex-direction: row;} .flex-item-left {padding: 10px; flex: 60%; text-align: center;} .flex-item-right {padding: 10px; flex: 40%; text-align: left;} .flex-btn-left {padding: 0 2px 0 0; flex: 50%; text-align: center;} .flex-btn-right { padding: 0 0 0 2px; flex: 50%; text-align: center;} @media (max-width: 900px) { /* Responsive layout - makes a one column-layout instead of two-column layout */ .flex-container {flex-direction: column;} } .hot-flex-container { display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: space-evenly; } .hot-flex-container * { margin: 3px; width: 25px; height: 25px; display: inline-block; vertical-align: middle; border-radius: 50%; box-sizing: border-box; cursor: pointer; transition: 0.3s ease-in-out; border: 1px solid #fff; box-shadow: 0px 0px 0px 2px #50505070; padding: 10px !important; } .hot-flex-item-all {background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);} .hot-flex-item-left {background-color: #000000;} .hot-flex-item-left2 {background: repeating-linear-gradient(45deg, #fbe23b, #e0a91b 10px);} .hot-flex-item-right {background-color: #FFFFFF;} .hot-flex-item-right2 {background: repeating-linear-gradient(45deg, #B87333, #f0a865 10px);} @media (max-width: 120px) { /* Responsive layout - makes a one column-layout instead of a two-column layout */ .hot-flex-item-all, .hot-flex-item-right, .hot-flex-item-right2, .hot-flex-item-left, .hot-flex-item-left2 {flex: 50%;} } @media (max-width: 60px) { .hot-flex-item-all, .hot-flex-item-right, .hot-flex-item-right2, .hot-flex-item-left, .hot-flex-item-left2 {flex: 100%;} } fieldset.jester { border: 0; padding: 0; margin: 0 0 -12px; position: relative; } .jester input { clip: rect(0,0,0,0); overflow: hidden; position: absolute; height: 1px; width: 1px; } fieldset.jester label{ font-family: var(--typeBasePrimary),var(--typeBaseFallback); font-size: var(--typeBaseSize); letter-spacing: var(--typeBaseSpacing); line-height: var(--typeBaseLineHeight); position: relative; display: inline-block; font-weight: 400; padding: 7px 15px; margin: 0 8px 12px 0; background-color: #fff; background-color: var(--colorBody); box-shadow: 0 0 0 1px #e8e8e1; box-shadow: 0 0 0 1px var(--colorBorder); border-radius: 1px; overflow: hidden; cursor: pointer; text-align: center; width: 100%; } .jester label.disabled {color: #e8e8e1; box-shadow: 0 0 0 1px #e8e8e1; cursor: default;} .jester label.disabled:after { position: absolute; content: ""; left: 50%; top: 0; bottom: 0; border-left: 2px solid; border-color: #e8e8e1; border-color: var(--colorBorder); transform: rotate(45deg); } fieldset.jester legend{ font-family: var(--typeBasePrimary),var(--typeBaseFallback); font-size: var(--typeBaseSize); letter-spacing: var(--typeBaseSpacing); line-height: var(--typeBaseLineHeight); position: relative; display: inline-block; font-weight: 400; padding: 7px 15px; margin: 0 8px 12px 0; overflow: hidden; } .jester input:checked+label{box-shadow: 0 0 0 2px var(--colorTextBody);} td label{margin-bottom: 0px !important;} td {padding: 0px !important;} .upload{ padding: 10px 12px; min-height: auto; min-width: auto; border-radius: var(--gw_main_border_radius, 5px); text-transform: unset; box-shadow: none; background: 0 0; color: var(--gw_main_color_review, var(--gw_main_color, #000)); border: 1px solid var(--gw_main_color_review, var(--gw_main_color, #000)); transition: all .15s ease-in-out; } .upload:hover{color: blue; border: 1px solid blue;} #myRange, #myRange2 { width: 100% !important; position: relative !important; margin: 0 0 20px 0 !important; } .apo-delete__file{display: none !important;} #toggleOverlay {position: absolute; right: 0; bottom: 0;} #toggleOverlay2 {position: absolute; right: 0; top: 0; cursor: pointer;} #svgTools{padding-top:15px} #lightIntensity{max-width: 35%;} .bright{margin: 0 0 -25px !important} #lightIntensity label { margin-bottom: 0 !important; font-variant-caps: all-petite-caps; margin: -5px auto 0px auto; display: block; } #toggleOverlay label,#toggleOverlay2 label{ margin-bottom: 0 !important; font-variant-caps: all-petite-caps; margin: -5px auto 5px auto; display: block; } .jesterHot {display: flex; flex-wrap: wrap;} .jesterHot > label {margin-right: 12px; cursor: pointer; margin-bottom: 10px;} .jesterHot > label input {position: fixed; opacity: 0;} .jesterHot > label span { margin: 0; width: 30px; height: 30px; display: inline-block; vertical-align: middle; border-radius: 2px; box-sizing: border-box; cursor: pointer; transition: 0.3s ease-in-out; border: 1px solid #fff; box-shadow: 0px 0px 0px 2px #50505070; } .apo-file {width: 100%; height: 100%;} .apo-file input {display:none} .apo-file > label { min-width: 220px; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: 0.4s; } .apo-file > label > span { display: inline-block; text-align: center; font-size: 14px; color: #6d7175; line-height: 1.5; margin-top: 6px; } .apo-file__action { padding: 4px 16px; background: #fde5e5; font-weight: bold; color: #f82020 !important; border-radius: 6px; box-shadow: 0px 5px 10px -8px #df7474; transition: 0.4s; } .apo-file > label:hover .apo-file__action { transform: scale(1.15); transition: 0.4s; } .apo-file__lable { width: 100%; height: 100px; border: 1px dashed #888; border-radius: 6px; cursor: pointer; } #add_to_cart_btn {width: 100%;} .shopify-payment-button__more-options,.shopify-payment-terms,.shopify-payment-button__button {display: none;} .apo-file__img{display:none;} #avp-watermark-footer{display:none !important;} .product-grid__container>.product-grid__content {width: 100%;} .add-to-cart {width: 100%;} .st0 {display: none;} .st1 {display: inline;} .st2 {fill: #FFFFFF;} .b{stroke-width: 0px; fill:yellow; transition: fill 3s ease;} #userImage {transition: filter 3s ease-in-out;} .medium-up--one-half{width: 100% !important;} .swatchy { width: 50px; height: 50px; border-radius: 50%; border: 2px rgba(0, 0, 0, 1) solid; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); margin: 5px; } .swatchy:hover {box-shadow: 0px 0px 15px orange;} .n4a {background:linear-gradient(-45deg,#fFFFFF 50%, #800080 51%);} .n4b {background:linear-gradient(-45deg,#FFA500 50%, #fFFFFF 51%);} .n4c {background:linear-gradient(-45deg,#B21E1E 50%, #C0C0C0 51%);} .n4d {background:linear-gradient(-45deg,#3B13E9 50%, #fFFFFF 51%);} .n4e {background:linear-gradient(-45deg,#4C175A 50%, #000000 51%);} .n4f {background:linear-gradient(-45deg,#F3F3F3 50%, #676767 51%);} .n4g {background:linear-gradient(-45deg,#F3F3F3 50%, #B21E1E 51%);} .n4j {background:linear-gradient(-45deg,#009DC4 50%, #fFFFFF 51%);} .n4k {background:linear-gradient(-45deg,#0080FF 50%, #0000CC 51%);} .n4l {background:linear-gradient(-45deg,#A1A1CE 50%, #676767 51%);} .n4m {background:linear-gradient(-45deg,#00FF00 50%, #F6D7B0 51%);} .n4n {background:linear-gradient(-45deg,#228B22 50%, #6D431E 51%);} .n4o {background:linear-gradient(-45deg,#E3DAC9 50%, #F6CCCC 51%);} .n4p {background:linear-gradient(-45deg,#B21E1E 50%, #000000 51%);} .n4q {background:linear-gradient(-45deg,#000000 50%, #000000 51%);} .n4r {background:linear-gradient(-45deg,#00ff22 50%, #00da62 51%);} .n4s {background:linear-gradient(-45deg,#ffffff 50%, #f2f1ed 51%);} function isMobileBrowser() { return /Mobi|Android/i.test(navigator.userAgent); } function AVISupdater(property, newColor) { var avis = document.getElementById('avpoptions-container__v2'); // Get AVIS App Options container if(avis){ var avisInput = avis.querySelectorAll('input'); for (let i = 0; i < avisInput.length; i++) { // Update the visible input field if (avisInput[i].name == property) { avisInput[i].value = newColor; avisInput[i].dispatchEvent(new Event('input')); // Trigger input event avisInput[i].dispatchEvent(new Event('change')); // Trigger change event console.log(`Updated visible input ${property} to ${newColor}`); } } // Update the hidden input field var avisHidden = document.querySelector('.avis-input-hiddens'); var avisInputHidden = avisHidden.querySelectorAll('input'); for (let i = 0; i < avisInputHidden.length; i++) { if (avisInputHidden[i].name == `properties[${property}]`) { avisInputHidden[i].value = newColor; avisInputHidden[i].dispatchEvent(new Event('input')); // Trigger input event avisInputHidden[i].dispatchEvent(new Event('change')); // Trigger change event console.log(`Updated hidden input properties[${property}] to ${newColor}`); } } } } document.addEventListener('DOMContentLoaded', function () { if(isMobileBrowser()){ document.getElementById('sideOverlays').style.filter = "url(#userImgFilter)" } var colorPicker = document.getElementById('color1') colorPicker.addEventListener("change", watchInlay, false); var brightnessPicker = document.getElementById('myRange2') brightnessPicker.addEventListener("change", onChangeBrightness, false); // Get the element to which the filter is applied const userImg = document.getElementById('userImage'); // Default Clicks if(document.querySelectorAll(".option-selector")[0]){ document.querySelectorAll(".option-selector")[0].children[1].children[0].click() document.querySelectorAll(".option-selector")[1].children[1].children[0].click() } document.querySelector('.n4a').click() waitForIt() // Function to reapply the filter const reapplyFilter = () => {}; // Add an event listener for the transition end event userImg.addEventListener('transitionend', reapplyFilter); }); async function waitForIt() { const myTimeout = setTimeout(timeToMove, 1000); } function timeToMove() { // Move AVIS var itemToMove1 = document.getElementById('avpoptions-container__v2'); var placeToMove = document.getElementById('moveUploadHere'); var placeToMovePrice = document.getElementById('moveUploadHerePrice'); // Move PRICE var itemToMove2 = document.querySelector('.product-price'); // Move ADD TO CART var itemToMove3; document.querySelectorAll('.product-info__block').forEach(item => { if (item.innerText.includes('ADD TO CART')) { itemToMove3 = item } }) console.log( "\nItem1", itemToMove1, "\nItem2", itemToMove2, "\nItem3",itemToMove3, ) if(itemToMove1 && itemToMove2 && itemToMove3){ placeToMove.appendChild(itemToMove1); placeToMovePrice.appendChild(itemToMove3); placeToMovePrice.appendChild(itemToMove2); } } async function moveTheAvis(){ // Move AVIS var itemToMove = document.getElementById('avpoptions-container__v2'); var placeToMove = document.getElementById('moveUploadHere'); var placeToMovePrice = document.getElementById('moveUploadHerePrice'); placeToMove.appendChild(itemToMove); } function jesterColor(hex, target, gradient) { const rgb = hexToRgb(hex); if (rgb.length !== 3) { alert('Invalid format!'); return; } const color = new Color(rgb[0], rgb[1], rgb[2]); const solver = new Solver(color); const result = solver.solve(); var filterString = result.filter; filterString = filterString.substring(7, filterString.length - 1); // Apply filter to the image & preview if (target === 'userImage') { // Add Inset Shadow var thisAttr = document.getElementById("dropColor").attributes; for (let i = 0; i < thisAttr.length; i++) { if (thisAttr[i].name === 'flood-color') { thisAttr[i].value = ColorLuminance(hex, -0.4); } if (thisAttr[i].name === 'dropColor') { thisAttr[i].value = ColorLuminance(hex, -0.4); } } safariRecolor(hex, 'safariTest', 'None'); safariRecolor(hex, 'userImgFilter', 'None'); // Apply the filter with transition const userImage = document.getElementById('userImage'); userImage.style.filter = filterString; } } function watchInlay(event) { //Change Pip Inlay var newColor = event.target.value; AVISupdater('Inlay Color', newColor) var cInput = document.getElementById('color1'); cInput.style.background = ''; adjustNumbersColors(newColor) } function hotWatchPick() { var newColor = document.getElementById('color2').value; AVISupdater('Inlay Color', newColor) var cInput = document.getElementById('color1'); cInput.value = newColor; cInput.style.background = ''; adjustNumbersColors(newColor) } function hotWatchInlay(btnColor, fauxName) { //Change Pip Inlay var newColor = btnColor; AVISupdater('Inlay Color', fauxName) var cInput = document.getElementById('color1'); if (fauxName == 'Black') { cInput.value = newColor; cInput.style.background = ''; } else if (fauxName == 'White') { cInput.value = newColor; cInput.style.background = ''; } else if (fauxName == 'Gold') { cInput.value = newColor; cInput.style.background = "repeating-linear-gradient(45deg, #fbe23b, #e0a91b 10px)"; } else if (fauxName == 'Copper') { cInput.value = newColor; cInput.style.background = "repeating-linear-gradient(45deg, #B87333, #f0a865 10px)"; } adjustNumbersColors(newColor) } function onChangeBrightness(event){ var newBrightness = event.target.value; var renders = document.getElementById('d20_renders').children; for(i=0;i { return r + r + g + g + b + b; }); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? [ parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16), ] : null; } class Color { constructor(r, g, b) { this.set(r, g, b); } toString() { return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round(this.b)})`; } set(r, g, b) { this.r = this.clamp(r); this.g = this.clamp(g); this.b = this.clamp(b); } hueRotate(angle = 0) { angle = angle / 180 * Math.PI; const sin = Math.sin(angle); const cos = Math.cos(angle); this.multiply([0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928, 0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.140, 0.072 - cos * 0.072 - sin * 0.283, 0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072,]); } grayscale(value = 1) { this.multiply([0.2126 + 0.7874 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 - 0.0722 * (1 - value), 0.2126 - 0.2126 * (1 - value), 0.7152 + 0.2848 * (1 - value), 0.0722 - 0.0722 * (1 - value), 0.2126 - 0.2126 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 + 0.9278 * (1 - value),]); } sepia(value = 1) { this.multiply([0.393 + 0.607 * (1 - value), 0.769 - 0.769 * (1 - value), 0.189 - 0.189 * (1 - value), 0.349 - 0.349 * (1 - value), 0.686 + 0.314 * (1 - value), 0.168 - 0.168 * (1 - value), 0.272 - 0.272 * (1 - value), 0.534 - 0.534 * (1 - value), 0.131 + 0.869 * (1 - value),]); } saturate(value = 1) { this.multiply([0.213 + 0.787 * value, 0.715 - 0.715 * value, 0.072 - 0.072 * value, 0.213 - 0.213 * value, 0.715 + 0.285 * value, 0.072 - 0.072 * value, 0.213 - 0.213 * value, 0.715 - 0.715 * value, 0.072 + 0.928 * value,]); } multiply(matrix) { const newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]); const newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]); const newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]); this.r = newR; this.g = newG; this.b = newB; } brightness(value = 1) { this.linear(value); } contrast(value = 1) { this.linear(value, -(0.5 * value) + 0.5); } linear(slope = 1, intercept = 0) { this.r = this.clamp(this.r * slope + intercept * 255); this.g = this.clamp(this.g * slope + intercept * 255); this.b = this.clamp(this.b * slope + intercept * 255); } invert(value = 1) { this.r = this.clamp((value + this.r / 255 * (1 - 2 * value)) * 255); this.g = this.clamp((value + this.g / 255 * (1 - 2 * value)) * 255); this.b = this.clamp((value + this.b / 255 * (1 - 2 * value)) * 255); } hsl() { const r = this.r / 255; const g = this.g / 255; const b = this.b / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: h * 100, s: s * 100, l: l * 100, }; } clamp(value) { if (value > 255) { value = 255; } else if (value < 0) { value = 0; } return value; } } class Solver { constructor(target, baseColor) { this.target = target; this.targetHSL = target.hsl(); this.reusedColor = new Color(0, 0, 0); } solve() { const result = this.solveNarrow(this.solveWide()); return { values: result.values, loss: result.loss, filter: this.css(result.values), }; } solveWide() { const A = 5; const c = 15; const a = [60, 180, 18000, 600, 1.2, 1.2]; let best = { loss: Infinity }; for (let i = 0; best.loss > 25 && i < 3; i++) { const initial = [50, 20, 3750, 50, 100, 100]; const result = this.spsa(A, a, c, initial, 1000); if (result.loss < best.loss) { best = result; } } return best; } solveNarrow(wide) { const A = wide.loss; const c = 2; const A1 = A + 1; const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1]; return this.spsa(A, a, c, wide.values, 500); } spsa(A, a, c, values, iters) { const alpha = 1; const gamma = 0.16666666666666666; let best = null; let bestLoss = Infinity; const deltas = new Array(6); const highArgs = new Array(6); const lowArgs = new Array(6); for (let k = 0; k < iters; k++) { const ck = c / Math.pow(k + 1, gamma); for (let i = 0; i < 6; i++) { deltas[i] = Math.random() > 0.5 ? 1 : -1; highArgs[i] = values[i] + ck * deltas[i]; lowArgs[i] = values[i] - ck * deltas[i]; } const lossDiff = this.loss(highArgs) - this.loss(lowArgs); for (let i = 0; i < 6; i++) { const g = lossDiff / (2 * ck) * deltas[i]; const ak = a[i] / Math.pow(A + k + 1, alpha); values[i] = fix(values[i] - ak * g, i); } const loss = this.loss(values); if (loss < bestLoss) { best = values.slice(0); bestLoss = loss; } } return { values: best, loss: bestLoss }; function fix(value, idx) { let max = 100; if (idx === 2 /* saturate */) { max = 7500; } else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) { max = 200; } if (idx === 3 /* hue-rotate */) { if (value > max) { value %= max; } else if (value < 0) { value = max + value % max; } } else if (value < 0) { value = 0; } else if (value > max) { value = max; } return value; } } loss(filters) { const color = this.reusedColor; color.set(0, 0, 0); color.invert(filters[0] / 100); color.sepia(filters[1] / 100); color.saturate(filters[2] / 100); color.hueRotate(filters[3] * 3.6); color.brightness(filters[4] / 100); color.contrast(filters[5] / 100); const colorHSL = color.hsl(); return (Math.abs(color.r - this.target.r) + Math.abs(color.g - this.target.g) + Math.abs(color.b - this.target.b) + Math.abs(colorHSL.h - this.targetHSL.h) + Math.abs(colorHSL.s - this.targetHSL.s) + Math.abs(colorHSL.l - this.targetHSL.l)); } css(filters) { function fmt(idx, multiplier = 1) { return Math.round(filters[idx] * multiplier); } return `filter: invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%);`; } } //Function to convert SVG Filter for Mobile Safari function safariRecolor(hex,target,gradient){ //alert(`SafariRecolor, ${hex} , ${target} , ${gradient}.`); console.log(gradient + " is grad"); var x = document.getElementById(target); if(gradient != 'None'){ if(gradient=='Gold'){ var rgb1 = [251,226,59]; var rgb2 = [224,169,27]; }else if(gradient=='Copper'){ var rgb1 = [184,115,51]; var rgb2 = [0,0,0]; } for(i=0;i 1){ x.children[i].children[0].attributes[1].value=rgb1[0]/255 + " " +rgb2[0]/255 ; //R x.children[i].children[1].attributes[1].value=rgb1[1]/255 + " " +rgb2[1]/255 ; //G x.children[i].children[2].attributes[1].value=rgb1[2]/255 + " " +rgb2[2]/255 ; //B } } }else{ var rgb1 = hex2rgb(hex); var rgb2 = hex2rgb(ColorLuminance(hex, -0.4)); for(i=0;i 1){ x.children[i].children[0].attributes[1].value=rgb1[0]/255 + " " +rgb2[0]/255 ; //R x.children[i].children[1].attributes[1].value=rgb1[1]/255 + " " +rgb2[1]/255 ; //G x.children[i].children[2].attributes[1].value=rgb1[2]/255 + " " +rgb2[2]/255 ; //B } } } } //Function to convert HEX to RGB function hex2rgb(x){ if(x.length == 7){ x = x.substring(1,7); } if(x.length != 6){ throw "Only six-digit hex colors are allowed."; } var aRgbHex = x.match(/.{1,2}/g); var aRgb = [ parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16) ]; return aRgb; } Light Intensity Toggle Outline async function thisIs(){ const myTimeout = setTimeout(thatIs, 1000); } function thatIs() { var AVISimage = document.querySelector('.ap-options__file').querySelector('a').href; document.getElementById('userImage').href.baseVal= AVISimage; } window.onload = (event) => { console.log('The page has fully loaded'); //Event Listener for AVIS Upload if(document.querySelector('.apo-file')){ document.querySelector('.apo-file').addEventListener("change", thisIs); } jesterColor('#ffff00','userImage'); document.getElementById('myRange').addEventListener('change', changeQuantity); } function nudgeImage(direction) { var element = document.getElementById('userImage'); if (!element) { console.error('Element not found'); return; } var transform = element.style.transform; // Extract the translate values var translateMatch = /translate\(([^,]+),\s*([^)]+)\)/.exec(transform); if (!translateMatch) { console.error('Invalid transform format'); return; } var translateX = translateMatch[1]; var translateY = parseFloat(translateMatch[2]); // Adjust the Y value based on the direction if (direction === 'up') { translateY -= 10; // Adjust by 10 pixels up } else if (direction === 'down') { translateY += 10; // Adjust by 10 pixels down } else { console.error('Invalid direction. Use "up" or "down".'); return; } // Update the transform style element.style.transform = `translate(${translateX}, ${translateY}px)`; } function zoomImg(scaleFactor) { var userImage = document.getElementById('userImage'); // Get the current width and height var width = parseFloat(userImage.getAttribute('width')); var height = parseFloat(userImage.getAttribute('height')); // Calculate the new width and height var newWidth = width * scaleFactor; var newHeight = height * scaleFactor; // Get the current transform property var transform = userImage.style.transform; // Extract the translate values var translateValues = transform.match(/translate\(([^)]+)\)/); var translateX = 0; var translateY = 0; if (translateValues) { var translateParts = translateValues[1].split(','); translateX = parseFloat(translateParts[0].trim()); translateY = parseFloat(translateParts[1].trim()); } // Adjust the translate values to keep the image centered var deltaX = (newWidth - width) / 2; var deltaY = (newHeight - height) / 2; translateX -= deltaX; translateY -= deltaY; // Set the new width and height userImage.setAttribute('width', newWidth); userImage.setAttribute('height', newHeight); // Update the transform property with the new translate values userImage.style.transform = `translate(${translateX}px, ${translateY}px)`; } function changeQuantity() { var slider = document.getElementById("myRange"); var output = document.getElementById("qtyLabel"); var myQty = ['100', '200', '300', '400', '500']; output.innerHTML = myQty[slider.value - 1]; var varQty; //0 = 100, 2 = 200; 4 = 300; 6 = 400; 8 = 500 switch (myQty[slider.value - 1]) { case '100':varQty = 0;break; case '200':varQty = 2;break; case '300':varQty = 4;break; case '400':varQty = 6;break; case '500':varQty = 8;break; } document.querySelectorAll(".option-selector")[0].children[1].children[varQty].click() } function diceRecolor(selectedColor){ document.querySelector('#Layer_4').style.fill = selectedColor; } function changeRender(event,src) { document.querySelectorAll('.renders').forEach((item) => { item.style.opacity = 0 }) document.querySelectorAll('.activeSwatch').forEach( (btn) => {btn.classList.remove('activeSwatch')}) event.target.classList.add('activeSwatch'); if(src){ var tgt = src; }else{ var tgt = event.srcElement.classList[1]; } var varNumber; switch (tgt) { case 'n4a':varNumber = 0;break; case 'n4b':varNumber = 2;break; case 'n4c':varNumber = 4;break; case 'n4d':varNumber = 6;break; case 'n4e':varNumber = 8;break; case 'n4f':varNumber = 10;break; case 'n4g':varNumber = 12;break; case 'n4j':varNumber = 14;break; case 'n4k':varNumber = 16;break; case 'n4l':varNumber = 18;break; case 'n4m':varNumber = 20;break; case 'n4n':varNumber = 22;break; case 'n4o':varNumber = 24;break; case 'n4p':varNumber = 26;break; case 'n4q': varNumber = 28; break; case 'n4r': varNumber = 30; break; case 'n4s': varNumber = 32; break; } if (document.querySelectorAll(".option-selector")[0]) { document.querySelectorAll(".option-selector")[1].children[1].children[varNumber].click() } document.getElementById(`d20_${tgt}_no-shade`).style.opacity = 1; var brightness = document.getElementById('myRange2').value; document.getElementById(`d20_${tgt}_shade`).style.opacity = brightness * 0.1; } function toggleOutline(){ if(document.getElementById('jesterLimits').checked){ document.getElementById('d20outline').style.opacity = 1 }else{ document.getElementById('d20outline').style.opacity = 0; } } 1. Pick the Inlay Color 2. Pick the Dice Color 3. Upload your Design Please upload an SVG or Black and White PNG file without a background. A great resource is https://picsvg.com/ to get an SVG version of your image! 4. Pick Your Quantity: 100 Show more