mirror of
https://github.com/tobspr/shapez.io.git
synced 2025-06-13 13:04:03 +00:00
Minor puzzle improvements
This commit is contained in:
tobspr
parent
4f846edb9b
commit
05418c2163
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,6 +35,7 @@ $accentColorDark: #7d808a;
|
||||
$colorGreenBright: #66bb6a;
|
||||
$colorBlueBright: rgb(74, 151, 223);
|
||||
$colorRedBright: #ef5072;
|
||||
$colorOrangeBright: #ef9d50;
|
||||
$themeColor: #393747;
|
||||
$ingameHudBg: rgba(#333438, 0.9);
|
||||
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -137,7 +137,9 @@ puzzleMenu:
|
||||
top-rated: Top Rated
|
||||
mine: My Puzzles
|
||||
short: Short
|
||||
easy: Easy
|
||||
hard: Hard
|
||||
completed: Completed
|
||||
|
||||
validation:
|
||||
title: Invalid Puzzle
|
||||
|
||||
Loading…
Reference in New Issue
Block a user