Basic site without projects

.gitignore

@@ -0,0 +1,4 @@
+/.idea/
+/ssl_certificate/*.pem
+/secrets/
+.env

README.md

@@ -0,0 +1 @@
+# https://play.benjamin-kraft.eu

private/authorize.php

@@ -0,0 +1,47 @@
+<?php
+
+include_once "mysql_connect.php";
+$conn = new MySQLConnection();
+
+$sql = "SELECT value FROM api_tokens WHERE name IN (
+    'uniliga_teams_toor_api_key',
+    'uniliga_teams_toor_client_id',
+    'uniliga_teams_toor_client_secret'
+)";
+$result = $conn->query($sql);
+$apiKey = $result->fetch_row()[0];
+$clientId = $result->fetch_row()[0];
+$clientSecret = $result->fetch_row()[0];
+$scopes = "organizer:view organizer:result organizer:participant";
+
+echo "Secrets fetched from database\r\n";
+
+$opts = [
+	"http" => [
+		"method" => "POST",
+		"header" => "X-Api-Key: $apiKey\r\nContent-type: application/x-www-form-urlencoded",
+		"content" => http_build_query([
+			"grant_type" => "client_credentials",
+			"client_id" => $clientId,
+			"client_secret" => $clientSecret,
+			"scope" => $scopes
+		])
+	]
+];
+$context = stream_context_create($opts);
+$result = file_get_contents("https://api.toornament.com/oauth/v2/token", false, $context);
+$token = json_decode($result)->access_token;
+
+echo "Token received\r\n";
+
+$tokenName = "uniliga_teams_toor_access_token";
+$sql = "SELECT EXISTS(SELECT * FROM api_tokens WHERE name = '$tokenName')";
+$exists = $conn->query($sql)->fetch_row()[0];
+
+if ($exists == 1) {
+	$conn->query("UPDATE api_tokens SET value = '$token' WHERE name = '$tokenName'");
+	echo "Old token replaced\r\n";
+} else {
+	$conn->query("INSERT INTO api_tokens (name, value) VALUES ('$tokenName', '$token')");
+	echo "New token inserted\r\n";
+}

private/mysql_connect.php

@@ -0,0 +1,38 @@
+<?php
+
+class MySQLConnection {
+	
+	private int $port;
+	private string $host;
+	private string $user;
+	private string $pass;
+	private string $dbName = "all_projects";
+	private mysqli $mysqli;
+	
+	public function __construct() {
+		$config = parse_ini_file($_SERVER['DOCUMENT_ROOT'].'/../secrets/mysql.ini');
+		$this->host = $config['host'];
+		$this->port = parse_ini_file($_SERVER['DOCUMENT_ROOT'].'/../env_config.ini')['local_mysql_port'];
+		$this->user = $config['username'];
+		$this->pass = $config['password'];
+		$this->createConn();
+	}
+	
+	private function createConn() {
+		$this->mysqli = new mysqli($this->host . ":" . $this->port, $this->user, $this->pass, $this->dbName);
+	}
+	
+	public function query($sql) {
+		return $this->mysqli->query($sql);
+	}
+	
+	public function changeDB($dbName) {
+		$this->dbName = $dbName;
+		$this->mysqli->select_db($dbName);
+	}
+	
+	public function __destruct() {
+		$this->mysqli->close();
+	}
+	
+}

private/update_all.php

@@ -0,0 +1,75 @@
+<?php
+
+$_SERVER['DOCUMENT_ROOT'] = __DIR__ . "/../public";
+$projectPath = "/../public/projects/typescript/uniliga_teams/data";
+include_once __DIR__ . $projectPath . "/php/RiotRequest.php";
+include_once __DIR__ . $projectPath . "/php/ToorRequest.php";
+include_once "mysql_connect.php";
+
+$conn = new MySQLConnection();
+$conn->changeDB("uniliga_teams");
+
+//First, get all summonerNames of all tournaments into one list
+$tournamentIds = json_decode(file_get_contents(__DIR__ . $projectPath . "/settings/settings.json"))->tournaments;
+$names = [];
+
+$i = 0;
+do {
+	$r = new ToorRequest("participants");
+	$r->setHeaders(["Range" => "participants=$i-" . ($i + 49)]);
+	$r->setQueries(["tournament_ids" => join(",", $tournamentIds)]);
+	foreach ($r->run() as $team) {
+		foreach ($team->lineup as $player) {
+			$name = $player->custom_fields->summoner_name;
+			if (!is_null($name))
+				$names[] = $name;
+		}
+	}
+	$i += 50;
+} while ($i < $r->getContentSize());
+$names = array_unique($names);
+
+$i = 0;
+
+foreach ($names as $name) {
+	$i++;
+	$progress = round($i / count($names) * 100, 2) . "%";
+	//At max 100 calls per 120sec => 0.83 calls per second => 1.2 seconds to wait per call =>
+	//We make two riot calls => 2.4 seconds to wait
+	sleep(2);
+	usleep(500000);
+	flush();
+	
+	$conn->query("DELETE FROM leagues WHERE summoner_name='$name'");
+	
+	$r = new RiotRequest("lol/summoner/v4/summoners/by-name/$name");
+	$summoner = $r->run();
+	if (!$summoner) {
+		$header = $r->responseHeader;
+		$code = 0;
+		if (preg_match("#([0-9]{3})#", $header[0], $re) == 1)
+			$code = $re[1];
+		if ($code == 404)
+			echo "Summoner not found: $name\r\nProgress: $progress\r\n\r\n";
+		if ($code == 429)
+			echo "Rate limit exceeded: $name\r\n";
+		continue;
+	}
+	
+	$r = new RiotRequest("lol/league/v4/entries/by-summoner/$summoner->id");
+	$leagues = $r->run();
+	
+	foreach ($leagues as $league) {
+		$queue = $league->queueType;
+		$tier = $league->tier;
+		$rank = $league->rank;
+		$lp = $league->leaguePoints;
+		$conn->query(
+			"INSERT INTO leagues (summoner_name, queue, tier, ranking, points)
+				 VALUES ('$name', '$queue', '$tier', '$rank', '$lp')"
+		);
+	}
+	
+	echo "Summoner updated: $name\r\nProgress: $progress\r\n\r\n";
+}
+

public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<script src="/lib/socket.io/socket.io.min.js" type="text/javascript"></script>
+		<script src="/lib/jquery/jquery.min.js" type="text/javascript"></script>
+		<script src="/lib/p5/p5.min.js" type="text/javascript"></script>
+		<script src="index_data/init.js" type="text/javascript"></script>
+		<link href="styles.css" rel="stylesheet">
+		<link href="favicon.ico" rel="icon" type="image/x-icon">
+		<title>Benjamin Kraft: Games</title>
+    </head>
+    <body>
+		<div id="content">
+			<h1>Benjamin Kraft: Games</h1>
+			<div id="site-description">
+				<p>Hi, here you can find some games I wrote with Javascript, Typescript or C#</p>
+			</div>
+			<div id="projects-container"></div>
+		</div>
+    </body>
+</html>

public/index_data/fonts/rametto.css

@@ -0,0 +1,4 @@
+@font-face{
+    font-family: "Rametto";
+    src: url("Rametto/font.ttf");
+}

public/index_data/fonts/red_hat_mono.css

@@ -0,0 +1,180 @@
+/* latin-ext */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyT7nDnA2uf2zVvFAhhzEsUXdxe1gjQeA.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyT7nDnA2uf2zVvFAhhzEsUXdxQ1gg.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyT7nDnA2uf2zVvFAhhzEsUXdxe1gjQeA.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyT7nDnA2uf2zVvFAhhzEsUXdxQ1gg.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyT7nDnA2uf2zVvFAhhzEsUXdxe1gjQeA.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyT7nDnA2uf2zVvFAhhzEsUXdxQ1gg.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyT7nDnA2uf2zVvFAhhzEsUXdxe1gjQeA.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyT7nDnA2uf2zVvFAhhzEsUXdxQ1gg.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyT7nDnA2uf2zVvFAhhzEsUXdxe1gjQeA.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyT7nDnA2uf2zVvFAhhzEsUXdxQ1gg.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyN7nDnA2uf2zVvFAhhzEsUVuxSzgw.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyN7nDnA2uf2zVvFAhhzEsUWOxS.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyN7nDnA2uf2zVvFAhhzEsUVuxSzgw.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyN7nDnA2uf2zVvFAhhzEsUWOxS.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyN7nDnA2uf2zVvFAhhzEsUVuxSzgw.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyN7nDnA2uf2zVvFAhhzEsUWOxS.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyN7nDnA2uf2zVvFAhhzEsUVuxSzgw.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyN7nDnA2uf2zVvFAhhzEsUWOxS.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyN7nDnA2uf2zVvFAhhzEsUVuxSzgw.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Red Hat Mono';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(Red_Hat_Mono/jVyN7nDnA2uf2zVvFAhhzEsUWOxS.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

