Add rings with reusable components

src/components/DisplayStats.jsx

@@ -3,9 +3,10 @@ import { useEffect, useState } from 'react';
 import ScreenStack from './ScreenStack';
 import useStats from '../hooks/useStats';
 import useSubDisplayEquip from '../hooks/useSubDisplayEquip';
+import useSubDisplayRings from '../hooks/useSubDisplayRings';
 import { keyAlias, minifyNumbers } from '../utils';
 
-const TABS_ORDER = ['Equip', 'Magic', 'Log'];
+const TABS_ORDER = ['Equip', 'Rings', 'Log'];
 const TABS = Object.fromEntries(TABS_ORDER.map((tab) => [tab.toUpperCase(), tab]));
 
 export default function DisplayStats({
@@ -40,11 +41,14 @@ export default function DisplayStats({
     inventory, equipment, equip,
     width, height, keyMap,
   });
-  const magicBuffers = [{ fg: 'red', buffer: ['', '', '', '', TABS.MAGIC]}];
+  const ringsBuffers = useSubDisplayRings(menuChoice === 1, {
+    inventory, equipment, equip,
+    width, height, keyMap,
+  });
   const logBuffers = [{ fg: 'green', buffer: ['', '', '', '', TABS.LOG]}];
   const lowerBuffers = [
     ...(equipmentBuffers || []),
-    ...(menuChoice === 1 ? magicBuffers : []),
+    ...(ringsBuffers || []),
     ...(menuChoice === 2 ? logBuffers : []),
   ];
 

src/hooks/useSubDisplayRings.jsx

@@ -0,0 +1,59 @@
+import useSpriteLayers from './useSpriteLayers';
+import useDisplayEquipable from './useDisplayEquipable';
+
+const SLOT_ORDER = [
+  'ring1a',
+  'ring1b',
+  'ring2a',
+  'ring2b',
+  'ring3a',
+  'ring3b',
+  'ring4a',
+  'ring4b',
+];
+const SLOTS = {
+  ring1a: [" ", [0, 0]],
+  ring1b: [" ", [0, 2]],
+  ring2a: [" ", [1, 0]],
+  ring2b: [" ", [1, 2]],
+  ring3a: [" ", [2, 0]],
+  ring3b: [" ", [2, 2]],
+  ring4a: [" ", [3, 0]],
+  ring4b: [" ", [3, 2]],
+};
+const SPRITE_POSITIONS = {
+  ring1a: [[0, 0]],
+  ring1b: [[0, 2]],
+  ring2a: [[1, 0]],
+  ring2b: [[1, 2]],
+  ring3a: [[2, 0]],
+  ring3b: [[2, 2]],
+  ring4a: [[3, 0]],
+  ring4b: [[3, 2]],
+};
+
+export default function useSubDisplayRings(enabled, {
+  inventory, equipment, equip,
+
+  width, height, keyMap,
+}) {
+  const { layers } = useSpriteLayers({
+    inventory,
+    equipment,
+    positions: SPRITE_POSITIONS,
+    width,
+    height: 4,
+    mapKind: (kind) => 'rings',
+  });
+
+  const buffers = useDisplayEquipable(enabled, {
+    width, height, keyMap,
+
+    inventory, equipment, equip,
+    spriteLayers: layers,
+    slotOrder: SLOT_ORDER,
+    slots: SLOTS,
+  });
+
+  return buffers;
+}