Basically finished posts.razor

Otakians.sln

@@ -3,7 +3,7 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.5.33502.453
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Otakians", "Otakians\Otakians.csproj", "{9C8667B5-07D0-4173-8C59-EE5A4265E62B}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Otakians", "Otakians\Otakians.csproj", "{9C8667B5-07D0-4173-8C59-EE5A4265E62B}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

Otakians/Pages/Chatting.razor

@@ -0,0 +1,7 @@
+@page "/Chatting"
+
+<h1>2nd loading... Please wait</h1>
+
+@code {
+
+}

Otakians/Pages/Index.razor

@@ -1,141 +1,11 @@
 @page "/"
-@inject HttpClient Http
+@inject NavigationManager NavManager
-
-<PageTitle>MudBlazorTime!</PageTitle>
-
-<style>
-    /* Hide scrollbar */
-    ::-webkit-scrollbar {
-        scrollbar-width: none;
-        display: none;
-    }
-
-    .scrollbar {
-        overflow-y: hidden;
-        scrollbar-width: none;
-    }
-</style>
-
-<MudOverlay @bind-Visible="isOverlayVisible" Style="backdrop-filter:blur(5px)" DarkBackground="true" AutoClose="true">
-    <MudPaper Elevation="3" Class="rounded-xl">
-        <MudImage Class="rounded-xl" Elevation="4" Src="@selectedPost.ImagePath" Width="750" Height="750"/>
-        <MudContainer Class="pa-5 d-flex align-center justify-content-start">
-            <MudText>
-                Damn
-            </MudText>
-            <MudSpacer/>
-            <MudIconButton Class="pa-4" Icon="@Icons.Material.Filled.Star" Variant="Variant.Filled" Color="Color.Primary"> text </MudIconButton>
-        </MudContainer>
-    </MudPaper>
-</MudOverlay>
-<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OpenOverlay">Show Overlay</MudButton>
-
-<MudContainer Class="mt-16 px-8 overflow-hidden" MaxWidth="MaxWidth.False">
-    <MudGrid Spacing="6" Justify="Justify.Center">
-        @for (int i = 0; i < 200; i++)
-        {
-            Post post = (LoadedImages.Count > i) ? posts[i] : GetRandomPost();
-
-            <MudItem @onclick="() => ClickPost(post)">
-                <MudPaper Class="md-8" Style="position:relative">
-                    <MudContainer Style="position:absolute;" Class="mt-4">
-                        <MudText Style="background-color:rgba(0, 0, 0, 0.55); backdrop-filter:blur(2px)" Class="pl-2 rounded-t-lg" Color="Color.Secondary" Typo="Typo.h6">@("@" + post.Publisher)</MudText>
-                    </MudContainer>
-                    <MudContainer>
-                            <MudImage Class="rounded-lg my-4" Src="@post.ImagePath" Height="250" Width="250"></MudImage>
-                    </MudContainer>
-                </MudPaper>
-            </MudItem>
-        }
-    </MudGrid>
-</MudContainer>
 
+<h1>2nd loading... Please wait</h1>
 
 @code {
-    public bool isOverlayVisible = false;
+    protected override void OnInitialized()
-
-    public void OpenOverlay()
     {
-        isOverlayVisible = true;
+        NavManager.NavigateTo("/Posts");
-        StateHasChanged();
-    }
-
-    List<int> LoadedImages = new List<int>();
-    List<Post> posts = new List<Post>();
-
-    private Random random = new Random();
-    const int numImages = 211;
-    Post GetRandomPost()
-    {
-        int selectedPostNum;
-    reselect:
-        selectedPostNum = random.Next(1, numImages);
-        if (LoadedImages.Contains(selectedPostNum))
-            goto reselect;
-
-        LoadedImages.Add(selectedPostNum);
-
-
-        var selectedPost = new Post(selectedPostNum);
-        Console.WriteLine("Selected: " + selectedPost.Id);
-        posts.Add(selectedPost);
-        return selectedPost;
-    }
-
-    string GetImage(int imageIndex)
-    {
-        return $@"\images\AnimeImages\AnimeImage ({imageIndex}).jpeg";
-    }
-
-    protected override void OnAfterRender(bool firstRender)
-    {
-
-    }
-
-    // TODO: Add a "save post" button to each post.
-
-    static string[]? RandomUsernames;
-
-    protected override async Task OnInitializedAsync()
-    {
-        RandomUsernames = (await Http.GetStringAsync("RandomUsernames.txt")).Split("\n");
-
-    }
-
-    Post selectedPost = new Post(-1);
-
-    void ClickPost(Post post)
-    {
-        selectedPost = post;
-        isOverlayVisible = true;
-    }
-
-    public class Post
-    {
-        public Post(int imageIndex)
-        {
-            this.Id = imageIndex;
-        }
-
-        public int Id { get; set; }
-        public int ImageIndex { get => Id; }
-        public string ImagePath { get => $@"\images\AnimeImages\AnimeImage ({ImageIndex}).jpeg"; }
-        private string publisher = "Unknown";
-
-        public string Publisher
-        {
-            get 
-            {
-                if (publisher == "Unknown" && RandomUsernames != null)
-                    publisher = RandomUsernames[Id];
-                
-                return publisher; 
-            }
-            set 
-            { 
-                publisher = value; 
-            }
-        }
-        
     }
 }

