playground starting to function

haxtheweb · Dec 6, 2024 · b690733 · b690733
1 parent 1654ec8
commit b690733
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 83 deletions.
diff --git a/assets/images/honey-comb.jpg b/assets/images/honey-comb.jpg
diff --git a/assets/images/lion-statue.jpg b/assets/images/lion-statue.jpg
diff --git a/assets/images/splash.jpg b/assets/images/splash.jpg
diff --git a/create-playground.js b/create-playground.js
@@ -6,7 +6,6 @@ import { LitElement, html, css } from "lit";
 import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js";
 import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js";
 import "@haxtheweb/web-container/web-container.js";
-import "@haxtheweb/rpg-character/rpg-character.js";
 
 /**
  * `create-playground`
@@ -23,7 +22,7 @@ export class CreatePlayground extends DDDSuper(I18NMixin(LitElement)) {
   constructor() {
     super();
     this.title = "";
-    this.name = prompt("Element name") || 'my-element';
+    this.name = 'my-element';
     this.t = this.t || {};
     this.t = {
       ...this.t,
@@ -64,6 +63,15 @@ export class CreatePlayground extends DDDSuper(I18NMixin(LitElement)) {
       h3 span {
         font-size: var(--create-playground-label-font-size, var(--ddd-font-size-s));
       }
+      web-container {
+        background-color: var(--ddd-accent-1);
+        border: var(--ddd-border-xs);
+        border-radius: var(--ddd-radius-xs);
+        box-shadow: var(--ddd-boxShadow-sm);
+        min-height:400px;
+        width: 100%;
+        display: block;
+      }
     `];
   }
 

diff --git a/index.html b/index.html
@@ -50,10 +50,10 @@
   <style>
     :root,
     html,
-    body {
+    html body {
       padding: 0;
       margin: 0;
-      font-family: "Roboto", "Franklin Gothic Medium", Tahoma, sans-serif;
+      font-family: var(--ddd-font-secondary), "Roboto Slab", serif;
       font-size: var(--ddd-theme-body-font-size, 20px);
       font-weight: var(--ddd-font-weight-regular, 400);
       letter-spacing: normal;
@@ -65,11 +65,12 @@
       font-size: var(--ddd-theme-h1-font-size, 40px);
     }
 
-    h1 {
-      margin: var(--ddd-spacing-12, 48px) 0 var(--ddd-spacing-8, 32px);
+    .traveler {
+      margin-bottom: -32px;
+      margin-left: 16px;
     }
     h1, h2, h3, h4, h5, h6 {
-      font-family: "Roboto", "Franklin Gothic Medium", Tahoma, sans-serif;
+      font-family: var(--ddd-font-primary), "Roboto", "Franklin Gothic Medium", Tahoma, sans-serif;
       font-weight: var(--ddd-font-weight-bold, 700);
       line-height: auto;
       letter-spacing: auto;
@@ -103,8 +104,7 @@
     }
 
     header,
-    main,
-    footer {
+    main {
       padding: 0 16px;
       max-width: 960px;
       margin: 0 auto;
@@ -116,27 +116,97 @@
       margin: 0 auto;
       min-height: 500px;
     }
+    footer {
+      vertical-align: middle;
+      margin: 0;
+      padding: 16px;
+      text-align: center;
+      font-family: var(--ddd-font-navigation), "Roboto Condensed", sans-serif;
+      background-color: var(--ddd-primary-2);
+      color: var(--ddd-accent-1);
+      border: none;
+    }
+    rpg-character {
+      display: inline-block;
+      padding: 0;
+      margin: 0;
+    }
+    .psu-logo {
+      display:block;
+      height: 42px;
+      margin: var(--ddd-spacing-2) auto;
+      padding: var(--ddd-spacing-2);
+    }
+    .attention {
+      border: var(--ddd-border-md, 2px solid black);
+      border-color: var(--ddd-primary-1);
+      display: inline-block;
+      padding: var(--ddd-spacing-2);
+    }
+    header h1 {
+      margin: 0;
+      font-family:monospace;
+    }
+    header h1 strong {
+      font-weight: var(--ddd-font-black);
+      font-family: var(--ddd-font-navigation);
+      margin-right: var(--ddd-spacing-1);
+    }
+    blink {
+      animation: blink 1s infinite alternate;
+      color: var(--ddd-primary-15, orange);
+      font-size: var(--ddd-font-size-s);
+      vertical-align: middle;
+      margin-left: var(--ddd-spacing-2);
+    }
+
+    @keyframes blink {
+      0% { opacity: 1; }
+      54% { opacity: 1; }
+      55% { opacity: 0; }
+      100% { opacity: 0; }
+    }
   </style>
 </head>
 
 <body vocab="http://schema.org/" prefix="oer:http://oerschema.org cc:http://creativecommons.org/ns dc:http://purl.org/dc/terms/">
   <header>
-    <h1>> hax</h1>
+    <img class="traveler" src="./assets/icon-96x96.png" alt="HAX Traveler logo" loading="eager"/>
+    <div class="attention">
+      <h1><strong>></strong>hax<blink>&#9608;</blink></h1>
+    </div>
   </header>
   <main>
     <p>
-      Build websites and web components doesn't have to be so hard. <code>@haxtheweb/create</code> provides a simple way to create 
-      new HAXsites and HAX capable web components.
+      Build websites doesn't have to be hard. <code>@haxtheweb/create</code> provides a simple way to create 
+      new websites and <strong>web components</strong>.
     </p>
-    <p>If you want to create your own CMS, you could install <code>@haxtheweb/h-a-x</code> and invest a decade in R&D. Orrr...
-    <code>hax site my-site --y --no-i</code> to create a website quickly. </p>
+    <p>If you want to create your own CMS, you could install <code>@haxtheweb/h-a-x</code> and get just the block-editor. Or..
+    <code>hax site my-site --y --no-i</code> to create a website with it already integrated fully! </p>
   </main>
   <div class="container">
     <create-playground></create-playground>
   </div>
   <footer>
-    HAXTheWeb | The Pennsylvania State University © 2024
+    <div>
+      <rpg-character height="48" width="32"></rpg-character>
+      <rpg-character height="48" width="32"></rpg-character>
+      <rpg-character height="48" width="32"></rpg-character>
+      <rpg-character height="48" width="32"></rpg-character>
+      <rpg-character height="48" width="32"></rpg-character>
+      <rpg-character height="48" width="32"></rpg-character>
+      <rpg-character height="48" width="32"></rpg-character>
+      <rpg-character height="48" width="32"></rpg-character>
+      <rpg-character height="48" width="32"></rpg-character>
+      <rpg-character height="48" width="32"></rpg-character>
+      <rpg-character height="48" width="32" walking></rpg-character>
+    </div>
+    <div>HAXTheWeb <strong>|</strong> The Pennsylvania State University © 2024</div>
+    <img class="psu-logo" src="./assets/images/Penn-State-Mark.png" alt="Pennsylvania State University logo" loading="lazy" fetchpriority="low" />
   </footer>
-  <script type="module" src="./create-playground.js"></script>
+  <script type="module">
+    import "./create-playground.js";
+    import "@haxtheweb/rpg-character/rpg-character.js";
+  </script>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,11 +29,11 @@
     },
     "dependencies": {
       "lit": "^3.2.1",
-      "@haxtheweb/d-d-d": "^9.0.21",
-      "@haxtheweb/i18n-manager": "^9.0.18",
-      "@haxtheweb/rpg-character": "^9.0.18",
-      "@haxtheweb/web-container": "^9.0.21",
-      "@haxtheweb/code-editor": "^9.0.18",
+      "@haxtheweb/d-d-d": "^9.0.23",
+      "@haxtheweb/i18n-manager": "^9.0.22",
+      "@haxtheweb/rpg-character": "^9.0.22",
+      "@haxtheweb/web-container": "^9.0.23",
+      "@haxtheweb/code-editor": "^9.0.22",
       "patch-package": "8.0.0"
     },
     "devDependencies": {