Added Hall of Fame

layout/sidebar/audioplayer.scarlet

@@ -17,7 +17,7 @@
 	width anime-image-medium-width
 	height anime-image-medium-width
 	overflow-y hidden
-	border-radius 3px
+	border-radius ui-element-border-radius
 	opacity 0.75
 	transform opacity transition-speed ease
 

mixins/AnimeGrid.pixy

@@ -9,13 +9,15 @@ component AnimeGridWithRelation(entries []*utils.AnimeWithRelatedAnime, user *ar
 component AnimeGridScrollable(animes []*arn.Anime, user *arn.User)
 	each anime in animes
 		.anime-grid-cell(data-added=(user != nil && user.AnimeList().Contains(anime.ID)))
-			a(href="/anime/" + anime.ID)
+			AnimeImageLink(anime, "medium", user)
-				img.anime-grid-image.lazy(data-src=anime.ImageLink("medium"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Romaji)
-				.anime-grid-title
-					.anime-grid-title-text= anime.Title.ByUser(user)
-			
 			AnimeGridButton(anime, user)
 
+component AnimeImageLink(anime *arn.Anime, size string, user *arn.User)
+	a(href="/anime/" + anime.ID)
+		img.anime-grid-image.lazy(data-src=anime.ImageLink(size), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Romaji)
+		.anime-grid-title
+			.anime-grid-title-text= anime.Title.ByUser(user)
+
 component AnimeGridWithRelationScrollable(entries []*utils.AnimeWithRelatedAnime, user *arn.User)
 	each entry in entries
 		.anime-grid-cell(data-added=(user != nil && user.AnimeList().Contains(entry.Anime.ID)))

pages/anime/anime.scarlet

@@ -121,7 +121,7 @@
 .anime-cover-image
 	width anime-image-large-width
 	height anime-image-large-height
-	border-radius 3px
+	border-radius ui-element-border-radius
 
 	default-transition
 	object-fit cover
@@ -214,7 +214,7 @@
 .relation-image
 	width 100px
 	height 141px
-	border-radius 3px
+	border-radius ui-element-border-radius
 	object-fit cover
 	default-transition
 	shadow-up

pages/explore/explore.pixy

@@ -7,6 +7,12 @@ component ExploreAnime(animes []*arn.Anime, year string, status string, typ stri
 			button.action(data-trigger="click", data-action="hideAddedAnime", title="Hide anime in my collection")
 				RawIcon("eye-slash")
 		
+		a.button(href="/halloffame", title="Hall of Fame")
+			RawIcon("trophy")
+		
+		a.button(href="/genres", title="View genres")
+			RawIcon("clone")
+		
 		if user != nil
 			a.button(href="/explore/sequels", title="View sequels of my completed anime")
 				RawIcon("forward")
@@ -14,9 +20,6 @@ component ExploreAnime(animes []*arn.Anime, year string, status string, typ stri
 		a.button(href="/explore/color/any/anime", title="View colors")
 			RawIcon("paint-brush")
 
-		a.button(href="/genres", title="View genres")
-			RawIcon("clone")
-
 	h1.page-title Explore
 
 	.explore-anime

pages/explore/halloffame/halloffame.go

@@ -0,0 +1,65 @@
+package halloffame
+
+import (
+	"sort"
+	"time"
+
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/arn"
+	"github.com/animenotifier/notify.moe/components"
+	"github.com/animenotifier/notify.moe/utils"
+)
+
+// Get ...
+func Get(ctx *aero.Context) string {
+	user := utils.GetUser(ctx)
+	maxYear := time.Now().Year() - 1
+	hallOfFameEntries := []*utils.HallOfFameEntry{}
+
+	animes := arn.FilterAnime(func(anime *arn.Anime) bool {
+		if len(anime.StartDate) < 4 {
+			return false
+		}
+
+		if anime.StartDateTime().Year() > maxYear {
+			return false
+		}
+
+		if anime.Status != "finished" {
+			return false
+		}
+
+		if anime.Type != "tv" {
+			return false
+		}
+
+		return true
+	})
+
+	arn.SortAnimeByQuality(animes)
+
+	yearsAdded := map[int]bool{}
+
+	for _, anime := range animes {
+		year := anime.StartDateTime().Year()
+
+		_, exists := yearsAdded[year]
+
+		if exists {
+			continue
+		}
+
+		hallOfFameEntries = append(hallOfFameEntries, &utils.HallOfFameEntry{
+			Year:  year,
+			Anime: anime,
+		})
+
+		yearsAdded[year] = true
+	}
+
+	sort.Slice(hallOfFameEntries, func(i, j int) bool {
+		return hallOfFameEntries[i].Year > hallOfFameEntries[j].Year
+	})
+
+	return ctx.HTML(components.HallOfFame(hallOfFameEntries, user))
+}

pages/explore/halloffame/halloffame.pixy

@@ -0,0 +1,13 @@
+component HallOfFame(entries []*utils.HallOfFameEntry, user *arn.User)
+	h1.hall-of-fame-page-title Hall of Fame
+	.footer Best TV series for each year.
+
+	.hall-of-fame
+		each entry in entries
+			.hall-of-fame-entry
+				.hall-of-fame-anime
+					AnimeImageLink(entry.Anime, "large", user)
+				a.hall-of-fame-footer(href="/explore/anime/" + strconv.Itoa(entry.Year) + "/finished/tv", title="Best TV series " + strconv.Itoa(entry.Year))
+					.hall-of-fame-trophy
+						Icon("trophy")
+					.hall-of-fame-year= entry.Year

pages/explore/halloffame/halloffame.scarlet

@@ -0,0 +1,52 @@
+.hall-of-fame
+	horizontal-wrap
+	justify-content center
+	margin-top calc(content-padding * 2)
+
+.hall-of-fame-page-title
+	margin-bottom 0
+
+.hall-of-fame-entry
+	vertical
+	padding content-padding
+	margin-bottom content-padding
+
+.hall-of-fame-footer
+	horizontal
+	justify-content center
+	align-items center
+	font-weight bold
+	letter-spacing 1px
+	padding 1rem
+	border-bottom ui-border
+	border-bottom-left-radius 50%
+	border-bottom-right-radius 50%
+
+	:hover
+		background reverse-light-color
+
+.hall-of-fame-trophy
+	font-size 2.5rem
+
+.hall-of-fame-year
+	font-size 1.5rem
+	color text-color
+	opacity 0.85
+	text-shadow none
+
+.hall-of-fame-anime
+	saturate-up
+	shadow-up
+	default-transition
+	position relative
+	width anime-image-large-width
+	height anime-image-large-height
+	border-radius ui-element-border-radius
+
+	.anime-grid-title
+		font-size 1.2rem
+		padding 1rem 0.75rem
+
+	:hover
+		.anime-grid-title
+			opacity 1

pages/frontpage/frontpage.scarlet

@@ -60,7 +60,7 @@ const frontpage-bg-color = rgb(32, 32, 32)
 .login-button
 	horizontal
 	align-items center
-	border-radius 3px
+	border-radius ui-element-border-radius
 	padding 0.75rem 1.25rem
 	margin 0.5rem
 	font-size 1.2rem
@@ -82,7 +82,7 @@ const frontpage-bg-color = rgb(32, 32, 32)
 
 .screenshot
 	max-width 100%
-	border-radius 3px
+	border-radius ui-element-border-radius
 	box-shadow shadow-medium
 	margin-bottom 2rem
 

pages/index.go

@@ -29,6 +29,7 @@ import (
 	"github.com/animenotifier/notify.moe/pages/explore"
 	"github.com/animenotifier/notify.moe/pages/explore/explorecolor"
 	"github.com/animenotifier/notify.moe/pages/explore/explorerelations"
+	"github.com/animenotifier/notify.moe/pages/explore/halloffame"
 	"github.com/animenotifier/notify.moe/pages/forum"
 	"github.com/animenotifier/notify.moe/pages/genre"
 	"github.com/animenotifier/notify.moe/pages/genres"
@@ -81,6 +82,7 @@ func Configure(app *aero.Application) {
 	l.Page("/explore/color/:color/anime", explorecolor.AnimeByAverageColor)
 	l.Page("/explore/color/:color/anime/from/:index", explorecolor.AnimeByAverageColor)
 	l.Page("/explore/sequels", explorerelations.Sequels)
+	l.Page("/halloffame", halloffame.Get)
 	l.Page("/login", login.Get)
 	l.Page("/api", apiview.Get)
 	// l.Ajax("/dashboard", dashboard.Get)

pages/profile/profile.scarlet

@@ -116,7 +116,7 @@
 	flex 1
 	max-width 280px
 	max-height 280px
-	border-radius 3px
+	border-radius ui-element-border-radius
 	overflow hidden
 
 #nick

pages/settings/settings.scarlet

@@ -24,7 +24,7 @@
 	margin 0 auto
 
 #cover-input-preview
-	border-radius 3px
+	border-radius ui-element-border-radius
 	filter none
 
 .settings-info-text

pages/soundtracks/soundtracks.scarlet

@@ -10,7 +10,7 @@
 
 .soundtrack-content
 	horizontal
-	border-radius 3px
+	border-radius ui-element-border-radius
 	overflow hidden
 	box-shadow shadow-light
 	min-height 200px

pages/users/users.scarlet

@@ -1,7 +1,7 @@
 .user-avatars
 	horizontal-wrap
 	justify-content center
-	border-radius 3px
+	border-radius ui-element-border-radius
 
 	.user-image
 		margin 0.4rem

styles/anime-grid.scarlet

@@ -33,6 +33,8 @@
 	width 100%
 	padding 0.7rem 0.5rem
 	background linear-gradient(to top, hsla(0, 0%, 0%, 0.8), hsla(0, 0%, 0%, 0))
+	border-bottom-left-radius ui-element-border-radius
+	border-bottom-right-radius ui-element-border-radius
 	default-transition
 
 .anime-grid-title-text

styles/forum.scarlet

@@ -225,7 +225,7 @@ post-content-padding-y = 0.75rem
 // 	flex-grow 1
 // 	padding 0.4rem 1rem
 // 	margin-left 0.3rem
-// 	border-radius 3px
+// 	border-radius ui-element-border-radius
 // 	position relative
 
 // 	:hover

styles/grid.scarlet

@@ -11,7 +11,7 @@ mixin grid-cell
 	max-height anime-image-medium-height
 	// min-width 90px
 	// min-height 127px
-	border-radius 3px
+	border-radius ui-element-border-radius
 
 	// background-size cover
 	// background-position 50% 50%
@@ -30,7 +30,7 @@ mixin grid-text
 mixin grid-image
 	width 100%
 	height 100%
-	border-radius 3px
+	border-radius ui-element-border-radius
 	object-fit cover
 	default-transition
 

styles/include/config.scarlet

@@ -26,7 +26,7 @@ ui-background = rgb(254, 254, 254)
 // ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
 // ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
 ui-disabled-color = rgb(224, 224, 224)
-ui-element-border-radius = 3px
+const ui-element-border-radius = 3px
 
 // Input
 input-height = 2.4rem

styles/light-button.scarlet

@@ -6,7 +6,7 @@
 	horizontal
 	display inline-block
 	padding 0.5rem 1rem
-	border-radius 3px
+	border-radius ui-element-border-radius
 	font-size 0.9rem
 
 	:hover

styles/typography.scarlet

@@ -29,7 +29,7 @@ hr
 
 p > img
 	max-width 100%
-	border-radius 3px
+	border-radius ui-element-border-radius
 	display inherit
 	margin 0 auto
 

utils/HallOfFameEntry.go

@@ -0,0 +1,9 @@
+package utils
+
+import "github.com/animenotifier/arn"
+
+// HallOfFameEntry is an entry in the hall of fame.
+type HallOfFameEntry struct {
+	Year  int
+	Anime *arn.Anime
+}