Otakians/Pages/Posts.razor

@@ -0,0 +1,192 @@
+@page "/Posts"
+@inject HttpClient Http
+@inject NavigationManager NavManager
+
+
+<PageTitle>MudBlazorTime!</PageTitle>
+
+<style>
+    /* Hide scrollbar */
+    ::-webkit-scrollbar {
+        scrollbar-width: none;
+        display: none;
+    }
+
+    .scrollbar {
+        overflow-y: hidden;
+        scrollbar-width: none;
+    }
+</style>
+
+<MudOverlay @bind-Visible="isOverlayVisible" Style="backdrop-filter:blur(5px)" DarkBackground="true" AutoClose="true">
+    <MudPaper Elevation="3" Class="rounded-xl">
+        <MudImage Class="rounded-xl" Elevation="4" Src="@selectedPost.ImagePath" Width="500" Height="500"/>
+        <MudContainer Class="pa-5 d-flex align-center justify-content-start">
+            <MudText>
+                Damn
+            </MudText>
+            <MudSpacer/>
+            <MudIconButton Class="pa-4" Icon="@Icons.Material.Filled.Star" Variant="Variant.Filled" Color="Color.Primary"> text </MudIconButton>
+        </MudContainer>
+    </MudPaper>
+</MudOverlay>
+
+<MudOverlay @bind-Visible="isCreatePostWarningVisible" Style="backdrop-filter:blur(5px)" DarkBackground="true" AutoClose="true">
+    <MudPaper Class="pa-8">
+        <MudContainer Class="pa-0 d-flex justify-content-end">
+            <MudText Typo="Typo.h4">I am sorry</MudText>
+            <MudSpacer/>
+            <MudIcon Size="Size.Large" Icon="@Icons.Material.Filled.WarningAmber"/>
+        </MudContainer>
+        <MudText >Posting is restricted to Otakians+ users only.</MudText>
+    </MudPaper>
+</MudOverlay>
+
+<MudContainer Class="mt-16 px-8 overflow-hidden" MaxWidth="MaxWidth.False">
+    <MudContainer Class="d-flex justify-center">
+        <MudGrid Justify="Justify.Center">
+            <MudItem>
+                <MudButton OnClick="OpenCreatePostsWarning" Variant="Variant.Filled" Color="@Color.Tertiary">
+                    <MudIcon Class="mr-1 ml-n1" Icon="@Icons.Material.Filled.Create"/>
+                    <MudText>Create post</MudText>
+                </MudButton>
+            </MudItem>
+
+            <MudItem>
+                <MudButton Variant="Variant.Filled" Color="@Color.Primary" Disabled="@isRefreshing" OnClick="ReloadPage">
+                    @if (isRefreshing)
+                    {
+                        <MudProgressCircular Class="ms-n1 mr-2" Size="Size.Small" Indeterminate="true" />
+                    }
+                    <MudText>Refresh</MudText>
+                </MudButton>
+            </MudItem>
+        </MudGrid>
+    </MudContainer>
+    <MudGrid Spacing="1" Justify="Justify.Center">
+        @for (int i = 0; i < 200; i++)
+        {
+            Post post = (LoadedImages.Count > i) ? posts[i] : GetRandomPost();
+
+            <MudItem Class="md-8" Style="position:relative">
+                <MudContainer Style="position:absolute;" Class="mt-4">
+                    <MudText Style="background-color:rgba(0, 0, 0, 0.55); backdrop-filter:blur(2px); width: 250px;" Class="pl-2 rounded-t-lg" Color="Color.Secondary" Typo="Typo.h6">@("@" + post.Publisher)</MudText>
+                </MudContainer>
+                <MudContainer>
+                    <MudImage @onclick="() => ClickPost(post)" Class="rounded-lg my-4" Style="cursor: pointer" Src="@post.ImagePath" ObjectFit="ObjectFit.Cover" Height="250" Width="250"></MudImage>
+                </MudContainer>
+            </MudItem>
+        }
+    </MudGrid>
+</MudContainer>
+
+<MudScrollToTop >
+    <MudFab Color="Color.Primary" StartIcon="@Icons.Material.Filled.ArrowUpward" />
+</MudScrollToTop>
+
+
+@code {
+    public bool isOverlayVisible = false;
+    bool isCreatePostWarningVisible = false;
+
+    bool isRefreshing = false;
+
+    public void OpenOverlay()
+    {
+        isOverlayVisible = true;
+        StateHasChanged();
+    }
+
+    public void OpenCreatePostsWarning()
+    {
+        isCreatePostWarningVisible = true;
+        StateHasChanged();
+    }
+
+    List<int> LoadedImages = new List<int>();
+    List<Post> posts = new List<Post>();
+
+    private Random random = new Random();
+    const int numImages = 211;
+    Post GetRandomPost()
+    {
+        int selectedPostNum;
+    reselect:
+        selectedPostNum = random.Next(1, numImages);
+        if (LoadedImages.Contains(selectedPostNum))
+            goto reselect;
+
+        LoadedImages.Add(selectedPostNum);
+
+
+        var selectedPost = new Post(selectedPostNum);
+        posts.Add(selectedPost);
+        return selectedPost;
+    }
+
+    string GetImage(int imageIndex)
+    {
+        return $@"\images\AnimeImages\AnimeImage ({imageIndex}).jpeg";
+    }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+
+    }
+
+    async void ReloadPage()
+    {
+        isRefreshing = true;
+        StateHasChanged();
+        await Task.Delay(500);
+        isRefreshing = false;
+        NavManager.NavigateTo("/");
+    }
+
+    // TODO: Add a "save post" button to each post.
+
+    static string[]? RandomUsernames;
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (RandomUsernames == null)
+            RandomUsernames = (await Http.GetStringAsync("RandomUsernames.txt")).Split("\n");
+    }
+
+    Post selectedPost = new Post(-1);
+
+    void ClickPost(Post post)
+    {
+        selectedPost = post;
+        isOverlayVisible = true;
+    }
+
+    public class Post
+    {
+        public Post(int imageIndex)
+        {
+            this.Id = imageIndex;
+        }
+
+        public int Id { get; set; }
+        public int ImageIndex { get => Id; }
+        public string ImagePath { get => $@"\images\AnimeImages\AnimeImage ({ImageIndex}).jpeg"; }
+        private string publisher = "Unknown";
+
+        public string Publisher
+        {
+            get 
+            {
+                if (publisher == "Unknown" && RandomUsernames != null)
+                    publisher = RandomUsernames[Id];
+                
+                return publisher; 
+            }
+            set 
+            { 
+                publisher = value; 
+            }
+        }
+        
+    }
+}

