Add teampicks and trending levels on landing page

Rough implementation for https://github.com/LBPUnion/ProjectLighthouse/issues/241
This commit is contained in:
jvyden 2022-04-03 19:07:36 -04:00
commit 213db4f2d8
No known key found for this signature in database
GPG key ID: 18BCF2BE0262B278
3 changed files with 112 additions and 12 deletions

View file

@ -1,11 +1,14 @@
@page "/"
@using LBPUnion.ProjectLighthouse.Helpers.Extensions
@using LBPUnion.ProjectLighthouse.Types
@using LBPUnion.ProjectLighthouse.Types.Levels
@using LBPUnion.ProjectLighthouse.Types.Settings
@model LBPUnion.ProjectLighthouse.Pages.LandingPage
@{
Layout = "Layouts/BaseLayout";
Model.ShowTitleInPage = false;
bool isMobile = this.Request.IsMobile();
}
<h1>Welcome to <b>Project Lighthouse</b>!</h1>
@ -40,4 +43,37 @@ else
{
<a href="/user/@user.UserId" title="@user.Status.ToString()">@user.Username</a>
}
}
}
<div class="@(isMobile ? "" : "ui center aligned grid")">
<div class="eight wide column">
<div class="ui pink segment">
<h1>Latest Team Picks</h1>
<div class="ui divider"></div>
<div class="ui left aligned segment">
@foreach (Slot slot in Model.LatestTeamPicks)
{
@await Html.PartialAsync("Partials/SlotCardPartial", slot, Model.GetSlotViewData(slot.SlotId, isMobile))
<br>
}
</div>
</div>
</div>
@if (isMobile)
{
<br>
}
<div class="eight wide column">
<div class="ui orange segment">
<h1>Trending Levels</h1>
<div class="ui divider"></div>
<div class="ui left aligned segment">
@foreach (Slot slot in Model.TrendingLevels)
{
@await Html.PartialAsync("Partials/SlotCardPartial", slot, Model.GetSlotViewData(slot.SlotId, isMobile))
<br>
}
</div>
</div>
</div>
</div>

View file

@ -6,20 +6,25 @@ using JetBrains.Annotations;
using LBPUnion.ProjectLighthouse.Helpers;
using LBPUnion.ProjectLighthouse.Pages.Layouts;
using LBPUnion.ProjectLighthouse.Types;
using LBPUnion.ProjectLighthouse.Types.Levels;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.EntityFrameworkCore;
namespace LBPUnion.ProjectLighthouse.Pages;
public class LandingPage : BaseLayout
{
public LandingPage(Database database) : base(database)
{}
public int AuthenticationAttemptsCount;
public List<User> PlayersOnline;
public int PlayersOnlineCount;
public LandingPage(Database database) : base(database)
{}
public List<Slot> LatestTeamPicks;
public List<Slot> TrendingLevels;
[UsedImplicitly]
public async Task<IActionResult> OnGet()
@ -37,6 +42,43 @@ public class LandingPage : BaseLayout
List<int> userIds = await this.Database.LastContacts.Where(l => TimestampHelper.Timestamp - l.Timestamp < 300).Select(l => l.UserId).ToListAsync();
this.PlayersOnline = await this.Database.Users.Where(u => userIds.Contains(u.UserId)).ToListAsync();
const int maxShownLevels = 5;
this.LatestTeamPicks = await this.Database.Slots.Where
(s => s.TeamPick)
.OrderBy(s => s.FirstUploaded)
.Take(maxShownLevels)
.Include(s => s.Creator)
.ToListAsync();
this.TrendingLevels = await this.Database.Slots.OrderByDescending
(s => s.PlaysLBP1Unique + s.PlaysLBP2Unique + s.PlaysLBP3Unique + s.PlaysLBPVitaUnique)
.ThenBy(s => s.FirstUploaded)
.Take(maxShownLevels)
.Include(s => s.Creator)
.ToListAsync();
return this.Page();
}
public ViewDataDictionary GetSlotViewData(int slotId, bool isMobile = false)
=> new(ViewData)
{
{
"User", this.User
},
{
"CallbackUrl", $"~/slot/{slotId}"
},
{
"ShowLink", true
},
{
"IsMini", true
},
{
"IsMobile", isMobile
},
};
}

View file

@ -12,6 +12,8 @@
string slotName = string.IsNullOrEmpty(Model.Name) ? "Unnamed Level" : Model.Name;
bool isMobile = (bool?)ViewData["IsMobile"] ?? false;
bool mini = (bool?)ViewData["IsMini"] ?? false;
bool isQueued = false;
bool isHearted = false;
@ -30,25 +32,44 @@
}
<div class="card">
@{
int size = isMobile ? 50 : 100;
int size = isMobile || mini ? 50 : 100;
}
<div>
<img src="~/assets/slotCardOverlay.png" style="min-width: @(size)px; width: @(size)px; height: @(size)px; pointer-events: none; position: absolute">
<img class="cardIcon slotCardIcon" src="/gameAssets/@iconHash" style="min-width: @(size)px; width: @(size)px; height: @(size)px">
</div>
<div class="cardStats">
@if (showLink)
@if (!mini)
{
<h2>
<a href="~/slot/@Model.SlotId">@slotName</a>
</h2>
@if (showLink)
{
<h2>
<a href="~/slot/@Model.SlotId">@slotName</a>
</h2>
}
else
{
<h1>
@slotName
</h1>
}
}
else
{
<h1>
@slotName
</h1>
@if (showLink)
{
<h3>
<a href="~/slot/@Model.SlotId">@slotName</a>
</h3>
}
else
{
<h3>
@slotName
</h3>
}
}
<div class="cardStatsUnderTitle">
<i class="pink heart icon" title="Hearts"></i> <span>@Model.Hearts</span>
<i class="blue play icon" title="Plays"></i> <span>@Model.Plays</span>
@ -61,13 +82,14 @@
<span>@Model.RatingLBP1</span>
}
</div>
<p>
<i>Created by <a href="/user/@Model.Creator?.UserId">@Model.Creator?.Username</a> for @Model.GameVersion.ToPrettyString()</i>
</p>
</div>
<div class="cardButtons">
<br>
@if (user != null)
@if (user != null && !mini)
{
if (isHearted)
{