bedrock-samples/resource_pack/ui/mob_effect_screen.json

{
  "namespace": "mob_effect",
  //---------------------------------------------------------------------------
  // Controls
  //---------------------------------------------------------------------------
  "effect_background": {
    "type": "image",
    "texture": "textures/ui/effect_background"
  },
  "main_background": {
    "type": "image",
    "size": "$mob_effect_screen_size",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "offset": [ 4, 4 ],
    "texture": "textures/ui/mob_effect_background"
  },
  "button_background": {
    "type": "image",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "size": [ 25, 25 ],
    "offset": [ "90% + 2px", 4 ],
    "texture": "textures/ui/pocket_tab_right_side"
  },
  "effect_name": {
    "type": "label",
    "color": "$dark_button_default_text_color",
    "shadow": true,
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "offset": [ 27, 5 ],
    "text_alignment": "left",
    "text": "#mob_effect_name",
    "bindings": [
      {
        "binding_type": "collection",
        "binding_name": "#mob_effect_name",
        "binding_collection_name": "mob_effects_collection",
        "binding_condition": "visible"
      }
    ]
  },
  "effect_timer": {
    "type": "label",
    "anchor_from": "bottom_left",
    "anchor_to": "bottom_left",
    "offset": [ 27, -5 ],
    "text": "#mob_effect_timer",
    "color": "$dark_button_secondary_default_text_color",
    "text_alignment": "left",
    "bindings": [
      {
        "binding_type": "collection",
        "binding_name": "#mob_effect_timer",
        "binding_collection_name": "mob_effects_collection",
        "binding_condition": "always_when_visible"
      }
    ]
  },
  "effect_icon": {
    "type": "image",
    "size": [ "60%", "60%" ],
    "offset": [ -105, -1 ],
    "texture": "#texture",
    "bindings": [
      {
        "binding_type": "collection",
        "binding_name": "#texture",
        "binding_collection_name": "mob_effects_collection",
        "binding_condition": "visible"
      }
    ]
  },
  "mob_effect_grid_panel": {
    "type": "panel",
    "size": [ "100%", "100%c" ],
    "controls": [
      {
        "mob_effect_grid@mob_effect.mob_effect_grid": { }
      }
    ]
  },
  "mob_effect_grid": {
    "type": "grid",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "size": [ 150, "default" ],
    "offset": [ "45% - 60px", 4 ],
    "grid_item_template": "mob_effect.mob_effect_grid_item",
    "grid_dimension_binding": "#mob_effect_grid_size",
    "collection_name": "mob_effects_collection",
    "bindings": [
      {
        "binding_name": "#mob_effect_grid_size"
      }
    ]
  },


  //---------------------------------------------------------------------------
  // CONTENT
  //---------------------------------------------------------------------------
  "mob_effect_grid_item": {
    "type": "panel",
    "size": [ 240, 30 ],
    "controls": [
      { "bg@mob_effect.effect_background": { } },
      { "name@mob_effect.effect_name": { "layer": 1 } },
      { "timer@mob_effect.effect_timer": { "layer": 1 } },
      { "icon@mob_effect.effect_icon": { "layer": 1 } }
    ]
  },
  "mob_effect_list_content_panel": {
    "type": "panel",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "size": [ "90%", "90% - 4px" ],
    "clips_children": true,
    "offset": [ -4, 4 ],
    "controls": [
      {
        "scrolling_panel@common.scrolling_panel": {
          "$scrolling_content": "mob_effect.mob_effect_grid_panel",
          "$show_background": false,
          "$scroll_size": [ "8px", "100% - 4px" ],
          "$scrolling_pane_size|default": [ "100%", "default" ],
          "$scroll_box_mouse_image_control": "common-classic.button_state_default",
          "anchor_from": "top_middle",
          "anchor_to": "top_middle",
          "offset": [ "default", "2px" ]
        }
      }
    ]
  },
  "mob_effect_screen_close_button@common.legacy_pocket_close_button": {
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "size": [ 18, 18 ],
    "offset": [ "90% + 4px", 7.5 ],
    "$pressed_button_name": "button.menu_continue"
  },
  "close_button_panel": {
    "type": "panel",
    "controls": [
      { "bg@mob_effect.button_background": { } },
      { "close_button@mob_effect.mob_effect_screen_close_button": { } }
    ]
  },
  "mob_effect_content": {
    "type": "panel",
    "controls": [
      { "bg@mob_effect.main_background": { } },
      { "close_panel@mob_effect.close_button_panel": { } },
      { "content_panel@mob_effect.mob_effect_list_content_panel": { } }
    ]
  },

  //---------------------------------------------------------------------------
  // Screen
  //---------------------------------------------------------------------------
  "main_screen": {
    "type": "panel",
    "controls": [
      { "main_screen@mob_effect.mob_effect_content": {} }
    ]
  },
  "mob_effect_screen@common.base_screen": {
    "button_mappings": [
      {
        "from_button_id": "button.menu_cancel",
        "to_button_id": "button.menu_continue",
        "mapping_type": "global"
      },
	    {
		    "from_button_id": "button.mobeffects",
		    "to_button_id": "button.menu_continue",
		    "mapping_type": "global"
	    }
    ],
    "close_on_player_hurt": true,
    "$screen_content": "mob_effect.main_screen",
    "$screen_bg_content": "common.screen_background",
    "$screen_background_alpha": 0.4
  }
}