indent

packages/i18n/strings/en.json

@@ -70,12 +70,14 @@
         "brake_force": "Brake force",
         "weight": "Weight",
         "power_to_weight": "Power to weight",
-        "hard_terrain_coefficient": "Hard terrain coefficient",
-        "medium_terrain_coefficient": "Medium terrain coefficient",
-        "soft_terrain_coefficient": "Soft terrain coefficient",
-        "hard_terrain_coefficient_raw": "Raw hard terrain coefficient",
-        "medium_terrain_coefficient_raw": "Raw medium terrain coefficient",
-        "soft_terrain_coefficient_raw": "Raw soft terrain coefficient",
+        "terrain_coefficient": "Terrain coefficients",
+        "raw_terrain_coefficient": "Raw terrain coefficients",
+        "hard_terrain_coefficient": "Hard",
+        "medium_terrain_coefficient": "Medium",
+        "soft_terrain_coefficient": "Soft",
+        "hard_terrain_coefficient_raw": "Hard",
+        "medium_terrain_coefficient_raw": "Medium",
+        "soft_terrain_coefficient_raw": "Soft",
         "hull_traverse_speed": "Hull traverse speed",
         "turret_traverse_speed": "Turret traverse speed",
         "gun_traverse_speed": "Gun traverse speed",

packages/website/src/components/TankopediaCharacteristics/index.module.css

@@ -35,7 +35,7 @@
 
         display: flex;
         align-items: center;
-        margin: 0 calc(var(--space-4));
+        margin: 0 calc(var(--space-3));
 
         .center {
           flex: 1;
@@ -67,8 +67,6 @@
         grid-auto-rows: inherit;
 
         .item {
-          padding: 0 var(--space-3);
-
           grid-row: span 1;
 
           display: flex;
@@ -76,6 +74,10 @@
           justify-content: center;
           gap: var(--space-2);
 
+          &[data-indent="true"] {
+            padding-left: var(--space-5);
+          }
+
           .value {
             display: flex;
             justify-content: space-between;
@@ -107,6 +109,13 @@
           }
         }
 
+        .label {
+          grid-row: span 1;
+
+          display: flex;
+          align-items: center;
+        }
+
         .toy {
           grid-row: span var(--group-span);
           padding: var(--space-4) 0;

packages/website/src/components/TankopediaCharacteristics/index.tsx

@@ -50,9 +50,14 @@ interface GroupProps {
 function Group({ group, characteristics }: GroupProps) {
   const strings = useStrings();
   const toys = group.order.filter((item) => "toy" in item).length;
-  const items = group.order.filter(
+  const characteristicsCount = group.order.filter(
     (item) => "name" in item && characteristics.has(item.name),
   ).length;
+  const labelsCount =
+    characteristicsCount > 0
+      ? group.order.filter((item) => "label" in item).length
+      : 0;
+  const items = characteristicsCount + labelsCount;
   const groupSpan = `calc(${toys} * var(--group-span) + ${items} + 2)`;
   const contentSpan = `calc(${toys} * var(--group-span) + ${items})`;
 
@@ -88,6 +93,7 @@ function Group({ group, characteristics }: GroupProps) {
         {group.order.map((item) => (
           <>
             {"toy" in item && <Toy {...item} />}
+            {"label" in item && <Label {...item} />}
             {"name" in item && characteristics.has(item.name) && (
               <Item config={item} value={characteristics.get(item.name)!} />
             )}
@@ -100,6 +106,22 @@ function Group({ group, characteristics }: GroupProps) {
   );
 }
 
+interface LabelProps {
+  label: string;
+}
+
+function Label({ label }: LabelProps) {
+  const strings = useStrings();
+
+  return (
+    <div className={styles.label}>
+      <Text lowContrast>
+        {(strings.tanks.characteristics.items as Record<string, string>)[label]}
+      </Text>
+    </div>
+  );
+}
+
 interface ItemProps {
   config: CharacteristicRenderConfig;
   value: CharacteristicReturnType;
@@ -111,7 +133,7 @@ function Item({ config, value }: ItemProps) {
   const hasUnits = config.units !== undefined;
 
   return (
-    <span className={styles.item}>
+    <span className={styles.item} data-indent={config.indent}>
       <div className={styles.value}>
         <Text lowContrast>
           {

packages/website/src/config/characteristicsGroups.ts

@@ -163,12 +163,15 @@ export const characteristicsGroups: CharacteristicsGroup[] = [
       { name: "power_to_weight", decimals: 1, units: "bhp_t" },
       { name: "brake_force", decimals: 1, units: "kN" },
 
-      { name: "hard_terrain_coefficient", decimals: 0 },
-      { name: "medium_terrain_coefficient", decimals: 0 },
-      { name: "soft_terrain_coefficient", decimals: 0 },
-      { name: "hard_terrain_coefficient_raw", decimals: 2 },
-      { name: "medium_terrain_coefficient_raw", decimals: 2 },
-      { name: "soft_terrain_coefficient_raw", decimals: 2 },
+      { label: "terrain_coefficient" },
+      { name: "hard_terrain_coefficient", decimals: 0, indent: true },
+      { name: "medium_terrain_coefficient", decimals: 0, indent: true },
+      { name: "soft_terrain_coefficient", decimals: 0, indent: true },
+
+      { label: "raw_terrain_coefficient" },
+      { name: "hard_terrain_coefficient_raw", decimals: 2, indent: true },
+      { name: "medium_terrain_coefficient_raw", decimals: 2, indent: true },
+      { name: "soft_terrain_coefficient_raw", decimals: 2, indent: true },
 
       { name: "hull_traverse_speed", units: "deg_s" },
       { name: "turret_traverse_speed", units: "deg_s" },

packages/website/src/types/characteristics.ts

@@ -78,6 +78,7 @@ export interface CharacteristicRenderConfig {
   decimals?: number;
   units?: keyof Strings["units"];
   localize?: boolean;
+  indent?: boolean;
   strings?: string;
 
   render?: (data: {
@@ -90,7 +91,11 @@ export interface ToyRenderConfig {
   toy: string;
 }
 
+export interface LabelRenderConfig {
+  label: string;
+}
+
 export type CharacteristicsGroup = {
   name: string;
-  order: (CharacteristicRenderConfig | ToyRenderConfig)[];
+  order: (CharacteristicRenderConfig | LabelRenderConfig | ToyRenderConfig)[];
 };