Add some flair/polish to countdown

ext/depzip.jsonc

@@ -2,7 +2,7 @@
   "packages": [
     {
       "uri": "karnkaul/le2d",
-      "branch": "v0.4.7"
+      "branch": "v0.4.8"
     }
   ]
 }

lib/include/chomper/runtimes/game.hpp

@@ -3,13 +3,15 @@
 #include "chomper/engine.hpp"
 #include "chomper/player.hpp"
 #include "chomper/runtime.hpp"
+#include "chomper/ui/countdown.hpp"
 #include "chomper/world.hpp"
 #include <klib/ptr.hpp>
 #include <le2d/drawable/text.hpp>
 #include <le2d/input/action.hpp>
 #include <le2d/input/scoped_mapping.hpp>
 #include <le2d/random.hpp>
 #include <le2d/resource/texture.hpp>
+#include <optional>
 #include <unordered_set>
 
 namespace chomper::runtime {
@@ -57,7 +59,6 @@ class Game : public IRuntime, public klib::Pinned {
 
 	std::vector<int> m_emptyTiles{};
 
-	le::drawable::Text m_countdownText{};
-	kvf::Seconds m_countdown{3};
+	std::optional<ui::Countdown> m_countdown{};
 };
 } // namespace chomper::runtime

lib/include/chomper/theme.hpp

@@ -0,0 +1,6 @@
+#pragma once
+#include <kvf/color.hpp>
+
+namespace chomper::theme {
+constexpr auto clearColor_v = kvf::Color{glm::vec4{.34f, .54f, .2f, 1.f}};
+} // namespace chomper::theme

lib/include/chomper/ui/countdown.hpp

@@ -0,0 +1,34 @@
+#pragma once
+#include "le2d/drawable/shape.hpp"
+#include "le2d/drawable/text.hpp"
+#include <kvf/time.hpp>
+
+namespace chomper::ui {
+class Countdown {
+  public:
+	static constexpr auto textHeight_v = le::TextHeight{120};
+
+	explicit Countdown(gsl::not_null<le::IFont*> font, le::TextHeight textHeight = textHeight_v, kvf::Seconds timer = 3s);
+
+	[[nodiscard]] auto getRemain() const -> kvf::Seconds {
+		return m_remain;
+	}
+
+	void tick(kvf::Seconds dt);
+	void draw(le::IRenderer& renderer) const;
+
+  private:
+	void setTimerText(std::chrono::seconds value);
+	void updateSector();
+
+	gsl::not_null<le::IFont*> m_font;
+	le::TextHeight m_textHeight{};
+
+	le::drawable::Sector m_sector{};
+	le::drawable::Circle m_background{};
+	le::drawable::Text m_text{};
+
+	kvf::Seconds m_timer{};
+	kvf::Seconds m_remain{};
+};
+} // namespace chomper::ui

lib/src/engine.cpp

@@ -2,6 +2,7 @@
 #include "chomper/build_version.hpp"
 #include "chomper/inclusive_range.hpp"
 #include "chomper/runtimes/entrypoint.hpp"
+#include "chomper/theme.hpp"
 #include "chomper/viewport.hpp"
 #include <imgui.h>
 #include <klib/assert.hpp>
