<!DOCTYPE html>
<html>
<head>
<title>Mr's space</title>
<link rel="icon" href="favicon.gif">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Look at my fancy website pls">
<meta property="og:image" content="https://nsfw.cringe-studios.com/mrletsplay.webp">
<meta property="og:type" content="website">
<meta property="og:url" content="https://mr.cringe-studios.com/">
<meta property="og:title" content="MrLetsplay's space">
<meta property="og:description" content="Look at my fancy website pls">
<style>
* {
cursor: none;
}
body {
--bg1: rgb(0, 0, 0);
--bg2: rgb(15, 15, 15);
background-image: linear-gradient(to bottom, var(--bg1) 0px, var(--bg1) 2px, var(--bg2) 3px, var(--bg2) 6px);
background-size: 100% 6px;
background-repeat: repeat-y;
color: lime;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
font-family: monospace;
font-size: calc(var(--ch) * 2 / 3);
line-height: var(--ch);
user-select: none;
/* animation-name: r;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite; */
}
#content {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, var(--cw));
grid-template-rows: repeat(auto-fill, var(--ch));
}
.glow {
text-shadow: 0 0 0 lime, 0 0 0 lime;
transition: text-shadow 0.5s ease;
}
.glow:hover {
text-shadow: 1px 1px 10px lime, -1px -1px 5px lime;
transition: text-shadow 0.5s ease;
}
.letter {
text-align: center;
}
.letter:hover {
color: black;
}
.clickable:hover~#cursor {
background-color: red;
}
@keyframes r {
0% {
background-position-y: 0px;
}
100% {
background-position-y: -6px;
}
}
#cursor {
position: fixed;
top: 0;
left: 0;
width: var(--cw);
height: var(--ch);
background-color: lime;
z-index: -1;
}
</style>
<noscript>
<style>
* {
cursor: default;
}
body {
--cw: 15px;
--ch: 30px;
}
</style>
</noscript>
</head>
<body>
<section id="content">
<noscript>N</noscript>
<noscript>O</noscript>
<noscript>M</noscript>
<noscript>E</noscript>
<noscript>D</noscript>
<noscript>I</noscript>
<noscript>A</noscript>
</section>
<div id="cursor" style="display: none;"></div>
<script>
const cursor = document.getElementById("cursor");
const body = document.getElementById("content");
const colors = ["red", "green", "blue"];
let cW = 15;
let cH = 2 * cW;
let paintMode = false;
let color = colors[0];
document.body.style.setProperty("--cw", cW + "px");
document.body.style.setProperty("--ch", cH + "px");
function getBoxPos(x, y) {
x -= x % cW;
y -= y % cH;
return [x, y];
}
function getBoxIdx(x, y) {
x = Math.floor(x / cW);
y = Math.floor(y / cH);
return [x, y];
}
function setBoxColor(x, y, color) {
const boxId = "box-" + x + "-" + y;
let box = document.getElementById(boxId);
if (!box) {
box = document.createElement("a");
box.id = boxId;
box.style.zIndex = -1;
box.style.position = "fixed";
box.style.left = "calc(var(--cw) * " + x + ")";
box.style.top = "calc(var(--ch) * " + y + ")";
box.style.width = "var(--cw)";
box.style.height = "var(--ch)";
body.appendChild(box);
}
box.style.backgroundColor = color;
}
function deleteBox(x, y) {
const boxId = "box-" + x + "-" + y;
let box = document.getElementById(boxId);
if (box != null) box.remove();
}
document.onmousemove = event => {
let [x, y] = getBoxPos(event.x, event.y);
cursor.style.left = x + "px";
cursor.style.top = y + "px";
cursor.style.display = "block";
let [bx, by] = getBoxIdx(event.x, event.y);
if (paintMode) setBoxColor(bx, by, color);
};
document.onkeyup = event => {
switch (event.key) {
case "p":
paintMode = !paintMode;
break;
case "c":
color = colors[(colors.indexOf(color) + 1) % colors.length];
break;
case "n":
cW--;
cH = 2 * cW;
document.body.style.setProperty("--cw", cW + "px");
document.body.style.setProperty("--ch", cH + "px");
break;
case "m":
cW++;
cH = 2 * cW;
document.body.style.setProperty("--cw", cW + "px");
document.body.style.setProperty("--ch", cH + "px");
break;
}
}
document.onmouseout = () => {
cursor.style.display = "none";
};
let snekRunning = false;
function playSnek() {
if (snekRunning) return;
snekRunning = true;
console.log("Hello world");
let snekPos = [0, 0];
let snek = [];
let dir = 0;
let gridW = Math.floor(window.innerWidth / cW);
let gridH = Math.floor(window.innerHeight / cH);
let dot = null;
makeFood = () => {
if (dot != null) deleteBox(dot[0], dot[1]);
dot = [Math.round(Math.random() * gridW), Math.round(Math.random() * gridH)];
setBoxColor(dot[0], dot[1], "pink");
};
makeFood();
interval = setInterval(() => {
gridW = Math.floor(window.innerWidth / cW);
gridH = Math.floor(window.innerHeight / cH);
let oldPos = [...snekPos]; // More memroy allocation
switch (dir) {
case 0:
snekPos[0]++;
break;
case 1:
snekPos[1]++;
break;
case 2:
snekPos[0]--;
break;
case 3:
snekPos[1]--;
break;
}
if (snekPos[0] < 0) {
snekPos[0] = gridW;
}
if (snekPos[0] > window.innerWidth / cW) {
snekPos[0] = 0;
}
if (snekPos[1] < 0) {
snekPos[1] = gridH;
}
if (snekPos[1] > window.innerHeight / cH) {
snekPos[1] = 0;
}
deleteBox(oldPos[0], oldPos[1]);
if (oldPos[0] == dot[0] && oldPos[1] == dot[1]) {
snek.push(oldPos);
makeFood();
}
for (let p of snek) {
deleteBox(p[0], p[1]);
}
for (let p of snek) {
if (snekPos[0] == p[0] && snekPos[1] == p[1]) {
// Die
snekRunning = false;
deleteBox(dot[0], dot[1]);
clearInterval(interval);
return;
}
}
snek.push(oldPos);
snek.shift();
setBoxColor(snekPos[0], snekPos[1], "green");
for (let p of snek) {
setBoxColor(p[0], p[1], "yellow");
}
}, 100);
document.addEventListener("keyup", event => {
switch (event.keyCode) {
case 38: // up
dir = 3;
break;
case 40: // down
dir = 1;
break;
case 37: // left
dir = 2;
break;
case 39: // right
dir = 0;
break;
}
});
}
let content = [
" ",
" MrLetsplay's Secret Space",
" ",
" Links",
[" - ", { text: "Blog", link: "https://blog.mr.cringe-studios.com/" }],
[" - ", { text: "GitHub", link: "https://github.com/MrLetsplay2003" }],
[" - ", { text: "Cringe Studios Git", link: "https://git.cringe-studios.com/mr" }],
" ",
" Projects",
[" - ", { text: "KekEngine", link: "https://git.cringe-studios.com/mr/KekEngine" }, " (+ ", { text: "Kekrooms", link: "https://git.cringe-studios.com/mr/Kekrooms" }, ")"],
[" - ", { text: "ShittyAuthLauncher", link: "https://github.com/MrLetsplay2003/ShittyAuthLauncher" }, ", ", { text: "ShittyAuthServer", link: "https://github.com/MrLetsplay2003/ShittyAuthServer" }, ", ", { text: "ShittyAuthPatcher", link: "https://github.com/MrLetsplay2003/ShittyAuthPatcher" }],
[" - ", { text: "(Possibly) Useful Tools", link: "https://mr.cringe-studios.com/tools" }],
[" - ", { text: "PWMixer", link: "https://github.com/MrLetsplay2003/PWMixer" }, ", ", { text: "PWMixerGUI", link: "https://github.com/MrLetsplay2003/PWMixerGUI" }],
[" - ", { text: "MdBlog", link: "https://git.cringe-studios.com/mr/MdBlog" }],
" ",
" Programs",
[" - ", { text: "Snek", onclick: playSnek }],
" ",
" p - Enable/Disable paint mode | c - Switch paint color | n/m - Zoom out/in"
]
function appendStr(text, newLine, makeElement = () => document.createElement("a")) {
let first = newLine;
for (let l of text) {
let b = makeElement();
if (first) b.style.gridColumn = "1 / 2";
b.classList.add("letter");
b.innerText = l;
body.appendChild(b);
first = false;
}
}
for (let line of content) {
if (typeof line == "string") {
appendStr(line, true);
} else {
let first = true;
for (let l of line) {
if (typeof l == "string") {
appendStr(l, first);
} else {
if (l.link) {
l.onclick = () => window.location.href = l.link;
}
let makeElement = () => {
let b = document.createElement("a");
if (l.onclick) {
b.onmouseover = event => {
cursor.style.backgroundColor = "red";
};
b.onmouseout = event => {
cursor.style.backgroundColor = null;
}
b.classList.add("clickable");
b.onclick = l.onclick;
}
return b;
}
appendStr(l.text, first, makeElement);
}
first = false;
}
}
}
</script>
</body>
</html>