public/index_data/imprint.html

@@ -0,0 +1,108 @@
+<html lang="de">
+	<head>
+		<meta charset="utf-8">
+		<style>
+			body{
+				background-color: #333;
+				color: #FFF;
+			}
+		</style>
+	</head>
+	<body>
+		<div class='impressum'><h1>Impressum</h1><p>Angaben gemäß § 5 TMG</p><p>Benjamin Kraft <br> 
+			Sertoriusring 19 <br>
+			55126 Mainz <br>
+			</p><p> <strong>Vertreten durch: </strong><br>
+			Benjamin Kraft<br>
+			</p><p><strong>Kontakt:</strong> <br>
+			Telefon: 0157-58855324<br>
+			E-Mail: <a href='mailto:benjamin.kraft@online.de'>benjamin.kraft@online.de</a></br></p><p><strong>Haftungsausschluss: </strong><br><br><strong>Haftung für Inhalte</strong><br><br>
+			Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br><br><strong>Haftung für Links</strong><br><br>
+			Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.<br><br><strong>Urheberrecht</strong><br><br>
+			Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.<br><br><strong>Datenschutz</strong><br><br>
+			Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. <br>
+			Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich. <br>
+			Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.<br>
+			</p><br> 
+			Website Impressum erstellt durch <a href="https://www.impressum-generator.de">impressum-generator.de</a> von der <a href="https://www.kanzlei-hasselbach.de/">Kanzlei Hasselbach</a>
+			 </div>
+			 <h1>Cookie Policy for BenjoCraeftWeb</h1>
+
+			 <p>This is the Cookie Policy for BenjoCraeftWeb, accessible from https://benjocraeft.com</p>
+			 
+			 <p><strong>What Are Cookies</strong></p>
+			 
+			 <p>As is common practice with almost all professional websites this site uses cookies, which are tiny files that are downloaded to your computer, to improve your experience. This page describes what information they gather, how we use it and why we sometimes need to store these cookies. We will also share how you can prevent these cookies from being stored however this may downgrade or 'break' certain elements of the sites functionality.</p>
+			 
+			 <p>For more general information on cookies see the Wikipedia article on HTTP Cookies.</p>
+			 
+			 <p><strong>How We Use Cookies</strong></p>
+			 
+			 <p>We use cookies for a variety of reasons detailed below. Unfortunately in most cases there are no industry standard options for disabling cookies without completely disabling the functionality and features they add to this site. It is recommended that you leave on all cookies if you are not sure whether you need them or not in case they are used to provide a service that you use.</p>
+			 
+			 <p><strong>Disabling Cookies</strong></p>
+			 
+			 <p>You can prevent the setting of cookies by adjusting the settings on your browser (see your browser Help for how to do this). Be aware that disabling cookies will affect the functionality of this and many other websites that you visit. Disabling cookies will usually result in also disabling certain functionality and features of the this site. Therefore it is recommended that you do not disable cookies.</p>
+			 
+			 <p><strong>The Cookies We Set</strong></p>
+			 
+			 <ul>
+			 
+			 <li>
+				 <p>Account related cookies</p>
+				 <p>If you create an account with us then we will use cookies for the management of the signup process and general administration. These cookies will usually be deleted when you log out however in some cases they may remain afterwards to remember your site preferences when logged out.</p>
+			 </li>
+			 
+			 <li>
+				 <p>Login related cookies</p>
+				 <p>We use cookies when you are logged in so that we can remember this fact. This prevents you from having to log in every single time you visit a new page. These cookies are typically removed or cleared when you log out to ensure that you can only access restricted features and areas when logged in.</p>
+			 </li>
+			 
+			 
+			 
+			 
+			 <li>
+				 <p>Forms related cookies</p>
+				 <p>When you submit data to through a form such as those found on contact pages or comment forms cookies may be set to remember your user details for future correspondence.</p>
+			 </li>
+			 
+			 <li>
+				 <p>Site preferences cookies</p>
+				 <p>In order to provide you with a great experience on this site we provide the functionality to set your preferences for how this site runs when you use it. In order to remember your preferences we need to set cookies so that this information can be called whenever you interact with a page is affected by your preferences.</p>
+			 </li>
+			 
+			 </ul>
+			 
+			 <p><strong>Third Party Cookies</strong></p>
+			 
+			 <p>In some special cases we also use cookies provided by trusted third parties. The following section details which third party cookies you might encounter through this site.</p>
+			 
+			 <ul>
+			 
+			 
+			 
+			 <li>
+				 <p>From time to time we test new features and make subtle changes to the way that the site is delivered. When we are still testing new features these cookies may be used to ensure that you receive a consistent experience whilst on the site whilst ensuring we understand which optimisations our users appreciate the most.</p>
+			 </li>
+			 
+			 
+			 
+			 
+			 
+			 
+			 
+			 </ul>
+			 
+			 <p><strong>More Information</strong></p>
+			 
+			 <p>Hopefully that has clarified things for you and as was previously mentioned if there is something that you aren't sure whether you need or not it's usually safer to leave cookies enabled in case it does interact with one of the features you use on our site. This Cookies Policy was created with the help of the <a href="https://www.cookiepolicygenerator.com">Cookies Policy Template Generator</a> and the <a href="https://www.termsandcondiitionssample.com">Terms and Conditions Template</a>.</p>
+			 
+			 <p>However if you are still looking for more information then you can contact us through one of our preferred contact methods:</p>
+			 
+			 <ul>
+			 <li>Email: benjamin.kraft@online.de</li>
+			 
+			 </ul>
+			 
+	</body>
+</html>

