Skip to content

Commit 21ec616

Browse files
troys-codetroys-code
authored
Merge pull request #2 from troys-code/feature/style-tweaks
Feature/style tweaks
2 parents 62622c2 + cf70ace commit 21ec616

7 files changed

Lines changed: 187 additions & 240 deletions

File tree

‎client/components/Nav.jsx‎

Lines changed: 16 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, { Component } from 'react'
1+
import { Component } from 'react'
22
import cookie from 'react-cookie'
33
import SkyLight from 'react-skylight'
4-
import classNames from 'classnames'
54
import levels from '../levels'
65

7-
class Nav extends Component {
6+
export default class Nav extends Component {
87
handleKeyPress (e) {
98
if (e.which === 27) {
109
this.refs.storyBox.hide()
@@ -29,25 +28,10 @@ class Nav extends Component {
2928
}
3029

3130
render () {
32-
let modalLeft = '50%'
33-
if (window.innerWidth < 600) {
34-
modalLeft = '41%'
35-
}
36-
const storyAndInstructionsStyle = {
37-
backgroundColor: '#00897B',
38-
color: '#ffffff',
39-
borderRadius: '2%',
40-
padding: '0 30px 0 30px',
41-
overflowY: 'auto'
42-
}
31+
const levelsModalLeft = window.innerWidth < 600 ? '41%' : '50%'
4332
const levelsModalStyle = {
44-
backgroundColor: '#00897B',
45-
color: '#ffffff',
4633
width: '50%',
47-
borderRadius: '2%',
48-
padding: '0 30px 0 30px',
49-
overflowY: 'auto',
50-
left: modalLeft
34+
left: levelsModalLeft
5135
}
5236
return (
5337
<div className='navigation'>
@@ -60,14 +44,13 @@ class Nav extends Component {
6044
<div className='levels' onClick={() => this.refs.levelSelect.show()}>{'Level ' + this.props.currentLevel}</div>
6145
<SkyLight hideOnOverlayClicked ref='levelSelect' dialogStyles={levelsModalStyle}>
6246
<div className='about-backstory level-select-container'>
63-
<h3 className={classNames('modal-heading', 'about-backstory')}>Select a level</h3>
47+
<h3 className='modal-heading'>Select a level</h3>
6448
{
6549
Object.keys(levels).map((levelNum, index) => {
6650
return (
6751
<div
6852
key={index}
6953
className='level-select'
70-
7154
onClick={() => { this.props.setLevel(levelNum); this.refs.levelSelect.hide() }}
7255
>
7356
<p>{'Level ' + levelNum}</p>
@@ -81,10 +64,10 @@ class Nav extends Component {
8164
<div className='sound' onClick={this.props.toggleSound}>
8265
{this.props.sound ? <i className='fa fa-volume-up fa-lg' /> : <i className='fa fa-volume-off fa-lg' />}
8366
</div>
84-
<SkyLight hideOnOverlayClicked ref='storyBox' dialogStyles={storyAndInstructionsStyle}>
67+
<SkyLight hideOnOverlayClicked ref='storyBox'>
8568
<div className='about-backstory'>
8669
<img src='/resources/images/intro-b3.svg' className='intro-b3' />
87-
<h3 className={classNames('modal-heading', 'about-backstory')}>Beep Boop</h3>
70+
<h3 className='modal-heading'>Beep Boop</h3>
8871
<p>B3 Just powered up...</p>
8972
<p>B3 is a retired helper bot. It has just woken up on board an abandoned freight space ship that is on a collision course with Earth!</p>
9073
<p>Help B3 get through the ship to the control room so that it can divert the ship's course and save the human race!</p>
@@ -98,20 +81,19 @@ class Nav extends Component {
9881
</div>
9982
</div>
10083
</SkyLight>
101-
<SkyLight hideOnOverlayClicked ref='howToPlayBox' dialogStyles={storyAndInstructionsStyle}>
84+
<SkyLight hideOnOverlayClicked ref='howToPlayBox'>
10285
<div className='about-backstory'>
103-
<h3 className={classNames('modal-heading', 'about-backstory')}>Your Mission</h3>
86+
<h3 className='modal-heading'>Your Mission</h3>
10487
<p>Get B3 <img src='/resources/images/b3-robot.svg' className='how-to-small' /> to the elevator <img src='/resources/images/elevator-top.svg' className='how-to-small' /> on each level. </p>
10588
<p>B3 has a limited number of moves for each level. Use your moves wisely! </p>
10689
<p>Use the control buttons to queue up some commands. Press 'GO' and B3 will follow your commands!</p>
107-
<div className='controls-container'>
108-
<h3 className={classNames('modal-heading', 'about-backstory')}>Controls</h3>
109-
<p>Use <img src='/resources/images/go-button.svg' className='control-small' /> to move B3 forward.</p>
110-
<p>Use <img src='/resources/images/rotate-left-button.svg' className='control-small' /> and <img src='/resources/images/rotate-right-button.svg' className='control-small' /> to rotate B3 left and right.</p>
111-
<p>Use <img src='/resources/images/jump-button.svg' className='how-to-small' /> to jump B3 on to a box.</p>
112-
<p>Remove a queued command by clicking on it.</p>
113-
<p>You must jump from box to box. Avoid holes in the ground.</p>
114-
</div>
90+
91+
<h3 className='modal-heading'>Controls</h3>
92+
<p>Use <img src='/resources/images/go-button.svg' className='control-small' /> to move B3 forward.</p>
93+
<p>Use <img src='/resources/images/rotate-left-button.svg' className='control-small' /> and <img src='/resources/images/rotate-right-button.svg' className='control-small' /> to rotate B3 left and right.</p>
94+
<p>Use <img src='/resources/images/jump-button.svg' className='how-to-small' /> to jump B3 on to a box.</p>
95+
<p>Remove a queued command by clicking on it.</p>
96+
<p>You must jump from box to box. Avoid holes in the ground.</p>
11597
<br />
11698
<div className='modal-button-container'>
11799
<a className='modal-button modal-animate how-to-action' onClick={() => { this.refs.howToPlayBox.hide() }}>
@@ -125,5 +107,3 @@ class Nav extends Component {
125107
)
126108
}
127109
}
128-
129-
export default Nav

‎client/scss/board.scss‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use './colors';
2+
@use './zindex';
23

34
#board {
45
width: 70%;
@@ -13,10 +14,6 @@
1314
width: 100%;
1415
height: 48%;
1516
}
16-
@media screen and (max-width: 320px) {
17-
width: 100%;
18-
height: 44%;
19-
}
2017
}
2118

2219
.board-background {
@@ -92,6 +89,7 @@
9289
}
9390

9491
.tile {
92+
z-index: zindex.$z-tile;
9593
display: flex;
9694
justify-content: center;
9795
align-content: center;
@@ -117,22 +115,27 @@
117115
}
118116

119117
.clear {
120-
background: rgba(0,0,0,0.0);
118+
background: transparent;
121119
padding-bottom: 1%;
122-
border-bottom: 2vh solid rgba(0,0,0,0.0);
120+
border-bottom: 2vh solid transparent;
121+
}
122+
123+
/* Have to put the black hole zindex on the tile
124+
* to make it render below surrounding tiles */
125+
.clear:has(> .hole) {
126+
z-index: zindex.$z-black-hole;
123127
}
124128

125129
.hole {
126130
width: 105%;
127-
-webkit-animation: spin 0.5s infinite linear;
131+
animation: spin 1.2s infinite linear;
128132
}
129-
@-webkit-keyframes spin {
133+
@keyframes spin {
130134
0% {
131-
-webkit-transform: rotate(0deg);
135+
transform: rotate(0deg);
132136
}
133-
134137
100% {
135-
-webkit-transform: rotate(360deg);
138+
transform: rotate(360deg);
136139
}
137140
}
138141

@@ -188,7 +191,8 @@
188191
}
189192

190193
.box-tile {
191-
width: 93%;
194+
z-index: zindex.$z-box;
195+
width: 90%;
192196
margin-bottom: 7%;
193197
}
194198

@@ -204,16 +208,13 @@
204208
margin-bottom: 10%;
205209
top: 0;
206210
position: relative;
207-
-webkit-animation-name: fadeOutUp; /* Chrome, Safari, Opera */
208-
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
209-
animation-name: fadeOutUp;;
210-
animation-duration: 4s;
211+
animation-name: fadeOutUp;
212+
animation-duration: 4s;
211213

212214
@keyframes fadeOutUp {
213215
from {
214216
opacity: 1;
215217
}
216-
217218
to {
218219
opacity: 0;
219220
transform: translate3d(0, -100%, 0);

‎client/scss/commandPane.scss‎

Lines changed: 47 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
$actionButtonElevation: 7px;
44

55
.command-pane {
6-
display:flex;
6+
display: flex;
77
box-sizing: border-box;
88
width: 30%;
99
height: 90%;
@@ -23,63 +23,65 @@ $actionButtonElevation: 7px;
2323
}
2424

2525
.command-queue {
26-
width: 100%;
27-
display: flex;
28-
flex-direction: row;
29-
flex-wrap: wrap;
30-
align-items: flex-start;
31-
overflow-y: scroll;
32-
26+
width: 100%;
27+
display: flex;
28+
flex-direction: row;
29+
flex-wrap: wrap;
30+
align-items: flex-start;
31+
overflow-y: scroll;
3332
}
3433

3534
.command-queue::-webkit-scrollbar-track {
36-
border-radius: 10px;
37-
background-color: rgba(0,0,0,0.0);
35+
border-radius: 10px;
36+
background-color: rgba(0, 0, 0, 0.0);
3837
}
3938

4039
.command-queue::-webkit-scrollbar {
41-
width: 12px;
42-
background-color: rgba(0,0,0,0.0);
40+
width: 12px;
41+
background-color: rgba(0, 0, 0, 0.0);
4342
}
4443

4544
.command-queue::-webkit-scrollbar-thumb {
46-
border-radius: 10px;
47-
background-color: colors.$blue-darkest;
45+
border-radius: 10px;
46+
background-color: colors.$blue-darkest;
4847
}
48+
4949
.moves-left {
50-
line-height: 100%;
51-
font-size: 21px;
52-
color: white;
50+
line-height: 100%;
51+
font-size: 21px;
52+
color: white;
53+
text-shadow: 0px -2px rgba(0, 0, 0, 0.2);
5354

54-
@media screen and (max-width: 850px){
55-
line-height: 0%;
56-
}
55+
@media screen and (max-width: 850px) {
56+
line-height: 0%;
57+
}
5758
}
59+
5860
.command-container {
59-
height: 28%;
60-
width: 80%;
61-
display:flex;
62-
flex-direction: column;
63-
flex-wrap: nowrap;
64-
justify-content: flex-start;
65-
align-content: flex-start;
66-
align-items: flex-start;
67-
border-left: 7px solid colors.$blue-darkest;
68-
border-top: 7px solid colors.$blue-darkest;
69-
background: colors.$blue-darker;
70-
border-radius: 10px;
71-
overflow-y: scroll;
61+
height: 28%;
62+
width: 80%;
63+
display: flex;
64+
flex-direction: column;
65+
flex-wrap: nowrap;
66+
justify-content: flex-start;
67+
align-content: flex-start;
68+
align-items: flex-start;
69+
border-left: 7px solid colors.$blue-darkest;
70+
border-top: 7px solid colors.$blue-darkest;
71+
background: colors.$blue-darker;
72+
border-radius: 10px;
73+
overflow-y: scroll;
7274

73-
@media screen and (max-width: 850px) {
74-
height: 20%;
75-
width: 93%;
76-
}
75+
@media screen and (max-width: 850px) {
76+
height: 20%;
77+
width: 93%;
78+
}
7779
}
7880

7981
.runButtons-container {
8082
height: 30%;
8183
width: 80%;
82-
display:flex;
84+
display: flex;
8385
flex-direction: row;
8486
flex-wrap: nowrap;
8587
justify-content: center;
@@ -97,28 +99,12 @@ $actionButtonElevation: 7px;
9799
width: 58%;
98100
border-top: none;
99101
}
100-
101-
@media screen and (max-width: 320px) {
102-
height: 29%;
103-
}
104-
}
105-
106-
107-
.moves-left {
108-
line-height: 100%;
109-
font-size: 21px;
110-
color: white;
111-
text-shadow: 0px -2px rgba(0, 0, 0, 0.2);
112-
113-
@media screen and (max-width: 850px){
114-
line-height: 0%;
115-
}
116102
}
117103

118104
.action-button-container {
119105
height: 20%;
120106
width: 80%;
121-
display:flex;
107+
display: flex;
122108
flex-direction: row;
123109
flex-wrap: nowrap;
124110
justify-content: center;
@@ -147,20 +133,10 @@ $actionButtonElevation: 7px;
147133
background: colors.$white-dark;
148134
border-bottom: $actionButtonElevation solid #a4a4a4;
149135

150-
@media screen and (max-width: 1400px) {
151-
height: 50%;
152-
width: 50%;
153-
}
154-
155136
@media screen and (max-width: 1200px) {
156-
height: 21%;
157-
width: 79%;
158-
}
159-
160-
@media screen and (max-width: 1000px) {
161-
height: 15%;
162-
width: 79%;
163-
margin: -78px -8px 6px 9px;
137+
margin: 9px 0 6px 9px;
138+
height: 37px;
139+
width: 70px;
164140
}
165141

166142
@media screen and (max-width: 850px) {
@@ -184,16 +160,6 @@ $actionButtonElevation: 7px;
184160
background: colors.$orange;
185161
border-bottom: $actionButtonElevation solid colors.$orange-dark;
186162
}
187-
.moves-left {
188-
line-height: 100%;
189-
font-size: 21px;
190-
color: white;
191-
text-shadow: 0px -2px rgba(0, 0, 0, 0.2);
192-
193-
@media screen and (max-width: 850px){
194-
line-height: 0%;
195-
}
196-
}
197163

198164
.action-rotate:hover {
199165
background: #ee9272;
@@ -216,9 +182,9 @@ $actionButtonElevation: 7px;
216182
}
217183

218184
.action-button:active {
219-
transform: translate(0px,$actionButtonElevation);
220-
-webkit-transform: translate(0px,$actionButtonElevation);
185+
transform: translate(0px, $actionButtonElevation);
186+
-webkit-transform: translate(0px, $actionButtonElevation);
221187
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
222188
}
223189
}
224-
}
190+
}

0 commit comments

Comments
 (0)