<!DOCTYPE html>
<html lang="en">

<head>
	<link rel="icon" href="https://www.stophurtingme.com/icon.png" type="image/png">
	<link rel="canonical" href="https://www.stophurtingme.com/" />

	<meta name="description" content="webpage for stophurtingme games" />
	<meta name="keywords" content="video games, indie games, teethworld, stophurtingme, RPG Maker, web games, experimental games" />
	<meta name="theme-color" content="#7289DA" />

	<meta property="og:title" content="stophurtingme" />
	<meta property="og:description" content="webpage for stophurtingme games" />
	<meta property="og:image" content="https://www.stophurtingme.com/preview.png" />
	<meta property="og:url" content="https://www.stophurtingme.com" />
	<meta property="og:type" content="website" />

	<meta name="twitter:card" content="summary" />
	<meta name="twitter:title" content="stophurtingme" />
	<meta name="twitter:description" content="webpage for stophurtingme games" />
	<meta name="twitter:image" content="https://www.stophurtingme.com/preview.png" />

	<meta charset="UTF-8">
	<title>stophurtingme</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>
		html,
		body {
			margin: 0;
			padding: 0;
			background: #0c0c0c;
			color: #ccc;
			font-family: 'Georgia', serif;
			min-height: 100vh;
		}

		main {
			padding: 60px 1rem 2rem;
			max-width: 800px;
			margin: 0 auto;
		}

		#items-container {
			display: flex;
			flex-direction: column;
			gap: 3rem;
		}

		.item {
			display: flex;
			align-items: center;
			gap: 1.5rem;
			border: 2px solid transparent;
			padding: 0.5rem;
			transition: border-color 0.2s;
			text-decoration: none;
		}

		.item:nth-child(even) {
			flex-direction: row-reverse;
		}

		.item:nth-child(odd) {
			transform: translateX(-20px);
		}

		.item:nth-child(even) {
			transform: translateX(20px);
		}

		.item img {
			width: 400px;
			height: auto;
			flex-shrink: 0;
		}

		.unsupported {
			user-select: none;
			cursor: not-allowed;
		}

		.item-unsupported {
			color: #f22;
			font-size: 2.0rem;
			font-weight: bold;
			text-align: center;
			border: 5px solid #f22;
			padding: 2rem;
			border-radius: 12px;
			background-color: rgba(255, 50, 50, 0.2);
			box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
			display: inline-block;
			position: relative;
		}

		.item-title {
			font-size: 1.4rem;
			color: #eee;
			margin: 0 0 0.25rem;
			text-decoration: underline;
		}

		.item-type {
			font-size: 1.2rem;
			color: #eee;
			margin: 0 0 0.25rem;
		}

		.item-description {
			font-size: 0.9rem;
			color: #888;
			margin: 0;
		}

		.item-source {
			font-size: 1.2rem;
			color: #0066cc;
			text-decoration: underline;
			cursor: pointer;
			transition: color 0.2s, text-decoration 0.2s, opacity 0.2s;
			font-weight: 500;
		}

		.item-source:hover {
			color: #0052a3;
			text-decoration: underline;
			opacity: 0.8;
		}

		.item-source:active {
			color: #003d7a;
			transform: translateY(1px);
		}

		.game {
			background: rgba(255, 0, 0, 0.16);
		}

		.item:hover.game {
			background: rgba(255, 0, 0, 0.32);
			border-color: #f00;
		}

		.webcomic {
			background: rgba(52, 152, 219, 0.16);
		}

		.item:hover.webcomic {
			background: rgba(52, 152, 219, 0.32);
			border-color: #3be;
		}

		#header {
			position: fixed;
			top: 1rem;
			left: 1rem;
			pointer-events: none;
			user-select: none;
			background: rgba(12, 12, 12, 0.5);
			color: #eeeeee;
			padding: 0.5rem 1rem;
			border-radius: 8px;
			z-index: 9999;
		}

		#stophurtingme-banner {
			padding-left: 16px;
		}

		#random-banner {
			font-family: 'Courier New';
			color: #aaaaaa;
			font-weight: bold;
			font-size: 1.3rem;
			padding: 0;
			text-align: left;
			max-width: 300px;
			text-shadow: 9px 9px 20px rgba(0, 0, 0, 0.5);
		}

		#random-banner::before,
		#random-banner::after {
			content: '“';
			font-size: 3.5rem;
			vertical-align: top;
			color: #aaaaff;
			font-family: Georgia, serif;
		}

		#random-banner::after {
			content: '”';
			float: right;
			margin-left: 5px;
		}

		#random-banner::before {
			float: left;
			margin-right: 5px;
		}

		#right-panel {
			position: fixed;
			top: 1rem;
			right: 1rem;
			display: flex;
			flex-direction: row;
			gap: 0.5rem;
			z-index: 9999;
			background: rgba(12, 12, 12, 0.5);
			border-radius: 8px;
			padding: 0.5rem 1rem;
			pointer-events: auto;
			user-select: none;
		}

		#right-panel button {
			background: #1a1a1a;
			color: #ccc;
			border: 1px solid #333;
			border-radius: 4px;
			padding: 0.4rem 0.8rem;
			font-size: 0.9rem;
			font-family: 'Georgia', serif;
			cursor: pointer;
			transition: background 0.2s, border-color 0.2s;
		}

		#right-panel button:hover {
			background: #333;
			border-color: #666;
			color: #eee;
		}
	</style>