public/index_data/init.js

@@ -0,0 +1,91 @@
+let projects = [],
+	languages = [];
+
+let antiCacheQuery = '?_=' + new Date().getTime();
+
+function preload(){
+	loadJSON("index_data/projects.json" + antiCacheQuery, parseProjects);
+}
+
+function setup(){
+	noCanvas();
+	displayProjects();
+}
+
+function parseProjects(projectObj){
+	for (let l of projectObj['languages']){
+		let language = {};
+		for (let key in l) language[key] = l[key];
+		languages.push(language);
+	}
+	for (let p of projectObj['projects']) {
+		if (!p.visible) continue;
+		let project = new Project(p);
+		projects.push(project);
+	}
+}
+
+function displayProjects(){
+	for (let p of projects){
+
+		let img = $('<img>');
+		img.addClass('project-image');
+		p.putImage(img);
+
+		let name = $('<h3></h3>');
+		name.addClass('project-name');
+		name.text(p.displayName);
+
+		let version = $('<h4></h4>');
+		version.addClass('project-version');
+		version.text(p.version);
+
+		let info = $('<div></div>');
+		info.addClass('project-info');
+		info.html(p.info);
+
+		let start = $('<button></button>');
+		start.addClass('project-start');
+		start.text('Start');
+		start.click(() => p.start());
+
+		let download = $('<button></button>');
+		download.addClass('project-download');
+		download.text('Download');
+		download.click(() => p.download());
+
+		let description = $('<div></div>');
+		description.addClass('project-description');
+		description.append(name, version, info, start, download);
+
+		let dom = $('<div></div>');
+		dom.addClass('project');
+		dom.append(img, description);
+
+		$('#projects-container').append(dom);
+	}
+}
+
+class Project{
+	
+	constructor(p){
+		for (let key in p) this[key] = p[key];
+		for (let l of languages){
+			if (l.id === p['languageId']) this.language = l;
+		}
+		this.location = "projects/" + this.language.name + "/" + this['name'];
+	}
+	
+	start(){
+		window.location = this.location;
+	}
+	
+	download(){
+		window.location = this.location + '.zip';
+	}
+	
+	putImage(dom){
+		dom.attr("src", 'index_data/thumbnails/' + this['name'] + '.png');
+	}
+	
+}

public/index_data/projects.json

