added preview window

modsettings/CustomUIAssets.json

@@ -218,5 +218,20 @@
     "Name": "FinnIcon",
     "Type": 0,
     "URL": "http://cloud-3.steamusercontent.com/ugc/2037357792052848566/5DA900C430E97D3DFF2C9B8A3DB1CB2271791FC7/"
+  },
+  {
+    "Name": "box-cover-mask-small",
+    "Type": 0,
+    "URL": "http://cloud-3.steamusercontent.com/ugc/2115061298536631564/F29C2ED9DD8431A1D1E21C7FFAFF1FFBC0AF0BF3/"
+  },
+  {
+    "Name": "box-cover-mask-big",
+    "Type": 0,
+    "URL": "http://cloud-3.steamusercontent.com/ugc/2115061298536631429/D075D2EECE6EE091AD3BEA5800DEF9C7B02B745B/"
+  },
+  {
+    "Name": "box-cover-mask-wide",
+    "Type": 0,
+    "URL": "http://cloud-3.steamusercontent.com/ugc/2115061298538827369/A20C2ECB8ECDC1B0AD8B2B38F68CA1C1F5E07D37/"
   }
 ]

src/core/Global.ttslua

@@ -43,7 +43,7 @@ local hideTitleSplashWaitFunctionId = nil
 -- online functionality related variables
 local MOD_VERSION = "3.3.0"
 local SOURCE_REPO = 'https://raw.githubusercontent.com/chr1z93/loadable-objects/main'
-local library, requestObj, modMeta, notificationVisible
+local library, requestObj, modMeta, notificationVisible, latestPreviewUpdate
 local downloadWindowVisible = false
 local optionPanelVisible = false
 local acknowledgedUpgradeVersions = {}
@@ -657,6 +657,7 @@ function onClick_toggleUi(player, title)
   elseif title == "Downloadable Content" then
     if downloadWindowVisible then
       UI.hide('downloadWindow')
+      UI.hide("previewWindow")
     else
       UI.show('downloadWindow')
     end
@@ -671,6 +672,113 @@ function onClick_toggleUi(player, title)
   end
 end
 
+-- hides the content preview window when moving the mouse out of the main window
+function onMouseExit_window()
+  UI.hide("previewWindow")
+end
+
+-- updates the preview window when mousing over any item in the table
+function onMouseEnter_item(player, param)
+  -- only update once per request
+  if param == latestPreviewUpdate then return end
+  latestPreviewUpdate = param
+
+  -- hide window in case data is incomplete
+  UI.hide("previewWindow")
+
+  -- parse parameters
+  local contentToShow, index
+  for str in string.gmatch(param, "([^_]+)") do
+    if not contentToShow then
+      -- grab the first part to know the content type
+      contentToShow = str
+    else
+      -- get the index
+      index = tonumber(str)
+      break
+    end
+  end
+
+  if not contentToShow or not index then return end
+
+  -- get metadata from library
+  local item = library[contentToShow][index]
+
+  UI.setValue("previewTitle", item.name or "Unknown Name")
+  UI.setValue("previewAuthor", "by " .. (item.author or "Unknown"))
+  UI.setValue("previewDescription", item.description or "Unknown")
+
+  -- update box art
+  if not item.boxsize or not item.boxart then return end
+
+  local ui = UI.getXmlTable()
+  local previewArtPanel = find_tag_with_id(ui, 'previewArtPanel')
+  
+  -- update mask according to size
+  if item.boxsize == "big" then
+    previewArtPanel.children = {
+      tag = "Mask",
+      attributes = {
+        image = "box-cover-mask-big",
+        width = "870",
+        height = "435",
+        offsetXY = "154 60"
+      }
+    }
+  elseif item.boxsize == "small" then
+    previewArtPanel.children = {
+      tag = "Mask",
+      attributes = {
+        image = "box-cover-mask-small",
+        width = "668",
+        height = "501",
+        offsetXY = "120 10"
+      }
+    }
+  elseif item.boxsize == "wide" then
+    previewArtPanel.children = {
+      tag = "Mask",
+      attributes = {
+        image = "box-cover-mask-wide",
+        width = "780",
+        height = "650",
+        offsetXY = "-195 -70"
+      }
+    }
+  end
+
+  -- insert the image itself
+  previewArtPanel.children.children = {
+    tag = "Image",
+    attributes = { image = item.boxart }
+  }
+
+  UI.setXmlTable(ui)
+
+  -- update the preview window height according to box size
+  local hWindow, hArt, offsetXY
+  if item.boxsize == "big" then
+    hWindow = 510
+    hArt = 300
+    offsetXY = "-510 135"
+  elseif item.boxsize == "small" then
+    hWindow = 510
+    hArt = 300
+    offsetXY = "-510 135"
+  elseif item.boxsize == "wide" then
+    hWindow = 360
+    hArt = 150
+    offsetXY = "-510 210"
+  end
+
+  UI.setAttribute("previewWindow", "height", hWindow)
+  UI.setAttribute("previewWindow", "offsetXY", offsetXY)
+  UI.setAttribute("previewArtPanel", "preferredHeight", hArt)
+
+  -- show the window
+  UI.show("previewWindow")
+end
+
 -- formats the json response from the webrequest into a key-value lua table
 -- strips the prefix from the community content items
 function formatLibrary(json_response)