</head>

<body>
	<main>
		<div id="header">
			<h1 id="stophurtingme-banner">stophurtingme</h1>
			<div id="random-banner"></div>
		</div>
		<div id="right-panel">
			<a href="about.html"><button id="about-button">About</button></a>
		</div>
		<div id="items-container"></div>

		<script>
			const items_container_e = document.getElementById('items-container');

			const TYPE_GAME = "game";
			const TYPE_WEBCOMIC = "webcomic";

			[
				{
					type: TYPE_GAME,
					href: "cure_engine_sample",
					title: "Cure Engine Sample",
				},
				{
					type: TYPE_GAME,
					href: "cure_engine_editor",
					title: "Cure Engine Editor",
					description: "an editor for games in the 'Cure Engine'",
					source: "cure_engine.tar.gz",
				},
				{
					type: TYPE_GAME,
					href: "tw",
					title: "Teethworld",
					description: "a boy goes to the dentist"
				},
				// {
				//     type: TYPE_WEBCOMIC,
				//     href: "driverman",
				//     title: "Driverman",
				//     description: "two guys hang out, play games and absolutely nothing weird happens no sir"
				// },
				{
					type: TYPE_WEBCOMIC,
					href: "the_void",
					title: "The Void",
					description: "a young man tries to get home from school"
				},
			].forEach(item => {
				/* this creates a link for each item. for example:
						<a class="item game" href="tw">
							<img src="tw_preview.png">
							<div class="item-meta">
								<h2 class="item-title">teethworld</h2>
								<p class="item-description">game made in a day</p>
							</div>
						</a>
				*/
				{
					const a = document.createElement("a");
					a.classList.add("item", item.type);
					let unsupported = false;
					if (item.href === "cure_engine_editor") {
						if (!('showDirectoryPicker' in window)) {
							unsupported = true;
						}
					}

					if (unsupported) {
						a.classList.add("unsupported");
					} else {
						a.href = item.href;
					}

					{
						const img = document.createElement("img");
						img.src = `${item.href}/preview.png`;
						a.appendChild(img);
					}

					{
						const metaDiv = document.createElement("div");
						metaDiv.classList.add("item-meta");
						if (unsupported) {
							const overlay = document.createElement("div");
							overlay.classList.add("item-unsupported");
							overlay.textContent = `${item.title} requires desktop Chrome.`;
							metaDiv.appendChild(overlay);
						}
						{
							const type = document.createElement("p");
							type.classList.add("item-type");
							type.textContent = item.type;
							metaDiv.appendChild(type);
						}
						{
							const title = document.createElement("h2");
							title.classList.add("item-title");
							title.textContent = item.title;
							metaDiv.appendChild(title);
						}
						if (item.description) {
							const description = document.createElement("p");
							description.classList.add("item-description");
							description.textContent = item.description;
							metaDiv.appendChild(description);
						}
						if (item.source) {
							const source = document.createElement("a");
							source.classList.add("item-source");
							source.textContent = "Source Code";
							source.href = item.source;
							metaDiv.appendChild(source);
						}
						a.appendChild(metaDiv);
					}

					items_container_e.appendChild(a);
				}
			});

			fetch('/random.txt')
				.then(response => response.text())
				.then(text => {
					const lines = text.split('\n').map(line => line.trim()).filter(line => line);
					if (lines.length > 0) {
						const randomLine = lines[Math.floor(Math.random() * lines.length)];
						document.getElementById('random-banner').textContent = randomLine;
					}
				})
				.catch(error => {
					console.error("Failed to load random.txt:", error);
				});
		</script>
	</main>
</body>

</html>
