Untitled

 Certainly! I'll modify the `Renderer` class to incorporate these elements and styling. Here's an updated version of the `render.h` and `render.cpp` files:

`render.h`:

```cpp
#pragma once
#include <SFML/Graphics.hpp>
#include "game.h"

class Renderer {
public:
    Renderer(sf::RenderWindow& window);
    void draw(const Game& game);

private:
    void drawField(const Game& game);
    void drawCurrentPiece(const Game& game);
    void drawNextPiece(const Game& game);
    void drawScore(const Game& game);
    void drawGameOver();
    void initializeUI();

    sf::RenderWindow& window;
    sf::Texture tileTexture, backgroundTexture, frameTexture;
    sf::Sprite tileSprite, frameSprite;
    sf::RectangleShape background;
    sf::Font font;
    sf::Text scoreText, highScoreText, text1, text2, gameOverText, playAgainText;
    sf::RectangleShape playfieldBoundary, nextTempoBoundary, scoreBoundary, highScoreBoundary;
    sf::RectangleShape gridLines[23 * 10]; // Assuming gridWidth = 10 and gridHeight = 23

    const int windowWidth = 720;
    const int windowHeight = 960;
    const int blockSize = 36; // 18 * 2
    const int playfieldWidth = 180;
    const int playfieldHeight = 360;
    const int boundaryThickness = 4;
};
```

`render.cpp`:

