From 8dd5b0af4e41ce1536feb58145386dbd47cda66a Mon Sep 17 00:00:00 2001
From: Sergey Bugaev <bugaevc@serenityos.org>
Date: Tue, 18 Aug 2020 16:20:43 +0300
Subject: [PATCH] 2048: Move score to a status bar

See how straightforward this was? That's because, thanks to the separation
between the model and the view, we can tweak the view without modifying the
model in any way.
---
 Games/2048/BoardView.cpp | 26 ++------------------------
 Games/2048/BoardView.h   |  4 ----
 Games/2048/main.cpp      | 12 +++++++++---
 3 files changed, 11 insertions(+), 31 deletions(-)

diff --git a/Games/2048/BoardView.cpp b/Games/2048/BoardView.cpp
index f3e3524665..7978bd5a16 100644
--- a/Games/2048/BoardView.cpp
+++ b/Games/2048/BoardView.cpp
@@ -39,16 +39,6 @@ BoardView::~BoardView()
 {
 }
 
-void BoardView::set_score(size_t score)
-{
-    if (m_score == score && !m_score_text.is_null())
-        return;
-
-    m_score = score;
-    m_score_text = String::format("Score: %d", score);
-    update();
-}
-
 void BoardView::set_board(const Game::Board* board)
 {
     if (m_board == board)
@@ -82,12 +72,6 @@ void BoardView::pick_font()
     set_font(font);
 }
 
-Gfx::IntRect BoardView::score_rect() const
-{
-    int score_width = font().width(m_score_text);
-    return { 0, 2, score_width, font().glyph_height() };
-}
-
 size_t BoardView::rows() const
 {
     if (!m_board)
@@ -106,12 +90,10 @@ size_t BoardView::columns() const
 
 void BoardView::resize_event(GUI::ResizeEvent&)
 {
-    int score_height = font().glyph_height() + 2;
-
     constexpr float padding_ratio = 7;
     m_padding = min(
         width() / (columns() * (padding_ratio + 1) + 1),
-        (height() - score_height) / (rows() * (padding_ratio + 1) + 1));
+        height() / (rows() * (padding_ratio + 1) + 1));
     m_cell_size = m_padding * padding_ratio;
 
     pick_font();
@@ -195,17 +177,13 @@ void BoardView::paint_event(GUI::PaintEvent&)
     }
     auto& board = *m_board;
 
-    painter.draw_text(score_rect(), m_score_text, font(), Gfx::TextAlignment::TopLeft, palette().color(ColorRole::BaseText));
-
-    int score_height = font().glyph_height() + 2;
-
     Gfx::IntRect field_rect {
         0,
         0,
         static_cast<int>(m_padding + (m_cell_size + m_padding) * columns()),
         static_cast<int>(m_padding + (m_cell_size + m_padding) * rows())
     };
-    field_rect.center_within({ 0, score_height, width(), height() - score_height });
+    field_rect.center_within(rect());
     painter.fill_rect(field_rect, background_color);
 
     for (size_t column = 0; column < columns(); ++column) {
diff --git a/Games/2048/BoardView.h b/Games/2048/BoardView.h
index ce3af0cdff..87b28da00a 100644
--- a/Games/2048/BoardView.h
+++ b/Games/2048/BoardView.h
@@ -36,7 +36,6 @@ public:
     BoardView(const Game::Board*);
     virtual ~BoardView() override;
 
-    void set_score(size_t score);
     void set_board(const Game::Board* board);
 
     Function<void(Game::Direction)> on_move;
@@ -50,7 +49,6 @@ private:
     size_t columns() const;
 
     void pick_font();
-    Gfx::IntRect score_rect() const;
 
     Color background_color_for_cell(u32 value);
     Color text_color_for_cell(u32 value);
@@ -58,7 +56,5 @@ private:
     float m_padding { 0 };
     float m_cell_size { 0 };
 
-    size_t m_score { 0 };
-    String m_score_text;
     const Game::Board* m_board { nullptr };
 };
diff --git a/Games/2048/main.cpp b/Games/2048/main.cpp
index 5132788848..8b1f7f1a03 100644
--- a/Games/2048/main.cpp
+++ b/Games/2048/main.cpp
@@ -34,6 +34,7 @@
 #include <LibGUI/Menu.h>
 #include <LibGUI/MenuBar.h>
 #include <LibGUI/MessageBox.h>
+#include <LibGUI/StatusBar.h>
 #include <LibGUI/Window.h>
 #include <stdio.h>
 #include <time.h>
@@ -70,15 +71,20 @@ int main(int argc, char** argv)
     window->set_title("2048");
     window->resize(324, 336);
 
+    auto& main_widget = window->set_main_widget<GUI::Widget>();
+    main_widget.set_layout<GUI::VerticalBoxLayout>();
+    main_widget.set_fill_with_background_color(true);
+
     Game game { 4, 4 };
 
-    auto& board_view = window->set_main_widget<BoardView>(&game.board());
-    board_view.set_fill_with_background_color(true);
+    auto& board_view = main_widget.add<BoardView>(&game.board());
+    board_view.set_focus(true);
+    auto& statusbar = main_widget.add<GUI::StatusBar>();
 
     auto update = [&]() {
         board_view.set_board(&game.board());
-        board_view.set_score(game.score());
         board_view.update();
+        statusbar.set_text(String::format("Score: %d", game.score()));
     };
 
     update();