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

Sherman Christina Litter-Patrol #32

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

Sherman Christina Litter-Patrol #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
96ceb9c
changed icons
Nov 30, 2018
203280c
fixed onClick check and x
Nov 30, 2018
7e56214
working on points
Nov 30, 2018
9d7d03c
added onItemClicked sorting out connection
Nov 30, 2018
0e52acb
fixed points
Nov 30, 2018
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
48 changes: 24 additions & 24 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,26 +49,26 @@ body {

/* Assign this class when a litter item is clicked */
.spotted-litter::before {
content: '✓';
position: absolute;
font-size: 12rem;
text-align: center;
width: 100%;
color: green;
content: "✓";
position: absolute;
font-size: 12rem;
text-align: center;
width: 100%;
color: green;
}

/* Assign this class when a non-litter item is clicked */
.spotted-nature::before {
content: 'x';
position: absolute;
font-size: 12rem;
text-align: center;
width: 100%;
color: darkred;
content: "x";
position: absolute;
font-size: 12rem;
text-align: center;
width: 100%;
color: darkred;
}

.overall-data {
color: #FEFAE0;
color: #fefae0;
}

@keyframes item-move {
Expand All @@ -87,7 +87,7 @@ body {
height: 140vh;
margin-top: -40vh;

background-image: url('images/background.png');
background-image: url("images/background.png");
}

.level-bg-clouds-1,
Expand Down Expand Up @@ -116,61 +116,61 @@ body {

.level-bg-clouds-1 {
z-index: 11;
background-image: url('images/clouds-1.png');
background-image: url("images/clouds-1.png");
animation-duration: 150s;
}

.level-bg-clouds-2 {
z-index: 12;
background-image: url('images/clouds-2.png');
background-image: url("images/clouds-2.png");
animation-duration: 140s;
}

.level-bg-clouds-3 {
z-index: 13;
background-image: url('images/clouds-3.png');
background-image: url("images/clouds-3.png");
animation-duration: 130s;
}

.level-bg-clouds-4 {
z-index: 14;
background-image: url('images/clouds-4.png');
background-image: url("images/clouds-4.png");
animation-duration: 120s;
}

.level-bg-hills-1 {
z-index: 15;
background-image: url('images/hills-1.png');
background-image: url("images/hills-1.png");
animation-duration: 90s;
}

.level-bg-hills-2 {
z-index: 16;
background-image: url('images/hills-2.png');
background-image: url("images/hills-2.png");
animation-duration: 80s;
}

.level-bg-bushes {
z-index: 17;
background-image: url('images/bushes.png');
background-image: url("images/bushes.png");
animation-duration: 60s;
}

.level-bg-trees-1 {
z-index: 18;
background-image: url('images/trees-1.png');
background-image: url("images/trees-1.png");
animation-duration: 55s;
}

.level-bg-trees-2 {
z-index: 19;
background-image: url('images/trees-2.png');
background-image: url("images/trees-2.png");
animation-duration: 50s;
}

.level-bg-ground {
z-index: 20;
background-image: url('images/ground.png');
background-image: url("images/ground.png");
animation-duration: 18s;

/* Ground is down further to make for more play area */
Expand Down
118 changes: 71 additions & 47 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
import React, { Component } from 'react';
import uuid from 'uuid';
import './App.css';
import GameItem from './components/GameItem.js';
import logo from './images/logo.png';
import React, { Component } from "react";
import uuid from "uuid";
import "./App.css";
import GameItem from "./components/GameItem.js";
import logo from "./images/logo.png";

class App extends Component {
config = {
itemTypes: {
// type: spawn rate (weighting)
litter: 20,
rock: 5,
bush: 5,
flower: 5,
mushroom: 5,
litter: 20,
rock: 5,
bush: 5,
flower: 5,
mushroom: 5
},
spawnRate: 1.2, // Hz
spawnRateRnd: 1.79, // randomization factor
spawnHeight: 100, // height of item spawn area in pixels
spawnFloor: 0, // offset from bottom of game "level" in pixels
itemLifetime: 10 * 1000, // 10 seconds (should be longer than CSS animation time)
}
itemLifetime: 10 * 1000 // 10 seconds (should be longer than CSS animation time)
};

constructor() {
super();

this.state = {
items: [],
points: 0,
points: 0
};

// Uncomment this to spawn a single test item
Expand All @@ -38,69 +38,77 @@ class App extends Component {

console.log(this.state);
}

onItemClicked = () => {
// Fill this in!
}

//The App component should have the code that actually updates the score,
// onItemClickedCallback = event => {
// this.setState({ points: this.state.points + 1 });
// // Fill this in!
// };
incrementPoints = event => {
// if (itemType === "litter") {
this.setState({
points: this.state.points + 1
});
// }
};
render() {
const items = this.state.items.map((item, i) => {
return <GameItem
height={item.height} // Height - used for a CSS style to position on the screen
layer={100 + i} // Layer - used for a CSS style to show items on-top of bg
key={item.id} // Key - to help React with performance

// Additional props (event callbacks, etc.) can be passed here
/>;
return (
<GameItem
height={item.height} // Height - used for a CSS style to position on the screen
layer={100 + i} // Layer - used for a CSS style to show items on-top of bg
key={item.id} // Key - to help React with performance
type={item.type}
clickCallback={this.incrementPoints}
// Additional props (event callbacks, etc.) can be passed here
/>
);
});

return (
<div className="game">
<section className="hud">
<h2 className="score">Litter Spotted: { this.state.points }</h2>
<h2 className="score">Litter Spotted: {this.state.points}</h2>
<img className="logo" src={logo} alt="Litter Patrol logo" />
</section>

<section className="level">
{ this.levelBackground() }
{ items }
{this.levelBackground()}
{items}
</section>

</div>
);
}


//////////////\\\\\\\\\\\\\\
// Implementation details \\

tick(time) {
const newState = {};

// Cull any items that are expired
const items = this.state.items.filter((item) => {
const items = this.state.items.filter(item => {
return item.expiration !== null && item.expiration > time;
});

if(items.length !== this.state.items.length) {
if (items.length !== this.state.items.length) {
newState.items = items;
}

// Should we spawn a new item?
const {spawnRate, spawnRateRnd} = this.config;
if(this.spawnItems && spawnRate > 0) {
const { spawnRate, spawnRateRnd } = this.config;
if (this.spawnItems && spawnRate > 0) {
let spawnDelta = time - (this.lastSpawn || 0);

// Randomize spawn rate
if(spawnRateRnd > 0) {
if (spawnRateRnd > 0) {
const factor = 1 + Math.random() * spawnRateRnd;
spawnDelta *= factor;
}

if(spawnDelta >= (1 / spawnRate) * 1000) {
if (spawnDelta >= (1 / spawnRate) * 1000) {
newState.items = [
...(newState.items || this.state.items),
this.spawnItem(time),
this.spawnItem(time)
];
}
}
Expand All @@ -116,25 +124,29 @@ class App extends Component {
const type = this.randomType();

const expiration = time + this.config.itemLifetime;
const height = Math.random() * this.config.spawnHeight + this.config.spawnFloor;
const height =
Math.random() * this.config.spawnHeight + this.config.spawnFloor;

return {id, type, expiration, height};
return { id, type, expiration, height };
}

randomType() {
// Figure out the total of all the weighted types
const totalWeight = Object.values(this.config.itemTypes).reduce((l,r)=>l+r,0);
const totalWeight = Object.values(this.config.itemTypes).reduce(
(l, r) => l + r,
0
);

// Get a random value between zero and the total
let choice = Math.random() * totalWeight;
let selectedType = null;

// Loop through all item types and figure out which one we chose
Object.entries(this.config.itemTypes).forEach(([type, weight]) => {
if(selectedType !== null) return; // We've already found our choice
if (selectedType !== null) return; // We've already found our choice

// If the random value was less than this type's weight
if(choice <= weight) {
if (choice <= weight) {
selectedType = type; // then we've selected it
} else {
choice -= weight; // otherwise move past this entry
Expand All @@ -149,11 +161,23 @@ class App extends Component {
}

levelBackground() {
const layers = ['clouds-1', 'clouds-2', 'clouds-3', 'clouds-4',
'hills-1','hills-2','bushes','trees-1','trees-2','ground'];
const layers = [
"clouds-1",
"clouds-2",
"clouds-3",
"clouds-4",
"hills-1",
"hills-2",
"bushes",
"trees-1",
"trees-2",
"ground"
];
return (
<div className="level-bg">
{layers.map(layer => (<div className={`level-bg-${layer}`} key={layer} />))}
{layers.map(layer => (
<div className={`level-bg-${layer}`} key={layer} />
))}
</div>
);
}
Expand All @@ -167,7 +191,7 @@ class App extends Component {

const newState = this.tick(Date.now());

if(Object.keys(newState).length > 0) {
if (Object.keys(newState).length > 0) {
this.setState(newState, callback);
} else {
callback();
Expand All @@ -178,7 +202,7 @@ class App extends Component {
}

componentWillUnmount() {
if(this.updateTimer !== null) {
if (this.updateTimer !== null) {
clearInterval(this.updateTimer);
}
}
Expand Down
Loading