Skip to content

Commit

Permalink
Fix Firefox square highlighting, add WASD fixes #45 fixes #38
Browse files Browse the repository at this point in the history
  • Loading branch information
@fulldecent
fulldecent committed Sep 11, 2024
1 parent ed954d5 commit 52d238a
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 51 deletions.
121 changes: 72 additions & 49 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,27 @@
<a class="btn" href="white-paper">About us</a>
<a class="btn" href="buy">Buy</a>
<a class="btn" href="personalize">Personalize</a>
<a class="btn" target="x" href="https://x.com/susquares">
<a class="btn" target="_blank" href="https://x.com/susquares">
<!-- Corrected target attribute -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
</svg>
</a>
<a class="btn" target="x" href="https://discord.gg/6nTGNdjQ3B">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord"
viewBox="0 0 16 16">
<path
d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" />
<a class="btn" target="_blank" href="https://discord.gg/6nTGNdjQ3B">
<!-- Corrected target attribute -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
<path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" />
</svg>
</a>
</header>

<article>
<p>Click below to buy an available Su Square (0.5 ETH)</p>
<a id="wheretogo" href="" target="_blank">
<a id="wheretogo" href="#" target="_blank">
<div style="position:relative;height:1000px">
<img id="theImage" src="build/wholeSquare.png" alt="All Su Squares" style="margin:0; height:1000px; width:1000px">
<div id="position"
style="background:pink;opacity:0.8;width:10px;height:10px;top:0;left:0;position:absolute;pointer-events:none">
style="background:pink;opacity:0.8;width:10px;height:10px;;position:absolute;pointer-events:none">
</div>
<div id="tooltip" style="color:black"></div>
<div id="electric-fence"></div>
Expand All @@ -64,20 +64,21 @@
</small>
</footer>
<script>
var squarePersonalizations = []; // Index 0 is for Square 1
var squareExtra = []; // Index 0 is for Square 1

let positionSquareNumber = 1;
var squarePersonalizations = [];
var squareExtra = [];

const squarePersonalizationsPromise = fetch("build/squarePersonalizations.json").then(response => response.json());
const squareExtraPromise = fetch("build/squareExtra.json").then(response => response.json());

Promise.all([squarePersonalizationsPromise, squareExtraPromise])
.then(([personalizations, extra]) => {
squarePersonalizations = personalizations;
squareExtra = extra;

// Start fence animation
lightUpFence(new Set([1]));

// Show newly minted and personalized Squares
const newlyMintedSection = document.getElementById("newly-minted");
const newlyPersonalizedSection = document.getElementById("newly-personalized");
Expand All @@ -101,7 +102,7 @@
const mostRecentPersonalizedSquares = squareExtra
.map((extraData, index) => [index, extraData])
.filter(([index, extraData]) => extraData !== null)
.filter(([index, extraData]) => extraData[1] !== extraData[0]) // minted but not personalized
.filter(([index, extraData]) => extraData[1] !== extraData[0])
.sort((a, b) => b[1][1] - a[1][1])
.slice(0, 5);
mostRecentPersonalizedSquares.forEach(([index, extraData]) => {
Expand All @@ -116,55 +117,79 @@
);
});
});

