View difference between Paste ID: zqDVrPLQ and g4PgX1Su

 function layout()
 	-- Here we define our Border sizes. Left and Right are dynamic, so we use up all the available space
-setBorderLeft(210)
+	-- on either side of the main console. We assign some static values for top and bottom, though that's
-left_container = Geyser.Container:new({
+	-- not generally best practices for distribution. 100 could be a lot of real estate on, say, a
-  name = "left_container",    -- give it a unique name here
+	-- netbook.
-  x=0, y=0,                   -- have it start at the top-left corner of mudlet
+	Vyzor.Options.Borders = {Left = "dynamic", Right = "dynamic", Top = 100, Bottom = 100}
-  width = 200, height="100%", -- with a width of 200, and a height of the full screen, hence 100%
+
-})
+	-- All of the Frames share the same Border, so we only need to instantiate it once. This will
 	-- be re-used.
-setBorderRight(210)
+	ui_border = Vyzor.Border(
-right_container = Geyser.Container:new({
+						2,																			-- Width.
-  name = "right_container",    -- give it a unique name here
+						Vyzor.BorderStyle.Solid,												-- Style.
-  x=0, y=0,                   -- have it start at the top-left corner of mudlet
+						Vyzor.Brush( Vyzor.Color( Vyzor.ColorMode.Name, "grey" ) ),	-- Color.
-  width = 200, height="100%", -- with a width of 200, and a height of the full screen, hence 100%
+						10																			-- Radius.
-})
+					)
 
-setBorderTop(100)
+	-- Because the space at the top is NOT the entire length of the window, we make another Frame
-top_container = Geyser.Container:new({
+	-- to act as the inner space. We make it the full size of Vyzor.Top (top border) for now; we
-  name = "top_container",    -- give it a unique name here
+	-- will be adjusting its size dynamically later.
-  x=0, y=0,                   -- have it start at the top-left corner of mudlet
+	top_container = Vyzor.Frame( "top_container" )
-  width ="100%", height= 100, -- with a width of 200, and a height of the full screen, hence 100%
+	-- Add this Frame to Vyzor.Top; a Frame fits inside its parent, and all scalar values are
-})
+	-- relative to its parent.
 	Vyzor.Top:Add( top_container )
-setBorderBottom(100)
+	-- Add our shared border.
-bottom_container = Geyser.Container:new({
+	top_container:Add( ui_border )
-  name = "bottom_container",    -- give it a unique name here
+	-- We add a Background. In practice, adding a black Background is redundant, since it's going
-  x=0, y=0,                   -- have it start at the top-left corner of mudlet
+	-- to be black anyway. This might be necessary if you layer multiple Frames, and you want to hide
-  width = "100%", height= 100, -- with a width of 200, and a height of the full screen, hence 100%
+	-- what's underneath. I left this here for illustrative purposes.
-})
+	top_container:Add(
 		Vyzor.Background(
 			Vyzor.Brush( Vyzor.Color( Vyzor.ColorMode.Name, "black" ) )
-Top_Border = Geyser.Label:new({
+		)
-  name = "Top_Border",
+	)
-  x = "15%", y = "0%",
+	-- Now we add our Font. Sizes are different in my rewrite because, for some reason
-  width = "70%", height = "95%",
+	-- completely inexplicable, my Vyzor's 40px is different from Geyser's 40px. I have no
-  message = [[<center><font size=40>SLOTHMUD - A RETURN TO ITS ORIGINS</font></center>]]
+	-- idea, since it's all the same Stylesheet business underneath.
-}, top_container)
+	top_container:Add(
-Top_Border:setStyleSheet([[
+		Vyzor.Font(
-  background-color: black;
+			30,							-- Size.
-  border-width: 2px;
+			"Monospace",				-- Family.
-  border-style: solid;
+			Vyzor.FontWeight.Bold	-- Weight.
-  border-color: grey;
+		)
-  border-radius: 10px;
+	)
-  font: bold "Monospace";
+	-- This sets the text color. I wouldn't have thought this necessary, but everything
-  font-size: 14px;
+	-- was black for me. Might be a Qt default.
-]])
+	top_container:Add( Vyzor.Color( Vyzor.ColorMode.Name, "white" ) )
 