@@ -0,0 +1,253 @@
+{
+	"languages": [
+		{
+			"displayName": "JavaScript",
+			"name": "javascript",
+			"id": 0
+		},
+		{
+			"displayName": "TypeScript",
+			"name": "typescript",
+			"id": 1
+		},
+		{
+			"displayName": "C#",
+			"name": "c_sharp",
+			"id": 2
+		}
+	],
+	"projects": [
+		{
+			"displayName": "Pendulum",
+			"version": "1.0",
+			"info": "Watch 500 Double-Pendulums diverge into chaos.",
+			"languageId": 1,
+			"name": "pendulum",
+			"visible": true
+		},
+		{
+			"displayName": "Christmas Tree",
+			"version": "1.0",
+			"info": "With this little nice tool you can have fun decorating your own Christmas Trees.",
+			"languageId": 1,
+			"name": "christmas_tree",
+			"visible": true
+		},
+		{
+			"displayName": "Toornament Teams",
+			"version": "1.0",
+			"info": "Small tool for creating multi op.gg links for teams in Toornament.",
+			"languageId": 1,
+			"name": "toornament_teams",
+			"visible": true
+		},
+		{
+			"displayName": "Circuits",
+			"version": "1.0",
+			"info": "Be smart and capture every circuit.",
+			"languageId": 2,
+			"name": "circuits",
+			"visible": false
+		},
+		{
+			"displayName": "Cube Run",
+			"version": "1.0",
+			"info": "The game that everyone knows with a few little changes.",
+			"languageId": 2,
+			"name": "cube_run",
+			"visible": true
+		},
+		{
+			"displayName": "Overwatch Statistics",
+			"version": "1.5.1",
+			"info": "Site to track Overwatch Competitive progress, because Blizzard API does not include Overwatch.",
+			"languageId": 0,
+			"name": "overwatch_stats",
+			"visible": true
+		},
+		{
+			"displayName": "Pathfinder",
+			"version": "1.0",
+			"info": "A graphical demonstration of some pathfinder algorithms.",
+			"languageId": 0,
+			"name": "pathfinder",
+			"visible": true
+		},
+		{
+			"displayName": "Bed Side-Chooser",
+			"version": "1.0",
+			"info": "Small program written by Sel♥ to know on which side of the bed she should sleep.",
+			"languageId": 0,
+			"name": "bed_random",
+			"visible": false
+		},
+		{
+			"displayName": "Doppler Effect",
+			"version": "1.0",
+			"info": "Graphical demonstration of the Doppler effect.",
+			"languageId": 0,
+			"name": "doppler_effect",
+			"visible": false
+		},
+		{
+			"displayName": "Chainreact",
+			"version": "1.2.3",
+			"info": "Capture fields by being smart!",
+			"languageId": 0,
+			"name": "chainreact",
+			"visible": true
+		},
+		{
+			"displayName": "Global Draw Sheet",
+			"version": "1.2.13",
+			"info": "A draw sheet for everyone. Have fun :)",
+			"languageId": 0,
+			"name": "global_draw",
+			"visible": true
+		},
+		{
+			"displayName": "Pong Remastered Online",
+			"version": "1.0",
+			"info": "My new version of the game Pong, also playable against friends.",
+			"languageId": 1,
+			"name": "pong",
+			"visible": true
+		},
+		{
+			"displayName": "Valentine Present ♥",
+			"version": "1.0",
+			"info": "For Sel♥",
+			"languageId": 0,
+			"name": "valentine",
+			"visible": true
+		},
+		{
+			"displayName": "Lissajous Curve",
+			"version": "1.0",
+			"info": "Live rendering of a graph of a system of parametric equations.",
+			"languageId": 0,
+			"name": "lissajous_curve",
+			"visible": true
+		},
+        {
+			"displayName": "Memory",
+			"version": "1.0",
+			"info": "A memory game, also works online with your friends.",
+			"languageId": 0,
+			"name": "memory",
+			"visible": true
+		},
+        {
+			"displayName": "Rubiks Cube",
+			"version": "1.0",
+			"info": "The 3x3 Rubiks Cube in 3D (wasn't easy!!).",
+			"languageId": 0,
+			"name": "rubiks_cube",
+			"visible": true
+		},
+        {
+			"displayName": "Jump And Run",
+			"version": "1.0",
+			"info": "Birthday present for Sel♥.",
+			"languageId": 0,
+			"name": "jump_and_run",
+			"visible": true
+		},
+        {
+			"displayName": "Bricks v3.1",
+			"version": "1.0",
+			"info": "My own version of the classical \"Break Bricks\".",
+			"languageId": 0,
+			"name": "bricks",
+			"visible": true
+		},
+        {
+			"displayName": "Colorpicker",
+			"version": "1.0",
+			"info": "Tool for determining color codes in HSB, RGB and HEX.",
+			"languageId": 0,
+			"name": "colorpicker",
+			"visible": false
+		},
+		{
+			"displayName": "Fibonacci",
+			"version": "1.0",
+			"info": "Standing picture of the Fibonacci sequence. For a moving version created by a friend of mine view <a href=\"http://v.bertlwieser.eu/js/fibonacci/\" target=\"_blank\">here</a>.",
+			"languageId": 0,
+			"name": "fibonacci",
+			"visible": false
+		},
+		{
+			"displayName": "Maths",
+			"version": "1.0",
+			"info": "My try of copying GeoGebra.",
+			"languageId": 0,
+			"name": "maths",
+			"visible": false
+		},
+		{
+			"displayName": "2D Openworld",
+			"version": "1.0",
+			"info": "My first 2D Openworld project. You can explore by moving your cursor to the frame borders.",
+			"languageId": 0,
+			"name": "openworld",
+			"visible": false
+		},
+		{
+			"displayName": "Physics",
+			"version": "1.0",
+			"info": "A small physical interface for creating objects with interacting physical properties.",
+			"languageId": 0,
+			"name": "physics",
+			"visible": false
+		},
+		{
+			"displayName": "Palms",
+			"version": "1.0",
+			"info": "Very small moving picture of palms upon Sel's request.",
+			"languageId": 0,
+			"name": "palms",
+			"visible": false
+		},
+		{
+			"displayName": "Calculator",
+			"version": "1.0",
+			"info": "Working, but no perfect mathematical calculator.",
+			"languageId": 0,
+			"name": "calculator",
+			"visible": false
+		},
+		{
+			"displayName": "Sierpinski",
+			"version": "1.0",
+			"info": "Some sequences by the mathematician Sierpinski.",
+			"languageId": 0,
+			"name": "sierpinski",
+			"visible": true
+		},
+		{
+			"displayName": "Exior Web",
+			"version": "1.0",
+			"info": "A small website for an imaginary company, led by me and my class mates.",
+			"languageId": 0,
+			"name": "exior_web",
+			"visible": false
+		},
+		{
+			"displayName": "Cross Product",
+			"version": "1.0",
+			"info": "A 3D coordinates system which supported my presentation about the cross product in math class. Switch through states with arrow keys.",
+			"languageId": 0,
+			"name": "cross_product",
+			"visible": false
+		},
+        {
+			"displayName": "Circles",
+			"version": "1.0",
+			"info": "Inspired by the CodingTrain (senseless).",
+			"languageId": 0,
+			"name": "circles",
+			"visible": false
+		}
+	]
+}

