From e7d59c96b80923deecb3c53dfaec9643ddc2b8ea Mon Sep 17 00:00:00 2001
From: Nigel Breslaw <nigel.breslaw@gmail.com>
Date: Wed, 17 Apr 2024 19:23:13 +0300
Subject: [PATCH] reafactor: Continue to simplify layout logic and shared
 values (#1307)

---
 native/app/inventory/ArtifactCell.tsx | 36 +++-------
 native/app/inventory/Common.ts        |  1 +
 native/app/inventory/DestinyCell.tsx  | 96 ++++++++++++++-------------
 native/app/inventory/EmptyCell.tsx    | 38 ++++++-----
 native/app/inventory/EngramCell.tsx   | 10 +--
 native/app/inventory/EngramsUI.tsx    | 15 ++---
 native/app/inventory/SeparatorUI.tsx  |  2 +-
 7 files changed, 95 insertions(+), 103 deletions(-)

diff --git a/native/app/inventory/ArtifactCell.tsx b/native/app/inventory/ArtifactCell.tsx
index bc077d81b..b60b8f1cd 100644
--- a/native/app/inventory/ArtifactCell.tsx
+++ b/native/app/inventory/ArtifactCell.tsx
@@ -13,11 +13,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
-  gesture: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
-    position: "absolute",
-  },
   primaryStat: {
     paddingLeft: 2,
     paddingRight: 2,
@@ -61,12 +56,6 @@ const styles = StyleSheet.create({
     left: -0.5,
     pointerEvents: "none",
   },
-  innerFrameOverlaySize: {
-    width: 65,
-    height: 65,
-    position: "absolute",
-    pointerEvents: "none",
-  },
 });
 
 type DestinyCellProps = {
@@ -85,22 +74,19 @@ const DestinyCell = (props: DestinyCellProps) => {
   return (
     <View style={styles.container}>
       <TouchableOpacity onPress={handlePress}>
-        <View style={styles.frameSize}>
-          <View style={styles.icon}>
-            <View style={styles.innerFrameSize}>
-              <Image
-                source={{ uri: props.data.icon }}
-                cachePolicy="memory-disk"
-                style={styles.innerFrameSize}
-                recyclingKey={props.data.icon}
-              />
-            </View>
-          </View>
-
-          <View style={styles.primaryStat}>
-            <Text style={styles.primaryStatText}>{`+${props.data.primaryStat}`}</Text>
+        <View style={styles.icon}>
+          <View style={styles.innerFrameSize}>
+            <Image
+              source={{ uri: props.data.icon }}
+              cachePolicy="memory-disk"
+              style={styles.innerFrameSize}
+              recyclingKey={props.data.icon}
+            />
           </View>
         </View>
+        <View style={styles.primaryStat}>
+          <Text style={styles.primaryStatText}>{`+${props.data.primaryStat}`}</Text>
+        </View>
       </TouchableOpacity>
     </View>
   );
diff --git a/native/app/inventory/Common.ts b/native/app/inventory/Common.ts
index f8b16caf1..d45eec7bb 100644
--- a/native/app/inventory/Common.ts
+++ b/native/app/inventory/Common.ts
@@ -296,6 +296,7 @@ export type DestinyItemIdentifier = {
 
 export const ITEM_SIZE = 90;
 export const ICON_SIZE = 72;
+export const INNER_FRAME_SIZE = Math.ceil(ICON_SIZE * 0.95);
 export const ICON_MARGIN = (ITEM_SIZE - ICON_SIZE) / 2;
 export const DEFAULT_MARGIN = 6;
 export const VISUAL_MARGIN = DEFAULT_MARGIN + ICON_MARGIN;
diff --git a/native/app/inventory/DestinyCell.tsx b/native/app/inventory/DestinyCell.tsx
index f31dee25a..e0d2261bc 100644
--- a/native/app/inventory/DestinyCell.tsx
+++ b/native/app/inventory/DestinyCell.tsx
@@ -1,4 +1,10 @@
-import { CRAFTED_OVERLAY, ITEM_SIZE, type DestinyIconData } from "@/app/inventory/Common.ts";
+import {
+  CRAFTED_OVERLAY,
+  ICON_SIZE,
+  INNER_FRAME_SIZE,
+  ITEM_SIZE,
+  type DestinyIconData,
+} from "@/app/inventory/Common.ts";
 import { useGGStore } from "@/app/store/GGStore.ts";
 import { Image } from "expo-image";
 import React, { useCallback } from "react";
@@ -66,7 +72,7 @@ const styles = StyleSheet.create({
     backgroundColor: DEFAULT_OVERLAP_COLOR,
     zIndex: 100,
     position: "absolute",
-    bottom: -6,
+    bottom: -7,
     right: -8,
     justifyContent: "center",
     alignItems: "center",
@@ -80,34 +86,34 @@ const styles = StyleSheet.create({
     pointerEvents: "none",
   },
   icon: {
-    width: 72,
-    height: 72,
+    width: ICON_SIZE,
+    height: ICON_SIZE,
     borderRadius: 12,
     overflow: "hidden",
     borderWidth: 2,
     pointerEvents: "none",
   },
   frameSize: {
-    width: 72,
-    height: 72,
+    width: ICON_SIZE,
+    height: ICON_SIZE,
   },
   innerFrameSize: {
-    width: 69,
-    height: 69,
+    width: INNER_FRAME_SIZE,
+    height: INNER_FRAME_SIZE,
     position: "absolute",
     top: -0.5,
     left: -0.5,
     pointerEvents: "none",
   },
   innerFrameOverlaySize: {
-    width: 69,
-    height: 69,
+    width: INNER_FRAME_SIZE,
+    height: INNER_FRAME_SIZE,
     position: "absolute",
     pointerEvents: "none",
   },
   crafted: {
-    width: 69,
-    height: 69,
+    width: INNER_FRAME_SIZE,
+    height: INNER_FRAME_SIZE,
     position: "absolute",
     pointerEvents: "none",
   },
@@ -145,44 +151,42 @@ const DestinyCell = (props: DestinyCellProps) => {
   return (
     <View style={styles.container}>
       <TouchableOpacity onPress={handlePress}>
-        <View style={styles.frameSize}>
-          <View style={[styles.icon, { borderColor: props.data.borderColor }]}>
-            <View style={styles.innerFrameSize}>
-              <Image
-                source={{ uri: props.data.icon }}
-                cachePolicy="memory-disk"
-                style={styles.innerFrameSize}
-                recyclingKey={props.data.icon}
-              />
+        <View style={[styles.icon, { borderColor: props.data.borderColor }]}>
+          <View style={styles.innerFrameSize}>
+            <Image
+              source={{ uri: props.data.icon }}
+              cachePolicy="memory-disk"
+              style={styles.innerFrameSize}
+              recyclingKey={props.data.icon}
+            />
 
-              <Image
-                source={{ uri: props.data.calculatedWaterMark }}
-                cachePolicy="memory-disk"
-                style={styles.innerFrameOverlaySize}
-                recyclingKey={props.data.calculatedWaterMark}
-              />
+            <Image
+              source={{ uri: props.data.calculatedWaterMark }}
+              cachePolicy="memory-disk"
+              style={styles.innerFrameOverlaySize}
+              recyclingKey={props.data.calculatedWaterMark}
+            />
 
-              {props.data.crafted && <Image source={CRAFTED_OVERLAY} cachePolicy="memory" style={styles.crafted} />}
-            </View>
+            {props.data.crafted && <Image source={CRAFTED_OVERLAY} cachePolicy="memory" style={styles.crafted} />}
           </View>
-          {props.data.primaryStat > 0 && (
-            <View style={styles.primaryStat}>
-              <Text style={styles.primaryStatText}>{props.data.primaryStat}</Text>
-            </View>
-          )}
-          {props.data.damageTypeIconUri && (
-            <View style={styles.miniIconBurn}>
-              <Image style={styles.miniIconBurnSize} source={props.data.damageTypeIconUri} cachePolicy="memory" />
-            </View>
-          )}
-          {props.data.quantity > 1 && (
-            <View style={props.data.stackSizeMaxed ? styles.quantityMaxed : styles.quantity}>
-              <Text style={props.data.stackSizeMaxed ? styles.quantityLevelTextMaxed : styles.quantityLevelText}>
-                {props.data.quantity}
-              </Text>
-            </View>
-          )}
         </View>
+        {props.data.primaryStat > 0 && (
+          <View style={styles.primaryStat}>
+            <Text style={styles.primaryStatText}>{props.data.primaryStat}</Text>
+          </View>
+        )}
+        {props.data.damageTypeIconUri && (
+          <View style={styles.miniIconBurn}>
+            <Image style={styles.miniIconBurnSize} source={props.data.damageTypeIconUri} cachePolicy="memory" />
+          </View>
+        )}
+        {props.data.quantity > 1 && (
+          <View style={props.data.stackSizeMaxed ? styles.quantityMaxed : styles.quantity}>
+            <Text style={props.data.stackSizeMaxed ? styles.quantityLevelTextMaxed : styles.quantityLevelText}>
+              {props.data.quantity}
+            </Text>
+          </View>
+        )}
       </TouchableOpacity>
     </View>
   );
diff --git a/native/app/inventory/EmptyCell.tsx b/native/app/inventory/EmptyCell.tsx
index 155f09d6c..c4febdf07 100644
--- a/native/app/inventory/EmptyCell.tsx
+++ b/native/app/inventory/EmptyCell.tsx
@@ -1,4 +1,4 @@
-import { ITEM_SIZE } from "@/app/inventory/Common.ts";
+import { ICON_SIZE, ITEM_SIZE } from "@/app/inventory/Common.ts";
 import React from "react";
 import { StyleSheet, View } from "react-native";
 
@@ -8,9 +8,15 @@ const BORDER_SIZE = 15;
 const BORDER_WIDTH = 1;
 
 const styles = StyleSheet.create({
-  square: {
+  box: {
     width: ITEM_SIZE,
     height: ITEM_SIZE,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  square: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
     position: "relative",
   },
   corner: {
@@ -20,29 +26,29 @@ const styles = StyleSheet.create({
     borderColor: BORDER_COLOR,
   },
   topLeft: {
-    top: 11,
-    left: 11,
+    top: 0,
+    left: 0,
     borderTopWidth: BORDER_WIDTH,
     borderLeftWidth: BORDER_WIDTH,
     borderTopLeftRadius: BORDER_RADIUS,
   },
   topRight: {
-    top: 11,
-    right: 11,
+    top: 0,
+    right: 0,
     borderTopWidth: BORDER_WIDTH,
     borderRightWidth: BORDER_WIDTH,
     borderTopRightRadius: BORDER_RADIUS,
   },
   bottomLeft: {
-    bottom: 11,
-    left: 11,
+    bottom: 0,
+    left: 0,
     borderBottomWidth: BORDER_WIDTH,
     borderLeftWidth: BORDER_WIDTH,
     borderBottomLeftRadius: BORDER_RADIUS,
   },
   bottomRight: {
-    bottom: 11,
-    right: 11,
+    bottom: 0,
+    right: 0,
     borderBottomWidth: BORDER_WIDTH,
     borderRightWidth: BORDER_WIDTH,
     borderBottomRightRadius: BORDER_RADIUS,
@@ -56,11 +62,13 @@ const bottomRight = StyleSheet.flatten([styles.bottomRight, styles.corner]);
 
 function EmptyCell() {
   return (
-    <View style={styles.square}>
-      <View style={topLeft} />
-      <View style={topRight} />
-      <View style={bottomLeft} />
-      <View style={bottomRight} />
+    <View style={styles.box}>
+      <View style={styles.square}>
+        <View style={topLeft} />
+        <View style={topRight} />
+        <View style={bottomLeft} />
+        <View style={bottomRight} />
+      </View>
     </View>
   );
 }
diff --git a/native/app/inventory/EngramCell.tsx b/native/app/inventory/EngramCell.tsx
index fd2ff510e..35a2e0cff 100644
--- a/native/app/inventory/EngramCell.tsx
+++ b/native/app/inventory/EngramCell.tsx
@@ -1,4 +1,4 @@
-import { EMPTY_ENGRAM, ITEM_SIZE, type DestinyIconData } from "@/app/inventory/Common.ts";
+import { EMPTY_ENGRAM, ICON_SIZE, INNER_FRAME_SIZE, type DestinyIconData } from "@/app/inventory/Common.ts";
 import { useGGStore } from "@/app/store/GGStore.ts";
 import { Image } from "expo-image";
 import React, { useCallback } from "react";
@@ -8,8 +8,8 @@ const DEFAULT_BORDER_COLOR = "#303036";
 
 const styles = StyleSheet.create({
   container: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
+    width: ICON_SIZE,
+    height: ICON_SIZE,
     justifyContent: "center",
     alignItems: "center",
   },
@@ -22,8 +22,8 @@ const styles = StyleSheet.create({
     pointerEvents: "none",
   },
   frameSize: {
-    width: 68,
-    height: 68,
+    width: INNER_FRAME_SIZE,
+    height: INNER_FRAME_SIZE,
   },
   primaryStat: {
     width: 36,
diff --git a/native/app/inventory/EngramsUI.tsx b/native/app/inventory/EngramsUI.tsx
index 72e29b511..34d207c21 100644
--- a/native/app/inventory/EngramsUI.tsx
+++ b/native/app/inventory/EngramsUI.tsx
@@ -1,5 +1,4 @@
 import {
-  DEFAULT_MARGIN,
   DestinyIconDataEmpty,
   ENGRAMS_SECTION_SIZE,
   ITEM_SIZE,
@@ -24,6 +23,8 @@ const styles = StyleSheet.create({
   box: {
     width: "20%",
     height: ITEM_SIZE * 0.9,
+    justifyContent: "center",
+    alignItems: "center",
   },
 });
 
@@ -36,7 +37,7 @@ function EngramsUI(props: EngramsProps) {
   const rootStyle = {
     width: inventorySectionWidth,
     height: ENGRAMS_SECTION_SIZE,
-    paddingLeft: DEFAULT_MARGIN,
+    paddingLeft: VISUAL_MARGIN,
     paddingRight: VISUAL_MARGIN,
   };
 
@@ -45,18 +46,10 @@ function EngramsUI(props: EngramsProps) {
       <View style={styles.container}>
         {array10.map((_v, index) => {
           const item = props.data[index];
-          if (item) {
-            return (
-              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-              <View key={index} style={styles.box}>
-                <EngramCell data={item} />
-              </View>
-            );
-          }
           return (
             // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
             <View key={index} style={styles.box}>
-              <EngramCell data={DestinyIconDataEmpty} />
+              <EngramCell data={item ?? DestinyIconDataEmpty} />
             </View>
           );
         })}
diff --git a/native/app/inventory/SeparatorUI.tsx b/native/app/inventory/SeparatorUI.tsx
index 153c06145..2c316eea2 100644
--- a/native/app/inventory/SeparatorUI.tsx
+++ b/native/app/inventory/SeparatorUI.tsx
@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
   bar: {
     width: "auto",
     height: 1,
-    backgroundColor: "#D1D1D1",
+    backgroundColor: "#818181",
   },
   label: {
     color: "#D1D1D1",