Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
	<h1>To win, either get <i>all</i> <span class="zeros">zeros</span>, or all <span class="zeros">zeros</span>, <span id="negone">-1</span> and <span id="one">1</span>.</h1>
	<h3>Left click (pull) - add 2, subtract 1 from each neighbor</h3>
	<h3>Right click (push) - subtract 2, add 1 to each neighbor</h3>
	<div class="center">
		<svg width="400" height="400">
			<g>
				<polygon class="triangle lower-left" points="200, 200 136, 310 72, 200" />
				<polygon class="triangle upper-left" points="200, 200 72, 200 136, 90" />
				<polygon class="triangle upper-middle" points="200, 200 136, 90 264, 90" />
				<polygon class="triangle upper-right" points="200, 200 264, 90 328, 200" />
				<polygon class="triangle lower-right" points="200, 200 328, 200 264, 311" />
				<polygon class="triangle lower-middle" points="200, 200 136, 310 264, 311" />
				<text class="triangle-text" x="110" y="254">1</text>
				<text class="triangle-text" x="112" y="176">-8</text>
				<text class="triangle-text" x="176" y="148">5</text>
				<text class="triangle-text" x="240" y="176">7</text>
				<text class="triangle-text" x="240" y="254">-2</text>
				<text class="triangle-text" x="176" y="286">-3</text>

</g>
		</svg>
	</div>
	<div class="center">
		<button class="btn" id="play-again">Play again</button>
	</div>
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #232b2b;
	margin: 0;
	gap: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.zeros {
	color: rgb(180, 180, 180);
}

#negone {
	color: rgb(255, 128, 128);
}

#one {
	color: rgb(128, 255, 128);
}

.container {
}

.triangle {
	stroke: #000;
	/* 	fill: #7f7ddb; */
	stroke-width: 1px;
	cursor: pointer;
}

.triangle-text:hover {
	cursor: pointer;
}

.triangle-text {
	fill: #fff;
	font-size: 3em;
	paint-order: stroke;
	stroke: #000;
	stroke-width: 2px;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

.btn {
	font-size: 2em;
	padding: 10px;
	border-radius: 10px;
	border: none;
	background-color: #ffec5e;
	cursor: pointer;
}

.btn:hover {
	background-color: #fff6b5;
}
.btn:active {
	background-color: #ffec5e;
}

#play-again {
	opacity: 0;
	transition: 200ms ease-in-out;
}

.lower-left {
	fill: hsl(120deg 10% 50%);
}

.upper-left {
	fill: hsl(0deg 80% 50%);
}

.upper-middle {
	fill: hsl(120deg 50% 50%);
}

.upper-right {
	fill: hsl(120deg 70% 50%);
}

.lower-right {
	fill: hsl(0deg 20% 50%);
}

.lower-middle {
	fill: hsl(0deg 30% 50%);
}

console.log("Event Fired")
let triangles = document.getElementsByClassName("triangle");
let triangleText = document.getElementsByClassName("triangle-text");

let playAgainButton = document.getElementById("play-again");

let triangleValues = Array(triangles.length);
const maxValue = 9;

let triangleLighten = Array(triangles.length);

playAgainButton.onclick = () => {
	resetTriangleValues();
	renderTriangles();
	playAgainButton.style.opacity = "0";
};

document.addEventListener("contextmenu", (e) => {
	e.preventDefault();
});

for (let i = 0; i < triangles.length; i++) {
	triangleLighten[i] = 0;
	triangles[i].addEventListener("mouseover", (e) => {
		triangleLighten[i] = 20;
		renderTriangles();
	});
	triangles[i].addEventListener("mouseout", (e) => {
		triangleLighten[i] = 0;
		renderTriangles();
	});

triangles[i].addEventListener("mousedown", (e) => {
		triangleLighten[i] = 10;
		renderTriangles();
		addTriangle(i, e.button);
	});

triangles[i].addEventListener("mouseup", (e) => {
		triangleLighten[i] = 20;
		renderTriangles();
	});

triangleText[i].addEventListener("mouseover", (e) => {
		triangleLighten[i] = 20;
		renderTriangles();
	});
	triangleText[i].addEventListener("mouseout", (e) => {
		triangleLighten[i] = 0;
		renderTriangles();
	});

triangleText[i].addEventListener("mousedown", (e) => {
		triangleLighten[i] = 10;
		renderTriangles();
		addTriangle(i, e.button);
		let allInRange = triangleValues.every((num) => num >= -1 && num <= 1);
		if (allInRange) {
			playAgainButton.style.opacity = "1";
		}
	});

triangleText[i].addEventListener("mouseup", (e) => {
		triangleLighten[i] = 20;
		renderTriangles();
	});
}

resetTriangleValues();
renderTriangles();

function randomInt(max) {
	return Math.floor(Math.random() * max);
}

Frontend Forever App