Membership Card Component

.gitignore

@@ -7,3 +7,4 @@ Database/
 .vs/
 .idea/
 .env
+dist

SocialCoder.Web/Client/ColorUtil.cs

@@ -0,0 +1,24 @@
+using MudBlazor;
+using MudBlazor.Utilities;
+
+namespace SocialCoder.Web.Client;
+
+public static class ColorUtil
+{
+    public static string GetCssValue(MudTheme theme, Color color)
+    {
+        return color switch
+        {
+            Color.Primary => theme.PaletteDark.Primary.Value,
+            Color.Secondary => theme.PaletteDark.Secondary.Value,
+            Color.Tertiary => theme.PaletteDark.Tertiary.Value,
+            Color.Dark => theme.PaletteDark.Dark.Value,
+            Color.Error => theme.PaletteDark.Error.Value,
+            Color.Surface => theme.PaletteDark.Surface.Value,
+            Color.Warning => theme.PaletteDark.Warning.Value,
+            Color.Info => theme.PaletteDark.Info.Value,
+            Color.Success => theme.PaletteDark.Success.Value,
+            _ => theme.PaletteDark.Primary.Value
+        };
+    }
+}

SocialCoder.Web/Client/MathUtil.cs

@@ -0,0 +1,14 @@
+namespace SocialCoder.Web.Client;
+
+public static class MathUtil
+{
+    /// <summary>
+    /// Normalizes value between 0 and 1
+    /// </summary>
+    /// <param name="value"></param>
+    /// <param name="min"></param>
+    /// <param name="max"></param>
+    /// <returns></returns>
+    public static double GetNormalizedPercentage(int value, int min, int max)
+        => (double)(value - min) / (max - min);
+}

SocialCoder.Web/Client/Shared/Components/MemberCard.razor