public/lib/benjocraeft/collision.js

@@ -0,0 +1,53 @@
+'use strict';
+
+/*
+    2D Collision detection and performing
+*/
+
+class Collision{
+	
+	static ellipseToEllipse(e1, e2){
+			
+		//Colliding angle of ball 1 to ball 2 using arc tan of both x and y differences
+		let collisionAngle = Math.atan2((e2.pos.y - e1.pos.y), (e2.pos.x - e1.pos.x));
+			
+		//Converting directions of velocity vector of balls into angles
+		let d1 = Math.atan2(e1.vel.y, e1.vel.x);
+		let d2 = Math.atan2(e2.vel.y, e2.vel.x);
+			
+		//Ignoring mass effects new velocites are simply magnitude multiplied with value of angle differences
+		let newXspeed1 = e1.vel.mag() * Math.cos(d1 - collisionAngle);
+		let newYspeed1 = e1.vel.mag() * Math.sin(d1 - collisionAngle);
+		let newXspeed2 = e2.vel.mag() * Math.cos(d2 - collisionAngle);
+		let newYspeed2 = e2.vel.mag() * Math.sin(d2 - collisionAngle);
+	
+		//According to the principle of linear momentum, kinetic energy stays the same after collision, so velocities are now related to masses
+		let finalXspeed1 = ((e1.radius - e2.radius) * newXspeed1 + e2.radius * 2 * newXspeed2) / (e1.radius + e2.radius);
+		let finalYspeed1 = newYspeed1;
+		let finalXspeed2 = (e1.radius * 2 * newXspeed1 + (e2.radius - e1.radius) * newXspeed2) / (e1.radius + e2.radius);
+		let finalYspeed2 = newYspeed2;
+			
+		//Values of collisionAngle
+		let cosAngle = Math.cos(collisionAngle);
+		let sinAngle = Math.sin(collisionAngle);
+			
+		//To also keep velocites relative to pure collisionAngle, subtract sin*x from cos*x and add sin*y to cos*y because coordSystem has y = 0 on the top
+		let u1x = cosAngle * finalXspeed1 - sinAngle * finalYspeed1;
+		let u1y = sinAngle * finalXspeed1 + cosAngle * finalYspeed1;
+		let u2x = cosAngle * finalXspeed2 - sinAngle * finalYspeed2;
+		let u2y = sinAngle * finalXspeed2 + cosAngle * finalYspeed2;
+			
+		//Set new velocities to both balls
+		e1.vel.x = u1x;
+		e1.vel.y = u1y;
+		e2.vel.x = u2x;
+		e2.vel.y = u2y;
+		
+		//Move balls one vx/vy forward to avoid double inverting collision detection
+		e1.pos.x += e1.vel.x;
+		e1.pos.y += e1.vel.y;
+		e2.pos.x += e2.vel.x;
+		e2.pos.y += e2.vel.y;
+	}
+	
+}

public/lib/benjocraeft/colorPicker.js