@@ -723,15 +831,21 @@ function update_list(contentToShow)
   local titleText = find_tag_with_id(ui, "title")
   titleText.value = "Downloable Content: " .. cleanName[contentToShow]
 
+  -- addition of list items according to library file
   local update_height = find_tag_with_id(ui, 'ui_update_height')
   local update_children = find_tag_with_id(update_height.children, 'ui_update_point')
   update_children.children = {}
 
-  for _, v in ipairs(library[contentToShow]) do
+  for i, v in ipairs(library[contentToShow]) do
     table.insert(update_children.children,
-      { tag = 'Text',
+      {
+        tag = 'Text',
         value = v.name,
-        attributes = { onClick = 'onClick_select(' .. urlencode(JSON.encode(v)) .. ')', alignment = 'MiddleLeft' }
+        attributes = {
+          onClick = 'onClick_select(' .. urlencode(JSON.encode(v)) .. ')',
+          onMouseEnter = "onMouseEnter_item(" .. contentToShow .. "_" .. i .. ")",
+          alignment = 'MiddleLeft'
+        }
       })
   end
 

xml/Global/DownloadWindow.xml

@@ -17,6 +17,7 @@
   visibility="Admin"
   color="black"
   active="false"
+  onMouseExit="onMouseExit_window"
   width="700"
   height="780"
   outlineSize="1 1"
@@ -81,3 +82,55 @@
       fillImageColor="#333333"/>
   </Panel>
 </VerticalLayout>
+
+<!-- content preview window (displayed on hover of list items) -->
+<VerticalLayout id="previewWindow"
+  visibility="Admin"
+  color="black"
+  active="false"
+  width="300"
+  height="510"
+  padding="15 15 5 5"
+  outlineSize="1 1"
+  outline="#303030"
+  offsetXY="-510 135">
+
+  <!-- header -->
+  <VerticalLayout preferredHeight="100">
+    <Text id="previewTitle"
+      fontSize="28"
+      font="font_teutonic-arkham">PreviewTitle</Text>
+    <Text id="previewAuthor"
+      fontSize="20"
+      font="font_teutonic-arkham">by PreviewAuthor</Text>
+  </VerticalLayout>
+
+  <!-- box art -->
+  <Panel id="previewArtPanel"
+    preferredHeight="300">
+    <!-- mask for scenario size boxes
+    <Mask image="box-cover-mask-small" width="668" height="501" offsetXY="120 10">
+      <Image image="testArtSmall"/>
+    </Mask>
+    -->
+
+    <!--mask for campaign size boxes
+    <Mask image="box-cover-mask-big" width="870" height="435" offsetXY="154 60">
+      <Image image="testArtBig"/>
+    </Mask>
+    -->
+
+    <!--mask for "return to" size boxes
+    <Mask image="box-cover-mask-wide" width="780" height="650" offsetXY="-195 -50">
+      <Image image="testArtWide"/>
+    </Mask>
+    -->
+  </Panel>
+
+  <!-- description -->
+  <Panel preferredHeight="100">
+    <Text id="previewDescription"
+      fontSize="20"
+      font="font_teutonic-arkham">PreviewDescription</Text>
+  </Panel>
+</VerticalLayout>