From 9fc48df1cea25bc77dd81a1bac0cec913c3d84b9 Mon Sep 17 00:00:00 2001 From: Bart Riemens Date: Mon, 9 Sep 2019 11:49:39 +0200 Subject: [PATCH] Move theme selector to the header and improved about page and styling --- src/components/Code.js | 11 ++ src/components/ControlPanel.js | 39 -------- src/components/DocumentSection.js | 10 ++ src/components/HeaderMenu.js | 9 +- src/components/Page.js | 6 +- src/components/PageSection.js | 30 ++++++ src/components/ThemeSelector.js | 58 +++++++++++ src/components/Title.js | 28 +++++- src/containers/About.js | 160 +++++++++++++++++++++--------- src/theming/GlobalStyle.js | 1 + src/theming/themes/dark.js | 2 +- src/theming/themes/default.js | 6 +- src/theming/themes/light.js | 5 +- 13 files changed, 265 insertions(+), 100 deletions(-) create mode 100644 src/components/Code.js create mode 100644 src/components/DocumentSection.js create mode 100644 src/components/PageSection.js create mode 100644 src/components/ThemeSelector.js diff --git a/src/components/Code.js b/src/components/Code.js new file mode 100644 index 0000000..7127ebb --- /dev/null +++ b/src/components/Code.js @@ -0,0 +1,11 @@ +import styled from "styled-components"; + +export const Code = styled.code` + display: inline-block; + color: white; + background-color: gray; + padding: 0 0.2rem; + line-height: 1.4rem; +`; + +export default Code; diff --git a/src/components/ControlPanel.js b/src/components/ControlPanel.js index 341ce45..f7fbcee 100644 --- a/src/components/ControlPanel.js +++ b/src/components/ControlPanel.js @@ -23,43 +23,12 @@ const HorizontalStack = styled.div` place-content: space-between; `; -const ThemeSelector = styled.select` - appearance: none; - border: 1px solid transparent; - background: none; - border-radius: 3px; - // padding: 5px; - line-height: 1.5em; - color: ${({ theme }) => theme.body.color}; - font-size: ${({ theme }) => theme.body.fontSize}; - font-family: ${({ theme }) => theme.body.fontFamily}; - height: 100%; - width: 100%; - cursor: pointer; - background-image: url('data:image/svg+xml;utf8, - - - '); - background-repeat: no-repeat; - background-position: right 0 center; - background-size: 1rem 1rem; - outline-offset: 3px; - - &:active, - &:focus, - &:hover { - outline: 1px solid silver; - } -`; - export const ControlPanel = ({ paused, started, pauseSnake, stopSnake, startSnake, - theme, - changeTheme, fps, zoom, setFps, @@ -67,14 +36,6 @@ export const ControlPanel = ({ zoomOut }) => ( - - changeTheme(e.target.value)} value={theme}> - - - - - - Zoom: {zoom} diff --git a/src/components/DocumentSection.js b/src/components/DocumentSection.js new file mode 100644 index 0000000..a78df74 --- /dev/null +++ b/src/components/DocumentSection.js @@ -0,0 +1,10 @@ +import React from "react"; +import styled from "styled-components"; + +const Section = styled.div``; + +export const PageSection = ({ children }) => { + return
{children}
; +}; + +export default PageSection; diff --git a/src/components/HeaderMenu.js b/src/components/HeaderMenu.js index 5ae54d6..7119f89 100644 --- a/src/components/HeaderMenu.js +++ b/src/components/HeaderMenu.js @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import { NavLink } from "react-router-dom"; +import ThemeSelector from "./ThemeSelector.js"; const MenuPanel = styled.ul` display: flex; @@ -8,17 +9,18 @@ const MenuPanel = styled.ul` const MenuItem = styled.li` display: inline-block; + margin-right: 0.5rem; + min-width: 3.125rem; `; const MenuButton = styled(NavLink)` display: inline-block; text-align: center; text-decoration: none; - border: 1px solid silver; + border: 1px solid ${({ theme }) => theme.button.borderColor}; background: ${props => props.theme.header.menuButton.background}; color: ${props => props.theme.header.menuButton.color}; padding: 0.3125rem; - margin-right: 0.5rem; border-radius: 0.125rem; min-width: 3.125rem; &.active { @@ -44,6 +46,9 @@ const HeaderMenu = () => ( About + + + ); diff --git a/src/components/Page.js b/src/components/Page.js index df91bf0..d083928 100644 --- a/src/components/Page.js +++ b/src/components/Page.js @@ -1,9 +1,5 @@ import styled from "styled-components"; -const Page = styled.div` - max-width: 60rem; - margin: 0 auto; - padding: 0.5em; -`; +const Page = styled.div``; export default Page; diff --git a/src/components/PageSection.js b/src/components/PageSection.js new file mode 100644 index 0000000..a2c4777 --- /dev/null +++ b/src/components/PageSection.js @@ -0,0 +1,30 @@ +import React from "react"; +import styled, { css } from "styled-components"; + +export const Content = styled.div` + ${({ content }) => + content === PageSection.content.center && + css` + max-width: 60rem; + margin: 0 auto; + // padding: 0.5em; + `} +`; + +const contentPosition = { + center: "center", + stretch: "stretch" +}; + +export const PageSection = ({ content, children, className } = { content: contentPosition.stretch }) => { + return ( +
+ {children} +
+ ); +}; + +PageSection.content = contentPosition; +PageSection.Content = Content; + +export default PageSection; diff --git a/src/components/ThemeSelector.js b/src/components/ThemeSelector.js new file mode 100644 index 0000000..c0a31cd --- /dev/null +++ b/src/components/ThemeSelector.js @@ -0,0 +1,58 @@ +import React from "react"; +import { connect } from "react-redux"; +import styled from "styled-components"; +import { module as uiModule, changeTheme } from "../redux/ui.js"; + +const StyledSelect = styled.select` + appearance: none; + border: 1px solid ${({ border, theme }) => (border ? theme.select.borderColor : "transparent")}; + background: none; + border-radius: 3px; + padding: 0 1.8rem 0 .5rem; + line-height: 1.5em; + color: ${({ theme }) => theme.body.color}; + font-size: ${({ theme }) => theme.body.fontSize}; + font-family: ${({ theme }) => theme.body.fontFamily}; + height: 100%; + min-width: 8.375rem; + // width: 100%; + cursor: pointer; + background-image: url('data:image/svg+xml;utf8, + + + '); + background-repeat: no-repeat; + background-position: right ${({ border }) => (border ? ".5rem" : 0)} center; + background-size: 1rem 1rem; + outline-offset: ${({ border }) => (border ? 0 : ".1875rem")}; + + &:active, + &:focus, + &:hover { + outline: 1px solid silver; + } +`; + +const ThemeSelector = ({ theme, changeTheme, border }) => { + return ( + changeTheme(e.target.value)} value={theme}> + + + + + + ); +}; + +const mapStateToProps = state => ({ + ...state[uiModule.name] +}); + +const mapActionsToProps = { + changeTheme +}; + +export default connect( + mapStateToProps, + mapActionsToProps +)(ThemeSelector); diff --git a/src/components/Title.js b/src/components/Title.js index d839d65..080b804 100644 --- a/src/components/Title.js +++ b/src/components/Title.js @@ -1,7 +1,31 @@ -import styled from "styled-components"; +import styled, { css } from "styled-components"; const Title = styled.h1` - font-size: ${props => (props.large ? "3rem" : "1.5rem")}; + margin: 0; + font-size: 1.5rem; + line-height: 4rem; + + ${props => + props.large && + css` + font-size: 3rem; + line-height: 4rem; + `} + + ${props => + props.larger && + css` + font-size: 5rem; + line-height: 6rem; + `} + + ${props => + props.sub && + css` + text-transform: uppercase; + font-size: 1.4rem; + line-height: 1.3rem; + `}; `; export default Title; diff --git a/src/containers/About.js b/src/containers/About.js index 2051d14..67576cf 100644 --- a/src/containers/About.js +++ b/src/containers/About.js @@ -1,59 +1,121 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import Title from "../components/Title.js"; +import PageSection from "../components/PageSection.js"; +import Code from "../components/Code.js"; -const Code = styled.code` - font-weight: bold; - color: white; +const MainPageSection = styled(PageSection)` + background-color: ${({ theme }) => theme.colors.pageSectionMainColor}; + min-height: 20rem; + ${PageSection.Content} { + box-sizing: border-box; + padding: 1rem 2rem; + } +`; + +const StandardPageSection = styled(PageSection)` + background-color: ${({ theme }) => theme.colors.pageSectionStandardColor}; + ${PageSection.Content} { + box-sizing: border-box; + padding: 2rem 8rem; + } +`; + +const AlternatePageSection = styled(PageSection)` + background-color: ${({ theme }) => theme.colors.pageSectionAlternateColor}; + ${PageSection.Content} { + box-sizing: border-box; + padding: 2rem 8rem; + } +`; + +const Icon = styled.div` + font-size: 150pt; + display: inline-block; +`; + +const Layout = styled.div` + display: flex; + width: 100%; + // place-content: center; + // justify-content: space-around; + // align-content: space-around; + margin-top: 2rem; + + ${({ direction }) => + direction === "horizontal" && + css` + flex-direction: row; + `} + ${({ direction }) => + direction === "vertical" && + css` + flex-direction: column; + `} `; export const About = () => ( - About Crafity Snake -

Play snake in your browser using HTML 5 and Javascript.

- Introduction -

- This experiment has been created to test out React, Redux and Styled Components and see if it is possible to - create a simple web based game like snake. The source code for this game is open source and free to download and - change. -

-

- A couple of noticable features in this game are resumable game play using local storage. The page can be reloaded - or reopened any time and the game should continue from where it was left. -

- How to play -

- You control the snake using the arrow keys or the hjkl keys. Everytime the snake eats an apple the - tail of the snake grows longer. When the snake touches his own body the game is over. -

-

- Other keys to control the game are r to (re)start the game. The s key to stop the game - and p to pause the game. -

- Technology -

Snake has been developed with the folowing technologies.

-
    -
  • React + React Router
    • -
  • Redux
    • -
  • Styled Components
    • -
  • Webpack + Babel
    • -
  • Jest
    • -
  • ESLint
    • -
  • pre-commit
    • -
  • Docker
    • -
- Source Code -

The source code is hosted on Crafity's git repositories at the following location:

-

- Crafity Snake -

-

After donwloading the source code run the following commands:

-

- npm install -

-

- npm run dev -

+ + + + Crafity Snake + Play snake with HTML 5 and Javascript. + + 🐍 + + + + Introduction +

+ This experiment has been created to test out React, Redux and Styled Components and see if it is possible to + create a simple web based game like snake. The source code for this game is open source and free to download and + change. +

+

+ A couple of noticable features in this game are resumable game play using local storage. The page can be + reloaded or reopened any time and the game should continue from where it was left. +

+ + + How to play +

+ You control the snake using the arrow keys or the hjkl keys. Everytime the snake eats an apple the + tail of the snake grows longer. When the snake touches his own body the game is over. +

+

+ Other keys to control the game are r to (re)start the game. The s key to stop the game + and p to pause the game. +

+ + + Technology +

Snake has been developed with the folowing technologies.

+
    +
  • React + React Router
    • +
  • Redux
    • +
  • Styled Components
    • +
  • Webpack + Babel
    • +
  • Jest
    • +
  • ESLint
    • +
  • pre-commit
    • +
  • Docker
    • +
+ + + Source Code +

The source code is hosted on Crafity's git repositories at the following location:

+

+ Crafity Snake +

+

After donwloading the source code run the following commands:

+

+ npm install +

+

+ npm run dev +

+ ); diff --git a/src/theming/GlobalStyle.js b/src/theming/GlobalStyle.js index 340c4b9..c1d44c6 100644 --- a/src/theming/GlobalStyle.js +++ b/src/theming/GlobalStyle.js @@ -9,6 +9,7 @@ const GlobalStyle = createGlobalStyle` background: ${props => props.theme.body.background}; color: ${props => props.theme.body.color}; min-height: 100vh; + -webkit-font-smoothing: antialiased; } body, input, select { font-family: ${({ theme }) => theme.body.fontFamily}; diff --git a/src/theming/themes/dark.js b/src/theming/themes/dark.js index 9307ad5..8ec5499 100644 --- a/src/theming/themes/dark.js +++ b/src/theming/themes/dark.js @@ -11,7 +11,7 @@ export const colors = { colorInactive: "#97727e", colorAlternate: "#ecb1c5", shadowColor: "#222", - borderColor: "#222", + borderColor: "silver", borderColorActive: "#e6b4c4", borderColorInactive: "#97727e", spinnerShadow: "#444", diff --git a/src/theming/themes/default.js b/src/theming/themes/default.js index 8bc765e..f5b2a6c 100644 --- a/src/theming/themes/default.js +++ b/src/theming/themes/default.js @@ -21,7 +21,10 @@ export const defaultColors = { snakePartHueAlive: "340", snakePartHueDied: "0", snakePartLightness: "0%", - selectColor: "black" + selectColor: "black", + pageSectionMainColor: "#eaeaea", + pageSectionStandardColor: "white", + pageSectionAlternateColor: "#fafafa" }; const mapRange = (l, i, min, max) => Math.round((max - min) * ((l - i) / l) + min); @@ -45,6 +48,7 @@ export const renderTheme = themeColors => { borderWidth: `${1 / 16}rem` }, select: { + borderColor: colors.borderColor, color: colors.selectColor }, header: { diff --git a/src/theming/themes/light.js b/src/theming/themes/light.js index 54aa990..a3ec4b4 100644 --- a/src/theming/themes/light.js +++ b/src/theming/themes/light.js @@ -18,7 +18,10 @@ export const colors = { spinnerHighlight: "#db7093", cardFoldHighlight: "#ad5a75", cardFoldShadow: "#bdb19a", - selectColor: "#db7093" + selectColor: "#db7093", + pageSectionMainColor: "papayawhip", + pageSectionStandardColor: "white", + pageSectionAlternateColor: "#fafafa" }; const mapRange = (l, i, min, max) => Math.round((max - min) * ((l - i) / l) + min);