0.6.0

Author: amytimed

build.js

@@ -154,7 +154,7 @@ var steps = [
         console.log(stepInfo, 'Installing node_modules...');
         // install node_modules in dist
         await new Promise((resolve, reject) => {
-            const child = exec('npm install --production', { cwd: path.join(__dirname, 'dist') });
+            const child = exec('npm install --omit=dev', { cwd: path.join(__dirname, 'dist') });
             child.stdout.on('data', (data) => {
                 console.log(indentLines(data.toString(), 4));
             });

client/assets/textures/basic_car.png

@@ -365,9 +365,33 @@ details summary {
   color: #ffffff50;
   font-family: "Urbanist", sans-serif;
   font-size: 1em;
-  padding: 0 0.7em;
+  padding: 0;
   z-index: 100;
-  border-radius: 1rem;
+  border-radius: 0.8rem;
+  -webkit-backface-visibility: hidden;
+  -webkit-perspective: 1000;
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000;
+  transform: translate3d(0, 0, 0);
+  transform: translateZ(0);
+  backdrop-filter: blur(35px);
+  display: none;
+  position: absolute;
+  user-select: none;
+  min-width: 8rem;
+  margin-top: 0.7rem;
+}
+
+.object-options-menu {
+  background: #03081dc0;
+  color: #ffffff50;
+  font-family: "Urbanist", sans-serif;
+  font-size: 1em;
+  padding: 0;
+  z-index: 100;
+  border-radius: 0.8rem;
   -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000;
   -webkit-transform: translate3d(0, 0, 0);
@@ -377,12 +401,17 @@ details summary {
   transform: translate3d(0, 0, 0);
   transform: translateZ(0);
   backdrop-filter: blur(35px);
-  top: 2rem;
-  left: 0;
   display: none;
   position: absolute;
   user-select: none;
-  width: 8rem;
+  min-width: 8rem;
+  margin-left: 0.3rem;
+  margin-top: 0.3rem;
+  flex-direction: column;
+}
+
+.object-options-menu .button {
+  padding: 0.2em 0.5rem;
 }
 
 .file-menu-content ul {
@@ -394,6 +423,16 @@ details summary {
 .file-menu-content li {
   padding: 0.2rem 1rem;
   margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.file-menu-content li svg {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: #fff;
+  margin-right: 0.5rem;
 }
 
 .button {
@@ -453,6 +492,8 @@ details summary {
   fill: #e0ddff40;
 }
 
+
+
 .toolbar img {
   width: 100%;
   height: 100%;
@@ -829,15 +870,39 @@ details summary {
   flex-shrink: 0;
   transition: background 0.1s ease-in-out;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   user-select: none;
+  position: relative;
+}
+
+.object .options {
+  position: absolute;
+  top: 0.2rem;
+  right: 0;
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+
+
+.object .options svg {
+  fill: #ffffff00;
 }
 
 .object:hover {
   background: #ffffff30;
 }
 
+.object:hover .options svg {
+  fill: #ffffff80;
+}
+
+.object:hover .options svg:hover {
+  fill: #ffffff;
+}
+
 .object img {
   width: 70%;
   height: 70%;
@@ -880,4 +945,80 @@ details summary {
 .object-grid-bar span {
   margin: 0.5rem 0;
   color: #ffffffff;
+}
+
+.toolbar.save-list {
+  height: auto;
+  display: flex;
+  /* make it rows */
+  flex-direction: column;
+  /* align left */
+  justify-content: flex-start;
+  align-items: flex-start;
+  border-radius: 1rem;
+  user-select: none;
+  position: fixed;
+  top: 3rem;
+  left: 0.5rem;
+  bottom: auto;
+  min-width: 30rem;
+}
+
+
+
+.save-list .top-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.save-list .top-bar .close svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.save-list .top-bar .close:hover svg {
+  fill: #ffffff;
+}
+
+.save-list .top-bar .close:active svg {
+  fill: #ffffff20;
+}
+
+.save-grid .scene {
+  width: 100%;
+  padding: 0.5rem;
+}
+
+.save-grid {
+  width: 100%;
+  max-height: 20rem;
+  overflow-y: auto;
+  margin-bottom: 0.5rem;
+}
+
+.save-grid .top-text {
+  width: 100%;
+  display: block;
+}
+
+.save-list .top-bar .close {
+  margin-top: 0.5rem;
+}
+
+.save-list span {
+  margin: 0.5rem 0;
+  color: #ffffffff;
+}
+
+.toolbar .tool.ready svg {
+  transform: scale(1.1);
+  fill: #e0ddff50;
+}
+
+.toolbar .tool.drop svg {
+  transform: scale(1.3);
+  fill: #ffffff;
 }

client/assets/textures/tools/axle.png

@@ -45,7 +45,6 @@
   <div class="version-info" id="version-info">Simulo Alpha</div>
   <div id="pause-overlay">
     <svg data-src="icons/pause.svg"></svg>
-    Note: the select/move tool and the drag tool are currently unstable when paused!
   </div>
   <div class="popup-container">
     <div class="starting-popup">
@@ -55,7 +54,7 @@ <h3>Welcome back</h3>
       </div>
       <h4>Reminder:</h4>
       <ul>
-        <li>This Alpha version is not stable enough to build anything serious with, treat it only as a demo of the
+        <li>This Alpha version is not stable enough to build anything serious with, treat it mostly as a demo of the
           Simulo
           game
           engine.</li>
@@ -71,6 +70,9 @@ <h4>Reminder:</h4>
         </li>
         <li>Use number keys (<kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>) to switch between
           toolbars. If a toolbar is disabled, you won't be able to open it.</li>
+        <li>You can save objects by dragging them to the Objects tab of the toolbar. You can also copy-paste objects
+          with
+          CTRL+C and CTRL+V after selecting them with the Move Tool.</li>
       </ul>
       <h4>Pick a theme!</h4>
       <div class="themes"></div>
@@ -184,7 +186,7 @@ <h4>Pick a theme!</h4>
     <div class="tool" data-tool="addAxle">
       <svg data-src="icons/axle.svg"></svg>
     </div>
-    <div class="tool" data-tool="addFixedJoint">
+    <div class="tool" data-tool="addBolt">
       <svg data-src="icons/bolt.svg"></svg>
     </div>
   </div>
@@ -209,25 +211,40 @@ <h4>Pick a theme!</h4>
     </div>
   </div>
 
-  <div class="toolbar file">
-    <div class="file-menu" data-file="file">File<div class="file-menu-content" id="file">
-        <ul>
-          <li class="button">Joe</li>
-          <li class="button">Joe</li>
-        </ul>
-      </div>
-    </div>
-    <div class="file-menu" data-file="settings">Settings<div class="file-menu-content" id="settings">
-        <ul>
-          <li class="button">Joe</li>
-          <li class="button">Joe</li>
-        </ul>
+  <div class="toolbar save-list" id="save-list" style="display: none;">
+    <div class="top-bar"><span>Scenes</span>
+      <div class="close" onclick="closeSaveList()">
+        <svg data-src="icons/close.svg"></svg>
       </div>
     </div>
+    <div class="save-grid"></div>
+    <script>
+      let saveList = document.getElementById("save-list");
+      function closeSaveList() {
+        saveList.style.display = "none";
+      }
+    </script>
   </div>
 
+  <div class="toolbar file">
+    <div class="file-menu" data-file="file">File</div>
+    <div class="file-menu" data-file="settings">Settings</div>
+  </div>
 
-
+  <div class="file-menu-content" id="file">
+    <ul>
+      <li class="button" data-file="new-scene"><svg data-src="icons/plus-box.svg"></svg>New scene</li>
+      <li class="button" data-file="save-scene"><svg data-src="icons/content-save.svg"></svg>Save scene</li>
+      <li class="button" data-file="load-scene"><svg data-src="icons/folder.svg"></svg>Load scene</li>
+      <li class="button" data-file="import"><svg data-src="icons/upload.svg"></svg>Import</li>
+      <li class="button" data-file="export-scene"><svg data-src="icons/download.svg"></svg>Export scene</li>
+    </ul>
+  </div>
+  <div class="file-menu-content" id="settings">
+    <ul>
+      <li class="button">Coming soon!</li>
+    </ul>
+  </div>
 
 
   <div class="chat" style="display: none;">

client/assets/textures/tools/bolt.png

@@ -63,7 +63,7 @@ class SimuloViewer {
     ctx: CanvasRenderingContext2D;
     /** The canvas that the viewer is drawing to. You can update this along with `ctx` to change the canvas mid-run. */
     canvas: HTMLCanvasElement;
-    cameraOffset: { x: number, y: number };
+    cameraOffset: { x: number, y: number } = { x: 0, y: 0 };
     cameraZoom = 30;
     private lastX: number;
     private lastY: number;
@@ -159,6 +159,10 @@ class SimuloViewer {
     }
     private lastTouchX = 0;
     private lastTouchY = 0;
+    resetCamera() {
+        this.cameraOffset = { x: window.innerWidth / 2, y: (window.innerHeight / 2) - 700 }; // start at center, offset by 700. can be changed later by controller
+        this.cameraZoom = 30;
+    }
     constructor(canvas: HTMLCanvasElement) {
         console.log("SimuloViewer constructor");
         this.canvas = canvas;
@@ -173,9 +177,7 @@ class SimuloViewer {
         if (this.canvas.tabIndex == -1) {
             this.canvas.tabIndex = 1;
         }
-        var windowEnd = this.transformPoint(window.innerWidth, window.innerHeight);
-        this.cameraOffset = { x: windowEnd.x / 2, y: (windowEnd.y / 2) - 700 }; // start at center, offset by 700. can be changed later by controller
-
+        this.resetCamera();
         this.lastX = window.innerWidth / 2;
         this.lastY = window.innerHeight / 2;
         this.lastMouseX = this.lastX;