Project 2

 Milestone 1

For project number two, Sabrina Kavesh and I want to develop a version of “Eye-Spy”. The inspiration behind such a design is that fact that both of us would like to develop a fun and interactive game. One of the games that we both loved playing growing up was find the object. The intended audience for this project is for individuals 13 and up (teenagers and older). There will be a few sources we will need to rely on to develop this project, one of which being grids. In order for this game to be adaptive for different screen sizes, it would be best to develop a grid for the images to live within and then allow for the images to be responsive within these grids to allow for them to shrink themselves and still keep the integrity of the game. The primary library that we will be using to develop this page will be React, if additional libraries will be needed later, we will look into them, but according to the React documentation we analyzed, this game should be able to be completed just using React. In order to develop the images in the background, Adobe Photoshop will be used to create the shade of the images and the optimization.

In terms of the visual design for this project, a general sketch is shown below:

 
sketch.png
 

For the design for the page we want to implement a list of 5 images that need to be found in the larger image below the list. The images will be shown inside the webpage and the user needs to find them as they correlate to the larger image they are contained within. On the side of the image in the full screen view will be a sort of legend or toolbar. In this toolbar will be a hint button. The hint button will add a drop shadow to the back of the objects that need to be found to allow for either a glow or a depth perception from the background image. Once the user has selected the hint button once, when the user clicks around the screen, their score that is shown in the sidebar as well will decrease. If it is on level one, the user will lose one point for each incorrect click after the hint is used. On level two, the user will lose two points for each incorrect click and so on till level five. For each correct selection of the object, the user will receive ten points. Additionally, we hope to implement five different levels to this game, with each progressive level becoming more and more difficult for the user to find the objects in the color scheme image. If possible, we want to implement a back button so the user does not need to complete all five levels to get back to the level they were on. Furthermore, if additional difficulty is needed in the design for this project, we want to implement a map showing the different levels and where the user is on said map. Some examples of what the scavenger hunt images may look like are shown below. Another potential level may include a grocery store or Costco image.

 
 

Milestone 2

Breaking the mockup of our project into a component hierarchy resulted in the following: 

  • Game (Top level container component)

    • Menu (component with subcomponents)

      • Separate Component: Hint (component)

      • Function in Menu: Score (state)

      • Function in Menu: Level (state)

      • Function in Menu: Items (state)

    • Item (Component)

    • Background (Component)


What is shown in the list above is the very low level break up of components. We then needed to expand out what each of the components meant. 

  • Score (within Menu component)

    • Score component would be a prop

  • Location of items (within Menu component)

    • State

  • Level (menu component)

    • Level Component is prop

  • Background photo (Background Component)

  • Hint (onClick) (Menu component and pass to Hint component as prop)

    • On hover turns on to add a drop shadow

    • Highlight and potential limit on how many hints

      • Hover on item (CSS) 

    • Click a non-item, dock score

      • Dock one point for every non-click on level 1, 2 for level 2 (or 5, 10, 15), and so on

  • List of items (Menu component)

    • Menu component is a state

    • Item component is a prop

For the static version of the app, a few screenshots are shown below to show the page thus far.

The displayed score, level, background image, and images to find that are on the background image are all within the Menu component. The incrementing of the score is done in a function that when the item is clicked on, increments by 10. When clicking outside of the item and on the background image, the score will not increment or decrement. The hint button is displayed in the Hint component and the functions that will be handled by the hint button will be within the Hint component then passed back to the Menu to so that the proper request can be executed. The list of items displayed below are the items that the user needs to find within the larger image shown above. It is displayed as a simple list and in the future, when an item is clicked on within the background image, the item will disappear from the background image and the item will have a color overlay to make it appear more opaque to the user. Below is showing the current interactivity of the incrementing score when the user finds the item.

 
 

For moving forward, the work will be split up as such:

  • Michelle

    • Work on continuing to get the array of different items and background images into arrays and have that change when the level changes

    • Make an onDidMount() function for developing each of the randomized numbers to allow for random positioning of each of the item images within the background image

    • Hiding the items on the background when found

    • Develop using photoshop the other levels

      • SABRINA COMPLETED: Shipwreck (rum bottle, treasure chest, anchor, ship wheel, goblet)

      • Kids playroom(legos, stuffed animals, toys etc)

      • Costco (different items you could find)

      • Farm/Garden (variety of fruit trees, plants, hay bale, animals etc)

  • Sabrina

    • Get the Hint component working to allow for the highlighting of images to work when the button is pressed

      • Furthermore, get the score to decrement properly once the hint button has been pressed (refer to Michelle’s function for handleScoreDecrement)

    • Stylize tooltips in Hint

    • Add drop shadow to items in the background when clicked

  • Both

    • Work on getting the images in the Find Items in the separate Item Component to have a color overlay once the image is found within that level. When the level changes, also update the items needed to find.

      • onHover drop-shadow

GitHub Text Files

Milestone 4

For this project, I think overall with the set time constraints, this project was successful. There are definitely elements where improvement could be helpful for making this project go above and beyond. In Milestone 1, we had discussed wanting to implement a grid for the items to be randomly placed within. This would have allowed for the images to not need to have a display relative to each other and the background image. With having the display relative, when an item higher up on the viewport is found, then the images lower on the viewport would move up causing their location to be revealed and easier for the user to find. Additionally, the final goal of the tactical side of this project was to get the hint button to work. We got it to work so that when you hover the button, text is displayed, and when you hover over the items in the viewport, a glow would show on the outside of the entire background image. However, we wanted to have the glow only occur when the clicked hint button is true. Furthermore, we wanted to have the score decrement if the user didn’t click on the item once the hint button was clicked. This unfortunately was not able to be completed on time so in the future if there was more time, I would have really liked to have been able to implement this element of the project. I think creatively, this project was implemented well and looks like a game that our intended audience would like to play. The strengths of this project were reliant on the incrementation of the score done correctly, the increment of the level that also affected the images shown on the page was done well and the changing the items to find list at the top of the page and having them directly correlate to the images shown on the background was all done really well. Overall, I think this was a very solid project for the time constraints we had.