@@ -0,0 +1,122 @@
+@using SocialCoder.Web.Shared.ViewModels
+@using SocialCoder.Web.Shared.Enums
+
+<MudItem md="3">
+    <MudPaper Class="user-preview" Elevation="3">
+    <MudContainer 
+        Style="display: flex; align-content: center; align-items: center; justify-content: center; flex-direction: column;">
+        <UserAvatar Progress="30"
+                    UserLevel="@UserLevel"
+                    AvatarImage="@AvatarImage"
+                    ProgressColor="Color.Success"
+                    BadgeColor="Color.Dark"
+                    BadgeLineColor="Color.Info"/>
+        <MudText Typo="Typo.button">@Username</MudText>
+
+        @if (!string.IsNullOrEmpty(AlternativeName))
+        {
+            <MudText Typo="Typo.caption">@AlternativeName</MudText>
+        }
+
+        @*
+            Create a row of badges to showcase
+        *@
+        <MudGrid Justify="Justify.Center" Style="margin-top: 6px;">
+            @foreach (var badge in Model?.Badges.Take(4) ?? new List<BasicBadgeViewModel>())
+            {
+                <MudItem>
+                    <div class="container-item" style="
+                            background-image: url('@badge.ImagePath');
+                            background-repeat: no-repeat;
+                            width: 32px; 
+                            height: 35px;"
+                         title="@badge.Title"></div>
+                </MudItem>
+            }
+        </MudGrid>
+
+        <MudGrid Justify="Justify.Center" Style="margin-top: 6px;">
+            <MudItem>
+                <div class="container-item" style="flex-direction: column;min-width:64px;max-width:64px">
+                    <MudText  Typo="Typo.body1" Align="Align.Center">@PostsCount</MudText>
+                    <MudText Style="font-size: 0.75rem;" Typo="Typo.button" Align="Align.Center">Posts</MudText>
+                </div>
+            </MudItem>
+            <MudItem>
+                <div class="container-item" style="flex-direction: column; min-width:64px;max-width:64px">
+                    <MudText Typo="Typo.body1" Align="Align.Center">@FriendsCount</MudText>
+                    <MudText Typo="Typo.button" Align="Align.Center" Style="font-size: 0.75rem;">Friends</MudText>
+                </div>
+            </MudItem>
+        </MudGrid>
+
+        <MudGrid Justify="Justify.Center" Style="margin-top: 6px;">
+            @foreach (var social in Model?.Socials ?? new List<UserSocialMediaItem>())
+            {
+                var icon = GetSocialInfo(social.Type);
+                var color = $"color: {_colors[_count % 6]}";
+                <MudItem sm="2">
+                    <MudLink Href="@social.Url" Class="container-item">
+                        <MudIcon Icon="@icon" Style="@color"/>
+                    </MudLink>
+                </MudItem>
+                _count++;
+            }
+        </MudGrid>    
+
+        <MudGrid Justify="Justify.Center">
+            <MudItem Class="container-item">
+                <MudButton Color="Color.Primary">Add Friend</MudButton>
+            </MudItem>
+            <MudItem Class="container-item">
+                <MudButton Color="Color.Secondary">Message</MudButton>
+            </MudItem>
+        </MudGrid>
+    </MudContainer>
+
+</MudPaper>
+</MudItem>
+
+@code {
+    int UserLevel => Model?.UserLevel ?? 0;
+    int FriendsCount => Model?.NumberOfFriends ?? 0;
+    int PostsCount => Model?.NumberOfPosts ?? 0;
+    string AvatarImage => Model?.UserImage ?? string.Empty;
+    string Username => Model?.Username ?? string.Empty;
+    string AlternativeName => Model?.AlternateName ?? string.Empty;
+    int _count = 0;
+
+    MudTheme _theme = new();
+
+    string[] _colors = Array.Empty<string>();
+
+    string GetSocialInfo(SocialMediaType type)
+        => type switch
+        {
+            SocialMediaType.Discord => Icons.Custom.Brands.Discord,
+            SocialMediaType.Microsoft => Icons.Custom.Brands.Microsoft,
+            SocialMediaType.Instagram => Icons.Custom.Brands.Instagram,
+            SocialMediaType.GitHub => Icons.Custom.Brands.GitHub,
+            SocialMediaType.Twitter => Icons.Custom.Brands.Twitter,
+            SocialMediaType.Google => Icons.Custom.Brands.Google,
+            _ =>  Icons.Filled.QuestionMark
+        };
+
+    [Parameter]
+    public MemberInfoViewModel? Model { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _colors = new[]
+        {
+            _theme.PaletteDark.PrimaryLighten,
+            _theme.PaletteDark.SecondaryLighten,
+            _theme.PaletteDark.TertiaryLighten,
+            _theme.PaletteDark.SuccessLighten,
+            _theme.PaletteDark.InfoLighten
+        };
+    }
+
+}

SocialCoder.Web/Client/Shared/Components/PageHeader.razor

@@ -13,8 +13,9 @@
     public PageType Type { get; set; }
 
     [Parameter]
-    public string Title { get; set; }
+    public string Title { get; set; } = string.Empty;
 
     [Parameter]
-    public string Subtitle { get; set; }
+    public string Subtitle { get; set; } = string.Empty;
+
 }

SocialCoder.Web/Client/Shared/Components/UserAvatar.razor

