<div id="natpunkviewer" style="width: 300px; height: 300px;transform-origin: top left; transform: translateX(-250px);"></div>
<input id="blk" type="number" style="display:none" />
<script id="preview" mint="MINT_INSCRIPTION_ID">
// Retrieve render area
const root = document.getElementById('natpunkviewer')
root.parentElement.style.width = '100%'
root.parentElement.style.height = '100%'
root.parentElement.style.padding = '0px'
root.parentElement.style.margin = '0px'
const orgWidth = 540
const orgHeight = 540
let scaleW = 1
let scaleH = 1
let blockNumber = '0'
// Define the color map with the given colors
const colorMap = {
1: "#6D2BF8",
2: "#B66DFF",
3: "#FFD700",
4: "#007BFF",
5: "#8B4513",
6: "#00A86B",
7: "#FF69B4",
8: "#FFA500",
9: "#696969",
0: "#0F52BA"
}
// Define the color map with the given colors
const colorMap2 = {
1: "#9B30FF",
2: "#DBB2FF",
3: "#E6BEBA",
4: "#1E90FF",
5: "#D3D3D3",
6: "#FFFFFF",
7: "#98FF98",
8: "#708090",
9: '#C0C0C0',
0: "#0047AB",
}
// Define the color map with the given colors
const colorMap3 = {
1: "#DC143C",
2: "#4F42B5",
3: "#FFD700",
4: "#FFC1CC",
5: "#F28500",
6: "#FF2400",
7: "#228B22",
8: "#00FFFF",
9: "#8A2BE2",
0: "#7DF9FF"
}
// Define the color map with the given colors
const colorMap4 = {
1: "#6D2BF8",
2: "#B66DFF",
3: "#FFD700",
4: "#007BFF",
5: "#8B4513",
6: "#00A86B",
7: "#FF69B4",
8: "#FFA500",
9: "#696969",
0: "#0F52BA"
}
// Define the color map with the given colors
const colorMap5 = {
1: "#FFFFFF",
2: "#FF16B4",
3: "#00C0FF",
4: "#00FF00",
5: "#FFFDD0",
6: '#FF7F00',
7: "#4B0082",
8: "#FF4500",
9: "#C0C0C0",
0: "#E5E4E2",
}
// Resize window
window.addEventListener('resize', resize, true)
resize()
// Retrieve content inscription id
let mintText = document.getElementById('preview').getAttribute('mint')
// Check no mint provided
if(mintText.includes('MINT_INSCRIPTION_ID')) {
let input = document.getElementById('blk')
input.style.display = 'block'
input.style.position = 'absolute'
input.style.fontSize = '20px'
input.style.margin = '20px'
input.style.top = '0'
input.value = blockNumber
input.addEventListener('input',(event) => {
blockNumber = input.value
update()
})
update()
}
// Mint was provided
else {
const request = new XMLHttpRequest()
try {
request.open('GET', '/content/' + mintText)
request.responseType = 'text'
request.addEventListener('load', () => initialize(request.response))
request.addEventListener('error', () => console.error('XHR error'))
request.send()
} catch (error) {
console.error(`XHR error ${request.status}`)
}
}
function initialize(result) {
if(result) {
data = JSON.parse(result)
blockNumber = data.blk
}
update()
}
function resize(event) {
root.width = window.innerWidth
root.height = window.innerHeight
scaleW = root.width / orgWidth
scaleH = root.height / orgHeight
offsetX = 0
offsetY = 0
if(scaleH < scaleW) {
scaleW = scaleH
offsetX = (root.width - orgWidth * scaleW) / 2
}
else {
scaleH = scaleW
offsetY = (root.height - orgHeight * scaleH) / 2
}
root.style.zoom = scaleW / 2
update('resize')
}
function update() {
generateHtmlBasedOnBlockNumber(blockNumber)
}
function generateSvgForDigits(blockNumber) {
const originalString = blockNumber.toString()
const digits = originalString.padStart(7, '0').split('').map(Number).reverse()
let svgs = []
// Head
if (originalString.length >= 1) {
const colorForFirstDigit = colorMap[digits[0]]
svgs.push(`
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="538.91" y="398.33" width="445.9" height="432.48" fill="${colorForFirstDigit}"/>
</svg>
</div>
`)
}
//Body
if (originalString.length >= 2) {
const colorForSecondDigit = colorMap2[digits[1]] || "transparent"
svgs.push(`
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ah" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="540.98" y="890.68" width="189.92" height="189.92" fill="${colorForSecondDigit}"/>
</svg>
</div>
`)
}
// Eye Mask
if (originalString.length >= 3) {
const colorForThirdDigit = colorMap4[digits[2]] || "transparent";
// Check if the color for the Eye Mask is the same as the Head's color
if (colorForThirdDigit !== colorMap[digits[0]]) {
svgs.push(`
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="aa" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="538.9" y="465.94" width="445.91" height="89.8" fill="${colorForThirdDigit}"/>
</svg>
</div>
`)
}
}
//Punk Hair
if (originalString.length >= 4) {
const colorForFourthDigit = colorMap5[digits[3]] || "transparent"
svgs.push(`
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="z" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<defs>
<linearGradient id="rainlipPiercingGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#141af6"/>
<stop offset="25%" stop-color="#e7d192"/>
<stop offset="50%" stop-color="#35c14f2"/>
<stop offset="75%" stop-color="#ca2b1d"/>
<stop offset="100%" stop-color="#0e4e03"/>
</linearGradient>
</defs>
<path d="M538.9,568.64v-167.9h159.3l62.62,75.35,71.56-77.07,16.02-34.04c1.2-2.54-1.28-5.26-3.92-4.3l-100.17,36.28h-24.08l-38.76-101.99c-1-2.62-4.68-2.71-5.79-.13l-44.21,102.46h-22.02l-104.55-48.57c-2.6-1.21-5.33,1.4-4.25,4.05l34.13,83.75v36.47l-106.03,38.67c-2.64,.96-2.79,4.64-.24,5.82l110.41,51.16Z" fill="${colorForFourthDigit}"/>
<path d="M538.91,611.65v66.06l-27.03,11.49c-3.08,1.31-6.18-1.82-4.84-4.89l31.87-72.66Z" fill="${colorForFourthDigit}"/>
</svg>
</div>
`)
}
//Left Ear
if (originalString.length >= 3) {
const colorForFirstDigit = colorMap[digits[0]]
svgs.push(`
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ag" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="515.69" y="547.12" width="27.22" height="55.7" fill="${colorForFirstDigit}"/>
</svg>
</div>
`)
}
// Star Shirt Logo
if (originalString.length >= 6) {
const colorForSixthDigit = colorMap3[digits[5]] || "transparent"
svgs.push(`
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="af" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<polygon points="686.76 938.71 673.86 970.5 704.52 985.89 672.93 999.25 683.73 1031.81 651.94 1018.91 636.55 1049.57 623.19 1017.98 590.63 1028.78 603.52 996.99 572.86 981.6 604.46 968.24 593.66 935.68 625.45 948.57 640.83 917.91 654.2 949.51 686.76 938.71" fill="${colorForSixthDigit}"/>
</svg>
</div>
`)
}
return svgs.join('')
}
//eye direction
function getLook(number) {
const numberStr = number.toString()
const lastFourDigits = parseInt(numberStr.substring(numberStr.length - 4))
if (lastFourDigits < 4800) {
return "look_right"
} else if (lastFourDigits >= 4800 && lastFourDigits <= 5200) {
return "look_crossed"
} else {
return "look_left"
}
}
function generateLookSvg(lookDir) {
let lookHtml = ""
let eyeColor = '#ebebe6';
const isGreenEyes = cp6(blockNumber);
const isRedEyes = ce7(blockNumber);
if (isRedEyes) {
eyeColor = '#f5908b';
}
if (isGreenEyes) {
eyeColor = '#339f2a';
}
if (lookDir === "look_left") {
lookHtml = `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="t" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="584.59" y="497.68" width="80.77" height="46.96" fill="#150a38"/>
<rect x="665.36" y="497.68" width="77.64" height="46.96" transform="translate(1408.36 1042.32) rotate(180)" fill="${eyeColor}"/>
<rect x="784.49" y="497.68" width="80.77" height="46.96" fill="#150a38"/><rect x="865.25" y="497.68" width="77.64" height="46.96" transform="translate(1808.15 1042.32) rotate(180)" fill="${eyeColor}"/>
</svg>
</div>
`
} else if (lookDir === "look_right") {
lookHtml = `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="p" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="584.59" y="497.68" width="80.77" height="46.96" fill="${eyeColor}"/>
<rect x="665.36" y="497.68" width="77.64" height="46.96" transform="translate(1408.36 1042.32) rotate(180)" fill="#150a38"/>
<rect x="784.49" y="497.68" width="80.77" height="46.96" fill="${eyeColor}"/>
<rect x="865.25" y="497.68" width="77.64" height="46.96" transform="translate(1808.15 1042.32) rotate(180)" fill="#150a38"/>
</svg>
</div>`
} else if (lookDir === "look_crossed") {
lookHtml = `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="s" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="584.59" y="497.68" width="80.77" height="46.96" fill="${eyeColor}"/>
<rect x="665.36" y="497.68" width="77.64" height="46.96" transform="translate(1408.36 1042.32) rotate(180)" fill="#150a38"/>
<rect x="784.49" y="497.68" width="80.77" height="46.96" fill="#150a38"/><rect x="865.25" y="497.68" width="77.64" height="46.96" transform="translate(1808.15 1042.32) rotate(180)" fill="${eyeColor}"/>
</svg>
</div>`
}
return lookHtml
}
function c420(number) {
const numberStr = number.toString()
return numberStr.includes('420')
}
function displayJoint() {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="k" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="873.08" y="754.43" width="157.15" height="23.48" fill="#e8fffd"/>
<rect x="1030.23" y="754.43" width="18.32" height="23.48" transform="translate(2078.78 1532.34) rotate(180)" fill="#0a4600"/>
<rect x="1023.78" y="642.33" width="24.77" height="87.59" transform="translate(2072.33 1372.24) rotate(180)" fill="#0a4600"/>
</svg>
</div>`
}
function c4a0(number) {
const numberStr = number.toString()
return numberStr.includes('4') && numberStr.includes('0')
}
function displaycig(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="x" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="873.08" y="754.43" width="157.15" height="23.48" fill="#fff"/><rect x="1030.23" y="754.43" width="18.32" height="23.48" transform="translate(2078.78 1532.34) rotate(180)" fill="#dd0f02"/>
<rect x="1023.78" y="642.33" width="24.77" height="87.59" transform="translate(2072.33 1372.24) rotate(180)" fill="#403d49"/>
</svg>
</div>`
}
function c0(number) {
const numberStr = number.toString()
return numberStr.includes('0')
}
function displayEarringDown(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ak" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="508.5" y="590.92" width="23.53" height="23.53" fill="#4af0ee"/>
</svg>
</div>`
}
function c00(number) {
const numberStr = number.toString()
return numberStr.includes('00')
}
function displayEarringUp(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="h" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="509.07" y="550.75" width="22.71" height="22.71" fill="#48f4ef"/>
</svg>
</div>`
}
function c000(number) {
const numberStr = number.toString()
return numberStr.includes('000')
}
function displayBlueEarringsUpDown(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ak" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="508.5" y="590.92" width="23.53" height="23.53" fill="${colorMap3[8]}"/>
</svg>
</div>
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="h" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="509.07" y="550.75" width="22.71" height="22.71" fill="${colorMap3[8]}"/>
</svg>
</div>
`
}
function c0000(number) {
const numberStr = number.toString()
return numberStr.includes('0000')
}
function displayOrangeEarringsUpDown(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ak" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="508.5" y="590.92" width="23.53" height="23.53" fill="#48f4ef"/>
</svg>
</div>
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="h" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="509.07" y="550.75" width="22.71" height="22.71" fill="#48f4ef"/>
</svg>
</div>
`
}
function c00000(number) {
const numberStr = number.toString()
return numberStr.includes('00000')
}
function displayWhiteEarringsUpDown(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ak" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="508.5" y="590.92" width="23.53" height="23.53" fill="${colorMap2[6]}"/>
</svg>
</div>
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="h" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="509.07" y="550.75" width="22.71" height="22.71" fill="${colorMap2[6]}"/>
</svg>
</div>
`
}
function c11(number) {
const numberStr = number.toString()
return numberStr.includes('11')
}
function displayBlueLipPiercing(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="738.3" y="766.17" width="23.05" height="23.05" fill="#48f4ef"/>
</svg>
</div>`
}
function c111(number) {
const numberStr = number.toString()
return numberStr.includes('111')
}
function displayBlackLipPiercing(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="738.3" y="766.17" width="23.05" height="23.05" fill="#000000"/>
</svg>
</div>`
}
function c1111(number) {
const numberStr = number.toString()
return numberStr.includes('1111')
}
function displayOrangeLipPiercing(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="738.3" y="766.17" width="23.05" height="23.05" fill="${colorMap3[5]}"/>
</svg>
</div>`
}
function c11111(number) {
const numberStr = number.toString()
return numberStr.includes('11111')
}
function displayVioletLipPiercing(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="738.3" y="766.17" width="23.05" height="23.05" fill="${colorMap3[9]}"/>
</svg>
</div>`
}
function c8a8(number) {
const numberStr = number.toString()
const count = (numberStr.match(/8/g) || []).length
return count >= 2 ? "c8a8" : null
}
function displayEyePiercingR(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="g" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="921.24" y="454.07" width="23.74" height="22.45" fill="#4d529e"/>
</svg>
</div>`
}
function c88(number) {
const numberStr = number.toString()
return numberStr.includes('88')
}
function displayEyePiercingL(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="g" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="571.94" y="454.07" width="23.74" height="22.45" fill="#4d529e"/>
</svg>
</div>`
}
function c888(number) {
const numberStr = number.toString()
return numberStr.includes('888')
}
function c8888(number) {
const numberStr = number.toString()
return numberStr.includes('8888')
}
function displayDoubleEyePiercingR(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="aj" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="905.46" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
<rect x="939.66" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
</svg>
</div>`
}
function c88888(number) {
const numberStr = number.toString()
return numberStr.includes('88888')
}
function displayDoubleDoubleEyePiercing(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="aj" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="905.46" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
<rect x="939.66" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
</svg>
</div>
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="aj" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="584.33" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
<rect x="550.13" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
</svg>
</div>`
}
function cp6(number) {
const numberStr = number.toString()
// Loop through the number string
for (let i = 0; i <= numberStr.length - 6; i++) { // Ensure there are at least 6 characters to check
const substring = numberStr.substring(i, i + 6) // Get the substring of 6 characters
// Check if the substring is a palindrome
if (substring === substring.split('').reverse().join('')) {
return "cp6"
}
}
return null
}
function c9a9(number) {
const numberStr = number.toString()
const count = (numberStr.match(/9/g) || []).length
return count >= 2 ? "c9a9" : null
}
function displayPaintCan(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ad" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="751.03" y="930.93" width="54.45" height="70.45" fill="#2db900"/>
<polygon points="752.44 921.38 804.83 921.38 804.83 919.58 785.6 909 769.86 909 752.44 919.19 752.44 921.38" fill="#2db900"/>
<path d="M783.45,906.81h-10.41c-.55,0-1-.45-1-1v-11.96c0-.55,.45-1,1-1h10.41c.55,0,1,.45,1,1s-.45,1-1,1h-9.41v9.96h8.41v-4.98c0-.55,.45-1,1-1s1,.45,1,1v5.98c0,.55-.45,1-1,1Z" fill="#2db900"/>
<path d="M785.35,898.17c-.37,0-.72-.2-.89-.55-.25-.49-.05-1.09,.44-1.34l15.74-7.96c.49-.25,1.09-.05,1.34,.44s.05,1.09-.44,1.34l-15.74,7.96c-.14,.07-.3,.11-.45,.11Z" fill="#2db900"/>
<path d="M804.18,899.8h-15.27c-.55,0-1-.45-1-1s.45-1,1-1h15.27c.55,0,1,.45,1,1s-.45,1-1,1Z" fill="#2db900"/>
<path d="M799.8,908.1c-.13,0-.26-.02-.38-.08l-13.38-5.55c-.51-.21-.75-.8-.54-1.31s.8-.75,1.31-.54l13.38,5.55c.51,.21,.75,.8,.54,1.31-.16,.38-.53,.62-.92,.62Z" fill="#2db900"/>
</svg>
</div>`
}
function c99(number) {
const numberStr = number.toString()
return numberStr.includes('99')
}
function displayGumPaintCan(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ad" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="751.03" y="930.93" width="54.45" height="70.45" fill="${colorMap3[4]}"/>
<polygon points="752.44 921.38 804.83 921.38 804.83 919.58 785.6 909 769.86 909 752.44 919.19 752.44 921.38" fill="${colorMap3[4]}"/>
<path d="M783.45,906.81h-10.41c-.55,0-1-.45-1-1v-11.96c0-.55,.45-1,1-1h10.41c.55,0,1,.45,1,1s-.45,1-1,1h-9.41v9.96h8.41v-4.98c0-.55,.45-1,1-1s1,.45,1,1v5.98c0,.55-.45,1-1,1Z" fill="${colorMap3[4]}"/>
<path d="M785.35,898.17c-.37,0-.72-.2-.89-.55-.25-.49-.05-1.09,.44-1.34l15.74-7.96c.49-.25,1.09-.05,1.34,.44s.05,1.09-.44,1.34l-15.74,7.96c-.14,.07-.3,.11-.45,.11Z" fill="${colorMap3[4]}"/>
<path d="M804.18,899.8h-15.27c-.55,0-1-.45-1-1s.45-1,1-1h15.27c.55,0,1,.45,1,1s-.45,1-1,1Z" fill="${colorMap3[4]}"/>
<path d="M799.8,908.1c-.13,0-.26-.02-.38-.08l-13.38-5.55c-.51-.21-.75-.8-.54-1.31s.8-.75,1.31-.54l13.38,5.55c.51,.21,.75,.8,.54,1.31-.16,.38-.53,.62-.92,.62Z" fill="${colorMap3[4]}"/>
</svg>
</div>`
}
function c999(number) {
const numberStr = number.toString()
return numberStr.includes('999')
}
function displayOrangePaintCan(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ad" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="751.03" y="930.93" width="54.45" height="70.45" fill="${colorMap3[5]}"/>
<polygon points="752.44 921.38 804.83 921.38 804.83 919.58 785.6 909 769.86 909 752.44 919.19 752.44 921.38" fill="${colorMap3[5]}"/>
<path d="M783.45,906.81h-10.41c-.55,0-1-.45-1-1v-11.96c0-.55,.45-1,1-1h10.41c.55,0,1,.45,1,1s-.45,1-1,1h-9.41v9.96h8.41v-4.98c0-.55,.45-1,1-1s1,.45,1,1v5.98c0,.55-.45,1-1,1Z" fill="${colorMap3[5]}"/>
<path d="M785.35,898.17c-.37,0-.72-.2-.89-.55-.25-.49-.05-1.09,.44-1.34l15.74-7.96c.49-.25,1.09-.05,1.34,.44s.05,1.09-.44,1.34l-15.74,7.96c-.14,.07-.3,.11-.45,.11Z" fill="${colorMap3[5]}"/>
<path d="M804.18,899.8h-15.27c-.55,0-1-.45-1-1s.45-1,1-1h15.27c.55,0,1,.45,1,1s-.45,1-1,1Z" fill="${colorMap3[5]}"/>
<path d="M799.8,908.1c-.13,0-.26-.02-.38-.08l-13.38-5.55c-.51-.21-.75-.8-.54-1.31s.8-.75,1.31-.54l13.38,5.55c.51,.21,.75,.8,.54,1.31-.16,.38-.53,.62-.92,.62Z" fill="${colorMap3[5]}"/>
</svg>
</div>`
}
function c9999(number) {
const numberStr = number.toString()
return numberStr.includes('9999')
}
function displayVioletPaintCan(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ad" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="751.03" y="930.93" width="54.45" height="70.45" fill="${colorMap3[9]}"/>
<polygon points="752.44 921.38 804.83 921.38 804.83 919.58 785.6 909 769.86 909 752.44 919.19 752.44 921.38" fill="${colorMap3[9]}"/>
<path d="M783.45,906.81h-10.41c-.55,0-1-.45-1-1v-11.96c0-.55,.45-1,1-1h10.41c.55,0,1,.45,1,1s-.45,1-1,1h-9.41v9.96h8.41v-4.98c0-.55,.45-1,1-1s1,.45,1,1v5.98c0,.55-.45,1-1,1Z" fill="${colorMap3[9]}"/>
<path d="M785.35,898.17c-.37,0-.72-.2-.89-.55-.25-.49-.05-1.09,.44-1.34l15.74-7.96c.49-.25,1.09-.05,1.34,.44s.05,1.09-.44,1.34l-15.74,7.96c-.14,.07-.3,.11-.45,.11Z" fill="${colorMap3[9]}"/>
<path d="M804.18,899.8h-15.27c-.55,0-1-.45-1-1s.45-1,1-1h15.27c.55,0,1,.45,1,1s-.45,1-1,1Z" fill="${colorMap3[9]}"/>
<path d="M799.8,908.1c-.13,0-.26-.02-.38-.08l-13.38-5.55c-.51-.21-.75-.8-.54-1.31s.8-.75,1.31-.54l13.38,5.55c.51,.21,.75,.8,.54,1.31-.16,.38-.53,.62-.92,.62Z" fill="${colorMap3[9]}"/>
</svg>
</div>`
}
function cs5(number) {
const numberStr = number.toString()
for (let i = 0; i < numberStr.length - 4; i++) { // Ensure there are at least 3 characters to check
const substring = numberStr.substring(i, i + 5) // Get the substring of 3 characters
if (!substring.startsWith('0')) { // Exclude substrings starting with '0'
const subNum = parseInt(substring, 10)
const s = Math.sqrt(subNum)
if (s === Math.floor(s)) { // Check if s is a perfect square
return "cs5d" // Return a different identifier for 3-digit perfect squares
}
}
}
return null
}
function displayBlueLasersR(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="u" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="581.69" y="520.9" width="685.21" height="24.97" fill="#48f4ef"/>
</svg>
</div>`
}
// Function to check if a number contains a 4-digit square as a substring
function containsFourDigitSquare(number) {
const numberStr = number.toString()
for (let i = 0; i <= numberStr.length - 4; i++) {
const substring = numberStr.substring(i, i + 4)
const num = parseInt(substring, 10)
if (Math.sqrt(num) % 1 === 0) {
return true
}
}
return false
}
// Determine the range for laser eyes based on the last four digits
function getLaserEyeRange(lastFourDigits) {
if (lastFourDigits < 4800) {
return "laser_right"
} else if (lastFourDigits >= 4800 && lastFourDigits <= 5200) {
return "laser_crossed"
} else {
return "laser_left"
}
}
// Function to generate SVG for laser eyes based on direction
function displayLaserEyes(eyeDirection) {
let svgHTML = ""
switch (eyeDirection) {
case "laser_left":
svgHTML = `<div style="position: absolute; width: 300px; height: 300px;">
<svg id="f" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="258.76" y="520.9" width="685.86" height="24.97" fill="#f71200"/>
</svg>
</div>`
break
case "laser_right":
svgHTML = `<div style="position: absolute; width: 300px; height: 300px;">
<svg id="v" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="581.69" y="520.9" width="685.21" height="24.97" fill="#f71200"/>
</svg>
</div>`
break
case "laser_crossed":
svgHTML = `<div style="position: absolute; width: 300px; height: 300px;">
<svg id="u" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="581.69" y="520.9" width="582.21" height="24.97" fill="#48f4ef"/>
</svg>
</div>`
break
}
return svgHTML
}
function cs6(number) {
const numberStr = number.toString()
for (let i = 0; i < numberStr.length - 5; i++) { // Ensure there are at least 3 characters to check
const substring = numberStr.substring(i, i + 6) // Get the substring of 3 characters
if (!substring.startsWith('0')) { // Exclude substrings starting with '0'
const subNum = parseInt(substring, 10)
const s = Math.sqrt(subNum)
if (s === Math.floor(s)) { // Check if s is a perfect square
return "cs3d" // Return a different identifier for 3-digit perfect squares
}
}
}
return null
}
function displayBlueLasersL(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="w" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="258.76" y="520.9" width="685.86" height="24.97" fill="#48f4ef"/>
</svg>
</div>`
}
function cf3(number) {
let numberStr = number.toString()
let a = 0, b = 1
let fibNumbers = new Set()
// Generate 3-digit Fibonacci numbers
while (b < 1000) { // 1000 is the smallest 4-digit number
if (b >= 100) { // 100 is the smallest 3-digit number
fibNumbers.add(b.toString())
}
[a, b] = [b, a + b] // Update the Fibonacci sequence
}
// Check for 3-digit Fibonacci patterns
for (let i = 0; i <= numberStr.length - 3; i++) { // Loop through the number string
let substring = numberStr.substring(i, i + 3)
if (fibNumbers.has(substring)) {
return "cf3"
}
}
return null
}
function displayTeeth(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="776.14" y="758.39" width="16" height="16" fill="#fff"/>
<rect x="796.96" y="758.39" width="16" height="16" fill="#fff"/>
<rect x="817.77" y="758.39" width="16" height="16" fill="#fff"/>
<rect x="838.59" y="758.39" width="16" height="16" fill="#fff"/>
</svg>
</div>`
}
function cf4(number) {
let numberStr = number.toString()
let a = 0, b = 1
let fibNumbers = new Set()
// Generate 4-digit Fibonacci numbers
while (b < 10000) { // 10000 is the smallest 5-digit number
if (b >= 1000) { // 1000 is the smallest 4-digit number
fibNumbers.add(b.toString())
}
[a, b] = [b, a + b] // Update the Fibonacci sequence
}
// Check for 4-digit Fibonacci patterns
for (let i = 0; i <= numberStr.length - 4; i++) { // Loop through the number string
let substring = numberStr.substring(i, i + 4)
if (fibNumbers.has(substring)) {
return "cf4" // Return identifier for 4-digit Fibonacci numbers
}
}
return null
}
function displayBlackAlienLogo(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1,0,0,1,-8391,-5026)">
<g id="alient-t-shirt-logo" serif:id="alient t shirt logo" transform="matrix(1,0,0,1,1685.38,-0.905)">
<rect x="6705.81" y="5026.9" width="1490.18" height="1117.09" style="fill:none;"/>
<g transform="matrix(1,0,0,1,-1685.38,0.905)">
<path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:#000000;stroke:#000000;stroke-width:1px;"/>
</g>
<g transform="matrix(-1,0,0,1,16372.7,0.905)">
<path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:#000000;stroke:#000000;stroke-width:1px;"/>
</g>
<g transform="matrix(1,0,0,1,-1685.38,0.905)">
<path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:#000000;stroke-width:1px;"/>
</g>
<g transform="matrix(-1,0,0,1,16371,0.905)">
<path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:#000000;stroke-width:1px;"/>
</g>
</g>
</g>
</svg>
</div>`;
}
function cf5(number) {
let numberStr = number.toString()
let a = 0, b = 1
let fibNumbers = new Set()
// Generate 5-digit Fibonacci numbers
while (b < 100000) { // 100000 is the smallest 6-digit number
if (b >= 10000) { // 10000 is the smallest 5-digit number
fibNumbers.add(b.toString())
}
[a, b] = [b, a + b] // Update the Fibonacci sequence
}
// Check for 5-digit Fibonacci patterns
for (let i = 0; i <= numberStr.length - 5; i++) { // Loop through the number string
let substring = numberStr.substring(i, i + 5)
if (fibNumbers.has(substring)) {
return "cf5"
}
}
return null
}
function displayBrowPiercing(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="d" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="572.91" y="407.86" width="22.25" height="22.25" fill="#48f4ef"/>
</svg>
</div>`
}
function cf6(number) {
let numberStr = number.toString()
let a = 0, b = 1
let fibNumbers = new Set()
// Generate 6-digit Fibonacci numbers
while (b < 1000000) { // 1000000 is the smallest 7-digit number
if (b >= 100000) { // 100000 is the smallest 6-digit number
fibNumbers.add(b.toString())
}
[a, b] = [b, a + b] // Update the Fibonacci sequence
}
// Check for 6-digit Fibonacci patterns
for (let i = 0; i <= numberStr.length - 6; i++) { // Loop through the number string
let substring = numberStr.substring(i, i + 6)
if (fibNumbers.has(substring)) {
return "cf6"
}
}
return null
}
function displayGreenAlienLogo(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1,0,0,1,-8391,-5026)">
<g id="alient-t-shirt-logo" serif:id="alient t shirt logo" transform="matrix(1,0,0,1,1685.38,-0.905)">
<rect x="6705.81" y="5026.9" width="1490.18" height="1117.09" style="fill:none;"/>
<g transform="matrix(1,0,0,1,-1685.38,0.905)">
<path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:${colorMap1[7]};stroke:${colorMap1[7]};stroke-width:1px;"/>
</g>
<g transform="matrix(-1,0,0,1,16372.7,0.905)">
<path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:${colorMap1[7]};stroke:${colorMap1[7]};stroke-width:1px;"/>
</g>
<g transform="matrix(1,0,0,1,-1685.38,0.905)">
<path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:${colorMap1[7]};stroke-width:1px;"/>
</g>
<g transform="matrix(-1,0,0,1,16371,0.905)">
<path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:${colorMap1[7]};stroke-width:1px;"/>
</g>
</g>
</g>
</svg>
</div>`
}
function cf7(number) {
let numberStr = number.toString()
let a = 0, b = 1
let fibNumbers = new Set()
// Generate 6-digit Fibonacci numbers
while (b < 10000000) { // 10000000 is the smallest 8-digit number
if (b >= 1000000) { // 1000000 is the smallest 7-digit number
fibNumbers.add(b.toString())
}
[a, b] = [b, a + b] // Update the Fibonacci sequence
}
// Check for 6-digit Fibonacci patterns
for (let i = 0; i <= numberStr.length - 7; i++) { // Loop through the number string
let substring = numberStr.substring(i, i + 7)
if (fibNumbers.has(substring)) {
return "cf7"
}
}
return null
}
function displayOrangeAlienLogo(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1,0,0,1,-8391,-5026)">
<g id="alient-t-shirt-logo" serif:id="alient t shirt logo" transform="matrix(1,0,0,1,1685.38,-0.905)">
<rect x="6705.81" y="5026.9" width="1490.18" height="1117.09" style="fill:none;"/>
<g transform="matrix(1,0,0,1,-1685.38,0.905)">
<path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:${colorMap1[9]};stroke:${colorMap1[9]};stroke-width:1px;"/>
</g>
<g transform="matrix(-1,0,0,1,16372.7,0.905)">
<path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:${colorMap1[9]};stroke:${colorMap1[9]};stroke-width:1px;"/>
</g>
<g transform="matrix(1,0,0,1,-1685.38,0.905)">
<path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:${colorMap1[9]};stroke-width:1px;"/>
</g>
<g transform="matrix(-1,0,0,1,16371,0.905)">
<path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:${colorMap1[9]};stroke-width:1px;"/>
</g>
</g>
</g>
</svg>
</div>`
}
function m12(number) {
return number % 12 === 0
}
function displayRainbowChoker(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="l" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<polygon points="558.78 877.81 575.38 849.05 542.18 849.05 558.78 877.81" fill="#f71229" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="597.37 877.81 613.97 849.05 580.77 849.05 597.37 877.81" fill="#d827ff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="635.95 877.81 652.55 849.05 619.35 849.05 635.95 877.81" fill="#2c61ff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="674.53 877.81 691.13 849.05 657.93 849.05 674.53 877.81" fill="#80ff00" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="713.11 877.81 729.71 849.05 696.51 849.05 713.11 877.81" fill="#fac500" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</svg>
</div>`
}
function m13(number) {
return number % 13 === 0
}
function displayWhiteChoker(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ai" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<polygon points="558.78 877.81 575.38 849.05 542.18 849.05 558.78 877.81" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="597.37 877.81 613.97 849.05 580.77 849.05 597.37 877.81" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="635.95 877.81 652.55 849.05 619.35 849.05 635.95 877.81" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="674.53 877.81 691.13 849.05 657.93 849.05 674.53 877.81" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="713.11 877.81 729.71 849.05 696.51 849.05 713.11 877.81" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</svg>
</div>`
}
function m14(number) {
return number % 14 === 0
}
function displayOrangeChoker(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ai" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<polygon points="558.78 877.81 575.38 849.05 542.18 849.05 558.78 877.81" fill="${colorMap3[5]}" fill="${colorMap3[5]}" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="597.37 877.81 613.97 849.05 580.77 849.05 597.37 877.81" fill="${colorMap3[5]}" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="635.95 877.81 652.55 849.05 619.35 849.05 635.95 877.81" fill="${colorMap3[5]}" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="674.53 877.81 691.13 849.05 657.93 849.05 674.53 877.81" fill="${colorMap3[5]}" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
<polygon points="713.11 877.81 729.71 849.05 696.51 849.05 713.11 877.81" fill="${colorMap3[5]}" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</svg>
</div>`
}
function m15(number) {
return number % 15 === 0
}
function displayHeadBand(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ac" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<polygon points="716.21 422.41 538.9 422.41 538.9 442.37 732.79 442.37 716.21 422.41" fill="#6baecd"/>
<polygon points="810.65 422.41 792.12 442.37 984.81 442.37 984.81 422.41 810.65 422.41" fill="#6baecd"/>
</svg>
</div>`
}
function m16(number) {
return number % 16 === 0
}
function displayScar(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ae" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<path d="M647.26,639.93c-.85-1.09-2.43-1.28-3.51-.42l-8.53,6.7-8.8-12.4,7.78-6.1c1.09-.85,1.28-2.42,.42-3.51-.85-1.09-2.42-1.28-3.51-.42l-7.59,5.95-7.48-10.54,7.31-5.74c1.09-.85,1.28-2.42,.42-3.51-.85-1.09-2.43-1.28-3.51-.42l-7.12,5.59-6.71-9.46-4.08,2.89,6.85,9.65-8.42,6.61c-1.09,.85-1.28,2.42-.42,3.51,.49,.63,1.23,.96,1.97,.96,.54,0,1.08-.17,1.54-.53l8.23-6.46,7.48,10.54-7.96,6.25c-1.09,.85-1.28,2.42-.42,3.51,.49,.63,1.23,.96,1.97,.96,.54,0,1.08-.17,1.54-.53l7.77-6.1,8.8,12.4-7.01,5.5c-1.09,.85-1.28,2.42-.42,3.51,.49,.63,1.23,.96,1.97,.96,.54,0,1.08-.17,1.54-.53l6.82-5.35,6.5,9.16,4.08-2.89-6.64-9.35,8.72-6.85c1.09-.85,1.28-2.42,.42-3.51Z"/>
</svg>
</div>`
}
function m69(number) {
return number % 69 === 0
}
function display69LogoTShirt(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="j" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09"><path d="M650.24,994.83c4.93-6.94,3.29-16.59-3.65-21.52-3.08-2.19-6.7-3.08-10.21-2.78l2.14-3.01c1.76-2.48,1.18-5.91-1.3-7.67l-12.15,17.11c-4.93,6.94-3.29,16.59,3.65,21.52,3.08,2.19,6.71,3.08,10.21,2.78l-2.14,3.01c-1.76,2.48-1.18,5.91,1.3,7.67l12.15-17.11h0Zm-18.34-.83c-4.47-3.17-5.52-9.39-2.35-13.85,3.17-4.47,9.39-5.52,13.85-2.35,4.47,3.17,5.52,9.39,2.35,13.85-3.17,4.47-9.39,5.52-13.85,2.35Z" fill="#230f0a"/>
</svg>
</div>`
}
function m11(number) {
return number % 11 === 0
}
function displaybtcLogoTShirt(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="i" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<path id="j" d="M653.47,985.9c-1.5-1.51-3.82-2.35-3.82-2.35,0,0,2.19-.89,3.19-1.94,1-1.06,1.67-2.81,1.87-3.75,.2-.93,.93-4.87-1.83-7.59-2.13-2.1-4.77-3.19-8.41-3.94l1.14-7.99-4.92-.7-1.13,7.89c-1.1-.16-2.38-.34-3.75-.54l1.13-7.89-4.92-.7-1.13,7.89c-5.03-.72-9.69-1.38-9.69-1.38l-.73,5.11s2.07,.3,2.85,.41,2.14,.39,2.64,1.13c.49,.74,.55,1.1,.37,2.38s-2.84,19.89-2.91,20.38-.25,1.07-.72,1.4c-.47,.33-.9,.36-1.89,.22l-2.95-.42-1.86,5.77s4.81,.69,9.69,1.38l-1.12,7.87,4.92,.7,1.12-7.87c1.51,.22,2.83,.4,3.75,.54l-1.12,7.87,4.92,.7,1.14-8c1.28,.11,2.48,.18,3.19,.19,1.43,.02,4.66,.1,7.92-1.55,3.26-1.65,4.39-4.8,4.93-8.06,.54-3.26-.39-5.67-1.89-7.17Zm-18.45-15.34s1.58,.09,3.12,.33c1.54,.24,2.89,.48,4.83,1.39,1.94,.91,2.92,2.6,2.71,4.4-.21,1.8-1.16,2.89-2.65,3.45-1.49,.56-3.46,.7-5.26,.52-1.8-.19-4.1-.58-4.1-.58l1.36-9.5h0Zm7.66,25.11c-1.22,.46-3.55,.69-5.76,.54-2.21-.15-5.47-.69-5.47-.69l1.51-10.56s3.15,.29,5.57,.79c2.42,.51,4.38,1.42,5.23,2.02,.85,.59,2.32,1.83,1.98,4.25-.34,2.42-1.84,3.19-3.06,3.65Z"/>
</svg>
</div>`
}
function m888(number) {
return number % 888 === 0
}
function displayBtcLogoPaintCan(number) {
return `
<div style="position: absolute; width: 300px; height: 300px;">
<svg id="ab" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="751.03" y="930.93" width="54.45" height="70.45" fill="#48f4ef"/>
<path id="ac" d="M794.88,963.71c-1.5-1.51-3.82-2.35-3.82-2.35,0,0,2.19-.89,3.19-1.94,1-1.06,1.67-2.81,1.87-3.75,.2-.93,.93-4.87-1.83-7.59-2.13-2.1-4.77-3.19-8.41-3.94l1.14-7.99-4.92-.7-1.13,7.89c-1.1-.16-2.38-.34-3.75-.54l1.13-7.89-4.92-.7-1.13,7.89c-5.03-.72-9.69-1.38-9.69-1.38l-.73,5.11,2.85,.41c.78,.11,2.14,.39,2.64,1.13,.49,.74,.55,1.1,.37,2.38s-2.84,19.89-2.91,20.38-.25,1.07-.72,1.4c-.47,.33-.9,.36-1.89,.22l-2.95-.42-1.86,5.77s4.81,.69,9.69,1.38l-1.12,7.87,4.92,.7,1.12-7.87c1.51,.22,2.83,.4,3.75,.54l-1.12,7.87,4.92,.7,1.14-8c1.28,.11,2.48,.18,3.19,.19,1.43,.02,4.66,.1,7.92-1.55,3.26-1.65,4.39-4.8,4.93-8.06,.54-3.26-.39-5.67-1.89-7.17Zm-18.45-15.34s1.58,.09,3.12,.33c1.54,.24,2.89,.48,4.83,1.39,1.94,.91,2.92,2.6,2.71,4.4-.21,1.8-1.16,2.89-2.65,3.45-1.49,.56-3.46,.7-5.26,.52-1.8-.19-4.1-.58-4.1-.58l1.36-9.5h0Zm7.66,25.11c-1.22,.46-3.55,.69-5.76,.54-2.21-.15-5.47-.69-5.47-.69l1.51-10.56s3.15,.29,5.57,.79c2.42,.51,4.38,1.42,5.23,2.02,.85,.59,2.32,1.83,1.98,4.25-.34,2.42-1.84,3.19-3.06,3.65Z"/>
<polygon points="752.44 921.38 804.83 921.38 804.83 919.58 785.6 909 769.86 909 752.44 919.19 752.44 921.38" fill="#48f4ef"/><path d="M783.45,906.81h-10.41c-.55,0-1-.45-1-1v-11.96c0-.55,.45-1,1-1h10.41c.55,0,1,.45,1,1s-.45,1-1,1h-9.41v9.96h8.41v-4.98c0-.55,.45-1,1-1s1,.45,1,1v5.98c0,.55-.45,1-1,1Z" fill="#48f4ef"/>
<path d="M785.35,898.17c-.37,0-.72-.2-.89-.55-.25-.49-.05-1.09,.44-1.34l15.74-7.96c.49-.25,1.09-.05,1.34,.44s.05,1.09-.44,1.34l-15.74,7.96c-.14,.07-.3,.11-.45,.11Z" fill="#48f4ef"/>
<path d="M804.18,899.8h-15.27c-.55,0-1-.45-1-1s.45-1,1-1h15.27c.55,0,1,.45,1,1s-.45,1-1,1Z" fill="#48f4ef"/>
<path d="M799.8,908.1c-.13,0-.26-.02-.38-.08l-13.38-5.55c-.51-.21-.75-.8-.54-1.31s.8-.75,1.31-.54l13.38,5.55c.51,.21,.75,.8,.54,1.31-.16,.38-.53,.62-.92,.62Z" fill="#48f4ef"/>
</svg>
</div>`
}
function ce7(number) {
let numberStr = number.toString()
let exponent = 7
let power = 1
while (true) {
let exponentStr = Math.pow(exponent, power).toString()
if (numberStr.includes(exponentStr)) {
return true
}
if (Math.pow(exponent, power) > number) break // Stop if the exponent value exceeds the number
power++
}
return false
}
//fixed elements
function generateHtmlBasedOnBlockNumber(blockNumber) {
const lookDir = getLook(blockNumber)
const lookHtml = generateLookSvg(lookDir)
let joint = c420(blockNumber) ? displayJoint() : ""
let cig = c4a0(blockNumber) ? displaycig() : ""
let earringDown = c0(blockNumber) ? displayEarringDown() : ""
let earringUp = c00(blockNumber) ? displayEarringUp() : ""
let blueEarringsUpDown = c000(blockNumber) ? displayBlueEarringsUpDown() : ""
let orangeEarringsUpDown = c0000(blockNumber) ? displayOrangeEarringsUpDown() : ""
let whiteEarringsUpDown = c00000(blockNumber) ? displayWhiteEarringsUpDown() : ""
let blackLipPiercing = c11(blockNumber) ? displayBlackLipPiercing() : ""
let blueLipPiercing = c111(blockNumber) ? displayBlueLipPiercing() : ""
let violetLipPiercing = c1111(blockNumber) ? displayVioletLipPiercing() : ""
let orangeLipPiercing = c11111(blockNumber) ? displayOrangeLipPiercing() : ""
let eyePiercingR = c8a8(blockNumber) ? displayEyePiercingR() : ""
let eyePiercingL = c88(blockNumber) ? displayEyePiercingL() : ""
let eyePiercingDoubleR = c8888(blockNumber) ? displayDoubleEyePiercingR() : ""
let eyePiercingDoubleDouble = c88888(blockNumber) ? displayDoubleDoubleEyePiercing() : ""
let blueLasersR = cs5(blockNumber) ? displayBlueLasersR() : ""
let blueLasersL = cs6(blockNumber) ? displayBlueLasersL() : ""
let paintCan = c9a9(blockNumber) ? displayPaintCan() : ""
let gumPaintCan = c99(blockNumber) ? displayGumPaintCan() : ""
let orangePaintCan = c999(blockNumber) ? displayOrangePaintCan() : ""
let violetPaintCan = c9999(blockNumber) ? displayVioletPaintCan() : ""
let teeth = cf3(blockNumber) ? displayTeeth() : ""
let browPiercing = cf4(blockNumber) ? displayBrowPiercing() : ""
let blackAlienLogo = cf5(blockNumber) ? displayBlackAlienLogo() : ""
let greenAlienLogo = cf6(blockNumber) ? displayGreenAlienLogo() : ""
let orangeAlienLogo = cf7(blockNumber) ? displayOrangeAlienLogo() : ""
let btcLogoTShirt = m11(blockNumber) ? displaybtcLogoTShirt() : ""
let btcLogoPaintCan = m888(blockNumber) ? displayBtcLogoPaintCan() : ""
let rainbowChoker = m12(blockNumber) ? displayRainbowChoker() : ""
let whiteChoker = m13(blockNumber) ? displayWhiteChoker() : ""
let orangechoker = m14(blockNumber) ? displayOrangeChoker() : ""
let headBand = m15(blockNumber) ? displayHeadBand() : ""
let scar = m16(blockNumber) ? displayScar() : ""
let tShirtLogo69 = m69(blockNumber) ? display69LogoTShirt() : ""
const containsSquare = containsFourDigitSquare(blockNumber)
const eyeDirection = getLaserEyeRange(parseInt(blockNumber.toString().slice(-4)))
const laserEyes = (containsSquare && !cs5(blockNumber) && !cs6(blockNumber)) ? displayLaserEyes(eyeDirection) : ""
const svgsForDigits = generateSvgForDigits(blockNumber)
//background
const background =
`<div style="position: absolute; width: 300px; height: 300px;">
<svg width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1490.18" height="1117.09" fill="#1f1c25"/>
</svg>
</div>`;
//mouth
const mouth = `
<div style="position: absolute; width: 300px; height: 300px;">
<svg xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
<rect x="751.03" y="754.43" width="122.05" height="23.48" transform="translate(1624.11 1532.34) rotate(180)" fill="#090609"/>
</svg>
</div>`
const htmlContent = background + svgsForDigits + lookHtml + mouth + earringUp + blueEarringsUpDown + earringDown + orangeEarringsUpDown + cig + joint + blackLipPiercing + blueLipPiercing + violetLipPiercing + headBand + scar + eyePiercingL + eyePiercingR + rainbowChoker + orangechoker + tShirtLogo69 + whiteChoker + eyePiercingDoubleR + eyePiercingDoubleDouble + paintCan + gumPaintCan + orangePaintCan + violetPaintCan + blueLasersR + blueLasersL + blackAlienLogo + teeth + greenAlienLogo + orangeAlienLogo + btcLogoTShirt + browPiercing + btcLogoPaintCan + whiteEarringsUpDown + orangeLipPiercing + laserEyes
document.getElementById('natpunkviewer').innerHTML = htmlContent
}
</script>