-Locations = Geyser.Label:new({
+	-- Like our top_container, we make a new Frame. This time, though, we set our dimensions.
-  name = "Locations",
+	-- Height is .25 (or 25% of its parent). In this case, the parent is Vyzor.Left, a Border
-  x = "0%", y = "0%",
+	-- Frame Vyzor creates that is exactly the size of Mudlet's left border.
-  width = "100%", height = "25%"
+	Locations = Vyzor.Frame( "Locations", 0, 0, 1, .25 )
-}, left_container)
+	-- Shared border.
-Locations:setStyleSheet([[
+	Locations:Add( ui_border )
-  background-color: black;
+	-- Font.
-  border-width: 2px;
+	Locations:Add( Vyzor.Font( 10, "Monospace", Vyzor.FontWeight.Bold ) )
-  border-style: solid;
+	-- Color.
-  border-color: grey;
+	Locations:Add( Vyzor.Color( Vyzor.ColorMode.Name, "white" ) )
-  border-radius: 10px;
+	-- And add the new Frame (Locations) to Vyzor.Left.
-  font: bold "Monospace";
+	Vyzor.Left:Add( Locations )
-  font-size: 1px;
+
 	-- Much of the same. y = .25, or 25% of the way down Vyzor.Left.
-]])
+	Grouping = Vyzor.Frame( "Grouping", 0, .25, 1, .35 )
-Locations:echo("LOCATION INFORMATION:<br><hr><br>Continent:"..atcp.MSDPCONTINENT.."<hr>Area: "..atcp.MSDPAREA_NAME.."<hr>Room: "..atcp.MSDPROOM_NAME.."<hr>Exits: "..atcp.MSDPROOM_EXITS.."<hr>Terrain: "..atcp.MSDPTERRAIN.."<hr>Room ID: "..atcp.MSDPROOM_VNUM)
+	Grouping:Add( ui_border )
 	Grouping:Add( Vyzor.Font( 12, "Monospace", Vyzor.FontWeight.Bold ) )
