Section 5

Drop Shadow Around Game Board and Add Dividier-Bar in Control Panel

Another cosmetic change is to add a slight drop shadow around the game board morph. Modify the following method.

makeGameBoardMorph
    | boardMorph |
    boardMorph := SketchMorph withForm: self boardForm.
    boardMorph name: 'board'.
    boardMorph
        on: #mouseUp send: #mouseUp:forMorph: to: self;
        on: #mouseDown send: #mouseDown:forMorph: to: self;
        on: #mouseEnter send: #mouseEnter:forMorph: to: self;
        on: #mouseLeave send: #mouseLeave:forMorph: to: self;
        on: #mouseMove send: #mouseMoveWhileButtonDown:forMorph: to: self.
    boardMorph
        hasDropShadow: true;
        shadowOffset: 3@3;
        shadowColor: (Color r: 0.25 g: 0.25 b: 0.254).
    ^boardMorph

The last cosmetic change we are introducing now is to add a small divider bar in the control panel just above our collection of buttons. Add this new instance method.

makePanelDividerMorph
    | divider |
    divider := RectangleMorph new.
    divider
        layoutPolicy: ProportionalLayout new;
        borderWidth: 2;
        borderStyle: (BorderStyle complexRaised width: 3);
        color: Color gray;
        fillStyle: ((GradientFillStyle ramp:
                    {0.0->(Color r: 0.847 g: 0.847 b: 0.85).
                    1.0->(Color r: 0.972 g: 0.972 b: 0.976)})
                        origin: 30@400;
                        direction: 0@40;
                        normal: 50@0;
                        radial: false
                    ).
    ^divider

To use that new morph we will need this new method too.

addDividerBarToPanel: panel
    | layout offset |
    offset := -105.
    layout := LayoutFrame
        fractions: (0 @ 1 corner: 0 @ 1)
        offsets: (10@offset corner: (self panelWidth - 10)@(offset + 5)).
    panel addMorph: self makePanelDividerMorph fullFrame: layout.
    ^panel

The next step is to incorporate the morph into the control panel. Modify the following method.

makeControlPanelMorph
    | panel |
    panel := RectangleMorph new borderWidth: 0;
                 color: Color transparent;
                 layoutPolicy: ProportionalLayout new.
    self addButtonsToPanel: panel.
    self addCountersToPanel: panel.
    self addDividerBarToPanel: panel.
    ^panel

Index Page Next Page

Copyright © 2007, 2008, 2009, 2010 Stephan B Wessels    stevewessels@me.com