From 05418c2163adc04cdadd8453b8a4bc7b832f167d Mon Sep 17 00:00:00 2001 From: tobspr Date: Mon, 3 May 2021 23:23:41 +0200 Subject: [PATCH] Minor puzzle improvements --- src/css/states/puzzle_menu.scss | 62 +++++++++++++++++++-------------- src/css/variables.scss | 1 + src/js/states/puzzle_menu.js | 19 +++++++--- translations/base-en.yaml | 2 ++ 4 files changed, 53 insertions(+), 31 deletions(-) diff --git a/src/css/states/puzzle_menu.scss b/src/css/states/puzzle_menu.scss index 9cc5a093..2c0d3773 100644 --- a/src/css/states/puzzle_menu.scss +++ b/src/css/states/puzzle_menu.scss @@ -62,9 +62,9 @@ > .puzzles { display: grid; - grid-template-columns: repeat(auto-fit, minmax(D(130px), 1fr)); - @include S(grid-auto-rows, 90px); - @include S(grid-gap, 3px); + grid-template-columns: repeat(auto-fit, minmax(D(180px), 1fr)); + @include S(grid-auto-rows, 65px); + @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-rows: D(15px) 1fr auto; + grid-template-columns: auto 1fr; + 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 { - grid-column: 1 / 3; + > .author { + 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; - & { - /* @load-async */ - background: uiResource("icons/puzzle_completion_rate.png") #{D(1px)} #{D(2px)} / - #{D(10px)} #{D(10px)} no-repeat; + &.stage--easy { + color: $colorGreenBright; + } + &.stage--normal { + color: #000; + @include DarkThemeInvert; + } + &.stage--medium { + color: $colorOrangeBright; + } + &.stage--hard { + color: $colorRedBright; } } } diff --git a/src/css/variables.scss b/src/css/variables.scss index f7bdc900..c7b7c17c 100644 --- a/src/css/variables.scss +++ b/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); diff --git a/src/js/states/puzzle_menu.js b/src/js/states/puzzle_menu.js index eb5595f6..372b1ed2 100644 --- a/src/js/states/puzzle_menu.js +++ b/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"); diff --git a/translations/base-en.yaml b/translations/base-en.yaml index b9ea9d77..df52cdbb 100644 --- a/translations/base-en.yaml +++ b/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