React>> Infected-Community>> 返回
项目作者： Ramyarajendra

项目描述 ：
React Application
高级语言： JavaScript
项目地址: git://github.com/Ramyarajendra/Infected-Community.git
创建时间： 2021-01-21T04:19:39Z
项目社区：https://github.com/Ramyarajendra/Infected-Community
开源协议：
下载


Situation

The year is 2021 - the Zombie apocalypse has started, and the virus spreads through the air. Only those who distance at least one home from another will be safe.

You have been asked by the government of your province to generate a model of the spread of zombies in order to preview the coming days. As of right now, our doctors claim that zombies will spread the infection by one home per day. However, due to the grid-style of your town, it can only spread north (up), south (down), west (left) and right (east). Additionally, zombies can not jump over empty homes.

Our top scientists are finishing a cure for the infected soon, but this relies on all of humanity not being infected. We need to buy them enough time to get the cure available.

You will be given a data-map of current homes, with known infected homes - show the spread step by step, and the ending result with how many days, if all are infected, remain. The government will move people around if the situation is grim.

Data map:

  1. 0 = Empty Home
  2. 1 = Healthy Home
  3. 2 = Zombie Home
  2. // A case where all can be infected
  4. // Input
  5. [
  6.   [1, 0, 1, 1, 0, 2],
  7.   [1, 1, 1, 2, 1, 0],
  8.   [0, 0, 1, 0, 1, 1],
  9.   [1, 0, 1, 1, 1, 1],
  10.   [1, 1, 1, 1, 1, 2],
  11.   [2, 0, 1, 0, 1, 0]
  12. ]
  14. // Output
  15. [
  16.   [2, 0, 2, 2, 0, 2],
  17.   [2, 2, 2, 2, 2, 0],
  18.   [0, 0, 2, 0, 2, 2],
  19.   [2, 0, 2, 2, 2, 2],
  20.   [2, 2, 2, 2, 2, 2],
  21.   [2, 0, 2, 0, 2, 0]
  22. ]
  23. Your community will be totally infected in 4 day(s)

However, due to the above model, we can assume that with effective distancing, we can wait for all of this “to blow over while we are at the winchester”

  1. // A case with effective social distancing
  3. // Input
  4. [
  5.   [2, 0, 1, 0, 1, 2],
  6.   [1, 0, 0, 1, 0, 1],
  7.   [0, 0, 1, 0, 1, 1],
  8.   [2, 0, 1, 1, 0, 2],
  9.   [1, 0, 0, 0, 1, 0],
  10.   [2, 1, 0, 0, 2, 0]
  11. ]
  13. // Output
  14. [
  15.   [2, 0, 1, 0, 2, 2],
  16.   [2, 0, 0, 1, 0, 2],
  17.   [0, 0, 1, 0, 2, 2],
  18.   [2, 0, 1, 1, 0, 2],
  19.   [2, 0, 0, 0, 2, 0],
  20.   [2, 2, 0, 0, 2, 0]
  21. ]
  22. Not all will be infected, and the infected will be cured!
  23. // Note: Show the step after, which cures all individuals who have been infected in this case.

Instructions

Setup

This app was generated via create-react-app.

  • Fork the repository on github.com (Private or public, whichever works for you)
    • Use yarn to prep the environment.
  • Do not create a pull request into the homework repository

Task

  • Show the spread of the zombies per day, with the day count visible.
    • Show the spread on the page with at least a 1 second pause between spread.
  • Show the newly infected homes as the InfectedHome svg (Light green) per turn.
  • Once the spread is complete, show all stages as a carousel
    • Feel free to just use < or >, be creative with CSS, use buttons, or install an icon dependency.

      Read the above for expected input / output for the final stage.

  • Use the implemented redux store to manage zombies
  • Use the SVG images given
    • How you implement these SVGs is up to you.
    • Change the color of the healthy roof to your favorite color or blue

Create React App Info:

This project was bootstrapped with Create React App.

npm install

To install all the dependencies required

yarn start or npm start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.

See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Libraries used

  1. material-ui
  2. react-chartjs-2
  3. react-multicarousel

Functionality

  1. Press Start to see the spread.
  2. On completion the state is reset and all the details/stages of spread can be viewed
  3. Zombie chart is implemented in which the total count of zombies and spread per day can be seen