Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/tobspr/shapez.io

Browse Source
This commit is contained in:
tobspr
2021-06-20 11:53:50 +02:00
parent c6bb1a22fb 39d6d3d565
commit 4e763ae93a
39 changed files with 2037 additions and 1969 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/css/mixins.scss
View File

@@ -15,15 +15,15 @@ $hardwareAcc: null;
// ----------------------------------------
/** Increased click area for this element, helpful on mobile */
@mixin IncreasedClickArea($size) {
&::after {
content: "";
position: absolute;
top: #{D(-$size)};
bottom: #{D(-$size)};
left: #{D(-$size)};
right: #{D(-$size)};
// background: rgba(255, 0, 0, 0.3);
}
// &::after {
// content: "";
// position: absolute;
// top: #{D(-$size)};
// bottom: #{D(-$size)};
// left: #{D(-$size)};
// right: #{D(-$size)};
// // background: rgba(255, 0, 0, 0.3);
// }
}
button,
.increasedClickArea {

81
src/css/states/puzzle_menu.scss
View File

@@ -19,42 +19,54 @@
overflow: hidden;
> .categoryChooser {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
@include S(grid-gap, 2px);
@include S(padding-right, 10px);
> .categories {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
@include S(grid-gap, 2px);
@include S(padding-right, 10px);
@include S(margin-bottom, 5px);
> .category {
background: $accentColorBright;
border-radius: 0;
color: $accentColorDark;
transition: all 0.12s ease-in-out;
transition-property: opacity, background-color, color;
.category {
background: $accentColorBright;
border-radius: 0;
color: $accentColorDark;
transition: all 0.12s ease-in-out;
transition-property: opacity, background-color, color;
&:first-child {
@include S(border-top-left-radius, $globalBorderRadius);
@include S(border-bottom-left-radius, $globalBorderRadius);
}
&:last-child {
border-top-right-radius: $globalBorderRadius;
border-bottom-right-radius: $globalBorderRadius;
}
&.active {
background: $colorBlueBright;
opacity: 1 !important;
color: #fff;
cursor: default;
}
@include DarkThemeOverride {
background: $accentColorDark;
color: #bbbbc4;
&:first-child {
@include S(border-top-left-radius, $globalBorderRadius);
@include S(border-bottom-left-radius, $globalBorderRadius);
}
&:last-child {
border-top-right-radius: $globalBorderRadius;
border-bottom-right-radius: $globalBorderRadius;
}
&.active {
background: $colorBlueBright;
opacity: 1 !important;
color: #fff;
cursor: default;
}
@include DarkThemeOverride {
background: $accentColorDark;
color: #bbbbc4;
&.active {
background: $colorBlueBright;
color: #fff;
}
}
&.root {
@include S(padding-top, 10px);
@include S(padding-bottom, 10px);
@include Text;
}
&.child {
@include PlainText;
}
}
}
@@ -62,12 +74,12 @@
> .puzzles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(D(180px), 1fr));
grid-template-columns: repeat(auto-fit, minmax(D(240px), 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);
@include S(height, 320px);
overflow-y: scroll;
pointer-events: all;
position: relative;
@@ -203,14 +215,11 @@
font-weight: bold;
@include S(margin-right, 3px);
opacity: 0.7;
text-transform: uppercase;
&.stage--easy {
color: $colorGreenBright;
}
&.stage--normal {
color: #000;
@include DarkThemeInvert;
}
&.stage--medium {
color: $colorOrangeBright;
}

7
src/js/core/state_manager.js
View File

@@ -89,8 +89,13 @@ export class StateManager {
const dialogParent = document.createElement("div");
dialogParent.classList.add("modalDialogParent");
document.body.appendChild(dialogParent);
try {
this.currentState.internalEnterCallback(payload);
} catch (ex) {
console.error(ex);
throw ex;
}
this.currentState.internalEnterCallback(payload);
this.app.sound.playThemeMusic(this.currentState.getThemeMusic());
this.currentState.onResized(this.app.screenWidth, this.app.screenHeight);

4
src/js/game/systems/goal_acceptor.js
View File

@@ -118,10 +118,10 @@ export class GoalAcceptorSystem extends GameSystemWithFilter {
// LED indicator
parameters.context.lineWidth = 1;
parameters.context.lineWidth = 1.2;
parameters.context.strokeStyle = "#64666e";
parameters.context.fillStyle = isValid ? "#8de255" : "#ff666a";
parameters.context.beginCircle(10, 11.8, 3);
parameters.context.beginCircle(10, 11.8, 5);
parameters.context.fill();
parameters.context.stroke();

12
src/js/platform/api.js
View File

@@ -101,9 +101,15 @@ export class ClientAPI {
*/
apiTryLogin() {
if (!G_IS_STANDALONE) {
const token = window.prompt(
"Please enter the auth token for the puzzle DLC (If you have none, you can't login):"
);
let token = window.localStorage.getItem("dev_api_auth_token");
if (!token) {
token = window.prompt(
"Please enter the auth token for the puzzle DLC (If you have none, you can't login):"
);
}
if (token) {
window.localStorage.setItem("dev_api_auth_token", token);
}
return Promise.resolve({ token });
}

11
src/js/savegame/savegame_compressor.js
View File

@@ -13,15 +13,20 @@ function compressInt(i) {
// Zero value breaks
i += 1;
if (compressionCache[i]) {
return compressionCache[i];
// save `i` as the cache key
// to avoid it being modified by the
// rest of the function.
const cache_key = i;
if (compressionCache[cache_key]) {
return compressionCache[cache_key];
}
let result = "";
do {
result += charmap[i % charmap.length];
i = Math.floor(i / charmap.length);
} while (i > 0);
return (compressionCache[i] = result);
return (compressionCache[cache_key] = result);
}
/**

2
src/js/states/main_menu.js
View File

@@ -91,7 +91,7 @@ export class MainMenuState extends GameState {
</div>
${
!G_WEGAME_VERSION && G_IS_STANDALONE && puzzleDlc
(!G_WEGAME_VERSION && G_IS_STANDALONE && puzzleDlc) || G_IS_DEV
? `
<div class="puzzleContainer">
<img class="dlcLogo" src="${cachebust(

155
src/js/states/puzzle_menu.js
View File

@@ -1,4 +1,3 @@
import { globalConfig } from "../core/config";
import { createLogger } from "../core/logging";
import { DialogWithForm } from "../core/modal_dialog_elements";
import { FormElementInput } from "../core/modal_dialog_forms";
@@ -10,48 +9,15 @@ import { MUSIC } from "../platform/sound";
import { Savegame } from "../savegame/savegame";
import { T } from "../translations";
const categories = ["top-rated", "new", "easy", "short", "hard", "completed", "mine"];
/**
* @type {import("../savegame/savegame_typedefs").PuzzleMetadata}
*/
const SAMPLE_PUZZLE = {
id: 1,
shortKey: "CuCuCuCu",
downloads: 0,
likes: 0,
averageTime: 1,
completions: 1,
difficulty: null,
title: "Level 1",
author: "verylongsteamnamewhichbreaks",
completed: false,
const navigation = {
categories: ["official", "top-rated", "trending", "trending-weekly", "new"],
difficulties: ["easy", "medium", "hard"],
account: ["mine", "completed"],
};
/**
* @type {import("../savegame/savegame_typedefs").PuzzleMetadata[]}
*/
const BUILTIN_PUZZLES = G_IS_DEV
? [
// { ...SAMPLE_PUZZLE, completed: true },
// { ...SAMPLE_PUZZLE, completed: true },
// SAMPLE_PUZZLE,
// SAMPLE_PUZZLE,
// SAMPLE_PUZZLE,
// SAMPLE_PUZZLE,
// SAMPLE_PUZZLE,
// SAMPLE_PUZZLE,
// SAMPLE_PUZZLE,
// SAMPLE_PUZZLE,
// SAMPLE_PUZZLE,
// SAMPLE_PUZZLE,
// SAMPLE_PUZZLE,
]
: [];
const logger = createLogger("puzzle-menu");
let lastCategory = categories[0];
let lastCategory = "official";
export class PuzzleMenuState extends TextualGameState {
constructor() {
@@ -79,6 +45,7 @@ export class PuzzleMenuState extends TextualGameState {
<button class="styledButton loadPuzzle">${T.puzzleMenu.loadPuzzle}</button>
<button class="styledButton createPuzzle">+ ${T.puzzleMenu.createPuzzle}</button>
</div>
</div>`;
return `
@@ -91,18 +58,23 @@ export class PuzzleMenuState extends TextualGameState {
getMainContentHTML() {
let html = `
<div class="categoryChooser">
${categories
<div class="categories rootCategories">
${Object.keys(navigation)
.map(
category => `
<button data-category="${category}" class="styledButton category">${T.puzzleMenu.categories[category]}</button>
`
rootCategory =>
`<button data-root-category="${rootCategory}" class="styledButton category root">${T.puzzleMenu.categories[rootCategory]}</button>`
)
.join("")}
</div>
<div class="categories subCategories">
</div>
</div>
<div class="puzzles" id="mainContainer"></div>
`;
@@ -154,6 +126,52 @@ export class PuzzleMenuState extends TextualGameState {
.then(() => (this.loading = false));
}
/**
* Selects a root category
* @param {string} rootCategory
* @param {string=} category
*/
selectRootCategory(rootCategory, category) {
const subCategory = category || navigation[rootCategory][0];
console.warn("Select root category", rootCategory, category, "->", subCategory);
if (this.loading) {
return;
}
if (this.activeCategory === subCategory) {
return;
}
const activeCategory = this.htmlElement.querySelector(".active[data-root-category]");
if (activeCategory) {
activeCategory.classList.remove("active");
}
const newActiveCategory = this.htmlElement.querySelector(`[data-root-category="${rootCategory}"]`);
if (newActiveCategory) {
newActiveCategory.classList.add("active");
}
// Rerender buttons
const subContainer = this.htmlElement.querySelector(".subCategories");
while (subContainer.firstChild) {
subContainer.removeChild(subContainer.firstChild);
}
const children = navigation[rootCategory];
for (const category of children) {
const button = document.createElement("button");
button.setAttribute("data-category", category);
button.classList.add("styledButton", "category", "child");
button.innerText = T.puzzleMenu.categories[category];
this.trackClicks(button, () => this.selectCategory(category));
subContainer.appendChild(button);
}
this.selectCategory(subCategory);
}
/**
*
* @param {import("../savegame/savegame_typedefs").PuzzleMetadata[]} puzzles
@@ -167,7 +185,10 @@ export class PuzzleMenuState extends TextualGameState {
for (const puzzle of puzzles) {
const elem = document.createElement("div");
elem.classList.add("puzzle");
elem.classList.toggle("completed", puzzle.completed);
if (this.activeCategory !== "mine") {
elem.classList.toggle("completed", puzzle.completed);
}
if (puzzle.title) {
const title = document.createElement("div");
@@ -176,7 +197,7 @@ export class PuzzleMenuState extends TextualGameState {
elem.appendChild(title);
}
if (puzzle.author) {
if (puzzle.author && !["official", "mine"].includes(this.activeCategory)) {
const author = document.createElement("div");
author.classList.add("author");
author.innerText = "by " + puzzle.author;
@@ -187,7 +208,10 @@ export class PuzzleMenuState extends TextualGameState {
stats.classList.add("stats");
elem.appendChild(stats);
if (puzzle.downloads > 0) {
if (
puzzle.downloads > 3 &&
!["official", "easy", "medium", "hard"].includes(this.activeCategory)
) {
const difficulty = document.createElement("div");
difficulty.classList.add("difficulty");
@@ -198,14 +222,15 @@ export class PuzzleMenuState extends TextualGameState {
difficulty.innerText = completionPercentage + "%";
stats.appendChild(difficulty);
if (completionPercentage < 10) {
if (completionPercentage < 40) {
difficulty.classList.add("stage--hard");
} else if (completionPercentage < 30) {
difficulty.innerText = T.puzzleMenu.difficulties.hard;
} else if (completionPercentage < 80) {
difficulty.classList.add("stage--medium");
} else if (completionPercentage < 60) {
difficulty.classList.add("stage--normal");
difficulty.innerText = T.puzzleMenu.difficulties.medium;
} else {
difficulty.classList.add("stage--easy");
difficulty.innerText = T.puzzleMenu.difficulties.easy;
}
}
@@ -249,10 +274,6 @@ export class PuzzleMenuState extends TextualGameState {
* @returns {Promise<import("../savegame/savegame_typedefs").PuzzleMetadata[]>}
*/
getPuzzlesForCategory(category) {
if (category === "levels") {
return Promise.resolve(BUILTIN_PUZZLES);
}
const result = this.app.clientApi.apiListPuzzles(category);
return result.catch(err => {
logger.error("Failed to get", category, ":", err);
@@ -300,24 +321,28 @@ export class PuzzleMenuState extends TextualGameState {
}
onEnter(payload) {
this.selectCategory(lastCategory);
// Find old category
let rootCategory = "categories";
for (const [id, children] of Object.entries(navigation)) {
if (children.includes(lastCategory)) {
rootCategory = id;
break;
}
}
this.selectRootCategory(rootCategory, lastCategory);
if (payload && payload.error) {
this.dialogs.showWarning(payload.error.title, payload.error.desc);
}
for (const category of categories) {
const button = this.htmlElement.querySelector(`[data-category="${category}"]`);
this.trackClicks(button, () => this.selectCategory(category));
for (const rootCategory of Object.keys(navigation)) {
const button = this.htmlElement.querySelector(`[data-root-category="${rootCategory}"]`);
this.trackClicks(button, () => this.selectRootCategory(rootCategory));
}
this.trackClicks(this.htmlElement.querySelector("button.createPuzzle"), () => this.createNewPuzzle());
this.trackClicks(this.htmlElement.querySelector("button.loadPuzzle"), () => this.loadPuzzle());
if (G_IS_DEV && globalConfig.debug.testPuzzleMode) {
// this.createNewPuzzle();
this.playPuzzle(SAMPLE_PUZZLE);
}
}
createEmptySavegame() {