Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add background #81

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

feat: add background #81

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f3b553
feat: add backgroung
NunonuN Nov 13, 2019
7cff8b1
Remove `Fragment` from SVGs
NunonuN Nov 23, 2020
0f45a82
Remove `Fragment` from SVGs
NunonuN Nov 23, 2020
031a1c2
Add background
NunonuN Jul 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 60 additions & 14 deletions src/components/canvas/Canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import Moon from './Moon';
import MountainLeft from '../svgs/MountainLeft';
import MountainRight from '../svgs/MountainRight';
import Sidewalk from '../svgs/Sidewalk';
import TreeLeft from '../svgs/TreeLeft';
import TreeRight from '../svgs/TreeRight';
import {
CRESCENT_MOON,
FIXED_HEIGHT,
Expand Down Expand Up @@ -79,6 +81,18 @@ class Canvas extends Component {
// scaleX: 0.1,
// scaleY: 0.1,
},
treeLeft: {
x: 0,
y: 0,
// scaleX: 0.1,
// scaleY: 0.1,
},
treeRight: {
x: 0,
y: 0,
// scaleX: 0.1,
// scaleY: 0.1,
},
};

static propTypes = {
Expand All @@ -96,15 +110,17 @@ class Canvas extends Component {
mountainLeft,
mountainRight,
sidewalk,
treeLeft,
treeRight,
width,
height,
} = this.state;
const backgroundCity = {
...city,
scaleX: 0.15 * scale,
scaleY: 0.13 * scale,
x: 0.465 * width,
y: 0.694 * height,
scaleX: 0.2 * scale,
scaleY: 0.2 * scale,
x: 0.426 * width,
y: 0.632 * height,
};
const backgroundMountainLeft = {
...mountainLeft,
Expand All @@ -115,10 +131,10 @@ class Canvas extends Component {
};
const backgroundMountainRight = {
...mountainRight,
scaleX: 3.0 * scale,
scaleY: 3.0 * scale,
x: 0.93 * width,
y: 0.72 * height,
scaleX: 1.2 * scale,
scaleY: 1.2 * scale,
x: 0.925 * width,
y: 0.768 * height,
};
const theDog = {
...dog, // next to the telescope
Expand Down Expand Up @@ -158,6 +174,20 @@ class Canvas extends Component {
x: 0.299 * width,
y: 0.798 * height,
};
const backgroundTreeLeft = {
...treeLeft,
scaleX: 0.9 * scale,
scaleY: 0.9 * scale,
x: 0.28 * width,
y: 0.59 * height,
};
const backgroundTreeRight = {
...treeRight,
scaleX: 0.05 * scale,
scaleY: 0.05 * scale,
x: 0.95 * width,
y: 0.69 * height,
};

this.setState({
city: backgroundCity,
Expand All @@ -168,6 +198,8 @@ class Canvas extends Component {
mountainLeft: backgroundMountainLeft,
mountainRight: backgroundMountainRight,
sidewalk: mainSidewalk,
treeLeft: backgroundTreeLeft,
treeRight: backgroundTreeRight,
});
}

Expand All @@ -192,6 +224,8 @@ class Canvas extends Component {
mountainLeft,
mountainRight,
sidewalk,
treeLeft,
treeRight,
} = this.state;

const { classes } = this.props;
Expand All @@ -208,24 +242,36 @@ class Canvas extends Component {
>
<Provider store={store}>
<Layer>
<City
x={city.x}
y={city.y}
scaleX={city.scaleX}
scaleY={city.scaleY}
/>
<MountainLeft
x={mountainLeft.x}
y={mountainLeft.y}
scaleX={mountainLeft.scaleX}
scaleY={mountainLeft.scaleY}
/>
<City
x={city.x}
y={city.y}
scaleX={city.scaleX}
scaleY={city.scaleY}
/>
<MountainRight
x={mountainRight.x}
y={mountainRight.y}
scaleX={mountainRight.scaleX}
scaleY={mountainRight.scaleY}
/>
<TreeLeft
x={treeLeft.x}
y={treeLeft.y}
scaleX={treeLeft.scaleX}
scaleY={treeLeft.scaleX}
/>
<TreeRight
x={treeRight.x}
y={treeRight.y}
scaleX={treeRight.scaleX}
scaleY={treeRight.scaleX}
/>
<Dog
x={dog.x}
y={dog.y}
Expand Down
23 changes: 10 additions & 13 deletions src/components/svgs/City.js
View file
Open in desktop

Large diffs are not rendered by default.

21 changes: 10 additions & 11 deletions src/components/svgs/Dog.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion src/components/svgs/Hill.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 11 additions & 13 deletions src/components/svgs/MountainLeft.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import React, { Fragment } from 'react';
// import React, { Fragment } from 'react';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you remove this if no longer needed?

import React from 'react';
import PropTypes from 'prop-types';
import { Path } from 'react-konva';

const MountainLeft = ({ x, y, scaleX, scaleY, fill }) => (
<Fragment>
<Path
x={x}
y={y}
data="M 1,87.423658 1.3604001,85.13307 c 1.1833609,-0.70174 4.6290653,-2.03391 10.3390959,-3.9963 5.7099,-1.961399 5.940795,-9.117475 14.691567,-13.467348 8.751755,-4.349743 9.44673,-10.26563 11.211882,-11.247393 1.765296,-0.982784 0.04823,-2.296981 8.722656,-7.443763 8.674721,-5.146753 20.30134,-11.188058 21.878737,-12.123075 1.57753,-0.936018 6.477155,-8.910079 22.70003,-18.923049 16.223012,-10.0139516 38.060762,-3.496366 41.290872,-4.571633 3.83596,-1.289044 12.49009,-3.241247 13.64328,-0.615617 l 11.27265,-0.771536 4.33815,-1.893883 c 2.89274,-1.2621836 6.96784,-3.2262156 12.22544,-5.8930956 5.25845,-2.665769 4.76355,-1.472614 9.64808,-2.685889 3.47695,-0.755415 6.70918,-0.54936 8.25231,0.240088 3.32863,1.328772 4.91332,3.977844 8.4005,5.107809 7.12565,1.249759 6.15569,5.8521946 12.35392,8.2011626 5.3981,4.506656 7.3009,8.211782 12.69752,11.358474 3.89401,5.886711 7.3649,15.684649 9.04929,15.563169 0,0 33.01996,26.063798 44.14388,29.356245 3.3395,1.911017 18.38816,8.588466 20.33403,13.357296 1.34675,3.300552 0.8203,2.742525 -2.79693,2.709466 C 244.58563,86.926522 39.032549,85.791138 1,87.423698 Z"
fill={fill}
scaleX={scaleX}
scaleY={scaleY}
/>
<Path x={x} y={y} data="" fill={fill} scaleX={scaleX} scaleY={scaleY} />
</Fragment>
<Path
x={x}
y={y}
data="M 1,87.423658 1.3604001,85.13307 c 1.1833609,-0.70174 4.6290653,-2.03391 10.3390959,-3.9963 5.7099,-1.961399 5.940795,-9.117475 14.691567,-13.467348 8.751755,-4.349743 9.44673,-10.26563 11.211882,-11.247393 1.765296,-0.982784 0.04823,-2.296981 8.722656,-7.443763 8.674721,-5.146753 20.30134,-11.188058 21.878737,-12.123075 1.57753,-0.936018 6.477155,-8.910079 22.70003,-18.923049 16.223012,-10.0139516 38.060762,-3.496366 41.290872,-4.571633 3.83596,-1.289044 12.49009,-3.241247 13.64328,-0.615617 l 11.27265,-0.771536 4.33815,-1.893883 c 2.89274,-1.2621836 6.96784,-3.2262156 12.22544,-5.8930956 5.25845,-2.665769 4.76355,-1.472614 9.64808,-2.685889 3.47695,-0.755415 6.70918,-0.54936 8.25231,0.240088 3.32863,1.328772 4.91332,3.977844 8.4005,5.107809 7.12565,1.249759 6.15569,5.8521946 12.35392,8.2011626 5.3981,4.506656 7.3009,8.211782 12.69752,11.358474 3.89401,5.886711 7.3649,15.684649 9.04929,15.563169 0,0 33.01996,26.063798 44.14388,29.356245 3.3395,1.911017 18.38816,8.588466 20.33403,13.357296 1.34675,3.300552 0.8203,2.742525 -2.79693,2.709466 C 244.58563,86.926522 39.032549,85.791138 1,87.423698 Z"
fill={fill}
scaleX={scaleX}
scaleY={scaleY}
/>
);

MountainLeft.propTypes = {
Expand All @@ -25,7 +23,7 @@ MountainLeft.propTypes = {
};

MountainLeft.defaultProps = {
fill: '#15151e',
fill: '#1a1a1a',
};

export default MountainLeft;
24 changes: 11 additions & 13 deletions src/components/svgs/MountainRight.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import React, { Fragment } from 'react';
// import React, { Fragment } from 'react';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you remove this if no longer needed?

import React from 'react';
import PropTypes from 'prop-types';
import { Path } from 'react-konva';

const MountainRight = ({ x, y, scaleX, scaleY, fill }) => (
<Fragment>
<Path
x={x}
y={y}
data="m 106.90756,3.6712306 4.36982,0.4327354 c 4.15423,1.5517726 4.70543,0.4613056 13.7489,4.8777124 9.04351,4.4164316 15.46517,8.0569406 19.26413,10.9204376 3.79884,2.864488 6.93063,5.281536 9.39513,7.253131 2.4634,1.972467 5.27545,4.061694 8.43508,6.268588 3.15879,2.205765 7.99124,4.813712 14.49679,7.820762 6.5054,3.008049 -2.61339,2.534871 13.57355,8.538787 -4.61947,-1.443925 3.1598,2.79022 11.09811,7.934857 1.70723,5.519503 7.04043,4.893698 13.90055,15.075024 4.57747,2.575781 42.78891,21.541835 43.86989,29.103465 -5.2888,-0.0177 -18.63577,-0.0624 -22.52378,0.13817 -64.8058,0.42329 -242.7186786,1.51002 -235.3129686,-0.4893 8.03906,-9.857198 19.3343696,-26.891535 25.0596596,-38.642213 2.7226,-1.356314 17.12057,-16.665262 20.35152,-17.739409 4.8508,-0.773148 4.1074,-13.571587 8.84589,-14.865706 3.90758,-0.699086 10.99623,-7.128525 14.45225,-8.530978 -0.0299,-8.183928 7.72257,-8.624711 10.31376,-12.9678846 3.14474,-7.435164 3.6841,-0.169879 12.88625,-4.6411776 1.84287,-4.97397355 9.624749,-3.23474425 13.775469,-0.4870012 z"
fill={fill}
scaleX={scaleX}
scaleY={scaleY}
/>
<Path x={x} y={y} data="" fill={fill} scaleX={scaleX} scaleY={scaleY} />
</Fragment>
<Path
x={x}
y={y}
data="m 393.57994,3.6712306 4.36982,0.4327354 c 4.15423,1.5517726 4.70543,0.4613056 13.7489,4.8777124 9.04351,4.4164316 15.46517,8.0569406 19.26413,10.9204376 3.79884,2.864488 6.93063,5.281536 9.39513,7.253131 2.4634,1.972467 5.27545,4.061694 8.43508,6.268588 3.15879,2.205765 7.99124,4.813712 14.49679,7.820762 6.5054,3.008049 -2.61339,2.534871 13.57355,8.538787 -4.61947,-1.443925 3.1598,2.79022 11.09811,7.934857 1.70723,5.519503 7.04043,4.893698 13.90055,15.075024 4.57747,2.575781 42.78891,21.541835 43.86989,29.103465 -5.2888,-0.0177 -18.63577,-0.0624 -22.52378,0.13817 -6.16113,0.0946 -484.39222,-0.94673 -522.0332323,0.10692 l 0.3604001,-2.290588 c 1.1833609,-0.70174 4.6290653,-2.03391 10.3390962,-3.9963 5.7099,-1.961399 5.940795,-9.117475 14.691567,-13.467348 8.751755,-4.349743 9.44673,-10.26563 11.211882,-11.247393 1.765296,-0.982784 0.04823,-2.296981 8.722656,-7.443763 8.674721,-5.146753 20.30134,-11.188058 21.878737,-12.123075 1.57753,-0.936018 6.477155,-8.910079 22.70003,-18.923049 16.223014,-10.013952 38.060764,-3.496366 41.290874,-4.571633 3.83596,-1.289044 12.49009,-3.241247 13.64328,-0.615617 l 11.27265,-0.771536 4.33815,-1.893883 c 2.89274,-1.262184 6.96784,-3.226216 12.22544,-5.893096 5.25845,-2.665769 4.76355,-1.472614 9.64808,-2.685889 3.47695,-0.755415 6.70918,-0.54936 8.25231,0.240088 3.32863,1.328772 4.91332,3.977844 8.4005,5.107809 7.12565,1.249759 6.15569,5.852195 12.35392,8.201163 5.3981,4.506656 7.3009,8.211782 12.69752,11.358474 3.89401,5.886711 7.3649,15.684649 9.04929,15.563169 0,0 17.01996,14.063798 28.14388,17.356245 12.53906,-4.357196 44.83437,0.608467 50.55966,-11.142211 2.7226,-1.356314 17.12057,-16.665262 20.35152,-17.739409 4.8508,-0.773148 4.1074,-13.571587 8.84589,-14.865706 3.90758,-0.699086 10.99623,-7.128525 14.45225,-8.530978 -0.0299,-8.183928 7.72257,-8.624711 10.31376,-12.9678846 3.14474,-7.435164 3.6841,-0.169879 12.88625,-4.6411776 1.84287,-4.97397356 9.62475,-3.23474426 13.77547,-0.4870012 z"
fill={fill}
scaleX={scaleX}
scaleY={scaleY}
/>
);

MountainRight.propTypes = {
Expand All @@ -25,7 +23,7 @@ MountainRight.propTypes = {
};

MountainRight.defaultProps = {
fill: '#1f1f2e',
fill: '#262626',
};

export default MountainRight;
29 changes: 29 additions & 0 deletions src/components/svgs/TreeLeft.js
View file
Open in desktop

Large diffs are not rendered by default.

29 changes: 29 additions & 0 deletions src/components/svgs/TreeRight.js
View file
Open in desktop

Large diffs are not rendered by default.