refactor: tidy

packages/app/src/components/app/play/ui/hotbar/index.jsx

@@ -1,14 +1,14 @@
-import './index.scss';
-
 import {usePropertyChange} from '@avocado/react';
 import {useInventorySlice} from '@humus/inventory';
-import {classnames, PropTypes, React} from '@flecks/react';
+import {PropTypes, React} from '@flecks/react';
 
 import ItemSlot from '../item-slot';
+import styles from './index.module.scss';
 
 const HotbarComponent = (props) => {
   const {selfEntity} = props;
   const {inputActions} = selfEntity;
+  // Render keys bound for each slot.
   const keys = [];
   for (let i = 0; i < 10; ++i) {
     const {index} = (inputActions[`HotbarSlot${i}`] || []).find(({type}) => 'key' === type) || {};
@@ -21,9 +21,7 @@ const HotbarComponent = (props) => {
       // eslint-disable-next-line react/no-array-index-key
       key={i}
       item={item}
-      className={classnames(
-        activeSlotIndex === i ? 'active' : '',
-      )}
+      className={activeSlotIndex === i ? styles.active : ''}
       onClick={(event) => {
         if (selfEntity) {
           selfEntity.activeSlotIndex = i;
@@ -33,18 +31,10 @@ const HotbarComponent = (props) => {
         return false;
       }}
     >
-      <div className="hotbar__key">{keys[i]}</div>
+      <div className={styles.key}>{keys[i]}</div>
     </ItemSlot>
   ));
-  return (
-    <div
-      className="hotbar"
-    >
-      <div className="hotbar__inner">
-        {itemSlots}
-      </div>
-    </div>
-  );
+  return <div className={styles.hotbar}><div className={styles.inner}>{itemSlots}</div></div>;
 };
 
 HotbarComponent.propTypes = {

packages/app/src/components/app/play/ui/hotbar/index.module.scss

@@ -9,7 +9,7 @@
   transform: translateX(-50%);
   transition: box-shadow 0.125s linear;
   user-select: none;
-  .item-slot.active {
+  .active {
     border: 4px solid rgba(255, 255, 0, 1);
     &:hover {
       @include shadow-border(4px, rgba(255, 255, 0, 0.3), 8px);
@@ -17,14 +17,14 @@
   }
 }
 
-.hotbar__inner {
+.inner {
   display: flex;
   justify-content: space-around;
   height: 100%;
   width: 100%;
 }
 
-.hotbar__key {
+.key {
   color: white;
   text-shadow:
     0px 0px 2px black,

packages/app/src/components/app/play/ui/item-slot/index.jsx

@@ -1,5 +1,3 @@
-import './index.scss';
-
 import {join} from 'path';
 
 import {Image} from '@avocado/graphics';
@@ -12,6 +10,8 @@ import {
   useState,
 } from '@flecks/react';
 
+import styles from './index.module.scss';
+
 const ItemSlotComponent = (props) => {
   const {
     children,
@@ -29,48 +29,37 @@ const ItemSlotComponent = (props) => {
       backgroundImageUri = join(Image.root, backgroundImage.uri);
     }
     if (qty > 9999) {
-      qtyClass = 'e4';
+      qtyClass = styles.e4;
     }
     else if (qty > 999) {
-      qtyClass = 'e3';
+      qtyClass = styles.e3;
     }
     else if (qty > 99) {
-      qtyClass = 'e2';
+      qtyClass = styles.e2;
     }
     else if (qty > 9) {
-      qtyClass = 'e1';
+      qtyClass = styles.e1;
     }
     else {
-      qtyClass = 'e0';
+      qtyClass = styles.e0;
     }
   }
   return (
     <button
       onClick={onClick}
       className={classnames(
-        'item-slot',
+        styles['item-slot'],
         'unselectable',
         className,
       )}
       type="button"
     >
       <div
-        className="item-slot__inner"
-        style={{
-          backgroundImage: backgroundImageUri && `url(${backgroundImageUri})`,
-        }}
+        className={styles.inner}
+        style={{backgroundImage: backgroundImageUri && `url(${backgroundImageUri})`}}
       >
         {children}
-        {qty && qty > 1 && (
-          <div
-            className={classnames(
-              'item-slot__qty',
-              `item-slot__qty--${qtyClass}`,
-            )}
-          >
-            {qty}
-          </div>
-        )}
+        {qty && qty > 1 && (<div className={classnames(styles.qty, qtyClass)}>{qty}</div>)}
       </div>
     </button>
   );

packages/app/src/components/app/play/ui/item-slot/index.module.scss

@@ -19,7 +19,7 @@
   }
 }
 
-.item-slot__inner {
+.inner {
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -28,7 +28,7 @@
   height: 100%;
 }
 
-.item-slot__qty {
+.qty {
   color: white;
   text-shadow: 0.25px 0.25px 0 black;
   font-family: joystix;
@@ -37,13 +37,15 @@
   right: 2px;
   font-size: 25px;
   line-height: 25px;
-  &.item-slot__qty--e3 {
-    font-size: 16px;
-    line-height: 16px;
-  }
-  &.item-slot__qty--e4 {
-    font-size: 12px;
-    line-height: 12px;
-    bottom: 2px;
-  }
+}
+
+.e3 {
+  font-size: 16px;
+  line-height: 16px;
+}
+
+.e4 {
+  font-size: 12px;
+  line-height: 12px;
+  bottom: 2px;
 }