@@ -0,0 +1,157 @@
+@inject IJSRuntime JsRuntime
+
+<div style="display: flex; justify-content: center;">
+    <div style="display: inline">
+        <div style="position: relative; max-width: @(Width)px">
+            <div class="user-avatar-border">
+                <div class="hexagon-progress" style="width: @(Width)px; height: @(Height)px; position:  relative;"></div>
+            </div>
+
+            <div class="user-avatar-content"
+                 style="position: absolute; 
+                 top: @(Width * 0.16)px; 
+                 left: @(Height * 0.17)px;">
+                <div class="hexagon-image"
+                     data-src="@AvatarImage"
+                     style="width: @(Width * 0.683)px; 
+                    height:  @(Height * 0.683); 
+                    position:  relative;"></div>
+            </div>
+
+            <div class="user-avatar-badge" style="display: flex;
+        flex-wrap:  wrap;
+        align-items: center;
+        justify-content: center; 
+        position: absolute;
+        bottom: 25px;
+        right: -3px;">
+
+                <div class="user-avatar-badge-border" style="
+            display:  inline-block;
+            position: absolute;
+            z-index: 1">
+                    <div class="hexagon-avatar-badge"
+                         style="width: 32px; height: 36px; position: absolute;"></div>
+                </div>
+
+                <div class="user-avatar-badge-content"
+                     style="
+                 display: inline-block;
+                 z-index: 5; 
+                 position: absolute;">
+                    <div class="hexagon-dark" style="width: 26px; 
+                                             height:  28px; 
+                                             position:  relative;"></div>
+                </div>
+                <p class="user-avatar-badge-text" style="
+                position: absolute; 
+                pointer-events: none; 
+                z-index: 6; 
+                display:  inline-block;
+                font-weight: 700;">
+                    @UserLevel
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+@code {
+
+    [Parameter]
+    public string AvatarImage { get; set; } = string.Empty;
+
+    [Parameter]
+    public int UserLevel { get; set; }
+
+    [Parameter]
+    public int Progress { get; set; }
+
+    [Parameter]
+    public int ProgressMin { get; set; } = 0;
+
+    [Parameter]
+    public int ProgressMax { get; set; } = 100;
+
+    [Parameter]
+    public int Width { get; set; } = 100;
+
+    [Parameter]
+    public int Height { get; set; } = 100;
+
+    [Parameter]
+    public int LineWidth { get; set; } = 8;
+
+    [Parameter]
+    public Color ProgressColor { get; set; } = Color.Primary;
+
+    [Parameter]
+    public RenderFragment? CenterContent { get; set; }
+
+    [Parameter]
+    public Color BadgeLineColor { get; set; } = Color.Secondary;
+
+    [Parameter]
+    public Color BadgeColor { get; set; } = Color.Tertiary;
+
+    MudTheme _theme = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        /*
+            It is worth mentioning that 
+
+            1. To have the line color appear -- you cannot use the gradient value
+            2. To see the progress bar you cannot use the fill or clip value -- those are for images
+            3. These methods are called AFTER render because we want to make sure our 
+               DOM elements are present before executing these scripts
+         */
+
+        await JsRuntime.InvokeVoidAsync("createHexagon", new
+        {
+            width = Width,
+            height = Height,
+            container = ".hexagon-progress",
+            roundedCorners = true,
+            lineWidth = LineWidth,
+            lineColor = ColorUtil.GetCssValue(_theme, ProgressColor),
+            scale = new { start = 0, end = 1, stop = MathUtil.GetNormalizedPercentage(Progress, ProgressMin, ProgressMax) }
+        });
+
+        await JsRuntime.InvokeVoidAsync("createHexagon", new
+        {
+            width = 68,
+            Height = 68,
+            container = ".hexagon-image",
+            roundedCorners = true,
+            clip = true
+        });
+
+        await JsRuntime.InvokeVoidAsync("createHexagon", new
+        {
+            container = ".hexagon-dark",
+            width = 26,
+            height = 28,
+            roundedCorners = true,
+            roundedCornerRadius = 1,
+            lineColor = ColorUtil.GetCssValue(_theme, BadgeLineColor),
+            fill = true
+        });
+
+        await JsRuntime.InvokeVoidAsync("createHexagon", new
+        {
+            container = ".hexagon-avatar-badge",
+            width = 32,
+            height = 36,
+            fill = true,
+            roundedCorners = true,
+            roundedCornerRadius = 1,
+            lineColor = ColorUtil.GetCssValue(_theme, BadgeColor)
+        });
+    }
+
+}

SocialCoder.Web/Client/SocialCoder.Web.Client.csproj

@@ -12,6 +12,10 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.6" PrivateAssets="all" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="6.0.6" />
     <PackageReference Include="Microsoft.Extensions.Http" Version="6.0.0" />
+    <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="4.7.4">
+      <PrivateAssets>all</PrivateAssets>
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+    </PackageReference>
     <PackageReference Include="MudBlazor" Version="6.0.14" />
   </ItemGroup>
 
@@ -23,4 +27,8 @@
     <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
   </ItemGroup>
 
+  <ItemGroup>
+    <TypeScriptCompile Include="Typescript\Hexagon.ts" />
+  </ItemGroup>
+
 </Project>