```cpp
#include "render.h"

Renderer::Renderer(sf::RenderWindow& window) : window(window) {
    tileTexture.loadFromFile("images/tiles.png");
    backgroundTexture.loadFromFile("images/background.png");
    frameTexture.loadFromFile("images/frame.png");

    tileSprite.setTexture(tileTexture);
    frameSprite.setTexture(frameTexture);
    tileSprite.setScale(2, 2);

    background.setSize(sf::Vector2f(windowWidth, windowHeight));
    background.setFillColor(sf::Color(200, 220, 255, 180));

    font.loadFromFile("Roboto-Regular.ttf");

    initializeUI();
}

void Renderer::initializeUI() {
    scoreText.setFont(font);
    highScoreText.setFont(font);
    text1.setFont(font);
    text2.setFont(font);
    gameOverText.setFont(font);
    playAgainText.setFont(font);

    text1.setString("Score");
    text2.setString("High");

    sf::Color textColor(35, 47, 68);
    scoreText.setFillColor(textColor);
    highScoreText.setFillColor(textColor);
    text1.setFillColor(textColor);
    text2.setFillColor(textColor);
    gameOverText.setFillColor(sf::Color::Red);
    playAgainText.setFillColor(textColor);

    scoreText.setCharacterSize(20);
    highScoreText.setCharacterSize(20);
    text1.setCharacterSize(20);
    text2.setCharacterSize(20);
    gameOverText.setCharacterSize(30);
    playAgainText.setCharacterSize(20);

    scoreText.setPosition(250, 20);
    highScoreText.setPosition(250, 50);
    gameOverText.setPosition(40, 220);
    playAgainText.setPosition(70, 260);

    // Initialize grid lines
    for (int i = 3; i < 23; ++i) {
        for (int j = 0; j < 10; ++j) {
            int index = i * 10 + j;
            gridLines[index].setSize(sf::Vector2f(blockSize - 1, blockSize - 1));
            gridLines[index].setFillColor(sf::Color::Transparent);
            gridLines[index].setOutlineThickness(1);
            gridLines[index].setOutlineColor(sf::Color::Black);
            gridLines[index].setPosition(j * blockSize, i * blockSize);
            gridLines[index].move(blockSize, 2 * blockSize);
        }
    }

    // Initialize boundaries
    playfieldBoundary.setSize(sf::Vector2f(playfieldWidth, playfieldHeight));
    playfieldBoundary.setFillColor(sf::Color(200, 220, 255));
    playfieldBoundary.setOutlineThickness(boundaryThickness);
    playfieldBoundary.setOutlineColor(sf::Color(100, 100, 150));
    playfieldBoundary.setPosition(blockSize, 4 * blockSize);
    playfieldBoundary.setScale(2, 2);

    nextTempoBoundary.setSize(sf::Vector2f(playfieldWidth / 1.5f, playfieldHeight / 5.0f));
    nextTempoBoundary.setFillColor(sf::Color(200, 220, 255));
    nextTempoBoundary.setOutlineThickness(boundaryThickness);
    nextTempoBoundary.setOutlineColor(sf::Color(100, 100, 150));
    nextTempoBoundary.setPosition(blockSize + blockSize + playfieldWidth * 2, 4 * blockSize);
    nextTempoBoundary.setScale(2, 2);

    scoreBoundary.setSize(sf::Vector2f(playfieldWidth / 1.5f, playfieldHeight / 12.0f));
    scoreBoundary.setFillColor(sf::Color(200, 220, 255));
    scoreBoundary.setOutlineThickness(boundaryThickness);
    scoreBoundary.setOutlineColor(sf::Color(100, 100, 150));
    scoreBoundary.setPosition(blockSize + blockSize + playfieldWidth * 2, 4 * blockSize + playfieldHeight * 2 / 5 + blockSize);
    scoreBoundary.setScale(2, 2);

    highScoreBoundary.setSize(sf::Vector2f(playfieldWidth / 1.5f, playfieldHeight / 12.0f));
    highScoreBoundary.setFillColor(sf::Color(200, 220, 255));
    highScoreBoundary.setOutlineThickness(boundaryThickness);
    highScoreBoundary.setOutlineColor(sf::Color(100, 100, 150));
    highScoreBoundary.setPosition(blockSize + blockSize + playfieldWidth * 2, 4 * blockSize + playfieldHeight * 2 / 5 + blockSize + playfieldHeight * 2 / 12 + 8);
    highScoreBoundary.setScale(2, 2);

    // Position text elements
    sf::FloatRect scoreRectangleBounds = scoreBoundary.getGlobalBounds();
    sf::FloatRect scoreTextBounds = scoreText.getLocalBounds();
    text1.setOrigin(scoreTextBounds.left + scoreTextBounds.width - 6, scoreTextBounds.top + 12 + scoreTextBounds.height / 2.0f);
    text1.setPosition(scoreRectangleBounds.left, scoreRectangleBounds.top + scoreRectangleBounds.height / 2.0f);
    text1.setScale(2, 2);

    sf::FloatRect highScoreRectangleBounds = highScoreBoundary.getGlobalBounds();
    sf::FloatRect highScoreTextBounds = highScoreText.getLocalBounds();
    text2.setOrigin(highScoreTextBounds.left + highScoreTextBounds.width - 6, highScoreTextBounds.top + 12 + highScoreTextBounds.height / 2.0f);
    text2.setPosition(highScoreRectangleBounds.left, highScoreRectangleBounds.top + highScoreRectangleBounds.height / 2.0f);
    text2.setScale(2, 2);

    sf::FloatRect backgroundBounds = background.getGlobalBounds();
    sf::FloatRect playAgainTextBounds = playAgainText.getLocalBounds();
    playAgainText.setOrigin(playAgainTextBounds.left + playAgainTextBounds.width, playAgainTextBounds.top + 12 + playAgainTextBounds.height / 2.0f);
    playAgainText.setPosition(backgroundBounds.left, backgroundBounds.top + backgroundBounds.height / 2.0f);
    playAgainText.setScale(2, 2);

    scoreText.setOrigin(scoreTextBounds.left + scoreTextBounds.width + 2, scoreTextBounds.top + 12 + scoreTextBounds.height / 2.0f);
    scoreText.setScale(2, 2);
    highScoreText.setOrigin(highScoreTextBounds.left + highScoreTextBounds.width + 2, highScoreTextBounds.top + 12 + highScoreTextBounds.height / 2.0f);
    highScoreText.setScale(2, 2);
}

void Renderer::draw(const Game& game) {
    window.clear(sf::Color::White);
    window.draw(background);
    window.draw(playfieldBoundary);
    window.draw(nextTempoBoundary);
    window.draw(scoreBoundary);
    window.draw(highScoreBoundary);

    drawField(game);
    drawCurrentPiece(game);
    drawNextPiece(game);
    drawScore(game);

    window.draw(text1);
    window.draw(text2);

    if (game.gameOver) {
        drawGameOver();
    }
}

void Renderer::drawField(const Game& game) {
    for (int i = 3; i < M; i++) {
        for (int j = 0; j < N; j++) {
            if (game.field[i][j] == 0) continue;
            tileSprite.setTextureRect(sf::IntRect(game.field[i][j] * 18, 0, 18, 18));
            tileSprite.setPosition(j * blockSize, (i - 3) * blockSize);
            tileSprite.move(blockSize, blockSize); // offset
            window.draw(tileSprite);
        }
    }
}

void Renderer::drawCurrentPiece(const Game& game) {
    if (game.isDraw()) {
        for (int i = 0; i < 4; i++) {
            tileSprite.setTextureRect(sf::IntRect(game.currentPiece.colorNum * 18, 0, 18, 18));
            tileSprite.setPosition(game.currentPiece.blocks[i].x * blockSize, (game.currentPiece.blocks[i].y - 3) * blockSize);
            tileSprite.move(blockSize, blockSize); // offset
            window.draw(tileSprite);
        }
    }
}

void Renderer::drawNextPiece(const Game& game) {
    for (int i = 0; i < 4; i++) {
        tileSprite.setTextureRect(sf::IntRect(game.nextPiece.colorNum * 18, 0, 18, 18));
        tileSprite.setPosition(game.nextPiece.blocks[i].x * blockSize + blockSize + blockSize + playfieldWidth * 2,
                               game.nextPiece.blocks[i].y * blockSize + 4 * blockSize);
        window.draw(tileSprite);
    }
}

void Renderer::drawScore(const Game& game) {
    scoreText.setString(std::to_string(game.score.getScore()));
    highScoreText.setString(std::to_string(game.score.getHighScore()));

    sf::FloatRect scoreRectangleBounds = scoreBoundary.getGlobalBounds();
    sf::FloatRect highScoreRectangleBounds = highScoreBoundary.getGlobalBounds();

    int lenScoreText = std::to_string(game.score.getScore()).length();
    int lenHighScoreText = std::to_string(game.score.getHighScore()).length();

    scoreText.setPosition(scoreRectangleBounds.left + scoreRectangleBounds.width - 14 - lenScoreText * 20,
                          scoreRectangleBounds.top + scoreRectangleBounds.height / 2.0f);
    highScoreText.setPosition(highScoreRectangleBounds.left + highScoreRectangleBounds.width - 14 - lenHighScoreText * 20,
                              highScoreRectangleBounds.top + highScoreRectangleBounds.height / 2.0f);

    window.draw(scoreText);
    window.draw(highScoreText);
}

void Renderer::drawGameOver() {
    window.draw(background);
    gameOverText.setString("Game Over!");
    window.draw(gameOverText);
    playAgainText.setString("Press SPACE to Play Again");
    window.draw(playAgainText);
}
```

This implementation of the `Renderer` class incorporates all the UI elements and styling you provided. It initializes all the graphical elements in the constructor and `initializeUI` method, and then uses them in the various draw methods.

You may need to adjust some positions or sizes to fit your exact layout requirements. Also, make sure that all the image files and fonts are in the correct directories relative to your executable.

To use this renderer, you would create an instance of it in your main game loop and call the `draw` method, passing the current game state:

```cpp
Renderer renderer(window);
// ... in game loop
renderer.draw(game);
window.display();
```

This should give you a rendered game that closely matches your original implementation.