first commit

MageStudio · Nov 18, 2019 · 02a4a46 · 02a4a46
commit 02a4a46
Show file tree

Hide file tree

Showing 12 changed files with 9,253 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+project/node_modules/
+**/**/.DS_Store
diff --git a/project/assets/models/.sample b/project/assets/models/.sample
diff --git a/project/assets/textures/.sample b/project/assets/textures/.sample
diff --git a/project/css/M.css b/project/css/M.css
@@ -0,0 +1,183 @@
+@font-face {
+    font-family: 'OstrichBlack';
+    src: url('../fonts/OstrichSans-Black.otf');
+}
+
+body {
+    overflow: hidden;
+    background-color: #2c3e50;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+}
+
+.visible {
+    visibility: visible;
+}
+
+.invisible {
+    display: none;
+    visibility: hidden;
+}
+
+canvas {
+	position:absolute;
+	width:100%;
+	height:100%;
+	margin:0;
+	padding:0;
+	top:0;
+	left:0;
+	z-index: 101;
+}
+
+#gameContainer {
+    z-index: 100;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+
+#ui {
+    position: absolute;
+    z-index: 101;
+}
+
+.loader {
+    position: absolute;
+    height: 100vh;
+    width: 100vw;
+    z-index: 110;
+    background-color: #2c3e50;
+}
+
+.loader-box {
+  height: 70px;
+  width: 500px;
+  padding: 20px;
+  background: #ecf0f1;
+  border: 1px solid #2c3e50;
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.fadeout {
+    animation: fadeOut 1s;
+}
+
+.loading {
+  font-family: monospace;
+}
+
+.text-blink {
+  animation: blink-animation .6s steps(3, start) infinite;
+  -webkit-animation: blink-animation .6s steps(3, start) infinite;
+}
+
+.text-blink.one {
+  animation-delay: .1s;
+}
+
+.text-blink.two {
+  animation-delay: .2s;
+}
+
+.text-blink.three {
+  animation-delay: .3s;
+}
+
+@keyframes blink-animation {
+  to {
+    visibility: hidden;
+  }
+}
+
+@keyframes fadeOut {
+    0%{
+        opacity: 1;
+    }
+    50%{
+        opacity: 0.5;
+    }
+    100%{
+        display: none;
+        opacity: 0;
+    }
+}
+
+@keyframes loader {
+
+	0% {
+		width: 0;
+	}
+
+	20% {
+		width: 10%;
+	}
+
+	25% {
+		width: 24%;
+	}
+
+	43% {
+		width: 41%;
+	}
+
+	56% {
+		width: 50%;
+	}
+
+	66% {
+		width: 52%;
+	}
+
+	71% {
+		width: 60%;
+	}
+
+	75% {
+		width: 76%;
+
+	}
+
+	94% {
+		width: 86%;
+	}
+
+	100% {
+		width: 100%;
+	}
+
+}
+
+.progress-bar {
+	border-radius: 60px;
+	overflow: hidden;
+    width: 100%;
+    height: 6px;
+    margin-top: -4px;
+}
+
+.progress-bar span {
+	display: block;
+}
+
+.bar {
+    background: #eee;
+}
+
+.progress {
+    animation: loader 8s ease forwards;
+    background: #2c3e50;
+    color: #fff;
+    padding: 5px;
+    width: 0;
+}
diff --git a/project/fonts/OstrichSans-Black.otf b/project/fonts/OstrichSans-Black.otf
diff --git a/project/index.html b/project/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+		<link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="/css/M.css">
+        <link rel="stylesheet" href="/css/app.css">
+        <script type="text/javascript" src="dist/app.js"></script>
+    </head>
+    <body>
+        <div class='loader'>
+            <div class='loader-box'>
+                <p class='loading'>
+                    loading
+                    <span class="text-blink one">.</span>
+                    <span class="text-blink two">.</span>
+                    <span class="text-blink three">.</span>
+                </p>
+                <div class="progress-bar">
+                    <span class="bar">
+                        <span class="progress"></span>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div id="ui"></div>
+        <div id="gameContainer"/>
+    </body>
+</html>