Ui

index.css

@@ -36,7 +36,6 @@ html, body {
 
   display: flex;
   flex-direction: column;
-
 }
 
 #icon-bar {
@@ -154,7 +153,7 @@ touch-icon {
   border-top-right-radius: 50%;
 }
 
-#info-section {
+info-section {
   z-index: 1;
   width: 100%;
   flex: 2;
@@ -163,7 +162,7 @@ touch-icon {
   justify-content: space-between;
 
   color: var(--white);
-  font-size: 1.8rem;
+  font-size: 1.5rem;
 
   background: black;
 
@@ -173,6 +172,9 @@ touch-icon {
 .icon-name {
   position: relative;
   text-transform: uppercase;
+
+  display: flex;
+  align-items: center;
 }
 
 action-button {
@@ -188,7 +190,6 @@ action-button {
 
 health-bar {
   position: relative;
-  /* width: 100%; */
   height: 15px;
 
   display: block;
@@ -269,4 +270,18 @@ health-bar {
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: repeat(auto-fit, 20%);
+}
+
+health-bar {
+  transition: width .3s ease;
+}
+
+.item-icon svg {
+  width: 40px;
+  height: 40px;
+}
+
+.effect-icon svg {
+  width: 20px;
+  height: 20px;
 }

index.html

@@ -25,7 +25,7 @@
       <div id="footer">
         <div id="icon-bar">
         </div>
-        <div id="info-section"></div>
+        <!-- <div id="info-section"></div> -->
       </div>
     </div>    
 

js/classes/enterRoom.js

@@ -19,15 +19,15 @@ const itemAmt = [
   { amt: 4, weight: 1 },
 ];
 
-const poison = {
-  name: "Mysterious Gas",
-  interval: 5000,
-  type: "poison",
-  // no duration
-  action: (subject) => {
-    subject.damage(2);
-  },
-};
+// const poison = {
+//   name: "Mysterious Gas",
+//   interval: 5000,
+//   type: "poison",
+//   // no duration
+//   action: (subject) => {
+//     subject.damage(2);
+//   },
+// };
 
 export function enterNewRoom(player, iDir = null) {
   let oldRoom;

js/classes/generateChest.js

@@ -30,6 +30,7 @@ class Chest {
     this._isLocked = null;
     this._unlock = unlock
     this._contents = contents;
+    this._isOpen = false;
     this._elements = {};
     this._elements["createIcon"] = buildElement(
       "touch-icon",
@@ -46,10 +47,22 @@ class Chest {
       contents: this._contents,
       icon: this._icon,
       type: this._type,
-      id: this._id
+      id: this._id,
+      open: this.openChest,
+      isOpen: this.isOpen
     };
   }
 
+  openChest = () => {
+    console.log(this._isOpen)
+    this._isOpen = true;
+    console.log(this._isOpen)
+  }
+
+  isOpen = () => {
+    return this._isOpen;
+  }
+
   get isLocked() {
     return this._isLocked;
   }

js/classes/generateEnemy.js

@@ -20,7 +20,7 @@ class Enemy extends Character {
 
     this._isLocked = null;
     this._unlock = unlock;
-    this._onEffects = onEffects;
+    this._onEffects = onEffects || {};
 
     //buildIcon()
     this._elements['createIcon'] = buildElement(
@@ -59,7 +59,6 @@ class Enemy extends Character {
       this._attackTimer = setInterval(function () {
         self.attack(Player());
       }, mappedVal);
-    console.log(this._attackTimer)
   }
 
   stopAttackTimer() {

js/classes/generateItem.js

@@ -14,18 +14,7 @@ class Item {
     this._stats = stats;
     this._effects = effects;
     this._id = dec(Rand.random(), 8);
-    this._icon = '';
-
-    switch (icon) {
-      case 'head':
-        this._icon = 'helmet';
-        break;
-      case 'torso':
-        this._icon = 'breastplate';
-        break;
-      default:
-        this._icon = icon;
-    }
+    this._icon = icon;
 
     console.log(name)
     console.log(icon)

js/classes/player.js

@@ -40,25 +40,31 @@ class Player extends Character {
     this._type = 'player';
 
     //build an icon
-    this._elements['createIcon'] = buildElement(
+    this._elements['touchIcon'] = buildElement(
       'touch-icon', 
       {class: 'player'}, 
        this.getInfo
     );
+    //build the menu
+    this._elements['playerMenu'] = buildElement(
+      'player-menu',
+      null,
+      {isOpen: false}
+    )
 
     //attach icon to icon-bar
-    UI.iconBar.appendChild(this._elements['createIcon']);
+    UI.iconBar.appendChild(this._elements['touchIcon']);
     //attach player menu to icon-bar
-    UI.iconBar.appendChild(UI.playerMenu);
+    UI.iconBar.appendChild(this._elements['playerMenu']);
 
     //append menu items
-    UI.playerMenu.appendChild(buildElement(
+    this._elements['playerMenu'].appendChild(buildElement(
       'touch-icon',
       {class: 'menu-item'},
       {icon: 'inventory',
        type: 'inv'}
     ));
-    UI.playerMenu.appendChild(buildElement(
+    this._elements['playerMenu'].appendChild(buildElement(
       'touch-icon', 
       {class: 'menu-item'}, 
       {icon: 'move',
@@ -71,12 +77,13 @@ class Player extends Character {
       {stats: this._stats,
        maxHp: this._baseStats.hp}
     );
-  }
+  } // end constructor
 
   get getInfo() {
     return {
       icon: this._icon,
-      type: this._type
+      type: this._type,
+      elements: this._elements
     };
   }
 

js/components/action-button.js

@@ -1,5 +1,6 @@
 import { currentRoom } from '../classes/enterRoom.js';
 import buildElement from '../utils/buildElement.js';
+import '../components/display-icon.js';
 
 const colorCodes = {
   purple: '#C451FA',
@@ -33,11 +34,14 @@ class ActionButton extends HTMLElement {
 
       switch (btnTxt) {
         case 'open':
+          //somehow set the chest._isOpen to true
+          this.open();
+          console.log('chest opened?')
           for (const item of Entity.getInfo.contents) {
             let div = document.createElement('div');
             div.appendChild(buildElement(
-              'touch-icon', //change to card element
-              null,
+              'display-icon', //change to card element
+              {class: 'item-icon'},
               {icon: item.icon}
             ))
             document.querySelector('#contents').append(div);

js/components/display-icon.js

@@ -0,0 +1,21 @@
+class DisplayIcon extends HTMLElement {
+  connectedCallback() {
+    this.render();
+  }
+
+  constructor() {
+    super();
+
+
+  }
+
+  render() {
+    this.innerHTML = `
+      <svg style="margin:10px; fill:white;">
+        <use xlink:href="#rmd-${this.icon}" />
+      </svg>
+    `
+  }
+}
+
+customElements.define('display-icon', DisplayIcon);

js/components/health-bar.js

@@ -13,7 +13,7 @@ class HealthBar extends HTMLElement {
   }
 
   render() {
-    let maxWidth = UI.infoSection.getBoundingClientRect().width - 60;
+    let maxWidth = document.documentElement.clientWidth - 60;
     let elWidth = mapRange(this.stats.hp, this.maxHp, 0, maxWidth, 0);
     this.style.width = `${elWidth}px`;
   }

js/components/info-section.js

@@ -0,0 +1,42 @@
+class InfoSection extends HTMLElement {
+  connectedCallback() {
+    let x = document.querySelectorAll('info-section');
+    //check for more than 1 info section, remove next to last, keep most recent
+    if (x.length > 1) document.querySelector('#footer').removeChild(x[x.length - 2])
+    this.render();
+  }
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    //check to avoid undefined in empty info-section
+    if (this.type === 'enemy') {
+      this.innerHTML = `
+        <div id="entity-name"> 
+          ${this.name} 
+        </div>
+        <div id="e-statuses"></div>
+      `;
+      this.effects.forEach(ef => {
+        document.querySelector('#entity-name').appendChild(ef);
+      });
+      document.querySelector('#entity-name').appendChild(this.healthBar);
+      this.appendChild(this.actionButton);
+    } else if (this.type === 'chest') {
+      this.innerHTML = `
+        <div id="entity-name">
+          ${this.name}
+        </div>
+        <div id="contents"></div>
+      `;
+      this.appendChild(this.actionButton);
+    }
+
+
+  }
+
+}
+
+customElements.define('info-section', InfoSection);

js/components/player-menu.js

@@ -1,15 +1,6 @@
-import {UI} from '../utils/ui.js';
-
 class PlayerMenu extends HTMLElement {
-  connectedCallback() {
-    this.render();
-  }
-
   constructor() {
     super();
-
-    this.style.width = '40px';
-    this.style.top = '0';
   }
 
   render() {