Otakians/Properties/launchSettings.json

@@ -7,7 +7,8 @@
       },
       "dotnetRunMessages": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "https://localhost:7129;http://localhost:5222"
+      "applicationUrl": "http://localhost:5222",
+      "nativeDebugging": true
     },
     "IIS Express": {
       "commandName": "IISExpress",

Otakians/Shared/MainLayout.razor

@@ -6,13 +6,13 @@
     <MudAppBar Elevation="1">
         <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="AddUser">Primary</MudButton>
         <MudSpacer />
-        <MudAvatar @onclick="ToggleDrawer" Variant="Variant.Outlined" Color="Color.Success" Class="mr-n2">BT</MudAvatar>
+        <MudAvatar @onclick="ToggleDrawer" Style="cursor:pointer;" Variant="Variant.Outlined" Color="Color.Success" Class="mr-n2">BT</MudAvatar>
     </MudAppBar>
 
     <MudDrawer @bind-Open="@openContentDrawer" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.Lg" PreserveOpenState="false" Elevation="1" Variant="@DrawerVariant.Mini" OpenMiniOnHover="true">
         <MudNavMenu>
-            <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Image">Posts</MudNavLink>
+            <MudNavLink Match="NavLinkMatch.All" Href="/Posts" Icon="@Icons.Material.Filled.Image">Posts</MudNavLink>
-            <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.LibraryBooks">Library</MudNavLink>
+            <MudNavLink Match="NavLinkMatch.All" Href="/Chatting" Icon="@Icons.Material.Filled.Chat">Chat</MudNavLink>
             <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Group">Community</MudNavLink>
         </MudNavMenu>
     </MudDrawer>
@@ -20,7 +20,7 @@
     <MudDrawer Anchor="Anchor.End" @bind-Open="@openProfileDrawer" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.Lg" PreserveOpenState="true" Elevation="1" Variant="@DrawerVariant.Temporary">
         <MudNavMenu>
             <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Store">Store</MudNavLink>
-            <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.LibraryBooks">Library</MudNavLink>
+            <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Chat">Library</MudNavLink>
             <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Group">Community</MudNavLink>
         </MudNavMenu>
     </MudDrawer>