From d3b4e1071b1595f184266a6d95775c000e45b499 Mon Sep 17 00:00:00 2001
From: Lfu001 <82690385+Lfu001@users.noreply.github.com>
Date: Fri, 20 Sep 2024 00:58:19 +0900
Subject: [PATCH] feat: add sample scene (#35)

---
 tears/MainScene.cpp | 240 +++++++++++++++++++++++++++++++++++---------
 tears/MainScene.hpp |  10 ++
 2 files changed, 202 insertions(+), 48 deletions(-)

diff --git a/tears/MainScene.cpp b/tears/MainScene.cpp
index 01cb251..0e1ac8e 100644
--- a/tears/MainScene.cpp
+++ b/tears/MainScene.cpp
@@ -6,6 +6,8 @@
 //  Copyright © 2024 tears team. All rights reserved.
 //
 
+#include <random>
+#include "math/Interval.hpp"
 #include "view/container/HStack.hpp"
 #include "view/container/VStack.hpp"
 #include "view/container/ZStack.hpp"
@@ -14,9 +16,7 @@
 #include "view/separator/Spacer.hpp"
 #include "view/shape/Capsule.hpp"
 #include "view/shape/Circle.hpp"
-#include "view/shape/Ellipse.hpp"
 #include "view/shape/Rectangle.hpp"
-#include "view/shape/RoundedRectangle.hpp"
 #include "MainScene.hpp"
 
 namespace tears {
@@ -25,60 +25,204 @@ using namespace std;
 
 // constructor
 MainScene::MainScene(TearsEngine* aEngine, Size screenSize): Scene(aEngine, screenSize) {
-    auto roundedRect = make_unique<RoundedRectangle>(24.f);
-    roundedRect->setBackgroundColor(Color(100, 200, 248, 200));
-    auto circle = make_unique<Circle>();
-    circle->setBackgroundColor(Color::YELLOW, EdgeLeading)
-        .setBackgroundColor(Color::GREEN, EdgeTrailing)
-        .setPadding(EdgeAll, 15.f)
-        .setOffsetX(50.f);
-    auto zstack = make_unique<ZStack>(std::move(roundedRect), std::move(circle));
-    zstack->setWidth(300.f).setPadding(EdgeBottom, 20.f);
-
-    auto capsule = make_unique<Capsule>();
-    capsule->setBackgroundColor(Color(233, 255, 138, 200)).setHeight(40.f);
-    auto hstack = make_unique<HStack>(std::move(zstack), std::move(capsule));
-    hstack->setHeight(200.f);
-
-    auto ellipse = make_unique<Ellipse>();
-    ellipse->setBackgroundColor(Color(255, 148, 148, 200))
-        .setSize(300.f, 100.f)
-        .setPadding(EdgeBottom, 10.f);
-    auto rectangle = make_unique<Rectangle>();
-    rectangle->setBackgroundColor(Color(255, 174, 0, 200)).setSize(200.f, 100.f);
+    unique_ptr<View> heading = createHeading();
+    heading->setHeightRatio(0.3f);
 
+    unique_ptr<View> content = createContent();
+
+    unique_ptr<View> footer = createFooter();
+    footer->setHeight(70.f);
+
+    auto vstack = make_unique<VStack>(std::move(heading), std::move(content), std::move(footer));
+
+    addChild(std::move(vstack));
+}
+
+// destructor
+MainScene::~MainScene() {}
+
+unique_ptr<View> MainScene::createHeading() const {
+    // title
+    auto title = make_unique<Capsule>();
+    title->setBackgroundColor(Color(255, 255, 255))
+        .setHeight(24.f)
+        .setWidthRatio(0.7f)
+        .setPadding(EdgeBottom, 20.f)
+        .setAlignment(AlignmentLeading);
+
+    // text
+    Color textColor = Color(240, 240, 240);
+    auto textArea = make_unique<VStack>(
+        std::move(title),
+        createText(Interval(0.7f, 1.f), textColor),
+        createText(Interval(0.7f, 1.f), textColor),
+        createText(Interval(0.3f, 0.7f), textColor),
+        make_unique<Spacer>());
+    textArea->setWidthRatio(0.7f);
+
+    // user icon
+    auto userIcon = make_unique<Circle>();
+    userIcon->setBackgroundColor(Color(255, 255, 255))
+        .setSize(30.f, 30.f)
+        .setAlignment(AlignmentTop);
+
+    // button
+    auto buttonBg = make_unique<Capsule>();
+    buttonBg->setBackgroundColor(Color(255, 255, 255, 150)).setBlurSigma(20.f);
     auto button = make_unique<Button>([]() {
         cout << "button tapped!" << endl;
     });
-    auto bg = make_unique<RoundedRectangle>();
-    bg->setBackgroundColor(Color::BLUE);
-    button->setBackground(std::move(bg));
+    button->setBackground(std::move(buttonBg));
+    button->setSize(100.f, 35.f).setAlignment(AlignmentTrailing).setPadding(EdgeBottom, 8.f);
 
-    auto hstack2 = make_unique<HStack>(
-        make_unique<Circle>(),
-        make_unique<Divider>(),
-        make_unique<Circle>(),
-        make_unique<Divider>(),
-        make_unique<Circle>(),
-        make_unique<Divider>(),
-        std::move(button));
-    hstack2->setHeight(100.f);
+    // background
+    auto background = make_unique<Rectangle>();
+    background->setBackgroundColor(Color(224, 222, 150))
+        .setBackgroundColor(Color(192, 245, 164), EdgeTopTrailing)
+        .setBackgroundColor(Color(255, 200, 135), EdgeBottomLeading);
 
-    auto vstack = make_unique<VStack>(
-        std::move(hstack),
-        std::move(ellipse),
+    auto noLayoutArea = make_unique<View>();
+    noLayoutArea->setHeight(60.f).setAlignment(AlignmentTop);
+
+    auto hstack =
+        make_unique<HStack>(std::move(textArea), make_unique<Spacer>(), std::move(userIcon));
+
+    auto vstack =
+        make_unique<VStack>(std::move(noLayoutArea), std::move(hstack), std::move(button));
+    vstack->setPadding(EdgeBottom, 10.f).setPadding(EdgeHorizontal, 20.f);
+
+    auto zstack = make_unique<ZStack>(std::move(background), std::move(vstack));
+    return zstack;
+}
+
+unique_ptr<View> MainScene::createContent() const {
+    // background
+    auto background = make_unique<Rectangle>();
+    background->setBackgroundColor(Color(240, 240, 240));
+
+    // widget with image and text
+    unique_ptr<View> imageWidget = createImageWidget();
+    imageWidget->setPadding(EdgeBottom, 8.f);
+
+    // widgets with text
+    unique_ptr<View> textWidget1 = createTextWidget();
+    textWidget1->setPadding(EdgeTrailing, 8.f);
+    unique_ptr<View> textWidget2 = createTextWidget();
+
+    auto hstack = make_unique<HStack>(std::move(textWidget1), std::move(textWidget2));
+    auto vstack = make_unique<VStack>(std::move(imageWidget), std::move(hstack));
+    vstack->setPadding(EdgeAll, 20.f);
+
+    return make_unique<ZStack>(std::move(background), std::move(vstack));
+}
+
+unique_ptr<View> MainScene::createFooter() const {
+    // background
+    auto background = make_unique<Rectangle>();
+    background->setBackgroundColor(Color::WHITE);
+
+    // icons
+    auto makeIcon = []() {
+        auto icon = make_unique<Circle>();
+        icon->setBackgroundColor(Color(230, 230, 230)).setSize(24.f, 24.f);
+        return icon;
+    };
+
+    auto noLayoutArea = make_unique<View>();
+    noLayoutArea->setHeight(20.f);
+
+    auto hstack = make_unique<HStack>(
+        make_unique<Spacer>(),
+        makeIcon(),
+        make_unique<Spacer>(),
+        makeIcon(),
         make_unique<Spacer>(),
-        std::move(hstack2),
-        std::move(rectangle));
-    vstack->setHeight(700.f).setPadding(EdgeHorizontal, 10.f);
-
-    auto glass = make_unique<Rectangle>();
-    glass->setBackgroundColor(Color(36, 36, 36, 50)).setBlurSigma(150).setHeight(300.f);
-    auto frame = make_unique<ZStack>(std::move(vstack), std::move(glass));
-    addChild(std::move(frame));
+        makeIcon(),
+        make_unique<Spacer>());
+
+    auto vstack = make_unique<VStack>(std::move(hstack), std::move(noLayoutArea));
+
+    return make_unique<ZStack>(std::move(background), std::move(vstack));
 }
 
-// destructor
-MainScene::~MainScene() {}
+unique_ptr<View> MainScene::createText(Interval widthInterval, Color color) const {
+    static mt19937 engine;
+    std::uniform_real_distribution<float> dist1(widthInterval.left, widthInterval.right);
+
+    float widthRatio = dist1(engine);
+    auto text = make_unique<Capsule>();
+    text->setBackgroundColor(color)
+        .setHeight(20.f)
+        .setWidthRatio(widthRatio)
+        .setPadding(EdgeTop, 6.f)
+        .setAlignment(AlignmentLeading);
+    return text;
+}
+
+unique_ptr<View> MainScene::createTextWidget() const {
+    // background
+    auto background = make_unique<RoundedRectangle>();
+    background->setBackgroundColor(Color::WHITE);
+
+    // title
+    auto title = make_unique<Capsule>();
+    title->setBackgroundColor(Color(180, 180, 180))
+        .setHeight(24.f)
+        .setWidthRatio(0.6f)
+        .setPadding(EdgeBottom, 8.f)
+        .setAlignment(AlignmentLeading);
+
+    // text
+    Color textColor(200, 200, 200);
+    auto vstack = make_unique<VStack>(
+        std::move(title),
+        make_unique<Divider>(),
+        createText(Interval(0.7f, 1.f), textColor),
+        createText(Interval(0.7f, 1.f), textColor),
+        createText(Interval(0.7f, 1.f), textColor),
+        createText(Interval(0.7f, 1.f), textColor),
+        createText(Interval(0.3f, 0.7f), textColor),
+        make_unique<Spacer>());
+    vstack->setPadding(EdgeAll, 16.f);
+
+    return make_unique<ZStack>(std::move(background), std::move(vstack));
+}
+
+unique_ptr<View> MainScene::createImageWidget() const {
+    // background
+    auto background = make_unique<RoundedRectangle>();
+    background->setBackgroundColor(Color::WHITE);
+
+    // title
+    auto title = make_unique<Capsule>();
+    title->setBackgroundColor(Color(180, 180, 180))
+        .setHeight(24.f)
+        .setWidthRatio(0.6f)
+        .setPadding(EdgeBottom, 8.f)
+        .setAlignment(AlignmentLeading);
+
+    // text area
+    Color textColor(200, 200, 200);
+    auto vstack = make_unique<VStack>(
+        std::move(title),
+        make_unique<Divider>(),
+        createText(Interval(0.7f, 1.f), textColor),
+        createText(Interval(0.7f, 1.f), textColor),
+        createText(Interval(0.7f, 1.f), textColor),
+        createText(Interval(0.3f, 0.7f), textColor),
+        make_unique<Spacer>());
+
+    // image
+    auto image = make_unique<RoundedRectangle>();
+    image->setCornerRadius(16.f)
+        .setBackgroundColor(Color(230, 230, 230))
+        .setWidth(150.f)
+        .setPadding(EdgeLeading, 16.f);
+
+    auto hstack = make_unique<HStack>(std::move(vstack), std::move(image));
+    hstack->setPadding(EdgeAll, 16.f);
+
+    return make_unique<ZStack>(std::move(background), std::move(hstack));
+}
 
 }    // namespace tears
diff --git a/tears/MainScene.hpp b/tears/MainScene.hpp
index 868fb9f..699736b 100644
--- a/tears/MainScene.hpp
+++ b/tears/MainScene.hpp
@@ -13,8 +13,18 @@
 
 namespace tears {
 
+class Interval;
+
 /// the first scene displayed after the application is launched
 class MainScene: public Scene {
+protected:
+    unique_ptr<View> createHeading() const;
+    unique_ptr<View> createContent() const;
+    unique_ptr<View> createFooter() const;
+    unique_ptr<View> createText(Interval widthInterval, Color color) const;
+    unique_ptr<View> createTextWidget() const;
+    unique_ptr<View> createImageWidget() const;
+
 public:
     /// constructor
     MainScene(TearsEngine* aEngine, Size screenSize);