@@ -0,0 +1,278 @@
+class ColorPicker {
+	
+	constructor(){
+		this.movingObject = "";
+	}
+	
+	updateFromGraphical(){
+		this.h = (1 - $("#hue_picker").position().top / $("#hue").height()) * 360;
+		this.s = ($("#sb_picker").position().left + 8) / $("#saturation").width() * 100;
+		this.v = (1 - ($("#sb_picker").position().top + 8) / $("#value").height()) * 100;
+		
+		this.r = HSVtoRGB(this.h, this.s, this.v).r;
+		this.g = HSVtoRGB(this.h, this.s, this.v).g;
+		this.b = HSVtoRGB(this.h, this.s, this.v).b;
+		
+		this.hex = RGBtoHEX(this.r, this.g, this.b);
+		
+		this.updateInterface();
+	}
+	
+	updateFromHSV(){
+		this.h = $($("#color_picker_hsv input")[0]).val();
+		this.s = $($("#color_picker_hsv input")[1]).val();
+		this.v = $($("#color_picker_hsv input")[2]).val();
+		
+		this.r = HSVtoRGB(this.h, this.s, this.v).r;
+		this.g = HSVtoRGB(this.h, this.s, this.v).g;
+		this.b = HSVtoRGB(this.h, this.s, this.v).b;
+		
+		this.hex = RGBtoHEX(this.r, this.g, this.b);
+		
+		this.updateFromHEX(null, true);
+		
+		this.updateInterface();
+	}
+	
+	updateFromRGB(){
+		this.r = $($("#color_picker_rgb input")[0]).val();
+		this.g = $($("#color_picker_rgb input")[1]).val();
+		this.b = $($("#color_picker_rgb input")[2]).val();
+		
+		this.h = RGBtoHSV(this.r, this.g, this.b).h;
+		this.s = RGBtoHSV(this.r, this.g, this.b).s;
+		this.v = RGBtoHSV(this.r, this.g, this.b).v;
+		
+		this.hex = RGBtoHEX(this.r, this.g, this.b);
+		
+		this.updateFromHEX(null, true);
+		
+		this.updateInterface();
+	}
+	
+	updateFromHEX(input, otf){
+		if (!otf){ //Not on the fly
+			if ($(input).val().isValidHEX()) this.hex = $(input).val();
+			else {
+				alert("Error!");
+				return;
+			}
+		}
+		
+		this.r = HEXtoRGB(this.hex).r;
+		this.g = HEXtoRGB(this.hex).g;
+		this.b = HEXtoRGB(this.hex).b;
+		
+		this.h = RGBtoHSV(this.r, this.g, this.b).h;
+		this.s = RGBtoHSV(this.r, this.g, this.b).s;
+		this.v = RGBtoHSV(this.r, this.g, this.b).v;
+		
+		this.updateInterface();
+	}
+	
+	updateInterface(){
+		
+		let r = $($("#color_picker_rgb input")[0]),
+			g = $($("#color_picker_rgb input")[1]),
+			b = $($("#color_picker_rgb input")[2]),
+			h = $($("#color_picker_hsv input")[0]),
+			s = $($("#color_picker_hsv input")[1]),
+			v = $($("#color_picker_hsv input")[2]),
+			hex = $("#color_picker_hex"),
+			bgColor;
+		
+		r.val(round(this.r));
+		g.val(round(this.g));
+		b.val(round(this.b));
+		h.val(round(this.h));
+		s.val(round(this.s));
+		v.val(round(this.v));
+		bgColor = color(this.r, 0, 0);
+		r.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		bgColor = color(0, this.g, 0);
+		g.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		bgColor = color(0, 0, this.b);
+		b.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		colorMode(HSL);
+		bgColor = color(this.h, 100, 50);
+		h.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		bgColor = color(this.h, this.s, 100 - this.s / 2);
+		s.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		bgColor = color(this.h, 100, this.v / 2);
+		v.css({
+			"background-color": bgColor.toString(),
+			"color": fontColor(bgColor)
+		});
+		colorMode(RGB);
+		hex.val(this.hex);
+		hex.css({
+			"background-color": this.hex,
+			"color": fontColor(color(this.hex))
+		});
+		
+		
+		let sRGB = HSVtoRGB(this.h, 100, 100);
+		let saturationBackground = "linear-gradient(to right, #FFF 0%, rgb(" 
+									+ sRGB.r + "," 
+									+ sRGB.g + "," 
+									+ sRGB.b + ") 100%)";
+		$("#hue_picker").css("top", (1 - this.h / 360) * $("#hue").height());
+		$("#sb_picker").css({
+			"left": this.s / 100 * $("#saturation").width() - 8,
+			"top": (1 - this.v / 100) * $("#value").height() - 8
+		});
+		$("#saturation").css("background", saturationBackground);
+		
+	}
+	
+	mousePressed(){
+		let x = winMouseX - $("#saturation").offset().left;
+		let y = winMouseY - $("#value").offset().top;
+		if (x > 0 && x < $("#saturation").width() && y > 0 && y < $("#value").height()){
+			this.movingObject = "sb";
+		}
+		if (x > $("#saturation").width() + 6 && x < $("#saturation").width() + 6 + $("#hue").width() && y > 0 && y < $("#hue").height()){
+			this.movingObject = "hue";
+		}
+		this.mouseDragged();
+	}
+	
+	mouseDragged(){
+		if (this.movingObject == "hue"){
+			let objH = $("#hue");
+			let picker = $("#hue_picker");
+			let h = winMouseY - objH.offset().top;
+			if (h > 0 && h < objH.height()){
+				picker.css("top", h - 1);
+			} else if (h > objH.height()){
+				picker.css("top", objH.height() - 1);
+			} else if (h < 0){
+				picker.css("top", -1);
+			}
+		}
+		
+		if (this.movingObject == "sb"){
+			let objS = $("#saturation");
+			let objV = $("#value");
+			let picker = $("#sb_picker");
+			let s = winMouseX - objS.offset().left;
+			let v = winMouseY - objV.offset().top;
+			if (s > 0 && s < objS.width()){
+				picker.css("left", s - 8);
+			} else if (s < 0){
+				picker.css("left", -8);
+			} else if (s < objS.width()){
+				picker.css("left", objS.width() - 8);
+			}
+			if (v > 0 && v < objV.height()){
+				picker.css("top", v - 8);
+			} else if (v < 0){
+				picker.css("top", -8);
+			} else if (v > objV.height()){
+				picker.css("top", objV.height() - 8);
+			}
+		}
+		
+		this.updateFromGraphical();
+	}
+	
+	mouseReleased(){
+		this.movingObject = "";
+	}
+	
+	getColor(){
+		return this.hex;
+	}
+}
+
+function fontColor(bg){
+	//http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
+	let o = (red(bg) * 299 + green(bg) * 587 + blue(bg) * 114) / 1000;
+  	return (o > 125) ? "#000" : "#CCC";
+}
+
+//www.stackoverflow.com -->
+function RGBtoHEX(r, g, b) {
+	let rgb = b | (g << 8) | (r << 16);
+    return '#' + (0x1000000 + rgb).toString(16).slice(1);
+}
+
+function HEXtoRGB(hex) {
+    let shorthandRegex = /^#?([a-fA-F\d])([a-fA-F\d])([a-fA-F\d])$/i;
+    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    let result = /^#?([a-fA-F\d]{2})([a-fA-F\d]{2})([a-fA-F\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+}
+
+function HSVtoRGB(h, s, v) {
+    let r, g, b, i, f, p, q, t;
+    if (arguments.length === 1) {
+        s = h.s, v = h.v, h = h.h;
+    }
+	h /= 360;
+	s /= 100;
+	v /= 100;
+    i = Math.floor(h * 6);
+    f = h * 6 - i;
+    p = v * (1 - s);
+    q = v * (1 - f * s);
+    t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+        case 0: r = v, g = t, b = p; break;
+        case 1: r = q, g = v, b = p; break;
+        case 2: r = p, g = v, b = t; break;
+        case 3: r = p, g = q, b = v; break;
+        case 4: r = t, g = p, b = v; break;
+        case 5: r = v, g = p, b = q; break;
+    }
+    return {
+        r: r * 255,
+        g: g * 255,
+        b: b * 255
+    };
+}
+
+function RGBtoHSV(r, g, b) {
+    if (arguments.length === 1) {
+        g = r.g, b = r.b, r = r.r;
+    }
+    let max = Math.max(r, g, b), min = Math.min(r, g, b),
+        d = max - min,
+        h,
+        s = (max === 0 ? 0 : d / max),
+        v = max / 255;
+
+    switch (max) {
+        case min: h = 0; break;
+        case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
+        case g: h = (b - r) + d * 2; h /= 6 * d; break;
+        case b: h = (r - g) + d * 4; h /= 6 * d; break;
+    }
+
+    return {
+        h: h * 360,
+        s: s * 100,
+        v: v * 100
+    };
+}

