Layout fix (#16)

* Fix layout issue

* Remove view debug

source/scenes/gameplay/PPCanvas.cpp

@@ -1,11 +1,7 @@
 #include "PPCanvas.h"
 
 #define PADDING 0
-#define PALETTE_PADDING 120
 #define MAX_QUEUE 6
-#define OFFSET_FROM_TOP 240
-#define ADD_OFFSET_PER_ROW 240
-#define OFFSCREEN_ANIMATION_OFFSET 50
 #define EASING STRONG_OUT
 #define DURATION 0.5
 #define MINI_SCALE 0.75
@@ -25,19 +21,21 @@ void Canvas::_setup(const asset_t &assets, const vec<Color4> &colors,
                     const ptr<Timer> &timer, uint queueInd, uint numOfQueues) {
     _timer = timer;
 
-    float containerWidth = getWidth() - PALETTE_PADDING;
+    float containerWidth = getWidth();
     float laneWidth = containerWidth / MAX_QUEUE;
     float laneX =
         (containerWidth - laneWidth * numOfQueues) / 2 +
-        laneWidth / 2 + laneWidth * queueInd + PALETTE_PADDING;
+        laneWidth / 2 + laneWidth * queueInd;
     float canvasSize = laneWidth - PADDING * 2;
+    _yForActive = getHeight() * .05f;
+    _yForStandBy = _yForActive + getHeight() * .45f;
+    _startingY = _yForStandBy + getHeight() * .1f;
+    _yAfterLeaving = _yForActive - getHeight() * .1f;
 
     _block = CanvasBlock::alloc(assets, canvasSize, colors);
     _block->setScale(MINI_SCALE, MINI_SCALE);
-    _block->setAnchor(Vec2::ANCHOR_CENTER);
-    _block->setPosition(
-        laneX,
-        getHeight() - OFFSET_FROM_TOP + OFFSCREEN_ANIMATION_OFFSET);
+    _block->setAnchor(Vec2::ANCHOR_BOTTOM_CENTER);
+    _block->setPosition(laneX, _startingY);
     _block->setColor(Color4(255, 255, 255, 0));
     addChild(_block);
     _previousState = HIDDEN;
@@ -57,11 +55,9 @@ void Canvas::update(CanvasState state, const vec<uint> &canvasColors) {
 
         // Set y of block depending on state.
         if (state != _previousState) {
-            float targetY = getHeight() - OFFSET_FROM_TOP;
-            if (state == ACTIVE) targetY -= ADD_OFFSET_PER_ROW;
             Animation::alloc(_block, DURATION, {
-                {"y", targetY},
-                {"opacity", 1},
+                {"y", state == ACTIVE ? _yForActive : _yForStandBy},
+                {"opacity", state == ACTIVE ? 1 : .75f},
                 {"scaleX", state == ACTIVE ? 1 : MINI_SCALE},
                 {"scaleY", state == ACTIVE ? 1 : MINI_SCALE},
             }, EASING);
@@ -78,7 +74,7 @@ void Canvas::update(CanvasState state, const vec<uint> &canvasColors) {
             _block->markLost();
         }
         Animation::alloc(_block, DURATION, {
-            {"y", getHeight() - OFFSET_FROM_TOP - ADD_OFFSET_PER_ROW - OFFSCREEN_ANIMATION_OFFSET},
+            {"y", _yAfterLeaving},
             {"opacity", 0},
         }, EASING);
     }

source/scenes/gameplay/PPCanvas.h

@@ -14,6 +14,11 @@
  */
 class Canvas : public SceneNode {
 private:
+    float _startingY;
+    float _yForStandBy;
+    float _yForActive;
+    float _yAfterLeaving;
+
     /** Block */
     ptr<CanvasBlock> _block;
 

source/scenes/gameplay/PPCanvasBlock.cpp

@@ -14,7 +14,12 @@ ptr<CanvasBlock> CanvasBlock::alloc(
 }
 
 void CanvasBlock::_setup(const asset_t &assets, const vec<Color4>& colors) {
-
+#ifdef VIEW_DEBUG
+    auto n = PolygonNode::alloc(Rect(Vec2::ZERO, getContentSize()));
+    n->setColor(Color4f(0, 1, 0, .3));
+    addChild(n);
+#endif
+
     string characters[] = {"panda", "bird-1", "bird-2", "cat-1", "cat-2", "dog-1", "dog-2", "dog-3", "frog", "octopus"};
 
     int p = rand() % NUM_CHARACTERS;
@@ -38,12 +43,11 @@ void CanvasBlock::_setup(const asset_t &assets, const vec<Color4>& colors) {
     addChild(_talk_bubble);
 
     // Color strip
-    _colorStrip = ColorStrip::alloc(assets, colors);
+    _colorStrip = ColorStrip::alloc(_talk_bubble->getWidth() * .22f, assets, colors);
     _colorStrip->setAnchor(Vec2::ANCHOR_CENTER);
     auto bubbleBox = _talk_bubble->getBoundingBox();
     _colorStrip->setPosition(bubbleBox.getMidX(), bubbleBox.getMidY() + 10);
     addChild(_colorStrip);
-
 
     // Timer label
     _timerText = scene2::Label::alloc("", assets->get<Font>("roboto"));
@@ -52,7 +56,6 @@ void CanvasBlock::_setup(const asset_t &assets, const vec<Color4>& colors) {
     _timerText->setPosition(getWidth() / 2, 35);
     addChild(_timerText);
 
-
     _hoverAllowed = true;
 }
 

source/scenes/gameplay/PPColorStrip.cpp

@@ -1,14 +1,10 @@
 #include "PPColorStrip.h"
 
-/** Size of each dot. */
-#define COLOR_SIZE 30
-
-/** Space between dots. */
-#define PADDING 2
-
-ptr<ColorStrip> ColorStrip::alloc(const asset_t& assets,
-                                  const vec<Color4> &colors) {
-    auto result = make_shared<ColorStrip>(assets, colors);
+ptr<ColorStrip> ColorStrip::alloc(
+        uint size,
+        const asset_t& assets,
+        const vec<Color4> &colors) {
+    auto result = make_shared<ColorStrip>(size, assets, colors);
     return (result->init() ? result : nullptr);
 }
 
@@ -25,15 +21,15 @@ void ColorStrip::update(const vec<uint> &canvasColors) {
         auto colorTexture = _assets->get<Texture>("color-circle");
         auto bg = PolygonNode::allocWithTexture(colorTexture);
         bg->setAnchor(Vec2::ANCHOR_BOTTOM_LEFT);
-        bg->setContentSize(COLOR_SIZE, COLOR_SIZE);
+        bg->setContentSize(_size, _size);
 
         float leftMostX =
-            (-PADDING * ((float)_lastNumberOfColors - 1) -
-                (float)_lastNumberOfColors * COLOR_SIZE) / 2;
+            (-(_size * 0.3f) * ((float)_lastNumberOfColors - 1) -
+                (float)_lastNumberOfColors * _size) / 2;
 
         bg->setPosition(
-            leftMostX + (float)(PADDING + COLOR_SIZE) * (float)i,
-            -(float)COLOR_SIZE / 2);
+            leftMostX + (float)((_size * 0.3f) + _size) * (float)i,
+            -(float)_size / 2);
         bg->setColor(_colors[canvasColors[i]]);
 
         addChild(bg);

source/scenes/gameplay/PPColorStrip.h

@@ -16,20 +16,24 @@ class ColorStrip : public SceneNode {
      */
     uint _lastNumberOfColors;
 
+    uint _size;
+
     /** Color list. */
     const vec<Color4> _colors;
 
     const asset_t &_assets;
 
 public:
     /** @deprecated Constructor. */
-    explicit ColorStrip(const asset_t &assets, const vec<Color4> &colors) :
+    explicit ColorStrip(uint size, const asset_t &assets, const vec<Color4> &colors) :
             SceneNode(), _lastNumberOfColors(0),
-            _colors(colors), _assets(assets) {};
+            _colors(colors), _assets(assets), _size(size) {};
 
     /** Allocate a color strip. */
-    static ptr<ColorStrip> alloc(const asset_t &assets,
-                                 const vec<Color4> &colors);
+    static ptr<ColorStrip> alloc(
+            uint size,
+            const asset_t &assets,
+            const vec<Color4> &colors);
 
     /**
      * Update the color strip.

source/scenes/gameplay/PPGameScene.cpp

@@ -2,6 +2,8 @@
 #include <ctime>
 
 #define ANIMATION_RELATIVE 10000000
+#define PALETTE_WIDTH .1f
+#define TIMER_HEIGHT .1f
 
 void GameScene::dispose() {
     Scene2::dispose();
@@ -37,26 +39,36 @@ void GameScene::loadLevel(const char *levelName) {
     for (uint i = 0, j = _state.numQueues(); i < j; i++) {
         vec<ptr<Canvas>> queue;
         for (int i2 = (int) (_state.numCanvases(i)) - 1; i2 >= 0; i2--) {
+            auto bound = Application::get()->getSafeBounds();
+            bound.origin.x += PALETTE_WIDTH * bound.size.width;
+            bound.size.width *= (1 - PALETTE_WIDTH);
+            bound.size.height *= (1 - TIMER_HEIGHT);
             auto c = Canvas::alloc(
                 _assets,
                 _state.getColors(),
                 _state.getTimer(i, i2),
                 i, j,
-                Application::get()->getDisplayBounds()
+                bound
             );
             addChild(c);
             queue.insert(queue.begin(), 1, c);
         }
         _canvases.push_back(queue);
     }
 
-    _globalTimer = GlobalTimer::alloc(_assets, screenSize);
+    auto gtBound = Application::get()->getSafeBounds();
+    gtBound.origin.y += (1 - TIMER_HEIGHT) * gtBound.size.height;
+    gtBound.size.height *= TIMER_HEIGHT;
+    _globalTimer = GlobalTimer::alloc(_assets, gtBound);
 
     // change position to keep it to the left of the screen.
     _palette =
         ColorPalette::alloc(Rect(
             safeArea.origin,
-            Size(safeArea.size.width * .15f, safeArea.size.height)
+            Size(
+                safeArea.size.width * PALETTE_WIDTH,
+                safeArea.size.height * (1 - TIMER_HEIGHT)
+            )
         ), _state.getColors(), _assets);
 
     addChild(_globalTimer);

source/scenes/gameplay/PPGlobalTimer.cpp

@@ -2,23 +2,30 @@
 
 ptr<GlobalTimer> GlobalTimer::alloc(
     const asset_t &assets,
-    const Size entireScreen) {
+    const Rect &bounds) {
     auto result = make_shared<GlobalTimer>(assets);
-    if (result->initWithBounds(entireScreen))
+    if (result->initWithBounds(bounds))
         result->_setup();
     else
         return nullptr;
     return result;
 }
 
 void GlobalTimer::_setup() {
+#ifdef VIEW_DEBUG
+    auto n = PolygonNode::alloc(Rect(Vec2::ZERO, getContentSize()));
+    n->setColor(Color4f(0, 1, 1, .3));
+    addChild(n);
+#endif
+
     // Level timer label.
-    _levelTimerText = Label::alloc("1", _assets->get<Font>("jua"));
-    _levelTimerText->setHorizontalAlignment(Label::HAlign::LEFT);
-    _levelTimerText->setVerticalAlignment(Label::VAlign::TOP);
-    _levelTimerText->setPosition(getWidth() - 140, getHeight() - 50);
+//    auto font = _assets->get<Font>("jua");
+//    _levelTimerText = Label::alloc("1", font);
+//    _levelTimerText->setHorizontalAlignment(Label::HAlign::LEFT);
+//    _levelTimerText->setVerticalAlignment(Label::VAlign::TOP);
+//    _levelTimerText->setPosition(getWidth() - 140, getHeight() - 50);
 
-    Rect boundingRect = Rect(0, getHeight() - 30, getWidth() - 150, 40);
+    Rect boundingRect = Rect(0, getHeight() - 30, getWidth(), 40);
     _levelProgressBarBackground = PolygonNode::allocWithTexture(_assets->get<Texture>("level-timer-background"), boundingRect);
     _levelProgressBarBackground->setAnchor(Vec2::ANCHOR_MIDDLE_LEFT);
     _levelProgressBarBackground->setPosition(0, getHeight() - 30);
@@ -27,15 +34,15 @@ void GlobalTimer::_setup() {
     _levelProgressBar->setAnchor(Vec2::ANCHOR_MIDDLE_LEFT);
     _levelProgressBar->setPosition(0, getHeight() - 30);
 
-    _progressBarWidth = getWidth() - 150;
+    _progressBarWidth = getWidth();
 
     addChild(_levelProgressBarBackground);
     addChild(_levelProgressBar);
-    addChild(_levelTimerText);
+//    addChild(_levelTimerText);
 }
 
 void GlobalTimer::update(const ptr<Timer> &levelTimer) {
-    _levelTimerText->setText(levelTimer->formatTime());
+//    _levelTimerText->setText(levelTimer->formatTime());
     float progress = levelTimer->timeLeft() / levelTimer->getDuration();
     _levelProgressBar->setContentSize(progress * _progressBarWidth, 40);
 }

source/scenes/gameplay/PPGlobalTimer.h

@@ -24,7 +24,7 @@ class GlobalTimer : public SceneNode {
 
     static ptr<GlobalTimer> alloc(
         const asset_t &assets,
-        Size entireScreen);
+        const Rect &bounds);
 
     void update(const ptr<Timer> &levelTimer);
 };