first commit

2024-02-28 16:47:11 +01:00
commit d71da296b2
66 changed files with 7363 additions and 0 deletions
--- a/index/games/fractal/index.html
+++ b/index/games/fractal/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Fractal</title>
+    <link rel="stylesheet" type="text/css" href="../../../style/style.css" />
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="../../../res/site/icons/favicon.ico"
+    />
+  </head>
+
+  <body>
+    <header class="page-header" role="banner">
+      <h1 class="project-name">Fractal</h1>
+      <h2 class="project-tagline">
+        Interactive fractal using
+        <a href="https://github.com/xaos-project/XaoSjs">XaoS.js</a>.
+      </h2>
+
+      <a href="../../../" class="btn">Home</a>
+      <a href="../" class="btn">Games</a>
+    </header>
+
+    <div class="container">
+      <canvas id="canvas">
+        <p>
+          Your browser doesn't seem to support the &lt;canvas&gt; tag. Try
+          <a href="http://firefox.com">Firefox</a>.
+        </p>
+      </canvas>
+      <div id="controls">
+        <button
+          id="fullScreenButton"
+          class="btn btn-primary"
+          onclick="goFullScreen();"
+        ></button>
+        <a href="./" id="resetButton" class="btn btn-danger">Reset</a>
+        <a
+          href="#"
+          id="saveCanvasButton"
+          class="btn btn-primary"
+          download="fractal.png"
+          onclick="saveCanvas()"
+          >Capture</a
+        ><br />
+      </div>
+    </div>
+    <script src="./script/xaos.js"></script>
+    <script src="./script/starter-template.js"></script>
+  </body>
+</html>
--- a/index/games/fractal/script/starter-template.js
+++ b/index/games/fractal/script/starter-template.js
@@ -0,0 +1,12 @@
+function saveCanvas() {
+  saveCanvasButton.download = "image.png";
+  saveCanvasButton.href = canvas
+    .toDataURL("image/png")
+    .replace("image/png", "image/octet-stream");
+}
+
+function goFullScreen() {
+  if (canvas.requestFullScreen) canvas.requestFullScreen();
+  else if (canvas.webkitRequestFullScreen) canvas.webkitRequestFullScreen();
+  else if (canvas.mozRequestFullScreen) canvas.mozRequestFullScreen();
+}
--- a/index/games/fractal/script/xaos.js
+++ b/index/games/fractal/script/xaos.js
--- a/index/games/fractal/style.css
+++ b/index/games/fractal/style.css
@@ -0,0 +1,67 @@
+#controls {
+  position: relative;
+  margin-bottom: 2.5em;
+}
+
+#canvas {
+  width: 100%;
+  height: 100vh;
+  margin-bottom: 0.5em;
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+#fullScreenButton {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+  bottom: 3rem;
+  visibility: hidden;
+}
+
+@media only screen and (max-width: 600px) {
+  #fullScreenButton {
+    visibility: visible;
+    opacity: 0;
+  }
+
+  #saveCanvasButton {
+    visibility: hidden;
+  }
+}
+
+#resetButton {
+  position: absolute;
+  left: 0em;
+}
+
+#saveCanvasButton {
+  position: absolute;
+  right: 0.1em;
+  visibility: visible;
+}
+
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 750px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    width: 970px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    width: 1170px;
+  }
+}