caseydierking / wcss

It's really quite ridiculous.

---

Winning Colors Splish Splash

The unofficial official GameOff Horse.

Check it out for yourself

---

Roadmap / Todo

Note: You can also check the "Issues" tab to see things that need to be done that are not on this list.

We are blown away at the response this project has received from Hacktoberfest. Thank you to all who have contributed thus far! We wanted to provide a roadmap for the vision we have for Winning Colors Splish Splash project.

Big Picture

The goal for this project is to learn more about open source and have fun along the way. Our vision for this project is to have a landing page where people can interact with the horse in various ways. This functionality exists today. He can "eat" an apple or carrots. The user can clean up his messes. The user can also decided what the weather is in "Straw Town".

Our future path and vision is to have the horse playable as a 2D character in a javascript web game. We want to include a fun and intriguing story-line. We don't know exactly where this will go yet but with the power of open source, we can't wait to find out.

Our goal is to turn this project into a game for GameOff.

Phase 1

Start Page

• Landing page where user can interact with horse in different ways.
• Soundtrack
• Add weather options
• Turn horse into SVG
• Dark Mode / Light Mode based on time of day
• Horse interacts with you by winking when you hit "spacebar"
• Give the horse rainboots during the "rainy weather" mode
• Give the horse a scarf and hat for "winter weather" mode
• Have the horse neigh when given any of the fruits/veggies
• Give the horse the ability to eat some hay

Phase 2

Single pane game - foundation

• Create a clever way to switch between game mode and start page. Make it feel like entering a game.
• Create a 2D canvas where the horse can move around.
• You can control the horse via arrow buttons
• Make the horse trot/gallop with the arrow buttons
• Generate random apples on the canvas for the horse to pick up and eat
• Add a fenced area onto the canvas where the horse can "live".
• Make constraints where items or the horse are contained within the canvas
• Add some bushes and trees to the map / Generate a map layout of the canvas

Phase 3

Expanding game to multiple quadrants

• Add 4 quadrants to each side of the standard canvas size and add constraints to the edges of those quadrants.
• Add path between quadrants so you can visit each quadrant
• Add constraints to the horse and items so they never overlap each other. Example: Horse shouldn't be able to walk over trees or fences.
• Populate quadrants with objects. Here is an image to reference for a visual.

Phase 4

Storyline Creation

• TBD

Phase 5

Server Side Functionality Implementation

• TBD

Checkbox Tip: Do add 'x' in square brackets to show the checkbox. eg. [x]

Contribution

Please check out our Contribution Guide for more information on getting started.

wcss's Issues

Create a "toolbar - like" style for choosing all the icons on the right side of the horse.

This would be a great addition for adding more icons. I am thinking just have the icon buttons be on the right side of the horse image.

Deployment to Heroku Not working

Deployment to heroku isn't working as expected. It deploys correctly, but on heroku's end we get the error.

Forbidden
You don't have permission to access / on this server

See readme for link to heroku site. I suspect this has to do with where the composer file is and it's not setting permissions correctly for the public/ directory.

Outstanding merge issue

There's an outstanding merge issue, the changes between the current branch and the conflicted branch are formatting related.

Integrate gulp into this project

Would like to open this up for discussion but I’m interested in integrating gulp for wcss.

Would like to use it for auto minifying css and js. Also would like to utilize livereload functionality.

Open to other ideas.

Contribution install and run

I would be nice to have documentation about running the project, I know this is a static project for now, but it will probably grow and maybe you would use webpack or more libraries (live reloading, etc). With this PR you would only need to install the dependencies npm install and npm start to start the app, then it would be exposed on localhost:8080

[NOTE] Need of well written Documentation !

Like other repos, this one is also going in better direction.

We need a well written documentation or a proper README.md file for contributors.

Pitchfork needs an animation, but only when picking up the poo.

So only when the poo is visible and the pitchfork is near the poo. We don't want good ol Splash getting hurt!

Fix/Improve sprite animation

When you click "Let's Play a Game" it activates the mini game functionality. You can then move the horse around with arrow keys.

Currently its buggy and blinks quite a bit. Would be great if someone could take a look at the animation and make it more fluid.

Add carrot, pitchfork, and hay cursors to list of options

Framework is setup to be able to add additional cursors. A carrot, pitchfork, and hay cursors should be added as well.

Give the horse rainboots in the "rain weather" mode

Imagine those little yellow rain boots on the horse..

Finding more sounds/music

Find legal sounds/audio for the background of the horse. Randomize which track is playing

Add weather to the horse

You can add sounds, more pictures/icons. Preferably a way to trigger something (like a thunder storm). We want to keep the default soundtrack when no weather is occurring.

Brushing the horse needs an animation

There used to be an animation, but it appears that it is gone or doesn't work. I would check to see if the other "active" file is still there or not first. Basically, on the mouse click down we want the brush to have longer bristles and on the click up we want them to go back to short...
Or do it the other way around. You decide what looks best!

When pressing the space bar, have the horse wink

Have the horse wink when the space bar is pressed. Perhaps a twinkle in the eye would be cool too?

