bedrock-samples/resource_pack/ui/beacon_screen_pocket.json

{
  "namespace": "beacon_pocket",

  "generic_label": {
    "type": "label",
    "anchor_from": "center",
    "anchor_to": "center",
    "color": "$pocket_title_text_color"
  },

  // Base images //
  "panel_outline": {
    "type": "image",
    "texture": "textures/ui/panel_outline"
  },
  "dark_bg": {
    "type": "image",
    "texture": "textures/ui/item_cell"
  },
  "background_image": {
    "type": "image",
    "texture": "textures/ui/background_image"
  },

  // Valid Item Images //

  "item_seperator": {
    "type": "image",
    "texture": "textures/ui/beacon_item_seperator_pocket",
    "size": [ 5, 18 ],
    "anchor_to": "left_middle",
    "anchor_from": "left_middle"
  },
  "item_renderer": {
    "type": "custom",
    "renderer": "inventory_item_renderer",
    "size": [ 16, 16 ],
    "anchor_to": "left_middle",
    "anchor_from": "left_middle"
  },

  "usable_items_panel": {
    "type": "panel",
    "size": [ 104, 18 ],
    "controls": [
      {
        "netherite@beacon_pocket.item_renderer": {
          "offset": [ 0, 0 ],
          "property_bag": {
            "#item_id_aux": 48627712
          },
          "bindings": [
            {
              "binding_name": "#supports_netherite",
              "binding_name_override": "#visible"
            }
          ]
        }
      },
      {
        "item_seperator_0@beacon_pocket.item_seperator": {
          "offset": [ 16, 0 ],
          "bindings": [
            {
              "binding_name": "#supports_netherite",
              "binding_name_override": "#visible"
            }
          ]
        }
      },
      {
        "emerald@beacon_pocket.item_renderer": {
          "offset": [ 22, 0 ],
          "property_bag": {
            "#item_id_aux": 25427968
          }
        }
      },
      {
        "item_seperator_1@beacon_pocket.item_seperator": {
          "offset": [ 38, 0 ]
        }
      },
      {
        "diamond@beacon_pocket.item_renderer": {
          "offset": [ 44, 0 ],
          "property_bag": {
            "#item_id_aux": 17301504
          }
        }
      },
      {
        "item_seperator_2@beacon_pocket.item_seperator": {
          "offset": [ 60, 0 ]
        }
      },
      {
        "gold@beacon_pocket.item_renderer": {
          "offset": [ 66, 0 ],
          "property_bag": {
            "#item_id_aux": 17432576
          }
        }
      },
      {
        "item_seperator_3@beacon_pocket.item_seperator": {
          "offset": [ 82, 0 ]
        }
      },
      {
        "iron@beacon_pocket.item_renderer": {
          "offset": [ 88, 0 ],
          "property_bag": {
            "#item_id_aux": 17367040
          }
        }
      }
    ]
  },

  // Pyramid Images //

  "pyramid_image": {
    "type": "image",
    "$pyramid_size|default": [ 19, 20 ],
    "size": "$pyramid_size",
    "anchor_to": "center",
    "anchor_from": "center"
  },
  "pyramid_panel": {
    "type": "panel",
    "size": [ 19, 24 ],
    "layer": 5,
    "anchor_to": "top_left",
    "anchor_from": "top_left",
    "controls": [
      {
        "pyramid_image@pyramid_image": {
          "texture": "$image_texture"
        }
      }
    ]
  },

  // Backgrounds //

  "background_panel": {
    "type": "image",
    "size": [ "100%", "100%" ],
    "texture": "textures/ui/background_panel"
  },
  "beacon_background": {
    "type": "image",
    "texture": "textures/ui/effect_background",
    "size": [ "100%", "100%" ],
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "controls": [
      {
        "middle_strip": {
          "type": "image",
          "offset": [ 0, 3 ],
          "layer": 1,
          "anchor_from": "top_middle",
          "anchor_to": "top_middle",
          "texture": "textures/ui/middle_strip",
          "size": [ 2, "100%-6px" ]
        }
      }
    ]
  },

  // Inventory //

  "inventory_grid": {
    "type": "grid",
    "grid_rescaling_type": "horizontal",
    "anchor_to": "top_left",
    "anchor_from": "top_left",
    "size": [ "100%", "default" ],
    "maximum_grid_items": 36,
    "collection_name": "combined_hotbar_and_inventory_items",
    "grid_item_template": "common.pocket_ui_container_item",
    "$item_collection_name": "combined_hotbar_and_inventory_items"
  },

  "inventory_content": {
    "type": "panel",
    "size": [ "100%-5px", "100%-5px" ],
    "offset": [ "5px", "2px" ],
    "anchor_to": "top_left",
    "anchor_from": "top_left",
    "controls": [
      {
        "scrolling_panel@common.scrolling_panel": {
          "$scrolling_pane_size": [ "100%", "100%-2px" ],
          "$scrolling_content": "beacon_pocket.inventory_grid",
          "$scroll_box_mouse_image_control": "common-classic.button_state_default",
          "$scroll_size": [ "8px", "100%" ]
        }
      }
    ]
  },

  // Buttons //

  "highlight_hover_square": {
    "type": "panel",
    "size": [ "100%", "100%" ],

    "controls": [
      {
        "highlight_square@common.pocket_ui_highlight_slot": {
          "visible": false,

          "bindings": [
            {
              "binding_name": "#gamepad_helper_visible",
              "binding_name_override": "#visible"
            }
          ]
        }
      }
    ]
  },

  "button_unchecked_default": {
    "type": "image",
    "texture": "textures/ui/beacon_default_button_pocket"
  },
  "button_unchecked_hover": {
    "type": "image",
    "texture": "textures/ui/beacon_default_button_pocket",
    "controls": [
      { "highlight_hover_square@beacon_pocket.highlight_hover_square": {} }
    ]
  },
  "button_checked": {
    "type": "image",
    "texture": "textures/ui/beacon_selected_button_pocket"
  },
  "button_checked_hover@beacon_pocket.button_checked": {
    "controls": [
      { "highlight_hover_square@beacon_pocket.highlight_hover_square": {} }
    ]
  },
  "button_locked@beacon_pocket.inactive_button_image": {},
  "button_locked_hover@beacon_pocket.inactive_button_image": {
    "controls": [
      { "highlight_hover_square@beacon_pocket.highlight_hover_square": {} }
    ]
  },
  "toggle_button@common.toggle": {
    "size": [ 22, 22 ],
    "layer": 1,
    "anchor_from": "center",
    "anchor_to": "center",
    "$toggle_name": "$button_name",
    "$unchecked_control": "beacon_pocket.button_unchecked_default",
    "$checked_control": "beacon_pocket.button_checked",
    "$unchecked_hover_control": "beacon_pocket.button_unchecked_hover",
    "$checked_hover_control": "beacon_pocket.button_checked_hover",
    "$unchecked_locked_control": "beacon_pocket.button_locked",
    "$checked_locked_control": "beacon_pocket.button_locked",
    "$unchecked_locked_hover_control": "beacon_pocket.button_locked_hover",
    "$checked_locked_hover_control": "beacon_pocket.button_locked_hover",

    "bindings": [
      {
        "binding_name": "#button_visible",
        "binding_name_override": "#visible",
        "binding_collection_name": "$button_name",
        "binding_type": "collection"
      },
      {
        "binding_collection_name": "$button_name",
        "binding_type": "collection_details"
      },
      {
        "binding_type": "collection",
        "binding_name": "#selected",
        "binding_collection_name": "$button_name",
        "binding_name_override": "#toggle_state"
      }
    ],
    "button_mappings": [
      {
        "from_button_id": "button.menu_select",
        "to_button_id": "button.menu_ok",
        "mapping_type": "pressed"
      },
      {
        "from_button_id": "button.menu_ok",
        "to_button_id": "button.menu_ok",
        "mapping_type": "pressed"
      }
    ]

  },
  "base_button@common.button": {
    "size": [ "100%", "100%" ],
    "layer": 2,
    "anchor_from": "center",
    "anchor_to": "center",
    "bindings": [
      {
        "binding_name": "$button_active",
        "binding_name_override": "#visible",
        "binding_collection_name": "$button_name",
        "binding_type": "collection"
      },
      {
        "binding_collection_name": "$button_name",
        "binding_type": "collection_details"
      }
    ],
    "controls": [
      {
        "default": {
          "type": "image",
          "texture": "textures/ui/beacon_default_button_pocket"
        }
      },
      {
        "hover": {
          "type": "image",
          "texture": "textures/ui/beacon_default_button_pocket",
          "controls": [
            { "highlight_hover_square@beacon_pocket.highlight_hover_square": {} }
          ]
        }
      },
      {
        "pressed": {
          "type": "image",
          "texture": "textures/ui/beacon_button_locked"
        }
      }
    ]
  },
  "active_button@beacon_pocket.base_button": {
    "$button_active": "#active",
    "button_mappings": [
      {
        "from_button_id": "button.menu_select",
        "to_button_id": "button.menu_ok",
        "mapping_type": "pressed"
      },
      {
        "from_button_id": "button.menu_ok",
        "to_button_id": "button.menu_ok",
        "mapping_type": "pressed"
      }
    ]
  },
  "inactive_button_image": {
    "type": "image",
    "texture": "textures/ui/beacon_button_locked"
  },
  "inactive_button@beacon_pocket.base_button": {
    "$button_active": "#inactive",
    "button_mappings": [],
    "pressed_control": "",
    "controls": [
      { "default@beacon_pocket.inactive_button_image": {} },
      {
        "hover@beacon_pocket.inactive_button_image": {
          "controls": [
            { "highlight_hover_square@beacon_pocket.highlight_hover_square": {} }
          ]
        }
      }
    ]
  },
  "selected_button_image": {
    "type": "image",
    "texture": "textures/ui/beacon_selected_button_pocket"
  },
  "selected_button@beacon_pocket.base_button": {
    "$button_active": "#selected",
    "button_mappings": [],
    "pressed_control": "",
    "controls": [
      { "default@beacon_pocket.selected_button_image": {} },
      {
        "hover@beacon_pocket.selected_button_image": {
          "controls": [
            { "highlight_hover_square@beacon_pocket.highlight_hover_square": {} }
          ]
        }
      }
    ]
  },

  // Secondary effect images //

  "secondary_effect_base@beacon_pocket.image_template": {
    "bindings": [
      {
        "binding_name": "#extra_image_selection",
        "binding_name_override": "#visible",
        "binding_collection_name": "$effect_name",
        "binding_type": "collection"
      }
    ]
  },
  "speed_secondary@beacon_pocket.secondary_effect_base": {
    "$effect_name": "speed",
    "$image_texture": "textures/ui/speed_effect"
  },
  "haste_secondary@beacon_pocket.secondary_effect_base": {
    "$effect_name": "haste",
    "$image_texture": "textures/ui/haste_effect"
  },
  "resist_secondary@beacon_pocket.secondary_effect_base": {
    "$effect_name": "resist",
    "$image_texture": "textures/ui/resistance_effect"

  },
  "jump_secondary@beacon_pocket.secondary_effect_base": {
    "$effect_name": "jump",
    "$image_texture": "textures/ui/jump_boost_effect"
  },
  "strength_secondary@beacon_pocket.secondary_effect_base": {
    "$effect_name": "strength",
    "$image_texture": "textures/ui/strength_effect"
  },
  "secondary_effect_images@beacon_pocket.image_template": {
    "controls": [
      { "speed_secondary@beacon_pocket.speed_secondary": {} },
      { "haste_secondary@beacon_pocket.haste_secondary": {} },
      { "resist_secondary@beacon_pocket.resist_secondary": {} },
      { "jump_secondary@beacon_pocket.jump_secondary": {} },
      { "strength_secondary@beacon_pocket.strength_secondary": {} }
    ]
  },


  // Templates for button panel //

  "base_image": {
    "type": "image",
    "anchor_to": "center",
    "anchor_from": "center",
    "$image_size|default": [ 18, 18 ],
    "size": "$image_size",
    "$image_texture|default": "",
    "texture": "$image_texture",
    "layer": 5,
    "bindings": [
      {
        "binding_name": "#button_visible",
        "binding_name_override": "#visible",
        "binding_collection_name": "$button_name",
        "binding_type": "collection"
      }
    ]
  },
  "image_template": {
    "type": "panel",
    "size": [ "50%", "100%x" ],
    "anchor_from": "center",
    "anchor_to": "center",
    "layer": 6,
    "controls": [
      { "base_image@beacon_pocket.base_image": {} }
    ]
  },
  "toggle_template": {
    "type": "panel",
    "size": [ "100%", "100%" ],
    "anchor_from": "center",
    "anchor_to": "center",
    "$image_control|default": "beacon_pocket.image_template",
    "controls": [
      { "toggle_button@beacon_pocket.toggle_button": {} },
      { "$image_control@$image_control": {} }
    ]
  },
  "button_template@beacon_pocket.toggle_template": {
    "controls": [
      { "active_button@beacon_pocket.active_button": {} },
      { "inactive_button@beacon_pocket.inactive_button": {} },
      { "image_template@beacon_pocket.image_template": {} }
    ]
  },
  "panel_template": {
    "type": "panel",
    "size": [ 24, 24 ],
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "$button_control|default": "beacon_pocket.toggle_template",
    "bindings": [
      {
        "binding_type": "collection",
        "binding_name": "#active",
        "binding_collection_name": "$button_name",
        "binding_name_override": "#enabled"
      }
    ],
    "controls": [
      { "$button_control@$button_control": {} }
    ]
  },

  // Beacon Sub Panel Labels //

  "beacon_power_label": {
    "type": "panel",
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "size": [ "100%", "12%" ],
    "offset": [ 0, 2 ],
    "layer": 6,
    "controls": [
      {
        "label@beacon_pocket.generic_label": {
          "font_scale_factor": 0.8,
          "anchor_from": "center",
          "anchor_to": "center",
          "text": "$text",
          "color": "$beacon_power_title_text_color"
        }
      }
    ]
  },

  // Beacon Button Panel //

  "beacon_sub_panel": {
    "type": "panel",
    "anchor_from": "center",
    "anchor_to": "right_middle",
    "offset": [ -1, 0 ],
    "size": [ "50%-4px", "100%-6px" ]
  },
  "beacon_button_left_panel@beacon_pocket.beacon_sub_panel": {
    "controls": [
      {
        "primary_power_label@beacon_pocket.beacon_power_label": {
          "$text": "tile.beacon.primary"
        }
      },
      {
        "panel": {
          "type": "panel",
          "size": [ "100%", "88%" ],
          "offset": [ 0, "12%" ],

          "anchor_from": "top_middle",
          "anchor_to": "top_middle",
          "controls": [
            {
              "pyramids_and_buttons": {
                "type": "panel",
                "size": [ 81, 76 ],
                "anchor_from": "center",
                "anchor_to": "center",
                "controls": [
                  {
                    "level1@beacon_pocket.pyramid_panel": {
                      "$image_texture": "textures/ui/pyramid_level_1",
                      "offset": [ 0, 0 ]
                    }
                  },
                  {
                    "speed_panel@beacon_pocket.panel_template": {
                      "offset": [ 31, 0 ],
                      "$image_texture": "textures/ui/speed_effect",
                      "$button_name": "speed"
                    }
                  },
                  {
                    "haste_panel@beacon_pocket.panel_template": {
                      "offset": [ 57, 0 ],
                      "$image_texture": "textures/ui/haste_effect",
                      "$button_name": "haste"
                    }
                  },
                  {
                    "level2@beacon_pocket.pyramid_panel": {
                      "$image_texture": "textures/ui/pyramid_level_2",
                      "offset": [ 0, 26 ]
                    }
                  },
                  {
                    "resist_panel@beacon_pocket.panel_template": {
                      "offset": [ 31, 26 ],
                      "$image_texture": "textures/ui/resistance_effect",
                      "$button_name": "resist"
                    }
                  },
                  {
                    "jump_panel@beacon_pocket.panel_template": {
                      "offset": [ 57, 26 ],
                      "$image_texture": "textures/ui/jump_boost_effect",
                      "$button_name": "jump"
                    }
                  },
                  {
                    "level3@beacon_pocket.pyramid_panel": {
                      "$image_texture": "textures/ui/pyramid_level_3",
                      "offset": [ 0, 52 ]
                    }
                  },
                  {
                    "strength_panel@beacon_pocket.panel_template": {
                      "offset": [ 45, 52 ],
                      "$image_texture": "textures/ui/strength_effect",
                      "$button_name": "strength"
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },
  "beacon_button_right_panel@beacon_pocket.beacon_sub_panel": {
    "anchor_to": "left_middle",
    "offset": [ 1, 0 ],
    "controls": [
      {
        "secondary_power_label@beacon_pocket.beacon_power_label": {
          "$text": "tile.beacon.secondary"
        }
      },
      {
        "panel": {
          "type": "panel",
          "size": [ "100%", "88%" ],
          "offset": [ 0, "12%" ],
          "anchor_from": "top_middle",
          "anchor_to": "top_middle",
          "controls": [
            {
              "buttons_and_pyramid": {
                "type": "panel",
                "size": [ 66, 76 ],
                "anchor_from": "center",
                "anchor_to": "center",
                "controls": [
                  {
                    "level4@beacon_pocket.pyramid_panel": {
                      "$image_texture": "textures/ui/pyramid_level_4",
                      "offset": [ 0, 0 ],
                      "anchor_from": "top_middle",
                      "anchor_to": "top_middle"
                    }
                  },
                  {
                    "regen_panel@beacon_pocket.panel_template": {
                      "offset": [ -1, 26 ],
                      "anchor_from": "top_middle",
                      "anchor_to": "top_right",
                      "$image_texture": "textures/ui/regeneration_effect",
                      "$button_name": "regen"
                    }
                  },
                  {
                    "extra_panel@beacon_pocket.panel_template": {
                      "offset": [ 1, 26 ],
                      "anchor_from": "top_middle",
                      "anchor_to": "top_left",
                      "$button_name": "extra",
                      "$image_control": "beacon_pocket.secondary_effect_images"
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },

  "beacon_buttons_panel": {
    "type": "panel",
    "anchor_from": "center",
    "anchor_to": "bottom_middle",
    "offset": [ 0, 0 ],
    "size": [ "100%", "50%" ],
    "min_size": [ "100%", "100px" ],

    "controls": [
      { "beacon_background@beacon_pocket.beacon_background": {} },
      { "left_panel@beacon_pocket.beacon_button_left_panel": { "layer": 1 } },
      { "right_panel@beacon_pocket.beacon_button_right_panel": { "layer": 1 } }
    ]
  },

  // Beacon Payment Panel //

  "confirm_panel": {
    "type": "panel",
    "size": [ "fill", 20 ],
    "anchor_from": "right_middle",
    "anchor_to": "right_middle",
    "controls": [
      {
        "ingredient_item@common.pocket_ui_container_item": {
          "size": [ 44, 20 ],
          "offset": [ -44, 0 ], // 20 + 22 + 2 padding
          "$cell_image_size": [ 20, 20 ],
          "$item_collection_name": "beacon_payment_items",
          "anchor_from": "right_middle",
          "anchor_to": "right_middle"
        }
      },
      {
        "confirm_panel@beacon_pocket.panel_template": {
          "size": [ 20, 20 ],
          "offset": [ -22, 0 ], // 20 + 2 padding
          "$image_texture": "textures/ui/confirm",
          "$image_size": [ 14, 12 ],
          "$button_name": "confirm",
          "anchor_from": "right_middle",
          "anchor_to": "right_middle",
          "$button_control": "beacon_pocket.button_template"

        }
      },
      {
        "cancel_panel@beacon_pocket.panel_template": {
          "size": [ 20, 20 ],
          "offset": [ 0, 0 ],
          "$image_texture": "textures/ui/cancel",
          "$image_size": [ 13, 13 ],
          "$button_name": "cancel",
          "anchor_from": "right_middle",
          "anchor_to": "right_middle",
          "$button_control": "beacon_pocket.button_template"
        }
      }
    ]
  },


  "beacon_payment_panel": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%", 20 ],
    "anchor_from": "center",
    "anchor_to": "top_middle",
    "controls": [
      {
        "usable_items_panel@beacon_pocket.usable_items_panel": {}
      },
      {
        "pad": {
          "type": "panel",
          "size": [ "fill", 0 ]
        }
      },
      {
        "confirm_panel@beacon_pocket.confirm_panel": {}
      }
    ]
  },

  "beacon_contents_panel": {
    "type": "stack_panel",
    "size": [ "100% - 12px", "100% - 8px" ],
    "offset": [ -1, -1 ],
    "anchor_from": "center",
    "anchor_to": "center",
    "controls": [
      {
        "fill1": {
          "type": "panel",
          "size": [ 0, "fill" ]
        }
      },
      {
        "beacon_buttons_panel@beacon_buttons_panel": {}

      },
      {
        "pad1": {
          "type": "panel",
          "size": [ 0, 10 ]
        }
      },
      {
        "beacon_payment_panel@beacon_payment_panel": {}

      },
      {
        "fill2": {
          "type": "panel",
          "size": [ 0, "fill" ]
        }
      }
    ]
  },


  // Header //

  "header": {
    "type": "panel",
    "size": [ "100%", 28 ],
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "controls": [
      {
        "header_background": {
          "type": "image",
          "texture": "textures/ui/header_bar_2"
        }
      },
      { "legacy_pocket_close_button@common.legacy_pocket_close_button": { "offset": [ -3, 3 ] } },
      {
        "panel": {
          "type": "panel",
          "anchor_from": "center",
          "anchor_to": "center",
          "controls": [
            {
              "title_label@enchanting_pocket.generic_label": {
                "color": "$title_text_color",
                "shadow": false,
                "text": "container.beacon",
                "layer": 1
              }
            }
          ]
        }
      }
    ]
  },


  // Layout Content Panels //

  "inventory_and_beacon_panel": {
    "type": "panel",
    "controls": [
      {
        "inventory_half_screen": {
          "type": "panel",
          "size": [ "40%", "100%" ],
          "anchor_from": "left_middle",
          "anchor_to": "left_middle",

          "controls": [
            { "inventory_content@beacon_pocket.inventory_content": {} }
          ]
        }
      },
      {
        "beacon_half_screen": {
          "type": "panel",
          "size": [ "60%", "100%" ],
          "anchor_from": "right_middle",
          "anchor_to": "right_middle",

          "controls": [
            { "beacon_content@beacon_pocket.beacon_contents_panel": {} }
          ]
        }
      }
    ]
  },

  "header_and_content_stack_panel": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "85%", "85%" ],
    "controls": [
      { "header@beacon_pocket.header": { "layer": 2 } },
      {
        "inventory_and_beacon_panel@beacon_pocket.inventory_and_beacon_panel": {
          "size": [ "100%", "fill" ]
        }
      }
    ]
  },

  // Screen //

  "beacon_panel": {
    "type": "panel",
    "controls": [
      { "bg@furnace_pocket.background_image": {} },
      { "root_panel@common.root_panel": { "size": [ "85%", "85%" ], "layer": 1 } },
      { "header_and_content_stack_panel@beacon_pocket.header_and_content_stack_panel": {} },

      { "container_gamepad_helpers@common.container_gamepad_helpers": { "layer": 2 } },
      { "inventory_selected_icon_button@common.inventory_selected_icon_button": {} },
      { "hold_icon@common.inventory_take_progress_icon_button": {} },
      { "selected_item_details_factory@common.selected_item_details_factory": {} },
      {
        "item_lock_notification_factory@common.item_lock_notification_factory": {
          "$offset": [ 0, "85%" ]
        }
      },
      { "flying_item_renderer@common.flying_item_renderer": { "layer": 12 } },
      { "bundle_touch_tooltip@gameplay.bundle_touch_tooltip": {} }
    ]
  }
}