wip playground

website/playground.html

@@ -55,6 +55,18 @@ <h1>Tasks</h1>
         <button onclick="addTask()">Add</button>
         <button onclick="removeTask()">Delete</button>
       </div>
+      <br />
+      <hr />
+      <br />
+      <div can-mirror id="t5">red or blue</div>
+      <button onclick="changeText()">red or blue</button>
+      <div can-mirror id="contentEditable" contenteditable="true">
+        CONTENT EDITABLE
+      </div>
+      <div can-mirror id="textChildren2">
+        <h1>IM A TITLE</h1>
+        <p>CONTENT EDITABLE WITH CHILDREN</p>
+      </div>
       <script>
         function addTask() {
           const task = document.createElement("div");
@@ -65,6 +77,10 @@ <h1>Tasks</h1>
         function removeTask() {
           tasks.removeChild(tasks.lastChild);
         }
+
+        function changeText() {
+          t5.textContent = t5.textContent === "red" ? "blue" : "red";
+        }
       </script>
     </div>
     <footer>

website/playground.scss

@@ -0,0 +1,28 @@
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #87ceeb;
+}
+.neighborhood {
+  width: 800px;
+  height: 600px;
+  position: relative;
+  background-color: #7cfc00;
+  margin: 20px auto;
+  overflow: hidden;
+}
+.house {
+  width: 100px;
+  height: 100px;
+  background-color: #8b4513;
+  position: absolute;
+}
+.character {
+  width: 20px;
+  height: 20px;
+  background-color: #ff0000;
+  position: absolute;
+  transition: all 0.1s;
+  left: 0;
+  top: 0;
+}

website/playground.ts

@@ -1,4 +1,5 @@
 import "./home.scss";
+import "./playground.scss";
 import { playhtml } from "../packages/playhtml/src/main";
 
 playhtml.init({});