diff --git a/res/ui/memes/cat1.png b/res/ui/memes/cat1.png new file mode 100644 index 00000000..114c3fa0 Binary files /dev/null and b/res/ui/memes/cat1.png differ diff --git a/src/css/ingame_hud/cat_memes.scss b/src/css/ingame_hud/cat_memes.scss new file mode 100644 index 00000000..ddb0ae3f --- /dev/null +++ b/src/css/ingame_hud/cat_memes.scss @@ -0,0 +1,23 @@ +#ingame_HUD_CatMemes { + position: absolute; + @include S(width, 150px); + @include S(height, 150px); + background: transparent center center / contain no-repeat; + + right: 0; + @include S(bottom, 150px); + + & { + /* @load-async */ + background-image: uiResource("res/ui/memes/cat1.png") !important; + } + + @include InlineAnimation(0.5s ease-in-out) { + 0% { + transform: translateX(100%); + } + 100% { + transform: none; + } + } +} diff --git a/src/css/main.scss b/src/css/main.scss index 9e26fa95..5c4686e9 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -53,6 +53,7 @@ @import "ingame_hud/shape_viewer"; @import "ingame_hud/sandbox_controller"; @import "ingame_hud/standalone_advantages"; +@import "ingame_hud/cat_memes"; // prettier-ignore $elements: @@ -74,7 +75,7 @@ ingame_HUD_DebugInfo, ingame_HUD_EntityDebugger, ingame_HUD_InteractiveTutorial, ingame_HUD_TutorialHints, -ingame_HUD_buildings_toolbar, +ingame_HUD_BuildingsToolbar, ingame_HUD_wires_toolbar, ingame_HUD_BlueprintPlacer, ingame_HUD_Waypoints_Hint, @@ -93,7 +94,8 @@ ingame_HUD_ShapeViewer, ingame_HUD_StandaloneAdvantages, ingame_HUD_UnlockNotification, ingame_HUD_SettingsMenu, -ingame_HUD_ModalDialogs; +ingame_HUD_ModalDialogs, +ingame_HUD_CatMemes; $zindex: 100; diff --git a/src/js/game/hud/hud.js b/src/js/game/hud/hud.js index 189654c1..9033b3cc 100644 --- a/src/js/game/hud/hud.js +++ b/src/js/game/hud/hud.js @@ -47,6 +47,7 @@ import { HUDMinerHighlight } from "./parts/miner_highlight"; import { HUDBetaOverlay } from "./parts/beta_overlay"; import { HUDPerformanceWarning } from "./parts/performance_warning"; import { HUDStandaloneAdvantages } from "./parts/standalone_advantages"; +import { HUDCatMemes } from "./parts/cat_memes"; export class GameHUD { /** @@ -118,6 +119,7 @@ export class GameHUD { if (IS_DEMO) { this.parts.watermark = new HUDWatermark(this.root); this.parts.standaloneAdvantages = new HUDStandaloneAdvantages(this.root); + this.parts.catMemes = new HUDCatMemes(this.root); } if (G_IS_DEV && globalConfig.debug.renderChanges) { diff --git a/src/js/game/hud/parts/buildings_toolbar.js b/src/js/game/hud/parts/buildings_toolbar.js index b492f291..05ffc795 100644 --- a/src/js/game/hud/parts/buildings_toolbar.js +++ b/src/js/game/hud/parts/buildings_toolbar.js @@ -42,7 +42,7 @@ export class HUDBuildingsToolbar extends HUDBaseToolbar { ], visibilityCondition: () => !this.root.camera.getIsMapOverlayActive() && this.root.currentLayer === "regular", - htmlElementId: "ingame_HUD_buildings_toolbar", + htmlElementId: "ingame_HUD_BuildingsToolbar", }); } } diff --git a/src/js/game/hud/parts/cat_memes.js b/src/js/game/hud/parts/cat_memes.js new file mode 100644 index 00000000..f3af2be4 --- /dev/null +++ b/src/js/game/hud/parts/cat_memes.js @@ -0,0 +1,21 @@ +import { makeDiv } from "../../../core/utils"; +import { BaseHUDPart } from "../base_hud_part"; +import { DynamicDomAttach } from "../dynamic_dom_attach"; + +const memeShowIntervalSeconds = 70 * 60; +const memeShowDuration = 5; + +export class HUDCatMemes extends BaseHUDPart { + createElements(parent) { + this.element = makeDiv(parent, "ingame_HUD_CatMemes"); + } + + initialize() { + this.domAttach = new DynamicDomAttach(this.root, this.element); + } + + update() { + const now = this.root.time.realtimeNow(); + this.domAttach.update(now % memeShowIntervalSeconds > memeShowIntervalSeconds - memeShowDuration); + } +}