@@ -12,8 +13,6 @@
 
 namespace chomper {
 namespace {
-constexpr auto clearColor_v = kvf::Color{glm::vec4{.34f, .54f, .2f, 1.f}};
-
 std::unique_ptr<IRuntime> createEntrypoint(Engine& engine) {
 	return std::make_unique<runtime::Entrypoint>(&engine);
 }
@@ -52,7 +51,7 @@ void Engine::run() {
 		m_runtime->tick(scaledDt);
 
 		// render runtime.
-		auto& renderer = m_context->begin_render(clearColor_v);
+		auto& renderer = m_context->begin_render(theme::clearColor_v);
 		renderer.viewport = viewport_v;
 		renderer.polygon_mode = m_runtimeState.wireframe ? vk::PolygonMode::eLine : vk::PolygonMode::eFill;
 

lib/src/runtimes/game.cpp

@@ -9,11 +9,9 @@
 
 namespace chomper::runtime {
 namespace {
-constexpr auto countdownParams_v = le::drawable::Text::Params{
-	.height = le::TextHeight{60},
-};
 constexpr auto collectibleAmount_v = 10;
 } // namespace
+
 using ActionValue = le::input::action::Value;
 
 Game::Game(gsl::not_null<Engine*> engine) : m_engine(engine), m_mapping(&engine->getInputRouter()) {
@@ -24,7 +22,7 @@ Game::Game(gsl::not_null<Engine*> engine) : m_engine(engine), m_mapping(&engine-
 
 	spawnCollectibles();
 
-	m_countdownText.set_string(engine->getResources().getMainFont(), "3", countdownParams_v);
+	m_countdown.emplace(&engine->getResources().getMainFont());
 }
 
 void Game::tick(kvf::Seconds const dt) {
@@ -34,9 +32,11 @@ void Game::tick(kvf::Seconds const dt) {
 	}
 	ImGui::End();
 
-	if (m_countdown.count() > 0) {
-		m_countdown -= dt;
-		m_countdownText.set_string(m_engine->getResources().getMainFont(), std::format("{}", static_cast<int>(m_countdown.count() + 1)), countdownParams_v);
+	if (m_countdown) {
+		m_countdown->tick(dt);
+		if (m_countdown->getRemain() <= 0s) {
+			m_countdown.reset();
+		}
 		return;
 	}
 
@@ -56,8 +56,8 @@ void Game::render(le::IRenderer& renderer) const {
 		collectible.draw(renderer);
 	}
 	m_player->draw(renderer);
-	if (m_countdown.count() > 0) {
-		m_countdownText.draw(renderer);
+	if (m_countdown) {
+		m_countdown->draw(renderer);
 	}
 }
 

lib/src/ui/countdown.cpp

@@ -0,0 +1,66 @@
+#include "chomper/ui/countdown.hpp"
+#include "chomper/theme.hpp"
+#include <klib/assert.hpp>
+
+namespace chomper::ui {
+Countdown::Countdown(gsl::not_null<le::IFont*> font, le::TextHeight const textHeight, kvf::Seconds const timer)
+	: m_font(font), m_textHeight(textHeight), m_timer(timer), m_remain(timer) {
+	auto const diameter = float(m_textHeight) + 30.0f;
+	m_background.create(diameter);
+	m_background.tint = theme::clearColor_v;
+}
+
+void Countdown::tick(kvf::Seconds const dt) {
+	if (m_remain <= 0s) {
+		return;
+	}
+
+	auto const prevSeconds = std::chrono::duration_cast<std::chrono::seconds>(m_remain);
+	m_remain -= dt;
+	auto const currSeconds = std::chrono::duration_cast<std::chrono::seconds>(m_remain);
+	if (prevSeconds > currSeconds) {
+		setTimerText(currSeconds + 1s);
+	}
+
+	updateSector();
+}
+
+void Countdown::draw(le::IRenderer& renderer) const {
+	if (m_remain <= 0s) {
+		return;
+	}
+
+	m_sector.draw(renderer);
+	m_background.draw(renderer);
+	m_text.draw(renderer);
+}
+
+void Countdown::setTimerText(std::chrono::seconds const value) {
+	auto const params = le::drawable::Text::Params{
+		.height = m_textHeight,
+		.expand = le::drawable::TextExpand::eBoth,
+	};
+	auto const text = std::format("{}", value.count());
+	m_text.set_string(*m_font, text, params);
+
+	// technically this isn't correct y-centering because parts of glyphs can be above/below the baseline,
+	// and Text::get_size() is insufficient to adjust for that.
+	// here, since each displayed glyph (0-9) is entirely above the baseline (unlike say 'g'),
+	// it can be pushed down by half the size and it will "look" consistently y-centered.
+	// this is what is known as a "hack".
+	m_text.transform.position.y = -0.5f * m_text.get_size().y;
+}
+
+void Countdown::updateSector() {
+	KLIB_ASSERT(m_timer > 0s);
+	auto const ratio = m_remain / m_timer;
+	static constexpr auto degreesBegin_v{90.0f};
+	auto const degreesEnd = degreesBegin_v + (ratio * 360.0f);
+	auto const diameter = m_background.get_diameter() + 30.0f;
+	auto const sectorParams = le::shape::Sector::Params{
+		.degrees_begin = degreesBegin_v,
+		.degrees_end = degreesEnd,
+	};
+	m_sector.create(diameter, sectorParams);
+}
+} // namespace chomper::ui