Make the horse move with arrow keys

Animate the horse movement (doesn't have to be pretty!) and have the screen move in the background (2D) when the user presses different arrow keys!

Compile a list of images that match the theme

We're going to want to implement different items in the world. Think things like: bush, grass, stable, hay, fence, saddle, etc...

These would be items the horse can interact with within the world. See project for this.

Apple cursor click should not "take a bite" unless near horses mouth

When selecting the apple cursor at the bottom of the page, the apple should not "take a bite" unless near the mouth.

Create basic map/grid where things can be placed

Think zelda or pokemon 2d game style. We need a starting point to begin building a world.

Add pumpkin "eating" animation

See Apple or carrot for examples. When near horses mouth, pumpkin should appear to have taken a bite.

Utilize Animate.css to add some nice animations to toolbar click

I recently added animate.css to the project. I started working on this, but then decided it would be a good first issue for someone.

If you go to the javascript file, you can see that i've commented out
// el.classList.remove('animated'); //el.classList.remove('tada');``

What would be great is if when you clicked any of the buttons on the toolbar it would animate by adding the css classes "animated" and "tada". It should also work on the "dark mode" button as well. You'll notice that this is handled a little bit differently currently in the code.

Animate.css is already included in the project, so all you'd really need to do is make it work in the JS.

Contribute New Ideas

This would be a great first time issue for someone.
What we really need is is someone to add a file to the root directory and come up with some fun and ridiculous ideas to add to this project.

We will comb through those ideas and add them as issues to be done. We'll accept pull requests for this file though to have a long running list of ideas.

Give the horse the ability to eat some hay

All the other items have an animation when the horse eats them. The hay should reflect this as well.

[Note] SYNC before creating PR

I suggest all of you to 'sync' the latest commit before staring and pushing your forked code.

https://help.github.com/articles/syncing-a-fork/

The hay and pitchforks need animations.

Weather sounds continue to play in game mode

Launch https://winningcolors.herokuapp.com/
Change weather to "rainy" or "snow" and we can hear the relevant audio.
Now, launch the game mode by clicking on "Play Game" icon.
Notice that the audio can still be heard. Is this expected? Looks like an issues to me.

Make it look like horse is walking left or right

Due to a recent contribution, we have a left and right sprite kit that was added for the horse. It would be cool to have the horse animate and give the impression of walking left when holding the "left" arrow key. Similarly, it would be great to have the horse walk right when holding the "right" arrow key.

Make the site responsive

With many of the changes from hacktoberfest, the site is really coming along. With these new changes though, it's starting to break when viewed on mobile. Think of the scenario.... you are out with your friends and you want to share this new encouraging website with all your peers. Currently, we can't do that.

We would like to think through how to make the toolbar work on mobile so you can do all of the same actions on your phone. This will impact other areas like the recent pull request #30 where it looks for the relative position of the horses mouth.

tl,dr; Make the site more responsive than it is now. Toolbar should scale below image and be usable.

Add a pumpkin cursor icon

Add hacktoberfest text or badge to website

Let's make this the official hacktoberfest horse. Add a badge or text somewhere on the page that would make us proud.

Have the horse randomly poop

Just a small poop randomly. This will be part of a bigger project to keep track of how many items the horse eats relative to the poop.

Also, we want the pitchfork to eventually clean up the poop.

Track how many items have been fed to horse

Need someone to look into how we can track how many items have been fed to the horse. This would setup some future things like being able to make the horse "poop" at a certain interval depending on how much food he has eaten.

Anyone have any ideas how we could do this and not only track it client side? Would like a global count.

Have a way to get back to regular horse mode from gamemode

Currently when you click "Let's Play A Game", you get stuck in game mode. There is no way to get back. It would be great to have that button toggle and bring you back and forth between the modes.

Add a "dark mode" option that you can toggle on and off.

It would be cool to have a toggle button in the toolbar at the bottom that toggles a "darkmode" .

Bonus points if you theme it in some way.

Add constraints to edge of map so the horse can't walk past the edge of the canvas

Create a spritekit for the horse

We need to create a spritekit for the horse. Something like this:
https://opengameart.org/content/lpc-horses-rework

Have horse eat items on canvas

so when the horse goes near an apple or carrot, it will eat it and that item will disappear.

Add Applause Button

It'd be cool to integrate this applause button somewhere with text near it that says something like.
"Clap if you've found joy from this horse."

See https://applause-button.com/ for more details.

Cursor icons don't work in microsoft edge

Cursor icons work great in chrome, but they break in edge. Could be a good issue for someone to look into.

Create a spritekit for the horse moving up and down.

See #39 . We have left and right sprite kit, but would be great to get one going up and down to get things moving here.

Different cursor icons should be added

Buttons should be added somewhere to switch between different cursors. Example: Pitchfork or Hay.

Bonus points if soundbites accompany them and you can interact with the horse.

Add items to the canvas

Need to add some items to the horse mini game canvas.
Apples....stable.....bush....etc.

Add Github "Fork This" banner at top right corner of page.

Pretty self explanatory.

have dark mode be automatically triggered based on the time of day