Giter Club home page Giter Club logo

chipsparlour's Introduction

Chips Parlour

Phillip Healy's Milestone Project 2: Interactive Front End Development. A place to play parlour games online. Minimum Viable Project scope is 1 game (Code Breaker) with 3 difficulties.

2 scores will be recorded; fastest code break, and longest streak.

UX

As a game creator I want a site to put all my parlour type games on. As a player I want to be able to play fun games. As a pro gamer I want to be able to challenge myself with higher difficulties. As a competitive player I need to see my high scores. As a novice player I want to be able to see how to play. As a fellow developer I would like to be able to contact the dev for collaboration. As an enthusiast I want to be able to contact the dev to leave a review. As a colourblind user I wish the games would be accomodating to my needs.

Wireframes: https://imgur.com/a/AbR6AxF

Features

Existing Features

This is a site on which to play a collection of games. Initially there is a single game with 3 difficulties: Code Breaker.

Code Breaker is a puzzle game where 4 coloured nodes can be selected via clicks or taps and tested against a secret (randomly generated) code. If you get a colour placed correctly it will be highlighted in green and you can try again up to 8 times, after which you fail and the code is revealed. Get them all correct to win!

Easy difficulty is 5 colours, medium is 6, hard is 7. I have used colours that are rich and high in contrast to be both aesthetically pleasing to colour-seeing users, but also differentiated to colourblind users. I adapted the palletes found on https://venngage.com/ to be used across the site.

The colours chosen should be preceptible for the game to be played by people with Protanopia, Deuteranopia, and Tritanopia.

Future Features

I will be adding games to this page periodically. I've ideas for dozens of games, from card games, board games, puzzles, role play sims, choose your own adventures, and more! I will also be updating the site to be as user friendly to anyone with accessibility issues, including Dark Mode, Colourblind mode, screen reader friendly, keyboard only controls, etc.

Technologies Used

JQuery

  • The project uses JQuery to simplify DOM manipulation, and is the primary interactivity of the site

Bootstrap

  • HTML/CSS framework for developing mobile-first front end.

Balsamiq

  • Wireframing tool used to create mock ups of each page for each media size.

Testing

In this section, you need to convince the assessor that you have conducted enough testing to legitimately believe that the site works well. Essentially, in this part you will want to go over all of your user stories from the UX section and ensure that they all work as intended, with the project providing an easy and straightforward way for the users to achieve their goals.

Whenever it is feasible, prefer to automate your tests, and if you've done so, provide a brief explanation of your approach, link to the test file(s) and explain how to run them.

For any scenarios that have not been automated, test the user stories manually and provide as much detail as is relevant. A particularly useful form for describing your testing process is via scenarios, such as:

Contact form:

  • Go to the "Contact Us" page
  • Try to submit the empty form and verify that an error message about the required fields appears
  • Try to submit the form with an invalid email address and verify that a relevant error message appears
  • Try to submit the form with all inputs valid and verify that a success message appears.
  • In addition, you should mention in this section how your project looks and works on different browsers and screen sizes.

Bugs Encountered

Friday 30/4 - Had a power outage that wiped a couple of hours of work. Save and commit often.

Wednesday 5/5 - Difficulty buttons were stuck in infinite for loop, breaking it early wasn't returning a value I could use. Will rethink how it's implemented.

Thursday 6/5 - DecretCode won't provide values to check against players choice inside function.

Thursday 6/5 - Clicking breaker button checks each line regardless of the round. Even after changes id or class of button it still gets listened for in the previous function under the old name.

Deployment

Credits

Content

Code Breaker is a generic game modelled after Mastermind; a wooden peg boardgame released by Mordekai Meirowitz in the 1970s. Though the origin of the game comes from at least the 1800s on pen and paper under the name "Bulls and Cows". https://en.wikipedia.org/wiki/Mastermind_(board_game)

Media

All images created by me.

Acknowledgements

Originally I was going to do a choose your own adventure, but my wife talked me down from creating 800+ branches of story. She is my greatest inspiration and helps to anchor me to the earth when my head is in the clouds.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.