feat: tank tree svg first step

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTree.razor

@@ -1,3 +1,34 @@
 @inherits PlayerInfoTanksTreeBase;
-
+<div style="overflow-y: auto; overflow-x: auto;">
-<TankCard [email protected]()></TankCard>
+    <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        width="1400" 
+        height="@FrameHeigth" 
+        style="background-color: darkcyan; ">
+    @for (int i = 0; i < 3; i++)
+        {
+            <svg x="20"
+                y="@(i * (120 + 20) + 20)"
+                width="200"
+                height="120">
+                <g>
+                    <rect
+                        x="0"
+                        y="0"
+                        width="200"
+                        height="120"
+                        rx="10"
+                        ry="10"
+                        fill="#275950"
+                        stroke="#4a8777">
+                    </rect>
+                    <text x="5" y="5" fill="white" text-anchor="start" alignment-baseline="before-edge">
+                        @TanksList.ToArray()[i].Name
+                    </text>
+                    <image x="20" y="20" width="95" height="70" xlink:href="@TanksList.ToArray()[i].PreviewImage"/>
+                </g>
+            </svg>
+        }
+    </svg>
+</div>

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTreeBase.cs

@@ -1,8 +1,11 @@
 using MediatR;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
+using System;
 using System.Collections.Generic;
+using System.Threading.Tasks;
 using WotBlitzStatisticsPro.Blazor.GraphQl;
+using WotBlitzStatisticsPro.Blazor.Services;
 
 namespace WotBlitzStatisticsPro.Blazor.Pages
 {
@@ -17,5 +20,29 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
         [Inject]
         public IMediator Mediator { get; set; }
 
+        [Inject]
+        public IMediaQueriesService MediaQueriesService { get; set; }
+
+        public int FrameWidth { get; set; }
+        public int FrameHeigth { get; set; }
+
+        public string FrameStyle
+        {
+            get
+            {
+                return $"min-height: {FrameHeigth}px; overflow-y: auto; overflow-x: auto;";
+            }
+        }
+
+        protected async override Task OnInitializedAsync()
+        {
+            var screenWidth = await MediaQueriesService.WindowWidth();
+            var screenHeight = await MediaQueriesService.WindowHeight();
+
+            FrameWidth = Convert.ToInt32(((decimal)screenWidth) * 0.94m);
+            FrameHeigth = screenHeight - 390;
+        }
+
+        
     }
 }

WotBlitzStatisticsPro.Blazor/Services/IMediaQueriesService.cs

@@ -5,5 +5,9 @@ namespace WotBlitzStatisticsPro.Blazor.Services
     public interface IMediaQueriesService
     {
         ValueTask<bool> IsScreenWidthLessThen(long widthInPx);
+
+        ValueTask<int> WindowWidth();
+
+        ValueTask<int> WindowHeight();
     }
 }

WotBlitzStatisticsPro.Blazor/Services/MediaQueriesService.cs

@@ -16,5 +16,15 @@ namespace WotBlitzStatisticsPro.Blazor.Services
         {
             return _jsRuntime.InvokeAsync<bool>("mediaQueries.IsScreenWidthLessThen", widthInPx);
         }
+
+        public ValueTask<int> WindowHeight()
+        {
+            return _jsRuntime.InvokeAsync<int>("mediaQueries.ScreenHeight");
+        }
+
+        public ValueTask<int> WindowWidth()
+        {
+            return _jsRuntime.InvokeAsync<int>("mediaQueries.ScreenWidth");
+        }
     }
 }

WotBlitzStatisticsPro.Blazor/wwwroot/media-queries.js

@@ -3,4 +3,12 @@
 mediaQueries.IsScreenWidthLessThen = function (width) {
     let mql = window.matchMedia(`(max-width: ${width}px)`);
     return mql.matches;
-};
+};
+
+mediaQueries.ScreenWidth = function () {
+    return window.innerWidth;
+}
+
+mediaQueries.ScreenHeight = function () {
+    return window.innerHeight;
+}