-Grouping = Geyser.Label:new({
+	Grouping:Add( Vyzor.Color( Vyzor.ColorMode.Name, "white" ) )
-  name = "Grouping",
+	Vyzor.Left:Add( Grouping )
-  x = "0%", y = "25%",
+
-  width = "100%", height = "35%"
+	-- Statistics completely fill Vyzor.Right. In fact, we could have just applied all of the
-}, left_container)
+	-- Components to the Vyzor.Right. But, since it's a logically separate widget, it makes
-Grouping:setStyleSheet([[
+	-- sense to make something specifically for it. You never know when you'd rather the
-  background-color: black;
+	-- widget take up 50% instead of 100%.
-  border-width: 2px;
+	Statistics = Vyzor.Frame( "Statistics" )
-  border-style: solid;
+	Statistics:Add( ui_border )
-  border-color: grey;
+	Statistics:Add( Vyzor.Font( 14, "Monospace", Vyzor.FontWeight.Bold ) )
-  border-radius: 10px;
+	Statistics:Add( Vyzor.Color( Vyzor.ColorMode.Name, "white" ) )
-  font: bold "Monospace";
+	Vyzor.Right:Add( Statistics )
-  font-size: 4px;
+
 	-- This is the last part of any Vyzor GUI. You must Vyzor.HUD:Draw(). It's only necessary
-]])
+	-- to call it once. You can also draw Frames individually, if you feel it necessary. But,
-Grouping:echo("GROUP FIGHTING:<br><hr><br>Group Leader: "..atcp.MSDPGROUP_LEADER.."<hr>Tank Name: "..atcp.MSDPTANK_NAME.."<hr>Tank Health: "..atcp.MSDPTANK_HEALTH.."/"..atcp.MSDPTANK_HEALTH_MAX.."<hr>Tank Level: "..atcp.MSDPTANK_LEVEL.."<hr><br>Enemy: "..atcp.MSDPOPPONENT_NAME.."<hr>Level: "..atcp.MSDPOPPONENT_LEVEL.."<hr>Health: "..atcp.MSDPOPPONENT_HEALTH.."/"..atcp.MSDPOPPONENT_HEALTH_MAX)
+	-- standard practice is to make all of your Frames, call this, then hide the ones you don't
---echo("Grouping", "[[<p style="font-family: monospace; font-size:small;">]][[GROUP FIGHTING: <br>==============<br>Group Leader: ]]..atcp.MSDPGROUP_LEADER..[[<br>Tank Name: ]]..atcp.MSDPTANK_NAME..[[<br>Tank Health: ]]..atcp.MSDPTANK_HEALTH..[[/]]..atcp.MSDPTANK_HEALTH_MAX..[[<br>Tank Level: ]]..atcp.MSDPTANK_LEVEL..[[<br><br>Enemy: ]]..atcp.MSDPOPPONENT_NAME..[[<br>Level: ]]..atcp.MSDPOPPONENT_LEVEL..[[<br>Health: ]]..atcp.MSDPOPPONENT_HEALTH..[[/]]..atcp.MSDPOPPONENT_HEALTH_MAX[[</p>]])
+	-- want visible. This ensures proper layering (z-order) of the underlying labels.
 	Vyzor.HUD:Draw()
-Statistics = Geyser.Label:new({
+
-  name = "Statistics",
+	-- And now that the Frame exists, we can echo to it. Since this never changes, we only need
-  x = "580%", y = "0%",
+	-- echo once, so we do it here.
-  width = "100%", height = "100%"
+	top_container:Echo( [[<center>SLOTHMUD - A RETURN TO ITS ORIGINS</center>]] )
-}, right_container)
+end
-Statistics:setStyleSheet([[
+
-  background-color: black;
+-- This function will handle all of the dynamic bits of the UI, like the changing values in
-  border-width: 2px;
+-- your variables. We also make sure the top_container is where it's supposed to be
-  border-style: solid;
+-- relative to everything else.
-  border-color: grey;
+function updateUi ()
-  border-radius: 10px;
+	-- We need to know how big everything is. We could also get Vyzor.HUD.Size.AbsoluteWidth
-  font: bold "Monospace";
+	-- instead of calling this function.
-  font-size: 6px;
+	local screen_width = getMainWindowSize()
-]])
+	-- This is our left border.
-Statistics:echo("STATS INFORMATION:<hr>Name: "..atcp.MSDPCHARACTER_NAME.."<br>Citizen of "..atcp.MSDPCITIZEN.."<br> Your alignment is: "..atcp.MSDPALIGNMENT.."<br>Sex: "..atcp.MSDPSEX.."<hr>Money: "..atcp.MSDPMONEY.."<br>Drachma: "..atcp.MSDPDRACHMA.."<hr>Levels:<br>"..atcp.MSDPCLASS.." "..atcp.MSDPLEVEL.." "..atcp.MSDPCLASS_SEC.." "..atcp.MSDPLEVEL_SEC.." "..atcp.MSDPCLASS_TER.." "..atcp.MSDPLEVEL_TER.." "..atcp.MSDPCLASS_QUA.." "..atcp.MSDPLEVEL_QUA.."<br>"..atcp.MSDPCLASS_QUI.." "..atcp.MSDPLEVEL_QUI.." "..atcp.MSDPCLASS_HEX.." "..atcp.MSDPLEVEL_HEX.." "..atcp.MSDPCLASS_SEP.." "..atcp.MSDPLEVEL_SEP.." "..atcp.MSDPCLASS_OCT.." "..atcp.MSDPLEVEL_OCT.."<br>Avatar: "..atcp.MSDPCLASS_AVA.." "..atcp.MSDPLEVEL_AVA.."<hr> Experience: "..atcp.MSDPEXPERIENCE.."<hr>Health: "..atcp.MSDPHEALTH.." / "..atcp.MSDPHEALTH_MAX.."<hr> Mana: "..atcp.MSDPMANA.." / "..atcp.MSDPMANA_MAX.."<hr> Moves: "..atcp.MSDPMOVEMENT.." / "..atcp.MSDPMOVEMENT_MAX.."<hr> AC: "..atcp.MSDPAC.."<hr> HONOR: "..atcp.MSDPHONOR.."<hr> STR:"..atcp.MSDPSTR.."/"..atcp.MSDPSTR_PERM.." CON:"..atcp.MSDPCON.."/"..atcp.MSDPCON_PERM.."<br> DEX:"..atcp.MSDPDEX.."/"..atcp.MSDPDEX_PERM.." WIS:"..atcp.MSDPWIS.."/"..atcp.MSDPWIS_PERM.."<br>INT:"..atcp.MSDPINT.."/"..atcp.MSDPINT_PERM.." CHAR:"..atcp.MSDPCHARISMA.."/"..atcp.MSDPCHARISMA_CAP.."<hr>Spells and Damage:<br>Weapon Damage: "..atcp.MSDPWEAPON_DAM.."<br>Stab Damage: "..atcp.MSDPSTAB_DAM.."/"..atcp.MSDPSTAB_DAM_CAP.."<br>Hand Damage: "..atcp.MSDPHAND_DAM.."/"..atcp.MSDPHAND_DAM_CAP.."<br> Undead Cont: "..atcp.MSDPUNDEAD_CONT.."/"..atcp.MSDPUNDEAD_CONT_CAP.."<br>Spell Bonus: "..atcp.MSDPSPELL_BONUS.."/"..atcp.MSDPSPELL_BONUS_CAP.."<br>Heal Bonus: "..atcp.MSDPHEAL_BONUS.."/"..atcp.MSDPHEAL_BONUS_CAP.."<hr>Hitroll: "..atcp.MSDPHITROLL.."<hr>Damroll: "..atcp.MSDPDAMROLL.."<hr>Damage Red: "..atcp.MSDPDAM_RED.."/"..atcp.MSDPDAM_RED_CAP)
+	local left_width = Vyzor.Left.Size.AbsoluteWidth
 	-- This is our right border.
 	local right_width = Vyzor.Right.Size.AbsoluteWidth
 
 	-- top_container should starter where the left border ends.
 	top_container:Move( left_width )
 	-- And it should fit between both borders.
 	top_container:Resize( screen_width - (left_width + right_width) )
 
 	-- Honestly, this isn't the best way to handle this sort of thing. Personally, I would use Box Compounds,
 	-- give each line its own Frame. Then I might handle updating the values separately; you can echo to
 	-- Frames from anywhere, so the updating could be handled in a logically more appropriate function.
 	-- However, this works, and if you only ever need to display this information (and not process it),
 	-- updating it in a UI update function makes sense.
 	-- Also, these long, concatenated strings are a pain to modify.
 	Locations:Echo("LOCATION INFORMATION:<br><hr><br>Continent:".."nil".."<hr>Area: ".."nil".."<hr>Room: ".."nil".."<hr>Exits: ".."nil".."<hr>Terrain: ".."nil".."<hr>Room ID: ".."nil")
 
 	Grouping:Echo("GROUP FIGHTING:<br><hr><br>Group Leader: ".."nil".."<hr>Tank Name: ".."nil".."<hr>Tank Health: ".."nil".."/".."nil".."<hr>Tank Level: ".."nil".."<hr><br>Enemy: ".."nil".."<hr>Level: ".."nil".."<hr>Health: ".."nil".."/".."nil")
 
 	Statistics:Echo("STATS INFORMATION:<hr>Name: ".."nil".."<br>Citizen of ".."nil".."<br> Your alignment is: ".."nil".."<br>Sex: ".."nil".."<hr>Money: ".."nil".."<br>Drachma: ".."nil".."<hr>Levels:<br>".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".."<br>".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".." ".."nil".."<br>Avatar: ".."nil".." ".."nil".."<hr> Experience: ".."nil".."<hr>Health: ".."nil".." / ".."nil".."<hr> Mana: ".."nil".." / ".."nil".."<hr> Moves: ".."nil".." / ".."nil".."<hr> AC: ".."nil".."<hr> HONOR: ".."nil".."<hr> STR:".."nil".."/".."nil".." CON:".."nil".."/".."nil".."<br> DEX:".."nil".."/".."nil".." WIS:".."nil".."/".."nil".."<br>INT:".."nil".."/".."nil".." CHAR:".."nil".."/".."nil".."<hr>Spells and Damage:<br>Weapon Damage: ".."nil".."<br>Stab Damage: ".."nil".."/".."nil".."<br>Hand Damage: ".."nil".."/".."nil".."<br> Undead Cont: ".."nil".."/".."nil".."<br>Spell Bonus: ".."nil".."/".."nil".."<br>Heal Bonus: ".."nil".."/".."nil".."<hr>Hitroll: ".."nil".."<hr>Damroll: ".."nil".."<hr>Damage Red: ".."nil".."/".."nil")
 end
 
 -- I wouldn't normally use an anonymous event handler, but for demonstration purposes, this works best.
 -- Best practices: use the Script editor, add an event handler, and carry out the logic there.
 -- But what this does, basically, is react every time Vyzor reports that it has resized (which
 -- happens after Mudlet has resized). This ensures that all values you need (like Frame sizes) are
 -- accurate and up-to-date.
 registerAnonymousEventHandler( "VyzorResizedEvent", "updateUi" )
 
 -- Vyzor doesn't like it when you try to redraw some stuff, so we only want to call layout once.
 if not uiDrawn then
 	layout()
 	uiDrawn = true
 end