chingu-voyages / v44-tier1-team-05 Goto Github PK

Task Description
Tier 1 teams will be assigned a project. Check your team channel for more information on which project you are asked to complete.

For Tier 2 & Tier 3 teams:

• Watch the How to Select a Voyage Project video
  
• Collect ideas from the team
• Brainstorm with your team
• Vote to select one idea
• Decide on the technical stack you’ll use to build your project

Technical Considerations
N/a

Additional Considerations
Use the Project Vision and Feature Planning template to gather & vote on everyone's idea

Resources
Choose a Project & create a Vision Statement (Chingu Handbook)

Member of Epic: #16

Task Description
Add a pre-defined period of time on game_page

Task Description
"Block diagonal on the grid
Technical Considerations
Include any technical considerations including architecture (e.g. API), required libraries, etc.

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Task Description
Create a favicon.ico

Technical Considerations
Include any technical considerations including architecture (e.g. API), required libraries, etc.

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Task Description
In case we meet the MVP, we will add some more features that we voted on SPRINT 2 :)

Voted:

• Play a sound to simulate the rolling dice

• Animate the rolling of the dice

• Support dark/light mode

Task Description

• Familiarize yourself with the Chingu Agile Methodology used in a Voyage
• Learn more about Agile Methodologies in general by reading Agile Methodology 101

Technical Considerations
N/a

Additional Considerations
N/a

Member of Epic: #15

Task Description
User can see the leaderboard area with these components:

• User can see the display of the total number of wins and losses for each;
• User can see the tally of wins for each of the three ways the game can end;
• User can see the tally of losses for each of the three ways the game can end

Task Description
User can see a button in the game control panel to start a new game, which:

• updates the Leaderboard
• clears the grid,
• starts a new game.

Technical Considerations
HTML, Javascript

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Task Description
The user will see a button to allow them to clear the grid and start refilling it using the values from the current roll. This allows the user to try different options.

Expected behavior
Users should clear only the "actual" array, not all grid;

To Reproduce
Steps to reproduce the behavior:

1.Go to 'app'
2.Click on 'play.'
3.Scroll down to 'roll the dice', mark the squares, submit the answer, and then roll again. After, click on "Clear grid"
See error

Feature Description
After completing the MVP, we could add some of these features to the game :)
Prioritize between 3 features from the list below.

Extras (Not Required)

1. Implement the game to allow human-to-human competition between 2 players or human-vs-computer competition.
2. Allow the user to choose the color to be used to fill in the grid
3. Maintain player metrics across sessions for the last 3 games that have been played
4. Allow the user to specify the dimensions of the grid
5. Add a countdown timer showing time remaining in the game and create an input field to allow the user to set the starting number of minutes and seconds.
6. Animate the rolling of the dice
7. Play a sound to simulate the rolling dice
8. Add a graph to the leader board to show the number of times a number has been rolled
9. Support dark/light mode

Additional Considerations

Voted:

• Play a sound to simulate the rolling dice
• Animate the rolling of the dice
• Support dark/light mode

Task Description

• Decide on the coding standards the team must follow.
• Define the characteristics of your repo including the number of branches, branch names, & the workflow everyone must follow.
• Agree on the format of commit messages, how Pull Requests will be reviewed, and GitHub branch protection rules.
• Decide on where you’ll deploy your app and the branch to be considered as ‘production’ you’ll be deploying from.
• Decide on what meetings you’ll need each week and to save time, schedule them as recurring meetings. You might want to look ahead to Reaching your MVP to learn more about the types of meetings you’ll need.

Technical Considerations
N/a

Additional Considerations
Setup Your Team Workflow (Chingu Handbook)
Javascript Style Guides
Defining a Git Workflow (Chingu Handbook)
Git Branches (Chingu Handbook)
Git Commits (Chingu Handbook)
Git Pull Requests (Chingu Handbook)

Member of Epic: #16

Feature Description
Make sure that there are no errors in the developer console before submitting the project

Task Description
If the user tries to start a new game while one is in progress a modal alert will be displayed to confirm that the current game may be abandoned.

Technical Considerations
Javascript,CSS

Additional Considerations
https://www.w3schools.com/howto/howto_css_modals.asp

Task Description
If you have questions about Chingu or the Voyage process join one or both of the Chingu Roundtable sessions held every:

• Wednesday @ 2:00 p.m. GMT -6 (Chicago)
• Saturday @9:00 a.m. GMT -6 (Chicago)

These sessions give you the opportunity to ask your questions in real time with a member of the Chingu team

Technical Considerations
These are held in our Discord community in the #townhall-chat & #townhall-voice channels.

Additional Considerations
You may also ask questions anytime in the #coding-help channel in Discord or by emailing [email protected]

Member of Epic: #15

Task Description

• Each team member should add their ideas to the Project Vision & Feature Planning template before the team meeting
• Prioritize each feature - Must Have, Should Have, Nice to Have
• Meet with the team to review each feature & refine priorities

Technical Considerations
N/a

Additional Considerations
All Must Have tasks will make up your MVP. Make sure that you control the scope of the project by limiting the number of Must Have features to the ones you can reasonably complete by the end of Sprint 6.

Remember that you can always add new features once you complete the MVP.

Resources
Choose a Project & create a Vision Statement (Chingu Handbook)
Define & Prioritize MVP features (Chingu Handbook)

Member of Epic: #16

Task Description
User can see the game window with a 10x10 grid the game is played on;

Task Description

• Meet your team by adding your introduction to the Team Channel
• Start getting to know one another
• Start discussing what projects you would like to create
• Watch the Voyage Team Roles video to learn about the different roles members of your team may have signed up to fill.
  
• Watch the How to Select a Voyage Project video
  

Technical Considerations
N/a

Additional Considerations
Meet Your team (Chingu Handbook)

Use When2Meet to identify days & times when everyone on the team is available to meet.

Member of Epic: #16

Feature Description
Every time we get help from somewhere, it's a good practice to give credit to the author on our README.MD file :)
So, let's keep this issue here, then we add the links from where we got some help. When it comes to writing our readme, it will help us to remember everyone xD

Additional Considerations
Your post should have the author, the link, and how to write it on README For example:

Author: Ksenia Kondrashova
Link where you got help: https://dev.to/uuuuuulala/making-background-blob-animation-in-just-15kb-step-by-step-guide-2482
Acknowledgments: Huge shout out to Ksenia Kondrashova for the Background Blob Animation that gives the illusion of blobs morphing randomly. Step-by-Step Guide.

Task Description
Apply Custom Styles from John's Design File to the Page

Technical Considerations
Include any technical considerations including architecture (e.g. API), required libraries, etc.

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Task Description
Apply Custom Styles from John's Design File to the page

Technical Considerations
Include any technical considerations including architecture (e.g. API), required libraries, etc.

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Task Description
Apply Custom Styles from John's Design File to the Game Page

Task Description
The player should be able to select an area by dragging the mouse instead of selecting cells separately after rolling the dice.

Technical Considerations
Include any technical considerations including architecture (e.g. API), required libraries, etc.

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Task Description
Hey Team, I added this task because I believe it will be a good exercise for us before week 3 (when we start to code).
It will help us to define the process that everyone on the team will rigidly adhere to when making and promoting changes.
A three-level hierarchy of branches is created, through which changes are promoted:

• Main
• Development
• Working branches: Individual branches created by each developer when they are working on changes and bug fixes.

Mainly, we are going to use the DEVELOPMENT BRANCH. The Development Branch is used for development of new features and integration of changes. Pull Requests are made from your local branches into the development branch, and it is only merged after it's checked by other members of the team.

How to complete this task:

1. Clone the development branch to your local repository
   

2. Before you create a new branch or merge a branch, ensure that you are on the development branch and then pull changes from development (central repository) to ensure that your local repository is up to date.