public/lib/benjocraeft/cookie.js

@@ -0,0 +1,29 @@
+function setCookie(name, value, years){
+	let expires = "";
+	if (years){
+		let date = new Date();
+		date.setTime(date.getTime() + (years * 365 * 24 * 60 * 60 * 1000));
+		expires = "; expires=" + date.toUTCString();
+	}
+	document.cookie = name + "=" + value + expires + "; path=/";
+}
+
+function getCookie(name){
+	let nameEQ = name + "=";
+	let ca = document.cookie.split(';');
+	for (let i = 0; i < ca.length; i++){
+		let c = ca[i];
+		while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+	}
+	return null;
+}
+
+function deleteCookies(){
+	for (let i = 0; i < arguments.length; i++) setCookie(arguments[i], "", -1);
+}
+
+function deleteAllCookies(){
+	let cookies = document.cookie.split(";");
+	for (let i = 0; i < cookies.length; i++) deleteCookies(cookies[i].split("=")[0]);
+}

public/lib/benjocraeft/loader.js

@@ -0,0 +1,30 @@
+class Loader{
+
+    constructor(dom){
+        this.dim = createVector($(dom).width(), $(dom).height());
+        this.c = createGraphics(this.dim.x, this.dim.y);
+        this.c.parent(dom);
+        this.radius = min(this.dim.x, this.dim.y) * 0.4;
+        this.center = createVector(this.dim.x / 2, this.dim.y / 2);
+        $(dom).find('canvas').show();
+        this.angle = 0;
+    }
+
+    update(){
+        this.angle += PI / 10;
+    }
+
+    display(){
+        let c = this.c;
+        c.clear();
+        c.noFill();
+        c.stroke(0);
+        c.strokeWeight(5);
+        c.arc(this.center.x, this.center.y, this.radius * 2, this.radius * 2, this.angle, this.angle + PI + HALF_PI);
+    }
+
+    destroy(){
+        this.c.remove();
+    }
+
+}

public/lib/benjocraeft/prototypes.js

