Fixed rotation issue with platform support walls

qkmaxware · Oct 10, 2021 · ffe2415 · ffe2415
1 parent 383ed59
commit ffe2415
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/Shared/TerrainDrawer.razor b/Shared/TerrainDrawer.razor
@@ -61,7 +61,7 @@ if (Terrain.Kind == TerrainKind.Wall) {
         <div class="solid fold-left fold-right cut-top fold-bottom" style="width: @(Terrain.Length)in; height: @(Terrain.Height)in;">
             @if (Terrain.SupportArt != null && !string.IsNullOrEmpty(Terrain.SupportArt.Url)) {
             <div class="fill">
-                <img class="fill pixelart" src="@Terrain.Art.Url" style="object-fit: fill;">
+                <img class="fill pixelart yflip" src="@Terrain.SupportArt.Url" style="object-fit: fill;">
             </div>
             }
         </div>
@@ -70,8 +70,8 @@ if (Terrain.Kind == TerrainKind.Wall) {
     <div style="display: flex;">
         <div class="solid cut-left cut-top fold-right cut-bottom" style="width: @(Terrain.Height)in; height: @(Terrain.Length)in;">
             @if (Terrain.SupportArt != null && !string.IsNullOrEmpty(Terrain.SupportArt.Url)) {
-            <div class="fill">
-                <img class="fill pixelart" src="@Terrain.Art.Url" style="object-fit: fill;">
+            <div class="fill center-image-rotate90">
+                <img class="pixelart" src="@Terrain.SupportArt.Url" style="object-fit: fill; width: @(Terrain.Length)in; height: @(Terrain.Height)in;">
             </div>
             }
         </div>
@@ -82,8 +82,8 @@ if (Terrain.Kind == TerrainKind.Wall) {
         </div>
         <div class="solid cut-right cut-top fold-left cut-bottom" style="width: @(Terrain.Height)in; height: @(Terrain.Length)in;">
             @if (Terrain.SupportArt != null && !string.IsNullOrEmpty(Terrain.SupportArt.Url)) {
-            <div class="fill">
-                <img class="fill pixelart" src="@Terrain.Art.Url" style="object-fit: fill;">
+            <div class="fill center-image-rotate-90">
+                <img class="pixelart" src="@Terrain.SupportArt.Url" style="object-fit: fill; width: @(Terrain.Length)in; height: @(Terrain.Height)in;">
             </div>
             }
         </div>
@@ -93,7 +93,7 @@ if (Terrain.Kind == TerrainKind.Wall) {
         <div class="solid fold-left fold-right fold-top cut-bottom" style="width: @(Terrain.Length)in; height: @(Terrain.Height)in;">
             @if (Terrain.SupportArt != null && !string.IsNullOrEmpty(Terrain.SupportArt.Url)) {
             <div class="fill">
-                <img class="fill pixelart" src="@Terrain.Art.Url" style="object-fit: fill;">
+                <img class="fill pixelart" src="@Terrain.SupportArt.Url" style="object-fit: fill;">
             </div>
             }
         </div>

diff --git a/wwwroot/css/app.css b/wwwroot/css/app.css
@@ -86,4 +86,32 @@ footer {
     transform-origin: center;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
+}
+
+
+.center-image-rotate90 {
+    position: relative;
+}
+.center-image-rotate90 img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: translate(-50%, -50%) rotate(90deg);
+    transform: translate(-50%, -50%) rotate(90deg);
+}
+.center-image-rotate-90 {
+    position: relative;
+}
+.center-image-rotate-90 img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
+    transform: translate(-50%, -50%) rotate(-90deg);
 }