Code Patterns

Copy-paste examples for common plugin tasks. Commands, events, ECS, GUI, and more.
All 225 Command 60 Damage 2 Ecs 27 Entity 5 Gui 75 Interaction 2 Inventory 4 Moderation 3 Permission 2 Player 9 Plugin 4 Storage 2 Teleport 3 Ui 22 Util 5
← Back to Patterns
gui
hytale-memoriescategorypanel

Official Hytale UI: MemoriesCategoryPanel - Container layout with buttons with text elements
Example Code

$C = "../../Common.ui";
$Sounds = "../../Sounds.ui";

@TitleStyle = LabelStyle(
  FontSize: 15,
  VerticalAlignment: Center,
  RenderUppercase: true,
  TextColor: #b4c8c9,
  FontName: "Secondary",
  RenderBold: true,
  LetterSpacing: 0
);

@progressBarWidth = 1018;

$C.@PageOverlay {
  LayoutMode: Middle;

  $C.@DecoratedContainer {
    Anchor: (Height: 825, Width: 1070);

    #Title {

      Group {
        LayoutMode: Center;

        Button #MemoriesInfoButton {
          Anchor: (Width: 24, Height: 24, Left: 15);
          Style: (
            Default: (Background: (TexturePath: "InfoButtonBackground.png", Border: 2)),
            Hovered: (Background: (TexturePath: "InfoButtonBackgroundHovered.png", Border: 2))
          );

          Label {
            Style: (
              FontSize: 14,
              TextColor: #b4c8c9,
              HorizontalAlignment: Center,
              RenderBold: true,
              VerticalAlignment: Center
            );
            Text: "?";
          }
        }

        Group {
          FlexWeight: 1;
        }

        Label #TitleLabel {
          Style: (...@TitleStyle, FontName: "Default", RenderBold: true, TextColor: #b4c8c9, LetterSpacing: 0.5);
          Text: %server.memories.general.title;
        }

        Group {
          FlexWeight: 1;
        }

        Group {
          LayoutMode: Right;
          Anchor: (Width: 24, Right: 15);
        }
      }
    }

    #Content {
      LayoutMode: Top;
      Padding: (Full: 9);

      Group #Categories {
        Background: (TexturePath: "MemoriesRunes.png", Border: 15);
        FlexWeight: 1;
        Group {
          LayoutMode: TopScrolling;
          Anchor: (Top: 15);
          ScrollbarStyle: $C.@DefaultScrollbarStyle;
          FlexWeight: 1;

          Group #IconList {
            LayoutMode: LeftCenterWrap;
          }
        }
      }

      Group #Footer {
        Anchor: (Height: 175);
        LayoutMode: Top;
        Background: (TexturePath: "ContainerBackground.png", Border: 23);
        Padding: (Horizontal: 20, Vertical: 15);

        Group {
          FlexWeight: 1;
        }

        Group #ChestMarkers {
          Anchor: (Bottom: -15, Left: -14);
          // Chest markers will be added here
        }

        Group {
          Background: "MemoriesProgress/MemoriesBarBg.png";
          Anchor: (Height: 22, Width: @progressBarWidth, Bottom: 30);
          Padding: (Full: 6);

          ProgressBar #MemoriesProgressBar {
            BarTexturePath: "MemoriesProgress/MemoriesBarFill.png";
            EffectTexturePath: "MemoriesProgress/MemoriesBarTipOfTheBar.png";
            EffectWidth: 114;
            EffectHeight: 32;
            EffectOffset: 104;
          }

          ProgressBar #MemoriesProgressBarTexture {
            BarTexturePath: "MemoriesProgress/MemoriesBarTexture.png";
          }

        }

        Group {
          FlexWeight: 1;
        }

        Group {
          LayoutMode: Left;

          Group {
            FlexWeight: 1;
            LayoutMode: Left;

            Label {
              Style: (...@TitleStyle, FontName: "Default", RenderBold: true, TextColor: #b4c8c9, LetterSpacing: 0.5, VerticalAlignment: End);
              Text: %server.memories.general.totalCollected + " ";
            }
            Label #TotalCollected {
              Style: (...@TitleStyle, FontName: "Default", RenderBold: true, TextColor: #b4c8c9, LetterSpacing: 0.5, VerticalAlignment: End);
              Text: "0";
            }
            Label {
              Style: (...@TitleStyle, FontName: "Default", RenderBold: true, TextColor: #b4c8c9, LetterSpacing: 0.5, VerticalAlignment: End);
              Text: "/";
            }
            Label #MemoriesTotal {
              Style: (...@TitleStyle, FontName: "Default", RenderBold: true, TextColor: #b4c8c9, LetterSpacing: 0.5, VerticalAlignment: End);
              Text: "0";
            }
          }

          $C.@TextButton #RecordButton {
            @Sounds = $Sounds.@ButtonsMain;

            Anchor: (Width: 330, Height: 42);
            Text: %server.memories.general.noMemories;
            Visible: false;
          }

          $C.@CancelTextButton #BackButton {
            Anchor: (Width: 330, Height: 42);
            Text: %client.general.button.back;
            Visible: false;
          }

          Group {
            FlexWeight: 1;
          }
        }
      }
    }
  }
}

$C.@BackButton {}