// Hover over Squares
theImage.addEventListener("mousemove", (e) => {
const theImage = document.getElementById("theImage");

function setPosition(squareNumber) {
positionSquareNumber = squareNumber;
const positionDiv = document.getElementById("position");
const tooltipDiv = document.getElementById("tooltip");
const whereToGoAnchor = document.getElementById("wheretogo");
const x = Math.min(Math.max(Math.floor((e.clientX - theImage.x / 2) / 10), 0), 99);
const y = Math.min(Math.max(Math.floor((e.clientY - theImage.y / 2) / 10), 0), 99);
const squareNumber = x + y * 100 + 1;
positionDiv.style.left = x * 10 + "px";
positionDiv.style.top = y * 10 + "px";
let title = "Square #" + (squareNumber) + "\n";
if (squarePersonalizations[squareNumber - 1] == null) {
theImage.style.cursor = "pointer";
title = title + " is available for sale, click to buy.";
whereToGoAnchor.href = "buy?square=" + (squareNumber);

if (!squarePersonalizations[squareNumber - 1]) {
document.getElementById("theImage").style.cursor = "pointer";
tooltipDiv.textContent = "Square #" + squareNumber + " is available for sale, click to buy.";
whereToGoAnchor.href = "buy?square=" + squareNumber;
} else if (!squarePersonalizations[squareNumber - 1][1] && !squarePersonalizations[squareNumber - 1][2]) {
theImage.style.cursor = "not-allowed";
title = title + " WAS PURCHASED BUT NOT YET PERSONALIZED";
document.getElementById("theImage").style.cursor = "not-allowed";
tooltipDiv.textContent = "Square #" + squareNumber + " WAS PURCHASED BUT NOT YET PERSONALIZED";
whereToGoAnchor.removeAttribute("href");
} else {
theImage.style.cursor = "pointer";
title = title + squarePersonalizations[squareNumber - 1][1];
document.getElementById("theImage").style.cursor = "pointer";
tooltipDiv.textContent = "Square #" + squareNumber + " " + squarePersonalizations[squareNumber - 1][1];
whereToGoAnchor.href = squarePersonalizations[squareNumber - 1][2];
}
tooltipDiv.textContent = title;
tooltipDiv.style.left = x * 10 + "px";
tooltipDiv.style.top = y * 10 + 30 + "px";

positionDiv.style.left = ((squareNumber - 1) % 100) * 10 + "px";
positionDiv.style.top = Math.floor((squareNumber - 1) / 100) * 10 + "px";
tooltipDiv.style.left = positionDiv.style.left;
tooltipDiv.style.top = (parseInt(positionDiv.style.top) + 30) + "px";
tooltipDiv.style.display = "block";
}

document.getElementById("theImage").addEventListener("mousemove", (e) => {
const theImage = document.getElementById("theImage");
const rect = theImage.getBoundingClientRect(); // Get the bounding rectangle of the image
const x = Math.min(Math.max(Math.floor((e.clientX - rect.left) / 10), 0), 99); // Adjust by element's left position
const y = Math.min(Math.max(Math.floor((e.clientY - rect.top) / 10), 0), 99); // Adjust by element's top position
const squareNumber = x + y * 100 + 1;
setPosition(squareNumber);
});

// Animate the electric fence
let fence = new Set();
let litUpEdge = new Set();
let wasEverLitUp = new Set();


document.addEventListener("keydown", (e) => {
const key = e.key.toLowerCase();
if (key === 'w' || key === ',' || key === 'arrowup') {
// Move up
if (positionSquareNumber > 100) setPosition(positionSquareNumber - 100);
event.preventDefault(); // Prevent scrolling
} else if (key === 'a' || key === 'a' || key === 'arrowleft') {
// Move left
if (positionSquareNumber % 100 !== 1) setPosition(positionSquareNumber - 1);
} else if (key === 's' || key === 'o' || key === 'arrowdown') {
// Move down
if (positionSquareNumber <= 100 * 99) setPosition(positionSquareNumber + 100);
event.preventDefault(); // Prevent scrolling
} else if (key === 'd' || key === 'e' || key === 'arrowright') {
// Move right
if (positionSquareNumber % 100 !== 0) setPosition(positionSquareNumber + 1);
} else if (key === 'enter') {
// Trigger click for highlighted square
const whereToGoAnchor = document.getElementById("wheretogo");
if (whereToGoAnchor.href) {
whereToGoAnchor.click();
}
}
});

function lightUpFence(edge) {
// Unlight old
litUpEdge.forEach(s => {
const element = document.getElementById("electric-fence-" + s);
element.parentNode.removeChild(element);
if (element && element.parentNode) {
element.parentNode.removeChild(element);
}
});
litUpEdge.clear();
// Light up new
let nextEdge = new Set();
edge.forEach((square) => {
wasEverLitUp.add(square);
// create element
const element = document.createElement("div");
element.id = "electric-fence-" + square;
element.style.pointerEvents = "none";
Expand All @@ -176,10 +201,8 @@
element.style.background = "#ffd700";
element.style.opacity = "0.25";
document.getElementById("electric-fence").appendChild(element);
// if minted then step it, if not then add to fence
if (squarePersonalizations[square - 1] !== null) {
litUpEdge.add(square);
// Span to next edge
if (square > 100 && !wasEverLitUp.has(square - 100)) {
nextEdge.add(square - 100);
}
Expand All @@ -201,6 +224,6 @@
}
}
</script>
</body>
</body>

</html>
4 changes: 2 additions & 2 deletions square.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@
<a class="btn" href="white-paper">About us</a>
<a class="btn" href="buy">Buy</a>
<a class="btn" href="https://tools.tenthousandsu.com/personalize">Personalize</a>
<a class="btn" target="x" href="https://x.com/susquares">
<a class="btn" target="_blank" href="https://x.com/susquares">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
</svg>
</a>
<a class="btn" target="x" href="https://discord.gg/6nTGNdjQ3B">
<a class="btn" target="_blank" href="https://discord.gg/6nTGNdjQ3B">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord"
viewBox="0 0 16 16">
<path
Expand Down

0 comments on commit 52d238a

Please sign in to comment.