Merge branch 'main' of https://github.com/folk-canvas/folk-canvas

folk-systems · Dec 3, 2024 · 0f2f6c9 · 0f2f6c9
2 parents 14f78e3 + 9ef6bc3
commit 0f2f6c9
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 0 deletions.
diff --git a/demo/space-morph.html b/demo/space-morph.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Folk Space Demo</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+      }
+
+      folk-space {
+        width: 100%;
+        height: 100%;
+      }
+
+      folk-shape {
+        background: rgb(187, 178, 178);
+      }
+    </style>
+  </head>
+  <body>
+    <folk-space id="space">
+      <div slot="front">
+        <folk-shape x="100" y="100" width="50" height="50"></folk-shape>
+        <folk-shape x="200" y="200" width="75" height="75" rotation="90"></folk-shape>
+        <folk-shape x="50" y="250" width="25" height="25" rotation="180"></folk-shape>
+        <folk-shape x="350" y="50" width="100" height="100" rotation="270"></folk-shape>
+        <folk-shape x="500" y="500" width="150" height="150" rotation="360"></folk-shape>
+        <folk-shape x="600" y="600" width="200" height="200" rotation="450"></folk-shape>
+        <folk-shape x="700" y="700" width="250" height="250" rotation="540"></folk-shape>
+      </div>
+      <div slot="back">
+        <folk-shape x="150" y="150" width="50" height="50" rotation="45"></folk-shape>
+        <folk-shape x="300" y="400" width="150" height="50" rotation="45"></folk-shape>
+        <folk-shape x="250" y="350" width="100" height="100" rotation="135"></folk-shape>
+        <folk-shape x="400" y="200" width="75" height="75" rotation="225"></folk-shape>
+        <folk-shape x="200" y="450" width="50" height="50" rotation="315"></folk-shape>
+        <folk-shape x="600" y="600" width="200" height="200" rotation="405"></folk-shape>
+        <folk-shape x="700" y="700" width="250" height="250" rotation="495"></folk-shape>
+      </div>
+    </folk-space>
+
+    <script type="module">
+      import { FolkSpace } from '../src/folk-space.ts';
+      import { FolkShape } from '../src/folk-shape.ts';
+
+      FolkSpace.define();
+      FolkShape.define();
+
+      const space = document.getElementById('space');
+      document.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+          space.transition();
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/src/folk-space.ts b/src/folk-space.ts
@@ -0,0 +1,72 @@
+import { html } from './common/tags';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'folk-space': FolkSpace;
+  }
+}
+
+export class FolkSpace extends HTMLElement {
+  static tagName = 'folk-space';
+
+  static define() {
+    customElements.define(this.tagName, this);
+  }
+
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          perspective: 1000px;
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
+
+        .space {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          transform-style: preserve-3d;
+          transform-origin: center;
+          transition: transform 0.6s;
+        }
+
+        .space.rotate {
+          transform: rotateX(-90deg);
+        }
+
+        .face {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          backface-visibility: hidden;
+        }
+
+        .front {
+          transform: rotateX(0deg);
+        }
+
+        .back {
+          transform: rotateX(90deg);
+        }
+      </style>
+      <div class="space">
+        <div class="face front">
+          <slot name="front"></slot>
+        </div>
+        <div class="face back">
+          <slot name="back"></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  transition() {
+    const space = this.shadowRoot?.querySelector('.space');
+    space?.classList.toggle('rotate');
+  }
+}