Minor puzzle improvements

src/css/states/puzzle_menu.scss

@@ -62,9 +62,9 @@
 
             > .puzzles {
                 display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(D(130px), 1fr));
+                grid-template-columns: repeat(auto-fit, minmax(D(180px), 1fr));
-                @include S(grid-auto-rows, 90px);
+                @include S(grid-auto-rows, 65px);
-                @include S(grid-gap, 3px);
+                @include S(grid-gap, 7px);
                 @include S(margin-top, 10px);
                 @include S(padding-right, 4px);
                 @include S(height, 360px);
@@ -74,19 +74,20 @@
 
                 > .puzzle {
                     width: 100%;
-                    @include S(height, 90px);
+                    @include S(height, 65px);
                     background: #f3f3f8;
                     @include S(border-radius, $globalBorderRadius);
 
                     display: grid;
-                    grid-template-columns: 1fr auto;
+                    grid-template-columns: auto 1fr;
-                    grid-template-rows: D(15px) 1fr auto;
+                    grid-template-rows: D(15px) D(15px) 1fr;
                     @include S(padding, 5px);
                     @include S(grid-column-gap, 5px);
                     box-sizing: border-box;
                     pointer-events: all;
                     cursor: pointer;
                     position: relative;
+                    @include S(padding-left, 10px);
 
                     @include DarkThemeOverride {
                         background: rgba(0, 0, 10, 0.2);
@@ -106,23 +107,35 @@
                     }
 
                     > .title {
-                        grid-column: 1 / 3;
+                        grid-column: 2 / 3;
                         grid-row: 1 / 2;
                         @include PlainText;
                         white-space: nowrap;
                         text-overflow: ellipsis;
                         overflow: hidden;
                         align-self: center;
-                        justify-self: center;
+                        justify-self: start;
                         width: 100%;
                         box-sizing: border-box;
                         @include S(padding, 2px, 5px);
                         @include S(height, 17px);
                     }
 
-                    > .icon {
+                    > .author {
-                        grid-column: 1 / 3;
+                        grid-column: 2 / 2;
                         grid-row: 2 / 3;
+                        @include SuperSmallText;
+                        color: $accentColorDark;
+                        align-self: center;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        @include S(padding, 2px, 5px);
+                    }
+
+                    > .icon {
+                        grid-column: 1 / 2;
+                        grid-row: 1 / 4;
                         align-self: center;
                         justify-self: center;
                         @include S(width, 45px);
@@ -134,17 +147,6 @@
                         }
                     }
 
-                    > .author {
-                        grid-column: 1 / 2;
-                        grid-row: 3 / 4;
-                        @include SuperSmallText;
-                        color: $accentColorDark;
-                        align-self: center;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                    }
-
                     > .stats {
                         grid-column: 2 / 3;
                         grid-row: 3 / 4;
@@ -200,14 +202,20 @@
                             color: #000;
                             font-weight: bold;
                             @include S(margin-right, 3px);
-                            @include S(padding-left, 14px);
                             opacity: 0.7;
-                            @include DarkThemeInvert;
 
-                            & {
+                            &.stage--easy {
-                                /* @load-async */
+                                color: $colorGreenBright;
-                                background: uiResource("icons/puzzle_completion_rate.png") #{D(1px)} #{D(2px)} /
+                            }
-                                    #{D(10px)} #{D(10px)} no-repeat;
+                            &.stage--normal {
+                                color: #000;
+                                @include DarkThemeInvert;
+                            }
+                            &.stage--medium {
+                                color: $colorOrangeBright;
+                            }
+                            &.stage--hard {
+                                color: $colorRedBright;
                             }
                         }
                     }

src/css/variables.scss

@@ -35,6 +35,7 @@ $accentColorDark: #7d808a;
 $colorGreenBright: #66bb6a;
 $colorBlueBright: rgb(74, 151, 223);
 $colorRedBright: #ef5072;
+$colorOrangeBright: #ef9d50;
 $themeColor: #393747;
 $ingameHudBg: rgba(#333438, 0.9);
 

src/js/states/puzzle_menu.js

@@ -3,14 +3,13 @@ import { createLogger } from "../core/logging";
 import { DialogWithForm } from "../core/modal_dialog_elements";
 import { FormElementInput } from "../core/modal_dialog_forms";
 import { TextualGameState } from "../core/textual_game_state";
-import { clamp, formatBigNumberFull } from "../core/utils";
+import { formatBigNumberFull } from "../core/utils";
 import { enumGameModeIds } from "../game/game_mode";
-import { PUZZLE_RATINGS } from "../game/hud/parts/puzzle_complete_notification";
 import { ShapeDefinition } from "../game/shape_definition";
 import { Savegame } from "../savegame/savegame";
 import { T } from "../translations";
 
-const categories = ["top-rated", "short", "hard", "new", "mine"];
+const categories = ["top-rated", "new", "easy", "short", "hard", "completed", "mine"];
 
 /**
  * @type {import("../savegame/savegame_typedefs").PuzzleMetadata}
@@ -186,8 +185,20 @@ export class PuzzleMenuState extends TextualGameState {
             if (puzzle.downloads > 0) {
                 const difficulty = document.createElement("div");
                 difficulty.classList.add("difficulty");
-                difficulty.innerText = Math.round((puzzle.completions / puzzle.downloads) * 100.0) + "%";
+
+                const completionPercentage = Math.round((puzzle.completions / puzzle.downloads) * 100.0);
+                difficulty.innerText = completionPercentage + "%";
                 stats.appendChild(difficulty);
+
+                if (completionPercentage < 10) {
+                    difficulty.classList.add("stage--hard");
+                } else if (completionPercentage < 30) {
+                    difficulty.classList.add("stage--medium");
+                } else if (completionPercentage < 60) {
+                    difficulty.classList.add("stage--normal");
+                } else {
+                    difficulty.classList.add("stage--easy");
+                }
             }
 
             const downloads = document.createElement("div");

translations/base-en.yaml

@@ -137,7 +137,9 @@ puzzleMenu:
         top-rated: Top Rated
         mine: My Puzzles
         short: Short
+        easy: Easy
         hard: Hard
+        completed: Completed
 
     validation:
         title: Invalid Puzzle