• In case you know how to use the terminal, you can follow these steps:
  1. Check if you are on the development branch
  
  2. Then open the terminal and type first "git fetch" enter, after that "git pull" enter. Example below
  
  3. You should see below the path a message "Already up to date."
  4. Branch names should start with either bug, feature, refactor, or style. As we are adding our names, we are going to use FEATURE. In this case, we are going to type this command on the terminal again git checkout -b feature-17/Add-name-to-contributors-list/PaulaR-05 and then press enter.
  Feature: Because we are adding sth on the file
  17: It's the number of the issue
  Add-name-to-contributors-list: Description
  PaulaR-05: your profile on GitHub.
  The example is below:
  
  5. Check if the branch was created. Example below:
  
  6. Open the file "CONTRIBUTORS.md", then add your name and your github profile and save the file:
  - Gabriela de Paula
  
  7. Then type again on the terminal git add . ENTER
  
  8. Then git commit -m "Add name to contributors-list" ENTER
  
  9. Then type into the terminal git push origin feature-17/Add-name-to-contributors-list/PaulaR-05
  10. Go to our repository and create a Pull Request. Click on the green button "Compare and Pull request".
  
  11. Make sure you are comparing your branch against development branch.. And, add a description of what you change and then press "Create pull request" .
  Example below
  
  12. Add the reviewers and wait for 3 approvals. For example:
  

Technical Considerations
It might be new for some of you, so if you run into a snag just let me know :) I will be happy to help you!

Task Description
Write Semantic HTML for Landing Page

Technical Considerations
HTML

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Feature Description
Prepare for your Voyage by becoming familiar with the Chingu practices & procedures.

Major User Stories/tasks

• Getting Started: 🚀 Understand the Voyage Process #11
• Getting Started: 📜 Review the Chingu Agile Methodology #2
• Getting Started: 🤔 Start thinking about project ideas & the technical stack #3
• Getting Started: 🙋 Do you have questions about Chingu or the Voyage process? #4

Additional Considerations
N/a

Task Description
The user will see a button that allows them to submit their answer after filling in the grid from the current roll of the dice.

Technical Considerations
Include any technical considerations including architecture (e.g. API), required libraries, etc.

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Task Description
Create a UI mockup with a visual representation of a final digital product or website, including layout/hierarchy, color, typography, icons, and other UI elements

Technical Considerations

Additional Considerations

Task Description

• Using everyone's availability posted to When2Meet schedule a Kickoff meeting
• Use the Kickoff meeting template in the shared document directory we've provided to guide the discussion and to record notes, decisions, and assignments
• Set a time for your next meeting for later in the week

Technical Considerations
N/a

Additional Considerations

• When2Meet - Team 05

Resources
Conduct Kickoff Meeting (Chingu Handbook)

Member of Epic: #16

Task Description
Functionality
Users can see the game window with these components:

• Leaderboard showing the number of games the current player has won and lost
• Game controls
• A 10x10 grid the game is played on
• Dice area(for displaying the dice numbers)

Technical Considerations
HTML, Javascript

Additional Considerations
Grid: https://www.youtube.com/watch?v=23AGsRkghjo

Objective

Establish a common understanding across the team of what information is in each screen and the actions that may be invoked from each screen.

How

• Using the features you added to the the Feature Planning template in step 4 identify the screens you’ll need and the information on each one.
• Map the actions users will be able to perform from each screen and the navigation from screen-to-screen
• Create a low-fidelity wireframe using a tool like [Figma](https://www.figma.com/) or even pencil and paper.

Resources

How To Wireframe A Website in 3 Easy Steps
Create a low fidelity wireframe (Chingu Handbook)

Member of Epic: #16

Task Description
Add a game control session to the HTML, so then we can place some features on this area.

Task Description

• Check out apps that Voyage teams have created in prior Voyage by reviewing the Project Showcase
• Come up with 1 to 3 ideas for projects you'd like to build so you can discuss them with the rest of the team when the Voyage starts.
• Think about what technical stack you'd like to use to build that app. Similarly, you'll discuss this as a team at the start of the Voyage.

Technical Considerations
N/a

Additional Considerations
N/a

Resources
Choose a project & create a Vision Statement (Chingu Handbook)

Member of Epic: #15

Task Description
Add a footer containing a link to our team's GitHub repo.
Steps:

• Create a branch under your name based on the development branch
• Go to the HTML file (landing page and game page)
• Add to the footer

<footer><span> &lt;/&gt; with </span>❤️</i><span> by </span>
<span>
<a href="https://github.com/goodman2814" target="_blank">Alex Papparotto</a>,<a href="https://github.com/nazgul7d" target="_blank">Nazgul.</a>,<a href="https://github.com/PaulaR-05" target="_blank"> Gabriela</a>,<a href="https://github.com/MoriahSWalker" target="_blank">Moriah</a>,<a href="https://github.com/Foughty" target="_blank"> John</a>
</span>
<hr>
<span> © 2023 </span><span>Inspired by <a href="https://www.chingu.io" target="_blank">Chingu</a>. Built for Voyage 44. | <a href="https://github.com/chingu-voyages/v44-tier1-team-05" target="_blank">View Source</a> | <a href="https://github.com/chingu-voyages/v44-tier1-team-05/" target="_blank">Learn More</a></span> | <a href="#" id="developersPage">Meet Team 05</a></footer>

• Create a PR(pull request) and wait for the approval

Technical Considerations
No technical considerations

Additional Considerations

Task Description
One way to celebrate is by creating an optional team Showcase video to submit when your project is completed.

1. No more than 5 minutes long
2. It should be available via a publicly accessible URL
3. Answer these simple questions:
4. What did we build?
5. Who participated in the team?
6. What technology stack did we use?
7. What did we create? Demo the app

Technical Considerations
Last voyage we used the platform loop,
But we can use another one :)

