Merge pull request #16 from poeticAndroid/glitch

v0.15

README.md

@@ -3,17 +3,19 @@
 ```html
 <script type="text/javascript" src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-physics-system.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.14/components/utils.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.14/components/a-locomotion.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.14/components/a-items.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.14/components/a-include.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.14/components/a-editor.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.14/components/a-tiledwalls.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.14/components/a-door.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/utils.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-locomotion.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-items.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-include.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-editor.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-tiledwalls.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-door.js"></script>
 ```
 
 [Click for demo!](https://poetic-aframe.glitch.me/)
 
+[Try out the scene editor!](https://poetic-aframe.glitch.me/editor.html)
+
 ## Documentation
 
 - [a-locomotion.js](https://github.com/poeticAndroid/poetic-aframe/blob/master/components/a-locomotion.md)

components/a-editor.js

@@ -141,6 +141,8 @@
           m.src.setAttribute("scale", str)
         else
           m.src.removeAttribute("scale")
+        if (!m.src.getAttribute("class"))
+          m.src.removeAttribute("class")
       }
       // this._src.flushToDOM(true)
       localStorage.setItem("#world", this._src.outerHTML.replace(/=""/g, "").trim())

editor.html

@@ -55,7 +55,10 @@
   <script>
     let txt = document.querySelector("textarea")
     txt.addEventListener("focus", () => {
-      txt.value = localStorage.getItem("#world").replace(/><a-/gi, ">\n  <a-").trim()
+      if (localStorage.getItem("#world"))
+        txt.value = localStorage.getItem("#world").replace(/><a-/gi, ">\n  <a-").trim()
+      else
+        load("scenes/new.html")
     })
     txt.addEventListener("change", () => {
       localStorage.setItem("#world", txt.value.trim())
@@ -77,13 +80,13 @@
 
     let copyBtn = document.querySelector("#copyBtn")
     copyBtn.addEventListener("click", () => {
-      navigator.clipboard.writeText(localStorage.getItem("#world"))
+      navigator.clipboard.writeText(txt.value)
     })
 
     let editBtn = document.querySelector("#editBtn")
     editBtn.addEventListener("click", () => {
       let grid = 1 / parseFloat(document.querySelector("#densTxt").value)
-      let rot =  parseFloat(document.querySelector("#rotTxt").value)
+      let rot = parseFloat(document.querySelector("#rotTxt").value)
       document.body.innerHTML = `
         <a-scene>
           <a-entity include="scenes/_assets.html"></a-entity>

scenes/new.html

@@ -1,25 +1,68 @@
 <a-entity id="world">
-  <a-sky src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fskybox0.png?v=1592248851267" scale="-1 1 1">
-  </a-sky>
+  <a-sky src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fskybox0.png?v=1592248851267" scale="-1 1 1"> </a-sky>
   <a-entity start></a-entity>
-  <a-box rotation="-90 0 0" src="https://cdn.aframe.io/a-painter/images/floor.jpg" width="16" height="16" depth="0.01"
-    floor></a-box>
+  <a-box rotation="-90 0 0" src="https://cdn.aframe.io/a-painter/images/floor.jpg" width="16" height="16" depth="0.01" floor></a-box>
   <a-box color="#fc9" position="0 1.55 -4" rotation="10 11 12.000000000000002" height="0.4" grabbable></a-box>
   <a-box color="#c9f" position="-0.55 0.55 -4" rotation="10 11 12.000000000000002" grabbable></a-box>
-  <a-box color="#9fc" position="1.55 0.55 -3" scale="0.5 0.5 0.5" grabbable></a-box>
-  <a-gltf-model grabbable src="#cat" position="0 1 -3" rotation="1 2 4" class></a-gltf-model>
-  <a-gltf-model src="#bunny" position="0 2 -3" scale="0.03125 0.03125 0.03125" class></a-gltf-model>
-  <a-gltf-model class grabbable="freeOrientation:false"
+  <a-box color="#9fc" position="3 1 -1.5" scale="0.5 0.5 0.5" grabbable rotation="0 -45 0"></a-box>
+  <a-gltf-model grabbable src="#cat" position="0 1 -3" rotation="1 2 4"></a-gltf-model>
+  <a-gltf-model src="#bunny" position="0 2 -3" scale="0.03125 0.03125 0.03125"></a-gltf-model>
+  <a-gltf-model
+    grabbable="freeOrientation:false"
     src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fgun.glb?v=1596117169794"
-    sound="on:usedown; src:#shot; poolSize:8;" position="0 0.1 -1" rotation="1 2 4" scale="0.05 0.05 0.05">
-  </a-gltf-model>
-  <a-box src="#granite" position="0 1 5" depth="0.125" floor wall class></a-box>
-  <a-entity class door position="1 1 5" rotation="0 90 0">
-    <a-box wall material="repeat: 1 2" thickness="0.125" position="0.5 0 0"
-      src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fseamless_texture_rovere_wood_parquet_DIFFUSE.jpg?v=1592051409386">
-      <a-box position="0.4 0 0" color="#421" scale="0.125 0.0625 0.25"></a-box>
+    sound="on:usedown; src:#shot; poolSize:8;"
+    position="0 0.1 -1"
+    rotation="1 2 4"
+    scale="0.05 0.05 0.05"
+  ></a-gltf-model>
+  <a-box src="#granite" position="4.5 0.5 4" depth="0.125" floor wall rotation="0 90 0"></a-box>
+  <a-entity door position="4.5 1 2.5" rotation="0 -90 0">
+    <a-box
+      wall
+      material="repeat: 1 2"
+      thickness="0.125"
+      position="0.5 0 0"
+      src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fseamless_texture_rovere_wood_parquet_DIFFUSE.jpg?v=1592051409386"
+    ><a-box position="0.4 0 0" color="#421" scale="0.125 0.0625 0.25"></a-box>
     </a-box>
   </a-entity>
-  <a-box floor visible="false" position="0 -10 0" scale="1024 1 1024"
-    animation="dur: 20000; property: position; to: 0 -0.6 0; dir: alternate; loop:true;"></a-box>
-</a-entity>
+  <a-box
+    floor
+    visible="false"
+    position="0 -10 0"
+    scale="1024 1 1024"
+    animation="dur: 20000; property: position; to: 0 -0.6 0; dir: alternate; loop:true;"
+  ></a-box>
+  <a-box src="#granite" position="4.5 1.5 4" depth="0.125" floor wall rotation="0 90 0"></a-box>
+  <a-box src="#granite" position="4.5 2.5 4" depth="0.125" floor wall rotation="0 90 0"></a-box>
+  <a-box src="#granite" position="4.5 2.5 3" depth="0.125" floor wall rotation="0 90 0"></a-box>
+  <a-box src="#granite" position="4.5 2.5 2" depth="0.125" floor wall rotation="0 90 0"></a-box>
+  <a-box src="#granite" position="4.5 1.5 2" depth="0.125" floor wall rotation="0 90 0"></a-box>
+  <a-box src="#granite" position="4.5 0.5 2" depth="0.125" floor wall rotation="0 90 0"></a-box>
+  <a-box src="#granite" position="5 0.5 4.5" depth="0.125" floor wall rotation="0 180 0"></a-box>
+  <a-box src="#granite" position="5 1.5 4.5" depth="0.125" floor wall rotation="0 180 0"></a-box>
+  <a-box src="#granite" position="5 2.5 4.5" depth="0.125" floor wall rotation="0 180 0"></a-box>
+  <a-box src="#granite" position="5 2.5 1.5" depth="0.125" floor wall></a-box>
+  <a-box src="#granite" position="5 1.5 1.5" depth="0.125" floor wall></a-box>
+  <a-box src="#granite" position="5 0.5 1.5" depth="0.125" floor wall></a-box>
+  <a-box src="#granite" position="6 2.5 1.5" depth="0.125" floor wall></a-box>
+  <a-box src="#granite" position="6 1.5 1.5" depth="0.125" floor wall></a-box>
+  <a-box src="#granite" position="6 0.5 1.5" depth="0.125" floor wall></a-box>
+  <a-box src="#granite" position="6 2.5 4.5" depth="0.125" floor wall rotation="0 -180 0"></a-box>
+  <a-box src="#granite" position="6 1.5 4.5" depth="0.125" floor wall rotation="0 -180 0"></a-box>
+  <a-box src="#granite" position="6 0.5 4.5" depth="0.125" floor wall rotation="0 180 0"></a-box>
+  <a-box src="#granite" position="6.5 2.5 2" depth="0.125" floor wall rotation="0 -90 0"></a-box>
+  <a-box src="#granite" position="6.5 1.5 2" depth="0.125" floor wall rotation="0 -90 0"></a-box>
+  <a-box src="#granite" position="6.5 0.5 2" depth="0.125" floor wall rotation="0 -90 0"></a-box>
+  <a-box src="#granite" position="6.5 2.5 4" depth="0.125" floor wall rotation="0 -90 0"></a-box>
+  <a-box src="#granite" position="6.5 1.5 4" depth="0.125" floor wall rotation="0 -90 0"></a-box>
+  <a-box src="#granite" position="6.5 0.5 4" depth="0.125" floor wall rotation="0 -90 0"></a-box>
+  <a-box src="#granite" position="6.5 2.5 3" depth="0.125" floor wall rotation="0 -90 0"></a-box>
+  <a-box src="#granite" position="6.5 0.5 3" depth="0.125" floor wall rotation="0 -90 0"></a-box>
+  <a-box src="#granite" position="6 3 2" depth="0.125" floor wall rotation="90 -180 0"></a-box>
+  <a-box src="#granite" position="5 3 2" depth="0.125" floor wall rotation="90 90 -90"></a-box>
+  <a-box src="#granite" position="6 3 4" depth="0.125" floor wall rotation="90 135 -45"></a-box>
+  <a-box src="#granite" position="5 3 4" depth="0.125" floor wall rotation="90 -90 90"></a-box>
+  <a-box src="#granite" position="5 3 3" depth="0.125" floor wall rotation="90 -45 135"></a-box>
+  <a-box src="#granite" position="6 3 3" depth="0.125" floor wall rotation="90 -90 90"></a-box
+></a-entity>