Battleship

Live | Components

• Ruby version: 3.1
• System dependencies: $ brew install postgresql node yarn
• Install dependencies: $ bundle install, $ yarn install
• Database initialization: $ rails db:setup
• How to run the test suite: $ rails test
• Start the development server: $ bin/dev

Components

ViewComponent is used as the component framework.

• BoardComponent will render a board that is defined by Board instance. Inside, BoardComponent will render two CSS grids: one for board squares (BoardAtoms within BoardRows) and one for ships.
• ShipComponent accepts direction (horizontal or vertical), position (x and y coordinates on the board), type (e.g. aircraft carrier or cruiser) params as well as hits to define atoms that have been hit.

Notes

• Board atom hits and misses are generated randomly on page load (see app/javascript/home.js) for code brevity and readability. Alternatively, they could be populated with back-end data (see app/models/board.rb and app/components/board_component.rb).
• ShipComponent uses variants API, to be deprecated in version 3. Variants could potentially be implemented by extracting into additional components or sub-partials.
• Additional work required to render on mobile devices. Currently tested on screens wider than 500px: iPhone SE in landscape mode (568px), iPad mini in portrait mode (768px). On smaller screens boards are rendered in 1 column.
• Style sheets for components are located in app/assets/stylesheets. These could possibly be moved to app/components, though that would require additional configuration.

To-Do

• Seed random hits and misses
• Deploy
• Add link to components storybook
• Set up ESLint
• Set up RuboCop
• Add LICENSE
• Use variants for different ships
• Add tests
• Test on mobile
• Add page titles
• Add docs and update README
• Validate HTML and CSS; Lighthouse, etc.
• Hit animation