Describe the problem
Users are able to roll the dice before submitting the answer.

Actual behavior
The user rolls the dice and can change the numbers.

Expected behavior
After rolling the dice a new roll should be blocked until the new array has been marked on the grid by clicking squares in the grid

To Reproduce
Steps to reproduce the behavior:

1. Go to 'app'
2. Click on 'play.'
3. Scroll down to 'roll the dice' and then roll again
4. See error

Screenshots
https://github.com/chingu-voyages/v44-tier1-team-05/assets/118011195/fb53b340-4bfc-4e56-9f47-09d5136fb450

Task Description
User can see the value of each dice after they are rolled

Task Description

• Review the Voyage Process to prepare for your upcoming Voyage.
• Watch the Welcome to YOUR Voyage video

Technical Considerations
N/a

Additional Considerations
Voyage section of the Chingu Handbook

Member of Epic: #15

Task Description
our repo needs to have a robust and updated README

Task Description
Leaderboard

• User can see the display of the total number of wins and losses for each
• User can see the tally of wins for each of the three ways the game can end
• User can see the tally of losses for each of the three ways the game can end

Technical Considerations
Javascript

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Please Fill up the When2meet: https://www.when2meet.com/?19957775-yXTNu

• Sprint 2 - Getting off to a Solid Start

  • Create a low-fidelity wireframe

    Objective

    Establish a common understanding across the team of what information is in each screen and the actions that may be invoked from each screen.

    How

    • Using the features you added to the the Feature Planning template in step 4 identify the screens you’ll need and the information on each one.
    • Map the actions users will be able to perform from each screen and the navigation from screen-to-screen
    • Create a low-fidelity wireframe using a tool like [Figma](https://www.figma.com/) or even pencil and paper.

    Resources

    [How To Wireframe A Website in 3 Easy Steps](https://elementor.com/blog/wireframe-website/)

  • Setup Project Backlog

    Objective

    The [Project Backlog](https://www.notion.so/c0b10b9e0c9a4e80a0c3482433fb08a4) is where you track the work that needs to be completed to finish the project.

    How

    • Identify & prioritize features
    • Create an epic for each feature
    • Choose the highest priority epics & divide them into user stories
    • Add your epics & user stories to a backlog tool. Due to it’s tight integration with GitHub we suggest using ZenHub (it’s free for teams using public repositories)
    • Prioritize the user stories

    During the Voyage you’ll refine the Project Backlog and in every Sprint you’ll move tasks from it to the Sprint Backlog. This is part of the Agile process helps you and your team concentrate only on the tasks that must be completed in that Sprint.

    Resources

    [Define Your MVP](https://www.notion.so/c0b10b9e0c9a4e80a0c3482433fb08a4)

    [How to Create a Project Backlog (video)](https://youtu.be/FaoT-DTtXyA)

    [Agile Methodology 101 (article)](https://www.notion.so/f9e0ccc88d894f609a652d6d8a4c0df6)

    [ZenHub website](https://www.zenhub.com/)

    [Install ZenHub browser extension](https://tinyurl.com/yfpcf7ke)

  • Setup your team workflow

    Objective

    Define how you plan to work together as a team. This includes how often you’ll share status, coding standards, git/GitHub processes, and deciding how many meetings you need each week and when and where they’ll take place.

    How

    • Decide on the coding standards the team must follow.
    • Define the characteristics of your repo including the number of branches, branch names, & the workflow everyone must follow.
    • Agree on the format of commit messages, how Pull Requests will be reviewed, and GitHub branch protection rules.
    • Decide on where you’ll deploy your app and the branch to be considered as ‘production’ you’ll be deploying from.
    • Decide on what meetings you’ll need each week and to save time, schedule them as recurring meetings. You might want to look ahead to to learn more about the types of meetings you’ll need.
    • [Develop the App](https://www.notion.so/Voyage-Guide-1e528dcbf1d241c9a93b4627f6f1c809)

    Resources

    [Javascript Style Guides](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa)

    [Defining a Git Workflow (Chingu Handbook)](https://www.notion.so/d5fba28e1d3043e1910b7d2eb8999793)

    [Git Branches (Chingu Handbook)](https://www.notion.so/7ccbd0a34e1c4b87af583e3760632727)

    [Git Commits (Chingu Handbook)](https://www.notion.so/6334daca89f840f381ee1e57243091ad)

    [Git Pull Requests (Chingu Handbook)](https://www.notion.so/6eeda3f9342941ef9a06d1057f0b87a6)

  [Sprint 2 Tasks at a Glance](https://www.notion.so/e02745c27a774a21a9a47c49d740db61)

Feature Description
Chingu has created a process for you to follow during the Voyage. This process helps you to get off on a solid start.

Major User Stories/tasks

• Step 1: 🤝 Meet your team & schedule Kickoff meeting #5
• Step 2: 🧑‍🤝‍🧑 Conduct Kickoff meeting #6
• Step 3: 👍 Choose a project & create a Vision Statement #7
• Step 4: 📤 Define & prioritize MVP features #8
• Step 5: 📋 Create a Project Backlog #9
• Step 6: 📝 Create a Low-fidelity wireframe #14
• Step 7: ⚙️ Set Up a Team Workflow #10

Additional Considerations
N/a

Task Description
When a game is started the user will see a button to roll the dice

Technical Considerations
HTML, CSS, JAVASCRIPT

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Describe the problem
The timer is running instead of stoping at 0 goes to 10, and it starts counting again.

Expected behavior
Timer Goes 0. And stop running.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://chingu-voyages.github.io/v44-tier1-team-05/game_page.html'
2. Click on 'Play'
3. Wait 2 minutes
4. See error

Screenshots
https://github.com/chingu-voyages/v44-tier1-team-05/assets/118011195/27ffd43b-675b-4c6c-a68e-6f39ae77f764

Your Environment:

• Desktop

Additional Information
Add any other context about the problem here.

Task Description
Write a function that enables the Roll Dice, Clear Grid, New Game, and Submit Answer only after the PLAY button is clicked.

Task Description
it will allow users to explore a little bit more about us. I believe we can discuss how can we organize this page and also what we will show on it :)

Task Description

• Watch the How to Create a Project Backlog video
  
• Identify & prioritize features
• Create an epic for each feature
• Choose the highest priority epics & divide them into user stories
• Add your epics & user stories to a backlog tool. Due to it’s tight integration with GitHub we suggest using ZenHub (it’s free for teams using public repositories)
• Prioritize the user stories

Technical Considerations
N/a

Additional Considerations
During the Voyage you’ll refine the Project Backlog and in every Sprint you’ll move tasks from it to the Sprint Backlog. This is part of the Agile process helps you and your team concentrate only on the tasks that must be completed in that Sprint.

If you are using ZenHub don't forget you'll need to install its browser extension before you can see the ZenHub tab in your GitHub repo.

Resources
Create a Project Backlog (Chingu Handbook)

Member of Epic: #16

Task Description
I believe we could add a button and allow the user to press it only 2x. After clicking this amount of times, the user loses the game.

Task Description
Write Semantic HTML for Game Page

Technical Considerations
HTML

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Task Description
This function should display:

• When the dice are rolled the user will be able to click on squares to mark their array.
• When a square is clicked its color will change from the color used for unoccupied squares to the color designation for occupied squares.
• If the total number of squares marked on the grid doesn't match the numbers on the dice an error message must be issued and the user should be given the option to re-mark the grid to match the dice.

Technical Considerations
Javascript

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.