UI Overlay base

.idea/inspectionProfiles/Project_Default.xml

@@ -8,6 +8,22 @@
     <inspection_tool class="ConstantParameter" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="DanglingPointer" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="EndlessLoop" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="rml" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="InfiniteRecursion" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="LocalValueEscapesScope" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="LoopDoesntUseConditionVariable" enabled="false" level="WARNING" enabled_by_default="false" />

assets/layout/base.rcss

@@ -5,7 +5,7 @@ hr, pre,
 tabset tabs
 {
 	display: block;
-	background-color: white;
+	background-color: rgba(255, 255, 255, 0);
 	color: black;
     font-family: Arial;
 }

assets/layout/game.rcss

@@ -0,0 +1,20 @@
+.block {
+    display: flex;
+    flex-direction: row;
+    border: 2px outset;
+
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+}
+
+.value {
+    width: 8em;
+    height: 2em;
+
+    background-color: black;
+    color: white;
+    font-size: 16px;
+    border-color: #1d2749;
+    border-radius: 8px;
+}

assets/layout/overlay/overlay.rcss

@@ -0,0 +1,57 @@
+#header {
+    /*height: 32px;*/
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+
+    background-color: #151e3d;
+}
+
+.stats {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    padding: 8px;
+    gap: 8px;
+}
+
+#calendar {
+    display: flex;
+    flex-direction: column;
+    margin-left: auto;
+    padding: 4px 8px 4px 4px;
+}
+
+#speed-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.speed {
+    width: 1em;
+    height: 1em;
+    font-size: 14px;
+    background-color: #014269;
+    color: white;
+    border-radius: 2px;
+    border: 1px outset #1d2749;
+    text-align: center;
+}
+
+#department-tabs {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    display: flex;
+    flex-direction: column;
+    gap: 8px
+}
+
+.department {
+    height: 64px;
+    width: 128px;
+    background-color: blue;
+}

assets/layout/overlay/overlay.rml

@@ -0,0 +1,43 @@
+<rml>
+
+<head>
+    <link type="text/css" href="../base.rcss" />
+    <link type="text/css" href="../game.rcss" />
+    <link type="text/css" href="overlay.rcss" />
+</head>
+
+<body>
+    <div id="header">
+        <div class="flag">
+
+        </div>
+
+        <div class="stats">
+            <div class="value block"><span>17,3 млн</span></div>
+            <div class="value block"><span>138 млрд</span></div>
+            <div class="value block"><span>€ 95 млн</span></div>
+        </div>
+
+        <div id="calendar">
+            <div class="value block"><span>01.01.1980</span></div>
+            <div id="speed-buttons">
+                <div class="speed">0</div>
+                <div class="speed">1</div>
+                <div class="speed">2</div>
+                <div class="speed">3</div>
+                <div class="speed">4</div>
+                <div class="speed">5</div>
+            </div>
+        </div>
+    </div>
+
+    <div id="department-tabs">
+        <div class="department"></div>
+        <div class="department"></div>
+        <div class="department"></div>
+        <div class="department"></div>
+        <div class="department"></div>
+    </div>
+</body>
+
+</rml>

engine/src/UI.cpp

@@ -9,7 +9,7 @@ UI::UI(Rml::RenderInterface &renderer, const std::uint32_t width, const std::uin
 
     Rml::LoadFontFace("assets/fonts/ARIAL.TTF");
 
-    currentDocument = context->LoadDocument("assets/layout/test/test.rml");
+    currentDocument = context->LoadDocument("assets/layout/overlay/overlay.rml");
     currentDocument->Show();
 }
 

engine/src/main.cpp

@@ -9,8 +9,8 @@ import VulkanRender;
 import GLFWInput;
 import std;
 
-constexpr std::uint32_t SCREEN_WIDTH = 800;
+constexpr std::uint32_t SCREEN_WIDTH = 1920;
-constexpr std::uint32_t SCREEN_HEIGHT = 600;
+constexpr std::uint32_t SCREEN_HEIGHT = 800;
 
 int main(int argc, char **argv) {
     // Setup P7 logger

renderers/vulkan/modules/rml/rmlui_vulkan.cppm

@@ -75,6 +75,8 @@ export namespace ee_rml {
 
         void SetScissorRegion(Rml::Rectanglei region) override;
 
+        void SetTransform(const Rml::Matrix4f *transform) override;
+
         void SetFrameContext(vulkan_render::FrameContext *frameContext);
 
     private:
@@ -84,6 +86,7 @@ export namespace ee_rml {
         vulkan_render::Sampler sampler;
         std::unordered_map<Rml::TextureHandle, vk::raii::DescriptorSets> textures;
         vulkan_render::RenderTexture defaultTexture;
+        glm::mat4 currentTransform = glm::mat4(1.0f);
     };
 
 }

renderers/vulkan/src/rml/rmlui_vulkan.cpp

@@ -89,7 +89,7 @@ void ee_rml::RmlVulkan::RenderGeometry(
         .mvp = glm::ortho(
             0.0f, static_cast<float>(renderer.surface.extent.width),
             0.0f, static_cast<float>(renderer.surface.extent.height)
-        ),
+        ) * currentTransform,
         .translate = glm::vec2(translation.x, translation.y)
     };
 
@@ -166,6 +166,15 @@ void ee_rml::RmlVulkan::SetScissorRegion(const Rml::Rectanglei region) {
     renderer.pipeline.scissors.extent = {width, height};
 }
 
+void ee_rml::RmlVulkan::SetTransform(const Rml::Matrix4f *transform) {
+    if (transform != nullptr) {
+        std::memcpy(&currentTransform[0][0], transform->data(), sizeof(glm::mat4));
+    }
+    else {
+        currentTransform = glm::mat4(1.0f);
+    }
+}
+
 void ee_rml::RmlVulkan::SetFrameContext(vulkan_render::FrameContext *frameContext) {
     this->frameContext = frameContext;
 }

utils/modules/rml.cppm

@@ -19,6 +19,7 @@ export namespace Rml {
     using Rml::CompiledGeometryHandle;
     using Rml::Vector2f;
     using Rml::Vector2i;
+    using Rml::Matrix4f;
     using Rml::ColourbPremultiplied;
     using Rml::String;
     using Rml::Rectanglei;