@@ -0,0 +1,30 @@
+Array.prototype.shuffle = function(){
+	let currentIndex = this.length, temporaryValue, randomIndex;
+	while (0 != currentIndex){
+    	randomIndex = floor(random() * currentIndex);
+    	currentIndex -= 1;
+    	temporaryValue = this[currentIndex];
+    	this[currentIndex] = this[randomIndex];
+    	this[randomIndex] = temporaryValue;
+  	}
+}
+
+Array.prototype.copy = function(){
+	return this.slice(0);
+};
+
+//Divides big Array into big multidimensional Array
+Array.prototype.partitiate = function(dimensions){
+	if (!dimensions) return this;
+	let parts = [];
+	while(this.length) parts.push(this.splice(0, round(pow(this.length, 1 / (1 + 1 / dimensions)))).partitiate(dimensions - 1));
+	return parts;
+}
+
+String.prototype.isValidHEX = function(){
+	return /(^#[0-9A-Fa-f]{6}$)|(^#[0-9A-Fa-f]{3}$)/i.test(this);
+}
+
+String.prototype.capitalize = function(){
+	return this.charAt(0).toUpperCase() + this.slice(1);
+}

public/lib/benjocraeft/technical.js

@@ -0,0 +1,52 @@
+function toTimeString(time, hoursWanted){
+	
+	time = floor(time / 10);
+	
+	let hs = String(floor(time % 100));
+	let fs = String(floor((time / 100) % 60));
+	
+	if (hoursWanted){
+		let min = String(floor(((time / 100) / 60) % 60));
+		let hr = String(floor(((time / 100) / 60) / 60));
+		
+		if (hs.length < 2) hs = "0" + hs;
+		if (fs.length < 2) fs = "0" + fs;
+		if (min.length < 2) min = "0" + min;
+		if (hr.length < 2) hr = "0" + hr;
+		
+		return hr + ":" + min + ":" + fs + ":" + hs;
+	} else {
+		let min = String(floor(((time / 100) / 60) % 60));
+		
+		if (hs.length < 2) hs = "0" + hs;
+		if (fs.length < 2) fs = "0" + fs;
+		if (min.length < 2) min = "0" + min;
+		
+		return min + ":" + fs + ":" + hs;
+	}
+}
+
+
+
+
+function debugInformation(x, y){
+	push();
+	textSize(12);
+	textStyle(NORMAL);
+	stroke(255);
+	strokeWeight(1);
+	fill(255);
+	text("FPS : " + round(frameRate()), 10 + x, 10 + textAscent("FPS : ") + y);
+	text("MouseX : " + round(mouseX + x), 10 + x, 10 + textAscent("FPS : ") + 10 + textAscent("MouseX : ") + y);
+	text("MouseY : " + round(-mouseY - y), 10 + x, 10 + textAscent("FPS : ") + 10 + textAscent("MouseX : ") + 10 + textAscent("MouseY : ") + y);
+	pop();
+}
+
+function ranBool(chance){
+	if (!chance) chance = 2;
+	return Math.floor(Math.random() * chance + 1) === chance;
+}
+
+function ranBoolP(chancePercentage){
+	return chancePercentage > Math.random();
+}

public/lib/jquery/jq-ajax-progress.min.js

@@ -0,0 +1 @@
+!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){var t=e.ajax.bind(e);e.ajax=function(n,r){"object"==typeof n&&(r=n,n=void 0);var o=(r=r||{chunking:!1}).xhr?r.xhr():e.ajaxSettings.xhr(),s=r.chunking||e.ajaxSettings.chunking;return r.xhr=function(){if("function"==typeof r.uploadProgress){if(!o.upload)return;o.upload.onprogress=null,o.upload.addEventListener("progress",function(e){r.uploadProgress.call(this,e)},!1)}if("function"==typeof r.progress){var e=0;o.addEventListener("progress",function(t){var n=[t],o="";this.readyState===XMLHttpRequest.LOADING&&s&&(o=this.responseText.substr(e),e=this.responseText.length,n.push(o)),r.progress.apply(this,n)},!1)}return o},t(n,r)}});

public/php/get_nodejs_port.php

@@ -0,0 +1,3 @@
+<?php
+    $port = parse_ini_file('../../env_config.ini')['nodejs_port'];
+    echo $port;

public/php/phpinfo.php

@@ -0,0 +1,2 @@
+<?php
+    phpinfo();

public/php/post_feedback.php

@@ -0,0 +1,17 @@
+<?php
+$response_array = array();
+
+include_once $_SERVER['DOCUMENT_ROOT'] . '/../private/mysql_connect.php';
+$conn = new MySQLConnection();
+
+$content = $_POST['content'];
+$projectName = $_POST['projectName'];
+
+$sql = "INSERT INTO feedbacks (content, project_name)
+		VALUES ('$content', '$projectName')";
+$result = $conn->query($sql);
+
+$response_array['result'] = json_encode($result);
+
+header('Content-type: application/json');
+echo json_encode($response_array);

public/styles.css

@@ -0,0 +1,98 @@
+@import url("index_data/fonts/red_hat_mono.css");
+@import url("index_data/fonts/rametto.css");
+
+:root{
+	--border-green: rgb(51, 122, 166);
+}
+
+*{
+	font-family: "Red Hat Mono", serif;
+}
+
+button{
+	cursor: pointer;
+}
+
+h1{
+	margin: 0;
+	padding: 10px;
+	font-size: 40px;
+	background-color: rgb(96, 96, 96);
+	border-bottom: 5px solid var(--border-green);
+	border-radius: 8px 8px 0 0;
+}
+
+h4{
+	margin: 5px;
+}
+
+body{
+	background-color: rgb(30, 30, 30);
+}
+
+#content{
+	margin: 10px 2.5%;
+	background-color: rgb(61, 61, 61);
+	border: 5px solid var(--border-green);
+	text-align: center;
+	color: rgb(200, 200, 200);
+	border-radius: 15px;
+}
+
+#projects-container{
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.project{
+	width: calc(50% - 20px - 20px - 4px);
+	margin: 10px;
+	background-color: #252525;
+	border-radius: 10px;
+	border: 2px solid var(--border-green);
+	padding: 10px 0;
+}
+.project-image{
+	display: inline;
+	vertical-align: middle;
+	width: 50%;
+	border: 2px solid var(--border-green);
+	border-radius: 5px;
+}
+.project-description{
+	display: inline-block;
+	vertical-align: middle;
+	width: 45%;
+}
+.project-name{
+	margin: 5px 0
+}
+.project-info{
+	margin: 0 25px 10px;
+	font-size: 12px;
+}
+.project-start, .project-download{
+	font-size: 20px;
+	margin: 5px;
+	background-color: rgb(0, 177, 0);
+	border: 2px solid #000;
+	border-radius: 4px;
+}
+.project-start:hover, .project-download:hover{
+	background-color: rgb(0, 240, 0);
+}
+
+#imprint{
+	color: #FFF;
+	font-size: 15px;
+	margin: auto;
+	left: 0;
+	right: 0;
+	font-family: serif;
+	text-align: center;
+}
+
+#site-description{
+	width: 50%;
+	margin: auto;
+}

ssl_certificate/make_selfsigned.sh

@@ -0,0 +1 @@
+openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem