ollelauribostrom / rebus

🌟 👣 Take your first steps as an open source contributor

Rebus

Contributing to an open source project for the first time can be a scary thing. The goal of this repo is to help you take your first steps as an open source contributor by developing a simple (but hopefully fun) rebus game together. 💖

Try the live version of the game: https://ollelauribostrom.github.io/rebus/

Who can contribute?

Everyone can! (and I mean everyone) 💫

💻 You don’t have to contribute code. Add a new rebus, fix a typo, report a bug, add some documentation, do some re-design or add a translation. This project just like most open source projects are in need of all sorts of different contributions. Not just code.

🌟 You are good enough. Start off easy by fixing something small (like adding a new rebus). This will help you orient yourself in the project and increase your confidence and experience. No one will judge you if you make a mistake, and you can't break anything! Ask for some pointers if you get stuck. You got this!

➡️ Have a look at the open issues to see what needs to be done in this project.

The only thing that is required to get started is git. Make sure you have it installed on your computer by running git --version in your terminal. If you do not have git installed, install it.

If you are an experienced developer, look at the CONTRIBUTING file to see how you can contribute.

Why contribute to open source?

When you contribute to Open Source, you are taking part in the collaborative effort of a vast community of passionate developers and contributors! Open Source software allows you to see, use, and more importantly modify its source code. Contributing to Open Source is a great way to develop a deeper understanding of software, and the best part is being able to learn and teach alongside a community of contributors.

How to contribute

Follow this step-by-step guide to make your first open source contribution. The steps you will perform in this guide is a somewhat standard workflow that you will encounter in most projects: Fork -> Clone -> Install dependencies -> Make your changes -> Run tests -> Commit -> PR

1. Fork

The first step is to create a fork of this repo. Do so by clicking on the fork button on the top of this page. A fork is basically your own working copy of this repository.

2. Clone

The next step is to clone the forked repo to your machine.

Go to your GitHub repositories and open the forked repository called Rebus (forked from ollelauribostrom/rebus). Click on the "Clone or download" button and then click the copy to clipboard icon to get your url.

Finally run the following git command in your terminal:

git clone "the copied url"

For example:

git clone https://github.com/username/rebus.git

3. Register the upstream repository

You have now created a local clone on you computer. This clone will point to your forked repository. It's also useful to have the upstream repository (the source that you forked) registered as well to be able to stay up to date with the latest changes.

If you haven't already, start by changing your directory to the rebus repository that was created when you ran git clone:

cd rebus

Then add ollelauribostrom/rebus as the upstream remote:

git remote add upstream https://github.com/ollelauribostrom/rebus.git

4. Create a branch

It's common practice to create a new branch for each new feature or bugfix you are working on. Let's go ahead and create one!

First, lets make sure we have the latest version of the upstream repository by running (do this before each time you create a new branch):

git fetch upstream

Create your new branch by running:

git checkout -b <your-new-branch-name> upstream/master

Note: Replace <your-new-branch-name> with something that describes the changes you are about to make

For example:

git checkout -b add-new-rebus upstream/master

Note: By specifying upstream/master we're saying that our new branch should be created from the latest upstream version

5. Install the dependencies

Before we begin making our changes, let's install the projects dependencies:

npm install

6. Make your changes

Now it's time to make your changes. Let's add a new rebus to the game.

1. Open the file src/js/rebuses.js in your favourite editor (preferable VSCode 😉).
2. Add a new rebus object to the end of the rebuses array.
3. Save the file when you are done.

7. Run the game locally

If you want, you can run the game locally to try out your changes:

npm start

8. Run the tests

Before your commit your changes, run the tests to make sure you didn't break anything:

npm run test:all

9. Commit your changes

Run git status to see which changes you have made. This will look something like:

Add these changes to your next commit by running:

git add src/js/rebuses.js

And then commit them by running:

git commit -m "Your message"

For example:

git commit -m "Adding a new rebus"

10. Push your changes to Github

Push your changes to GitHub by running:

git push origin <your-new-branch-name>

Note: Replace <your-new-branch-name> with the name of your branch

11. Open a Pull Request

Head over to your repository on GitHub and click on the green "Compare and pull request" button.

Describe your changes and submit your pull request

What's next?

🎉 Congratulations 🎉

You just took your first step as an open source contributor. Your pull request will be reviewed as soon as possible. Join us on gitter if you have questions or need any help. If you feel like it, please give this repository a star ⭐.

If you want something more to work on, look at the open issues for inspiration. Also, take a look the Further Reading section for more great learning resources.

FAQ

Resolve Merge Conflicts

Once changes have been committed and staged it's time to manage conflicts by running:

git pull upstream master

Head back to your favourite code editor and review any conflicts. Generally current changes will be highlighted in one color and incoming changes will be highlighted in a different color. Accept the current or incoming changes.

Commit changes again as outlined in step #9 and #10 above or by running:

git add -A

git commit -m "Your message"

git push origin <your-new-branch-name>

Linebreaks

It is important to note that Windows and Linux operating systems deal with line endings differently. If you are getting an error where the program expects linebreaks to be "lf" but are finding "crlf" linebreak styles,

then you can run the following command in your terminal:

npm run lint -- --fix 

To avoid this problem in the future, you can change your editor to use an end of line sequence of 'lf'. To do this in Visual Studio Code, simply click on the lf/crlf button on the bottom right and then select 'lf' from the drop-down menu that appears.

Further Reading

• GitHub Open Source Guide
• Resource To learn Git
• Git Tutorial Part 1: What is Version Control?
• Git Tutorial Part 2: Vocab (Repo, Staging, Commit, Push, Pull)
• Git Tutorial Part 3: Installation, Command-line & Clone
• Git Tutorial Part 4: GitHub (Pushing to a Server)
• Git & GitHub Crash Course For Beginners
• Git Magic
• Friendly Beginner Repos
• GitHub Endorsed Beginning Contributer Repos
• Sourcetree - Git GUI for macOS and Windows
• VS Code - extensible code editor
• GitHub Atom - Hackable Text Editor for the 21st Century

Support

Please open an issue for support, or join us on gitter.

Code of Conduct

This project adheres to the JS Foundation Code of Conduct. Please read the full text so that you can understand what actions will and will not be tolerated.

License

Licensed under the MIT License.

rebus's Issues

Remove invalid CSS property

The word class currently contains justify-items: auto;. This should be removed since it's an invalid property value.

Steps:

• Open src/css/main.css
• Find the word class
• Remove the line justify-items: auto;

Disable input if rebus is already answered

It would probably make sense to disable the input fields if the rebus has already been answered.

Steps:

1. Open src/js/components.js
2. Find the Char component
3. Add the disabled attribute to the input field if the rebus has been answered

Add section about how to resolve merge conflicts to README

To improve the README, we should include a section about how to resolve merge conflicts.

Make it possible to share a rebus

We can now load a specific rebus from the url, like https://ollelauribostrom.github.io/rebus/?rebus=6

Lets utilize this to make users able to share a specific rebus with a friend. We can do this in a few different ways:

1. Update the url to include the query string each time the user steps to a new rebus

   OR

2. Add a simple "Copy rebus url" button/link somewhere

Improve the README

The idea is that the README will provide a step-by-step guide on how to make your first contribution. The list below contains a bunch of ideas on how to improve the README. If you wish to work on something, comment below and submit one PR per item.

• Add a section about "Installing the dependencies" (Before "Make your changes")
• Add a section about "Running the game locally" (Changes -> Run locally -> Tests -> Commit)
• Add a section about "Running the tests" (Changes -> Run locally -> Tests -> Commit)
• Add a section "Why contribute to open source?"
• Add a section "How to resolve merge conflicts?"
• Add a section "Code of Conduct" to the README (Basically just refer to the code of conduct found in the .github folder)
• Add a FAQ section (What is a rebus?, What is an upstream repository, etc..)
• Add a section "Credits" (Listing notable dependencies in this project)
• Add a note somewhere that more experienced developers can just look at CONTRIBUTING.md for reference on how to contribute
• Proof read the README and fix any typos

Flashing scrollbar after a rebus has been answered correctly

When a rebus has been answered correctly and the confetti animation finishes - the scrollbar flashes.

Steps to Reproduce the Problem

1. Answer a rebus correctly.
2. Wait until the confetti animation finishes
3. Watch the scrollbar flash for a second

[Easy] Add a new rebus

This project needs more fun rebuses to solve!

Instructions:

Open the file src/js/rebuses.js in your favourite editor and add a new rebus object to the end of the rebuses array. Follow the guide in the readme for more detailed instructions on how to get started.

Improve the handling of long words

When a rebus contains a "long" word, like for instance this one the input fields will overflow (depending on your screen size ofc). This does not look too pretty in my opinion,

Any ideas on how we could improve this?

Add hints to existing rebuses

As of #168 we can now display hints when a user has entered an incorrect answer several times. This is awesome, but almost every rebus is currently lacking the hint property so lets go ahead and add some hints 🙂

This issue is very beginner friendly, just follow these steps:

• Open the file src/js/rebuses.js
• Have a look at the rebuses and see if you can think of any good hints
• Add your hint to the rebus object: hint: 'Your hint text'

Fix broken link in README.md

The link to the open issues under the subheading "Who can contribute?" is broken. The correct url should be: https://github.com/ollelauribostrom/rebus/issues

Integrate Travis CI with Gitter

Lets integrate Travis CI with gitter. Add the following to the notifications part in .travis.yml

  webhooks:
    urls:
      - https://webhooks.gitter.im/e/d6e8722e284fbf3d51b2
    on_success: change
    on_failure: always

Add first-timers-only badge to README

Lets add a first-timers-only badge to the README to advertise that those issues exist:

Add the following markdown next to the other badges in README.md (make sure you add a space between them)
[![first-timers-only](https://img.shields.io/badge/first--timers--only-friendly-blue.svg?style=flat-square)](https://www.firsttimersonly.com/)

Add coverage badge to README

Since we are measuring code coverage during the Travis CI build, it would be a nice feature to add a coverage badge to the readme:

Add the following markdown next to the build status badge in README.md (make sure you add a space between them)

[![Coverage Status](https://coveralls.io/repos/github/ollelauribostrom/rebus/badge.svg?branch=master)](https://coveralls.io/github/ollelauribostrom/rebus?branch=master)

Add video tutorials on how to get started

To further improve the step-by-step guide on how to get started, it would be a nice feature to add some video tutorials that takes the developer through every step.

Get specific rebus from URL query string

If you've added a rebus and you want to challenge a friend to solve it - it would be a nice feature to make it possible to share a specific rebus. In other words, we need to make it possible to start the game at a specific rebus.

Pointers:

• When getting the rebuses here use URLSearchParams to find out if the user passed a query string
• If the user passed a query string like ?rebus=12, put the rebus with the id of 12 first in the array that is returned from getRebuses

Move to next bus once correct answer is provided

Expected Behavior

It should move to next bus once right answer is provided
...

Actual Behavior

It is displaying same bus not going to next bus
...

Steps to Reproduce the Problem

1. Step 1..
2. Step 2..
3. Step 3..

Specifications

• Browser:

Fix browser compatibility issues

The app currently crashes when loaded in Safari and on older versions of Chrome. To fix these compatibility issues, we have to refactor our babel configuration (in other words, not just target node 10).

Add tests that check for duplicated rebuses

We currently have some duplicated rebuses. We should probably remove these and add some tests in rebus.spec.js to make sure that no duplications are added.

Steps:

1. Open tests/rebus.spec.js
2. Add a test case that makes sure that there are no duplicated rebuses
3. Remove any existing duplications

Add more learning resources

We need to add more learning resources / further reading material 🙂

If you know of any good tutorial, guide or project that is suitable for new open-source contributors - add it to the "Further Reading" section of the README.

Update issue template

The issue template currently asks about Version and OS under Specifications. This could be updated to something like:

## Specifications
- Browser (vendor/version): 

Add progress bar to show how many rebuses the player has answered

As discussed in #67, we could add a progress bar at the bottom of the window to display how many rebuses the player has answered. This could look something like:

Steps:

1. Add a new component (maybe called ProgressBar or something like that)
2. Use the <progress> element
3. Connect the component to the store to be able to update it based on how many rebuses that are answered
4. Add/update tests

Progress bar appearance in Firefox

The Progress bar component does not render correctly in Firefox. It currently looks like this (missing the correct background color):

Steps to fix this:

• Open src/css/main.css
• Add background: #9c0629; to the .progress-bar class

Add code of conduct

We need to add a code of conduct.

Steps:

• Create a file called CODE_OF_CONDUCT.md in the root of the project
• Add the following markdown This project adheres to the [JS Foundation Code of Conduct](https://js.foundation/community/code-of-conduct). in CODE_OF_CONDUCT.md

Add jasmine to eslint env

Add jasmine env in eslint rules to prevent eslint failures in tests

 "env": {
    "jasmine": true
  }

General UI improvements

If you can think of any improvement of the user interface - your contribution is very much welcome.

The game is live at: https://ollelauribostrom.github.io/rebus/

Some ideas:

• How to better handle long words?
• How to improve the animations?
• How to improve the mobile UI?

Toggle between rebuses using the keyboard

To enhance the user experience, we could add the ability to toggle between rebuses using the left/right arrow keys.

Steps:

1. Create a new function called registerListeners in app.js
2. In the registerListeners function, add an event listener that calls actions.next() or actions.prev() if the user presses the left/right arrow key
3. Call the registerListeners function after the init function is called here

Add gitter badge to README

To highlight that you can join our gitter chat, it would be a nice feature to add a gitter badge to the readme:

Add the following markdown next to the other badges in README.md (make sure you add a space between them)

[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/rebus-contributors/Lobby)

Answered rebuses in local storage shouldn't have duplicated rebuse id

Expected Behavior

Answered rebuses array in local storage should have unique elements

Actual Behavior

Answered rebuses array in local storage may have duplicated elements

Steps to Reproduce the Problem

1. Answer a rebus then check answered rebuses in local storage.
2. Come back the answered rebus then remove a char and re-enter it again.
3. Check answered rebuses in local storage again and see the duplicated rebus id.

Go to next rebus when pressing enter

It would a better user experience (I think) if user is presented with the next rebus when it presses enter (in any of the input fields)

Add a new rebus

This project needs more fun rebuses to solve! 🎉

The game is live at: https://ollelauribostrom.github.io/rebus/

Instructions:

Open the file src/js/rebuses.js in your favourite editor and add a new rebus object to the end of the rebuses array. Follow the guide in the readme for more detailed instructions on how to get started.

Automatically change focus to next word when rebus has multiple lines

Expected Behavior

When typing a rebus solution the focus should jump to the next word automatically (only if rebus has multiple words) after finishing typing each word.

Actual Behavior

When the rebus has multiple words it doesn't change the focus to the next word.

Rebus links 404

#170 made it possible to share a specific rebus based on the url (the url query string is updated each time the user switches to a new rebus). Everything works fine locally but when the site is deployed at https://ollelauribostrom.github.io/rebus/ the url is updated to point to https://ollelauribostrom.github.io/?rebus=2 etc. This will result in a 404 since the /rebus is missing.

Steps:

• Open the file components/rebus.js
• Use/rebus?rebus=${rebus.id} when pushing the new state to window.history
• Update the webpack.config.js to make this work locally as well, add historyApiFallback: true to the devServer configuration.

Add a search bar to get to a certain rebus faster

Expected Behavior

Add a search bar
...

Actual Behavior

No search bar
...

Currently there is no way to get to a certain rebus without changing it in the url or rapidly going through all the rebuses. Adding a search bar would fix this.

Add hints

As proposed by @wenzelmkay in #67, we could add some kind of hint functionality to the game. This could work something like this:

1. The user enters an incorrect answer n (maybe two/three) times
2. If the rebus has a hint property, display the hint below the input fields

For example, if the rebus data looks like:

  {
    symbols: ['Re', '+', '🚌'],
    words: ['Rebus'],
    hint: 'You´re solving one right now'
  },

The text You´re solving one right now would be displayed after the user has entered an incorrect answer n times.

Log errors to Sentry

To help us detect and fix any in-production errors, we should think about using Sentry. Let's add raven-js as a dependency and create a logger class that log errors to Sentry (Only log in-production errors). Might also be a good idea to wrap the render function in a try-catch block.

Rename component files using PascalCase

We should probably rename the component files using PascalCase to reflect the component names.

• app.js -> App.js
• change-button.js-> ChangeButton.js
• char.js -> Char.js
• github-corner.js -> GithubCorner.js
• hint.js -> Hint.js
• logo.js -> Logo.js
• progress-bar.js-> ProgressBar.js
• rebus.js-> Rebus.js
• word.js -> Word.js

Minor update to the PR template

We can update the PR template to avoid some confusion for people following the step-by-step guide in the README.

Remove the following from .github/PULL_REQUEST_TEMPLATE.md

Please get familiar with the [contributing guide](https://github.com/ollelauribostrom/rebus/blob/master/.github/CONTRIBUTING.md) before submitting a PR.

Add tests for app.js

We need to add some tests for app.js (src/js/app.js).

Some pointers:

• Create a new test file: tests/app.spec.js
• Use the same structure as the other test files
• Refactor app.js to make it testable (move the render call into an exported function)
• Mock the render function
• Verify that the render function is called with the correct arguments (Probably a good idea to use .toMatchSnapshot())

Split components in to separate files

All components are currently located in src/js/components.js. To improve readability/maintainability we could extract each component in to its own file.

Steps:

1. Create a new directory calledsrc/components
2. Open src/js/components.js
3. Extract each component in to its own file inside the new directory src/components

Add open source badge to README

To show our support for open source software, it would be a nice feature to add an open source badge to the readme:

Add the following markdown next to the coverage badge in README.md (make sure you add a space between them)

[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)

Add build status badge to README

It would be a nice feature to add a build status badge to the readme:

Add the following markdown directly below the heading in README.md:

[![Build Status](https://travis-ci.org/ollelauribostrom/rebus.svg?branch=master)](https://travis-ci.org/ollelauribostrom/rebus)

How to handle missing emojis?

Some of the rebuses use emojis that are not supported by every system. Does anyone have an idea on how we could solve his?

My current idea:

1. Somehow check if an emoji is supported by the users browser/system
2. If not, replace that emoji with a twemoji

Add a new rebus

This project needs more fun rebuses to solve!

Instructions:

Open the file src/js/rebuses.js in your favourite editor (preferable VSCode 😉) and add a new rebus object to the end of the rebuses array. Follow the guide in the readme for more detailed instructions on how to get started.

Don't autofocus first char input after a rebus has been answered

Expected Behavior

• First char input should not gain focus after a rebus has been answered

Actual Behavior

• The first char input is focused after a rebus has been answered

Steps to Reproduce the Problem

1. Answer a rebus
2. The first char input gains focus

Mobile UI improvements

The game is currently playable on mobile devices but there is a lot of room for improvements when it comes to the UI. Long words causing overflow makes some elements not visible, and the autofocus is a bit annoying.

Note: The game looks better when simulating a mobile device in Chrome dev tools that in actually does on a real device.

Steps:

1. Try the game on your mobile device: https://ollelauribostrom.github.io/rebus/
2. Look at posible improvements
3. Implement improvements in src/css/main.css

Save game state in localstorage

To improve the playing experience it would be a good idea to save the game state in localStorage. This means saving which rebuses the user has already answered until the next time the user decides to play the game.

Pointers:

• When a user correctly answers a rebus, save the rebus id to localStorage (starting point)
• When getting the rebuses here, check in localStorage if it has already been answered and if so, set isAnswered: true and input: [...Array(rebus.words.join('')]

Lunch contribution: Add a new rebus

This project needs more fun rebuses to solve! Why not add one on your lunch break?

Instructions:

Open the file src/js/rebuses.js in your favourite editor and add a new rebus object to the end of the rebuses array. Follow the guide in the readme for more detailed instructions on how to get started.

Add autofocus on first char input

Would be great if the app autofocused the first char input so users can start typing right away, and fires the autofocus feature on next/prev actions.

Also this can improve the user experience playing only with the keyboard.

Add percent to progress bar

Expected Behavior

Percent to accompany the progress bar for rebuses completed
...

Actual Behavior

No percent bar
...

Just thought it would be cool to add a percent to accompany the progress bar

Add random button

Add random button so that we can have different rebus every time which interests the end user.
And would like to work on this issue.!