diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index d25bac3..e14b2ff 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -1,10 +1,9 @@ -import React, { Component } from 'react' +import { Component } from 'react' import cookie from 'react-cookie' import SkyLight from 'react-skylight' -import classNames from 'classnames' import levels from '../levels' -class Nav extends Component { +export default class Nav extends Component { handleKeyPress (e) { if (e.which === 27) { this.refs.storyBox.hide() @@ -29,25 +28,10 @@ class Nav extends Component { } render () { - let modalLeft = '50%' - if (window.innerWidth < 600) { - modalLeft = '41%' - } - const storyAndInstructionsStyle = { - backgroundColor: '#00897B', - color: '#ffffff', - borderRadius: '2%', - padding: '0 30px 0 30px', - overflowY: 'auto' - } + const levelsModalLeft = window.innerWidth < 600 ? '41%' : '50%' const levelsModalStyle = { - backgroundColor: '#00897B', - color: '#ffffff', width: '50%', - borderRadius: '2%', - padding: '0 30px 0 30px', - overflowY: 'auto', - left: modalLeft + left: levelsModalLeft } return (
@@ -60,14 +44,13 @@ class Nav extends Component {
this.refs.levelSelect.show()}>{'Level ' + this.props.currentLevel}
-

Select a level

+

Select a level

{ Object.keys(levels).map((levelNum, index) => { return (
{ this.props.setLevel(levelNum); this.refs.levelSelect.hide() }} >

{'Level ' + levelNum}

@@ -81,10 +64,10 @@ class Nav extends Component {
{this.props.sound ? : }
- +
-

Beep Boop

+

Beep Boop

B3 Just powered up...

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!

Help B3 get through the ship to the control room so that it can divert the ship's course and save the human race!

@@ -98,20 +81,19 @@ class Nav extends Component {
- +
-

Your Mission

+

Your Mission

Get B3 to the elevator on each level.

B3 has a limited number of moves for each level. Use your moves wisely!

Use the control buttons to queue up some commands. Press 'GO' and B3 will follow your commands!

-
-

Controls

-

Use to move B3 forward.

-

Use and to rotate B3 left and right.

-

Use to jump B3 on to a box.

-

Remove a queued command by clicking on it.

-

You must jump from box to box. Avoid holes in the ground.

-
+ +

Controls

+

Use to move B3 forward.

+

Use and to rotate B3 left and right.

+

Use to jump B3 on to a box.

+

Remove a queued command by clicking on it.

+

You must jump from box to box. Avoid holes in the ground.


{ this.refs.howToPlayBox.hide() }}> @@ -125,5 +107,3 @@ class Nav extends Component { ) } } - -export default Nav diff --git a/client/scss/board.scss b/client/scss/board.scss index 46c31ec..4c97c3f 100644 --- a/client/scss/board.scss +++ b/client/scss/board.scss @@ -1,4 +1,5 @@ @use './colors'; +@use './zindex'; #board { width: 70%; @@ -13,10 +14,6 @@ width: 100%; height: 48%; } - @media screen and (max-width: 320px) { - width: 100%; - height: 44%; - } } .board-background { @@ -92,6 +89,7 @@ } .tile { + z-index: zindex.$z-tile; display: flex; justify-content: center; align-content: center; @@ -117,22 +115,27 @@ } .clear { - background: rgba(0,0,0,0.0); + background: transparent; padding-bottom: 1%; - border-bottom: 2vh solid rgba(0,0,0,0.0); + border-bottom: 2vh solid transparent; + } + + /* Have to put the black hole zindex on the tile + * to make it render below surrounding tiles */ + .clear:has(> .hole) { + z-index: zindex.$z-black-hole; } .hole { width: 105%; - -webkit-animation: spin 0.5s infinite linear; + animation: spin 1.2s infinite linear; } - @-webkit-keyframes spin { + @keyframes spin { 0% { - -webkit-transform: rotate(0deg); + transform: rotate(0deg); } - 100% { - -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } @@ -188,7 +191,8 @@ } .box-tile { - width: 93%; + z-index: zindex.$z-box; + width: 90%; margin-bottom: 7%; } @@ -204,16 +208,13 @@ margin-bottom: 10%; top: 0; position: relative; - -webkit-animation-name: fadeOutUp; /* Chrome, Safari, Opera */ - -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ - animation-name: fadeOutUp;; - animation-duration: 4s; + animation-name: fadeOutUp; + animation-duration: 4s; @keyframes fadeOutUp { from { opacity: 1; } - to { opacity: 0; transform: translate3d(0, -100%, 0); diff --git a/client/scss/commandPane.scss b/client/scss/commandPane.scss index c4d755d..e56ee53 100644 --- a/client/scss/commandPane.scss +++ b/client/scss/commandPane.scss @@ -3,7 +3,7 @@ $actionButtonElevation: 7px; .command-pane { - display:flex; + display: flex; box-sizing: border-box; width: 30%; height: 90%; @@ -23,63 +23,65 @@ $actionButtonElevation: 7px; } .command-queue { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: flex-start; - overflow-y: scroll; - + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + overflow-y: scroll; } .command-queue::-webkit-scrollbar-track { - border-radius: 10px; - background-color: rgba(0,0,0,0.0); + border-radius: 10px; + background-color: rgba(0, 0, 0, 0.0); } .command-queue::-webkit-scrollbar { - width: 12px; - background-color: rgba(0,0,0,0.0); + width: 12px; + background-color: rgba(0, 0, 0, 0.0); } .command-queue::-webkit-scrollbar-thumb { - border-radius: 10px; - background-color: colors.$blue-darkest; + border-radius: 10px; + background-color: colors.$blue-darkest; } + .moves-left { - line-height: 100%; - font-size: 21px; - color: white; + line-height: 100%; + font-size: 21px; + color: white; + text-shadow: 0px -2px rgba(0, 0, 0, 0.2); - @media screen and (max-width: 850px){ - line-height: 0%; - } + @media screen and (max-width: 850px) { + line-height: 0%; + } } + .command-container { - height: 28%; - width: 80%; - display:flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: flex-start; - align-content: flex-start; - align-items: flex-start; - border-left: 7px solid colors.$blue-darkest; - border-top: 7px solid colors.$blue-darkest; - background: colors.$blue-darker; - border-radius: 10px; - overflow-y: scroll; + height: 28%; + width: 80%; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: flex-start; + align-items: flex-start; + border-left: 7px solid colors.$blue-darkest; + border-top: 7px solid colors.$blue-darkest; + background: colors.$blue-darker; + border-radius: 10px; + overflow-y: scroll; - @media screen and (max-width: 850px) { - height: 20%; - width: 93%; - } + @media screen and (max-width: 850px) { + height: 20%; + width: 93%; + } } .runButtons-container { height: 30%; width: 80%; - display:flex; + display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; @@ -97,28 +99,12 @@ $actionButtonElevation: 7px; width: 58%; border-top: none; } - - @media screen and (max-width: 320px) { - height: 29%; - } - } - - - .moves-left { - line-height: 100%; - font-size: 21px; - color: white; - text-shadow: 0px -2px rgba(0, 0, 0, 0.2); - - @media screen and (max-width: 850px){ - line-height: 0%; - } } .action-button-container { height: 20%; width: 80%; - display:flex; + display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; @@ -147,20 +133,10 @@ $actionButtonElevation: 7px; background: colors.$white-dark; border-bottom: $actionButtonElevation solid #a4a4a4; - @media screen and (max-width: 1400px) { - height: 50%; - width: 50%; - } - @media screen and (max-width: 1200px) { - height: 21%; - width: 79%; - } - - @media screen and (max-width: 1000px) { - height: 15%; - width: 79%; - margin: -78px -8px 6px 9px; + margin: 9px 0 6px 9px; + height: 37px; + width: 70px; } @media screen and (max-width: 850px) { @@ -184,16 +160,6 @@ $actionButtonElevation: 7px; background: colors.$orange; border-bottom: $actionButtonElevation solid colors.$orange-dark; } - .moves-left { - line-height: 100%; - font-size: 21px; - color: white; - text-shadow: 0px -2px rgba(0, 0, 0, 0.2); - - @media screen and (max-width: 850px){ - line-height: 0%; - } - } .action-rotate:hover { background: #ee9272; @@ -216,9 +182,9 @@ $actionButtonElevation: 7px; } .action-button:active { - transform: translate(0px,$actionButtonElevation); - -webkit-transform: translate(0px,$actionButtonElevation); + transform: translate(0px, $actionButtonElevation); + -webkit-transform: translate(0px, $actionButtonElevation); border-bottom: 1px solid rgba(0, 0, 0, 0.5); } } -} +} \ No newline at end of file diff --git a/client/scss/main.scss b/client/scss/main.scss index bc3590f..c7f883b 100644 --- a/client/scss/main.scss +++ b/client/scss/main.scss @@ -19,7 +19,8 @@ $text: 'Space Mono', monospace; body { background: colors.$blue; - overflow-y: hidden; + overflow: hidden; + min-width: 330px; } h1 { diff --git a/client/scss/nav.scss b/client/scss/nav.scss index aac768d..8cc8aee 100644 --- a/client/scss/nav.scss +++ b/client/scss/nav.scss @@ -1,4 +1,5 @@ @use './colors'; +@use './zindex'; .navigation { width: 100%; @@ -37,7 +38,7 @@ } .logo-container { - z-index: 1; + z-index: zindex.$z-nav-logo; height: 120%; width: 90%; padding: 2%; @@ -77,14 +78,42 @@ display: flex; flex-wrap: nowrap; - @media screen and (max-width: 450px) { - width: 20%; - margin-right: 25%; + .levels { + display: flex; + justify-content: center; + align-items: center; + height: 92%; + width: 250px; + white-space: nowrap; + border-radius: 10px 0 0 10px; + border: 2px solid colors.$blue; + background: colors.$blue-darkest; + font-family: 'Press Start 2P', cursive; + font-size: 14px; + color: colors.$blue; + cursor: pointer; + + @media screen and (max-width: 550px) { + width: 50px; + background: url('/resources/images/burger-button.png') no-repeat; + background-position: center center; + background-size: 90%; + color: transparent; + } + + &:hover { + color: colors.$blue-light; + border: 2px solid colors.$blue-light; + @media screen and (max-width: 550px) { + color: transparent; + } + } } .about { height: 92%; - width: 50px; + width: 20px; + padding: 0 15px; display: flex; justify-content: center; align-items: center; @@ -94,10 +123,6 @@ font-size: 20px; color: colors.$blue; cursor: help; - - @media screen and (max-width: 450px) { - padding: 0 12px; - } } .about:hover { @@ -107,7 +132,8 @@ .sound { height: 92%; - width: 50px; + width: 50px; + min-width: 50px; display: flex; justify-content: center; align-items: center; @@ -126,91 +152,76 @@ @media screen and (max-width: 850px) { width: 20%; - padding: 0 20%; - margin-right: 20%; - right: 20px; } - } - - .sound:hover { - color: colors.$blue-light; - border: 2px solid colors.$blue-light; - } - - .level-select-container { - padding: 5% 10% 5% 10%; - } - - .skylight-dialog::-webkit-scrollbar-track { - border-radius: 10px; - background-color: rgba(0,0,0,0.0); - } - - .skylight-dialog::-webkit-scrollbar { - width: 12px; - background-color: rgba(0,0,0,0.0); - } - - .skylight-dialog::-webkit-scrollbar-thumb { - border-radius: 10px; - background-color: colors.$blue-darkest; + &:hover { + color: colors.$blue-light; + border: 2px solid colors.$blue-light; + } } - - - .about-backstory { + .about-backstory, .modal-heading { text-align: center; font-family: 'Space Mono', monospace; } + .about-backstory { + padding: 15px 30px 10px 30px; + } .modal-heading { font-size: 30px; @media screen and (max-width: 850px) { font-size: 22px; } + } + .modal-heading:first-child { + margin-top: 0.2em; + } + .level-select-container { + padding: 5% 10% 5% 10%; } - .level-select{ + .level-select { display: flex; justify-content: center; align-items: center; align-content: center; - height: 10%; width: 100%; + height: 10%; + margin: 0 auto; + margin-top: 10px; + white-space: nowrap; border-radius: 10px; border: 2px solid colors.$blue; background: colors.$blue-darkest; font-size: 20px; color: colors.$blue; cursor: pointer; - margin-top: 10px; @media screen and (max-width: 850px) { - width: 80%; - height: 15%; + width: 65%; + height: 12%; padding: 0 20%; right: 20px; } + &:hover { + color: colors.$blue-light; + border: 2px solid colors.$blue-light; + } } - .level-select:hover { - color: colors.$blue-light; - border: 2px solid colors.$blue-light; - } .modal-button-container { width: 100%; - display:flex; + display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center; - margin-bottom: 10px; .modal-button { - margin: 10px; + margin: 0 10px; height: 80%; width: 150px; min-width: 45px; @@ -224,7 +235,7 @@ cursor: default; @media screen and (max-width: 850px) { - margin: 8px; + margin: 0 8px; height: 42px; min-width: 27px; } @@ -268,55 +279,34 @@ } } +} +.skylight-wrapper { + /* Level picker dialog must be above robot */ + z-index: zindex.$z-modal; - .levels { - display: flex; - justify-content: center; - align-items: center; - height: 92%; - width: 250px; - border-radius: 10px 0 0 10px; - border: 2px solid colors.$blue; - background: colors.$blue-darkest; - font-family: 'Press Start 2P', cursive; - font-size: 14px; - color: colors.$blue; - padding-left: 40px; - cursor: pointer; - - @media screen and (max-width: 450px) { - width: 10%; - background: url('/resources/images/burger-button.png') no-repeat; - background-position: center center; - background-size: 90%; - color: transparent; - } + /* Hide empty h2 element */ + h2 { + display: none; } - - .levels:hover { - color: colors.$blue-light; - border: 2px solid colors.$blue-light; - @media screen and (max-width: 450px) { - color: transparent; - } - - +} +.skylight-dialog { + /* Must use important to override Skylight's default inline styling */ + background-color: #00897B !important; + color: #ffffff !important; + border-radius: 2%; + overflow-y: auto !important; + + &::-webkit-scrollbar-track { + border-radius: 10px; + background-color: rgba(0,0,0,0.0); } - - .level-option{ - background: colors.$blue-darkest; - color: colors.$blue; + &::-webkit-scrollbar { + width: 12px; + background-color: rgba(0,0,0,0.0); } - - select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + &::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: colors.$blue-darkest; } -} - -/* Level picker dialog must be above robot */ -.skylight-wrapper { - z-index: 200; -} +} \ No newline at end of file diff --git a/client/scss/robot.scss b/client/scss/robot.scss index 8738805..5bcb180 100644 --- a/client/scss/robot.scss +++ b/client/scss/robot.scss @@ -1,5 +1,7 @@ +@use './zindex'; + .robot-container { - z-index: 100; + z-index: zindex.$z-robot; position: absolute; display: flex; @@ -42,7 +44,7 @@ .b3-robot { width: 100%; height: 100%; - z-index: 100; + z-index: zindex.$z-robot; overflow: visible; @@ -56,7 +58,7 @@ width: 90%; height: 90%; border-radius: 50%; - z-index: 5; + z-index: zindex.$z-robot-shadow; translate: 0% 25%; overflow: visible; @@ -78,8 +80,5 @@ @media screen and (max-width: 850px) { width: 40%; height: 40%; - border-radius: 50%; - translate: 0% 25%; - z-index: 5; } } diff --git a/client/scss/zindex.scss b/client/scss/zindex.scss new file mode 100644 index 0000000..8215470 --- /dev/null +++ b/client/scss/zindex.scss @@ -0,0 +1,10 @@ +/* Modals and navigation */ +$z-modal: 200; +$z-nav-logo: 1; + +/* Robot and board tiles */ +$z-robot: 100; +$z-robot-shadow: 90; +$z-box: 30; +$z-tile: 20; +$z-black-hole: 10; \ No newline at end of file