Skip to content

Commit 64f23ef

Browse files
sbates-idrcsbates-idrc
authored
Merge pull request #458 from sbates-idrc/update-background-characters
Update background characters to make the direction clearer (fixes #415)
2 parents e7a647b + afa82e1 commit 64f23ef

80 files changed

Lines changed: 1034 additions & 1492 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/ProgramBlockEditor.js‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import ProgramSequence from './ProgramSequence';
1919
import ToggleSwitch from './ToggleSwitch';
2020
import { ReactComponent as AddIcon } from './svg/Add.svg';
2121
import { ReactComponent as DeleteAllIcon } from './svg/DeleteAll.svg';
22-
import { getWorldCharacter } from './Worlds';
2322
import './ProgramBlockEditor.scss';
2423

2524
// TODO: Send focus to Delete toggle button on close of Delete All confirmation
@@ -754,8 +753,6 @@ export class ProgramBlockEditor extends React.Component<ProgramBlockEditorProps,
754753
const contents = this.renderProgramSections();
755754
contents.push(this.makeEndOfProgramAddNodeSection(this.props.programSequence.getProgramLength()));
756755

757-
const character = getWorldCharacter(this.props.theme, this.props.world);
758-
759756
return (
760757
<div className='ProgramBlockEditor__container'>
761758
<div className='ProgramBlockEditor__header'>
@@ -788,18 +785,6 @@ export class ProgramBlockEditor extends React.Component<ProgramBlockEditorProps,
788785
</span>
789786
</div>
790787
</div>
791-
<div className='ProgramBlockEditor__character-column'>
792-
<div
793-
aria-hidden='true'
794-
className={`ProgramBlockEditor__character-column-character-container
795-
ProgramBlockEditor__character-column-character-container--${this.props.world}`}
796-
role='img'>
797-
{React.createElement(
798-
character,
799-
{ className: 'ProgramBlockEditor__character-column-character' }
800-
)}
801-
</div>
802-
</div>
803788
<div
804789
className={'ProgramBlockEditor__program-sequence-scroll-container' + (!this.props.editingDisabled && this.props.isDraggingCommand ? ' ProgramBlockEditor__program-sequence-scroll-container--isDragging': '') }
805790
ref={this.programSequenceContainerRef}

‎src/ProgramBlockEditor.scss‎

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@
1212
border-radius: 3px;
1313
display: grid;
1414
height: 100%;
15-
grid-template-columns: 3rem auto;
15+
grid-template-columns: auto;
1616
grid-template-rows: min-content auto;
1717
}
1818

1919
.ProgramBlockEditor__header {
2020
background-color: #CCE6E2;
2121
display: grid;
2222
grid-column-start: 1;
23-
grid-column-end: 3;
23+
grid-column-end: 2;
2424
grid-row-start: 1;
2525
grid-row-end: 2;
2626
grid-template-columns: auto auto;
@@ -95,37 +95,12 @@
9595
height: 1.4rem;
9696
}
9797

98-
.ProgramBlockEditor__character-column {
99-
align-items: center;
100-
background-color: #30444E;
101-
border-right: 1px solid #19282F;
102-
border-radius: 3px 0 0 3px;
103-
box-shadow: 2px 0px 1px #8F8F8F;
104-
display: flex;
105-
justify-content: center;
106-
padding: 0 0.5rem;
107-
}
108-
109-
.ProgramBlockEditor__character-column-character-container {
110-
box-sizing: border-box;
111-
height: 45px;
112-
width: 45px;
113-
border-radius: 4px;
114-
border: 2px solid #22343C;
115-
}
116-
117-
.ProgramBlockEditor__character-column-character {
118-
width: 2.5rem;
119-
height: 2.5rem;
120-
padding: 0.4rem;
121-
}
122-
12398
.ProgramBlockEditor__program-sequence-scroll-container {
12499
border-radius: 0 3px 3px 0px;
125100
display: grid;
126101
grid-template-rows: auto 9rem auto;
127-
grid-column-start: 2;
128-
grid-column-end: 3;
102+
grid-column-start: 1;
103+
grid-column-end: 2;
129104
grid-row-start: 2;
130105
grid-row-end: 3;
131106
background: #FFF;

‎src/Scene.js‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ class Scene extends React.Component<SceneProps, {}> {
292292
world={this.props.world}
293293
/>
294294
<StartIndicator
295-
className='Scene__startIndicator'
295+
className={`Scene__startIndicator Scene__startIndicator--${this.props.world}`}
296296
aria-hidden={true}
297297
// The centre of the starting square is (startingX, startingY).
298298
// Calculate the top left corner of the indicator
@@ -303,22 +303,7 @@ class Scene extends React.Component<SceneProps, {}> {
303303
width={startIndicatorWidth}
304304
height={startIndicatorWidth}
305305
/>
306-
{(!this.props.customBackgroundDesignMode && this.props.theme === 'contrast') &&
307-
<circle
308-
className='Scene__characterOutline'
309-
cx={this.props.characterState.xPos}
310-
cy={this.props.characterState.yPos}
311-
r={0.51}
312-
/>
313-
}
314-
{!this.props.customBackgroundDesignMode &&
315-
<SceneCharacter
316-
characterState={this.props.characterState}
317-
theme={this.props.theme}
318-
world={this.props.world}
319-
/>
320-
}
321-
{this.props.customBackgroundDesignMode &&
306+
{this.props.customBackgroundDesignMode ?
322307
<PaintbrushCursor
323308
className='Scene__designModeCursor'
324309
aria-hidden={true}
@@ -327,6 +312,20 @@ class Scene extends React.Component<SceneProps, {}> {
327312
width={1}
328313
height={1}
329314
/>
315+
:
316+
<React.Fragment>
317+
<circle
318+
className={`Scene__characterOutline Scene__characterOutline--${this.props.world}`}
319+
cx={this.props.characterState.xPos}
320+
cy={this.props.characterState.yPos}
321+
r={0.51}
322+
/>
323+
<SceneCharacter
324+
characterState={this.props.characterState}
325+
theme={this.props.theme}
326+
world={this.props.world}
327+
/>
328+
</React.Fragment>
330329
}
331330
</g>
332331
</svg>

‎src/Scene.scss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,6 @@ $c2lc-scene-top-offset: 20px;
102102
font-size: 2.2px;
103103
}
104104

105-
.Scene__startIndicator .start-indicator-outer-circle {
106-
fill: #1E1E1E;
107-
}
108-
109105
.Scene__startIndicator .start-indicator-inner-circle {
110106
fill: #4C9990;
111107
}
@@ -118,7 +114,3 @@ $c2lc-scene-top-offset: 20px;
118114
stroke-width: 0.05;
119115
stroke-linecap: round;
120116
}
121-
122-
.Scene__characterOutline {
123-
fill: #FF0000;
124-
}

‎src/Scene.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -233,10 +233,10 @@ describe('The ARIA label should tell there is a character with its position', ()
233233

234234
test.each([
235235
// Theme, Design mode, Character, Outline, Design mode cursor
236-
['default', false, true, false, false],
237-
['light', false, true, false, false],
238-
['dark', false, true, false, false],
239-
['gray', false, true, false, false],
236+
['default', false, true, true, false],
237+
['light', false, true, true, false],
238+
['dark', false, true, true, false],
239+
['gray', false, true, true, false],
240240
['contrast', false, true, true, false],
241241
['default', true, false, false, true],
242242
['light', true, false, false, true],

‎src/SceneCharacter.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,11 @@ describe('Right character should render based on world and theme props', () => {
4141
test('DeepOcean', () => {
4242
expect.assertions(3);
4343
const wrapper = createMountSceneCharacter({world: 'DeepOcean'});
44-
expect(findSceneCharacter(wrapper).get(0).type.render().props.children).toBe('Submarine.svg');
44+
expect(findSceneCharacter(wrapper).get(0).type.render().props.children).toBe('DeepOceanSubmarine.svg');
4545
wrapper.setProps({theme: 'gray'});
46-
expect(findSceneCharacter(wrapper).get(0).type.render().props.children).toBe('Submarine-gray.svg');
46+
expect(findSceneCharacter(wrapper).get(0).type.render().props.children).toBe('DeepOceanSubmarine-gray.svg');
4747
wrapper.setProps({theme: 'contrast'});
48-
expect(findSceneCharacter(wrapper).get(0).type.render().props.children).toBe('Submarine-contrast.svg');
48+
expect(findSceneCharacter(wrapper).get(0).type.render().props.children).toBe('DeepOceanSubmarine-contrast.svg');
4949
});
5050
test('Savannah', () => {
5151
expect.assertions(3);

‎src/Themes.scss‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -266,15 +266,6 @@ body.light-theme {
266266
color: #1E1E1E;
267267
}
268268

269-
.ProgramBlockEditor__character-column {
270-
background-color: #EBFAF8;
271-
border-right: 2px solid #D3E7EC;
272-
}
273-
274-
.ProgramBlockEditor__character-column-character-container {
275-
border: 2px solid #818A98;
276-
}
277-
278269
.ProgramBlockEditor__program-sequence-scroll-container {
279270
background-color: white;
280271
}
@@ -710,10 +701,6 @@ body.dark-theme {
710701
border: 2px solid #33717F;
711702
}
712703

713-
.ProgramBlockEditor__character-column {
714-
background-color: #30444E;
715-
}
716-
717704
.ProgramBlockEditor__header {
718705
background-color: #30444E;
719706
color: #EBFAF8;
@@ -1211,10 +1198,6 @@ body.gray-theme {
12111198
fill: #D5D8DD;
12121199
}
12131200

1214-
.Scene__startIndicator .start-indicator-outer-circle {
1215-
fill: #FFFFFF;
1216-
}
1217-
12181201
.Scene__startIndicator .start-indicator-inner-circle {
12191202
fill: #818A98;
12201203
}
@@ -1385,10 +1368,6 @@ body.gray-theme {
13851368
background-color: #D5D8DD;
13861369
}
13871370

1388-
.ProgramBlockEditor__character-column {
1389-
background-color: #F1F2F4;
1390-
}
1391-
13921371
.ProgramBlockEditor__program-sequence-scroll-container {
13931372
background-color: white;
13941373
margin-left: 0.1rem;
@@ -2303,10 +2282,6 @@ body.contrast-theme {
23032282
fill: white;
23042283
}
23052284

2306-
.Scene__startIndicator .start-indicator-outer-circle {
2307-
fill: #FF0000;
2308-
}
2309-
23102285
.Scene__startIndicator .start-indicator-inner-circle {
23112286
fill: #FFFFFF;
23122287
}
@@ -2491,11 +2466,6 @@ body.contrast-theme {
24912466
}
24922467
}
24932468

2494-
.ProgramBlockEditor__character-column {
2495-
background-color: black;
2496-
border-right: 2px solid #9DA4AF;
2497-
}
2498-
24992469
.ProgramBlockEditor__program-sequence-scroll-container {
25002470
background-color: black;
25012471
}

0 commit comments

Comments
 (0)