<svg width="512" height="512" viewBox="0 0 512 512" style="shape-rendering: crispedges;">
<!-- background -->
<rect height="512" width="512" fill="black" />
<!-- stroke -->
<rect height="512" width="512" fill="none" stroke="red" stroke-width="40" />
<!-- circle -->
<circle cx="256" cy="256" r="200" fill="white" id="circle" />
</svg>
<input id="input" type="number" style="display:none" />
<script id="preview" mint="MINT_INSCRIPTION_ID">
const svg = document.querySelector('svg');
const circle = document.getElementById('circle');
const parentElement = svg.parentElement;
parentElement.style.width = '100%';
parentElement.style.height = '100%';
parentElement.style.padding = '0px';
parentElement.style.margin = '0px';
let blockNumber = '0';
// Colors
const colorMap = {
0: "#585663", // Grey
1: "#6D2BF8", // Purple
2: "#AF89FE", // Lilac
3: "#FDF64D", // Yellow
4: "#2067F0", // Blue
5: "#976F53", // Brown
6: "#CBC7E3", // Light Grey
7: "#15D96F", // Green
8: "#FF64C1", // Pink
9: "#F95E3C", // Orange
}
// Get block number
const mintText = document.getElementById('preview').getAttribute('mint');
console.log('Mint text', mintText);
if (mintText.includes('MINT_INSCRIPTION_ID')) {
let input = document.getElementById('input')
input.style.display = 'block';
input.style.position = 'absolute';
input.style.fontSize = '1rem';
input.style.top = '1rem';
input.style.left = '1rem';
input.value = blockNumber
input.addEventListener('input', (event) => {
blockNumber = input.value
update();
})
update();
} 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 update() {
const colorIndex = getLastDigit(blockNumber);
circle.style.fill = colorMap[colorIndex];
}
// Resize
function resize(event) {
let scaleW = window.innerWidth / 512;
let scaleH = window.innerHeight / 512;
console.log(scaleW, scaleH)
if (scaleH < scaleW) scaleW = scaleH;
svg.style.zoom = scaleW;
generateArt(blockNumber);
}
window.addEventListener('resize', resize, true)
resize();
// Get last digit
function getLastDigit(number) {
return number % 10;
}
</script>