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