Git Product home page Git Product logo

lights-out's Introduction

Lights Out

Lights Out is a logic/puzzle game, played on a gird of individual lights, which can either be lit or unlit. The puzzle is won when when all of the lights are turned off.

You can click on a cell to toggle that light — but it also toggles the light above it, to the left of it, to the right of it, and below it. (Cells on an edge or in the corner won’t flip as many lights, since they are missing some neighbors).

When the game is won, the board should be all black, and a “You Won” message will appear.

Check it out at: https://dlmedeiro.github.io/Lights-Out/

Component Design

App

Renders the Board component.

Board

Holds the state that represents the in-memory grid of true/false for lights-on/off. This component holds the state for the board and also where the setState calls and functions are located.

Cell

Renders a div, where the CSS classes will indicate whether this cell is lit or unlit. This is what the user clicks on. This calls a function received from the board to update the state.

lights-out's People

Contributors

dlmedeiro avatar

Watchers

 avatar

lights-out's Issues

Add Testing

Add tests for:

rendering a cell Cell properly: this is a straightforward test, and could even be a snapshot test
rendering the starter Board: you could write this as a snapshot test, but you’d need to make sure the initial board configuration was predictable in the tests. How could you do that?
handling cell-clicking: this is harder test, but has the most value. You’ll need to do a non-shallow render of the Board, then find a cell, and ensure that clicking it causes the right cells to flip.
checking for a win and showing a “You won!” message.

Deployment to GH Pages

Tried multiple solutions I found online, but still keep coming back to these errors.

Three errors on initial page load:

Failed to load resource: the server responded with a status of 404 ()
main.d6b55400.css:1
Failed to load resource: the server responded with a status of 404 ()
main.71071951.js:1
Failed to load resource: the server responded with a status of 404 ()
main.d6b55400.css:1

Another 2 errors when the page is reloaded

GET https://dlmedeiro.github.io/dlmedeiro/Lights-Out/static/js/main.71071951.js net::ERR_ABORTED 404
GET https://dlmedeiro.github.io/dlmedeiro/Lights-Out/static/css/main.d6b55400.css net::ERR_ABORTED 404

Code Questions

  1. CreateBoard Function: syntax of innerArray.push(Math.random() < chanceLightsStartsOn)

I know this is assigning to new cell as either on or off, then the rest of the function creates the board or arrays. Not understanding the "<" syntax

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.