DEV Community: Brontesewell

Hangman CLI Ruby Game

Brontesewell — Wed, 01 Apr 2020 23:51:29 +0000

Indroduction

For my first project at Flatiron School SF I did a Hangman CLI Ruby Game. Which means that our Game ran in the Command Line. To run the game the player typed bundle exec ruby app/hangmangame.rb into the command line after navigating to the current directory. This game was written in Ruby and utilizes YAML for saving / loading games.

For our Game Interface when you start playing Hangman you will be given a visual on correct letters and wrong letters as well as a hangman graphic itself to let you know how close you are. When a new game is started, you will have 10 total chances to guess the secret 5 letter word before the man is hung!

Here is the link my team and I's code: https://github.com/brookebachman00/module_1_hangman_game

I also made sure that the Player could only type one letter at a time and it has to be a letter!

Classes, Tables and Relationships

I had 3 Tables. A Player table, Word table and a PlayerWord table. The PlayerWord class is our join table. The relationships are:

A Player has many player_words and has many words through player_words.
A Word has many player_words and has many players through player_words.
A PlayerWord belongs to a player and a word

In our app and app/models I had 5 different classes:

A Player class
Word class
PlayerWord class (Join Class)
String class which is where all our colour classes are defined to make it more visually appealing to the player.
Hangman class which is the hangman graphics
Hangmangame class which holds all of our methods and rules for the game.

Database and Classes Relationships

Firstly, I used ActiveRecord which is an ORM(Object Relational Mapping). Using Actie Record, just like using an ORM, can make fetching and representing data easier. ActiveRecord allows you to write SQL queries but also more complicated ones, using the object-oriented paradigm of a programming language(Ruby in this project).

To manage our database schema I used a domain-specific language called Migrations. Migrations are stored in files which are executed against any database that Active Record supports using rake. Our migrations where for our three tables: Player table, Word table and a PlayerWord table.

Our Secret words where pulled from database in our seeds.rb file.

When a new player comes to play the game and enter a username they are immediately added to the database. When an old player comes to play again and types in their username it collects all their previous game data and points that they had. Then when that player plays Hangman and gets more points their score is updated. At the end of each game it will tell the player their updated score. I did 10 points every time you got the word correct and no points when you lose.

I also made sure that a user never has the same word twice.

Lastly, I created a top player method. Which tells the top player that they have the highest score out of ‘x’ amount of people which I got from the database.

All these methods are defined in my Hangmangame class and connected to my database.

Extra

I used binding.pry to essentially 'pry' into the current binding or context of the code, from outside your file and to test it or check for errors.

Feel free to leave a comment with your thoughts or questions below!

From Bronte Sewell

React Router

Brontesewell — Tue, 03 Mar 2020 18:57:06 +0000

What is React Router?

React Router is the standard routing library for React. React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. It is said to be:

“React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.”

Installing React Router:

In our app we will have our main Parent being the Index. Then we will have App, User & About as our children component.

npm install react-router-dom
npm start  //to run  dev server

Open up the index.js file and import all three components. e.g.

 //index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import Users from './users'
import About from ‘./about'

ReactDOM.render(<App />, document.getElementById('root'))

React router gives us three components [Route,Link,BrowserRouter] which help us to implement the routing. So we will add the following to the code up above.

import { Route, Link, BrowserRouter as Router } from ‘react-router-dom'

The router component looks like this:

<Route path="/" component={} />

Where the path is the specific path and the component is which component user needs to see when they will navigate to that path. Both being props of Route.

So for our example it would look like this:

//index.js
const routes = (
  <Router>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/about" component={About} />
    </div>
  </Router>
)

On App we use ‘exact’ path because The exact prop is used to define if there is an exactly the requested path.

What is a Link?

A Link is the primary way to allow users to navigate around your application. If we had a navigation bar and we put About This means that when someone clicks About in our nav Bar then this would redirect them to the About page without having to refresh the page. As well as our URL will change. So for our app we can do:

//index.js
const routes = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Route exact path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/about" component={About} />
    </div>
  </Router>
)

Each Link to will be a bullet point, underlined and a clickable link which will lead you to its path when clicked.

What is Switch?

Switch component helps us to render the components only when path matches otherwise it fallbacks to the not found component.

So we can create a Unkown/404 component:

import React from 'react'
const UnkownPage = () => <h1>404: Page not Found</h1>
export default UnkownPage

Now we can write this:

//index.js
const routes = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/users" component={Users} />
        <Route path="/about" component={About} />
        <Route component={UnkownPage} />
      </Switch>
    </div>
  </Router>
)

It will go through and try render each component and it none work then it will go to the Unknown Page.

So Our Final Index.js Page will look like this:

//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import App from './App'
import Users from './users'
import About from './about'
import Notfound from './notfound'
const routing = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/users" component={Users} />
        <Route path="/about" component={About} />
        <Route component={Notfound} />
      </Switch>
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

Hope this helped! Feel free to leave any questions or comments below :)

CSS Tricks that are a must know!

Brontesewell — Wed, 12 Feb 2020 20:08:29 +0000

Reading Selectors

Be aware that a Browser reads selectors from right to left.

For example if we had:

#menu ul li a { color: #00f; }

The browser first checks for a, then li, then ul, and then #menu. This is because as the browser is scanning the page it just needs to look at the current element and all the previous elements that it has scanned.

Absolute Positioning

With absolute positioning is has no positioned ancestors and it uses the document body. It allows you to position and control exactly where you want it to be on your page.

position:absolute;
top:20px;
right:20px

20px from the top and right edges of your browser.

Width and height

Width and height can be written in several ways:

px - Pixels.
em - A unit of measurement, where 1 em = current font size.
rem - Root em. Same measurement as em, but makes life much easier without the inheritance problem
% - Percentages.
auto - highly useful unit, will explain below.

You can also use a lot more but I believe these are most commonly used and easy.

Overriding Styles with !important

By simply writing

h2 { color:red !important; }

It will override other styles for a specific element. This should be used carefully and used when you are in deep trouble and need help.

Resizing images to fit on the page

img {
    max-width:100%;
    height:auto;
}

This helps with specific images and needing them to fit in a certatin way. You can also say height: 100%;

Getting the direct child

By writing

#footer > a

You can get the direct child of the Footer and it saves time. It will only select the active link tag which is in the Footer.

You can also get a specific child by writing:

li:nth-child(2) {
    font-weight:800;
    color: blue;
}

Specifically helpful for writing lists! This will get the second item in the list and change its weight and color.

Borders Properties

With Borders You can can change 3 main properties:

border-width – width of the border. Same units as width and height
border-style – style of the border (Solid, dotted, dashed, double, ridge, none, hidden, and many more!!)
border-color – color of the border.

Floats

It is used for positioning and formatting content. When you see 2 columns of text or images side by side most likely float is in play.

Floats have 3 basic properties that you might use often:

left
right
none - removes the float
inherit

For example

img {
  float: right;
}

This Image will float to the right of the page or container.

Background

Here are the main Background properties:

background-color: color of the background.
background-image: url(URI). Takes on the path to your image. For example, to go down one folder, you should type the file name before the image.png. E.g. css/image.png. Or to go up one folder, type the file name with “…/”. E.g. …/css/image.png
background-repeat: to repeat if the width exceeds the background size. Or other values are repeated e.g. repeat-a and repeat-b.
background-position: position of the background relative to the HTML element. It sets the starating position of a background image. It takes two values (a, b). a is the offset from left and b is offset from the top. It uses unit values (like width and height) or left,center,right and top,center,bottom.

In conclusion these are only a few of the Essentials for CSS. But there are thousands more that I challenge you to go out and explore. I hope this Helps :)

Ruby on Rails Checklist!

Brontesewell — Tue, 21 Jan 2020 20:28:18 +0000

When creating a Ruby on Rails project it is always easiest when you have a checklist to refer too incase we don’t miss any little details. So that is what we are going to do today! A Ruby on Rails Checklist!

1.Take a few minutes writing out a domain model (always easiest on a whiteboard or piece of paper):

What relationships you will have (has many? belongs to?)
What attributes each model will have.
What you will use in the controller and views.

2) If you are starting from scratch then type “Rails new name_of_application” and this will generate a lot of flies to get you started and set up in your Rails application.

3) Keep up a schema and routes to always check tables

4) Type in the Terminal: Rails g model Artist name age:integer img —no-test-framework

(model is always singular) (adding string is not necessary)

5) Write your Relationships:

has_many :performances (plural)
has_many :cities, through: :performances
——————————————————
has_many :performances
has_many :artists, through: : performances

6) Other examples:

Rails g model flight air_type:integer time:datetime num_passengars:integer destination
Rails g model passenger name passport:boolean suitcases:integer
Rails g model ticket date:datetime seat_num:integer passenger_id:integer flight:references

7) Check migration: and then type in the Terminal: rails db:migrate

8) Check schema for what you need to for seeds. Examples:

a1 = Artist.create(name:"50 cent",bio:"i'm a rapper”)
c1 = Cities.create(name:”Auckland")
p1 = Performances.create(name: “Indi Feast", artist_id: a1.id, cities_id: c1.city_id)
Also make sure that you have created your artist and city seeds before creating performances

9) Type in the Terminal: rails db:seed

10) Create the controllers by typing in the terminal:

Rails g controller passengers(plural) new create show edit
Rails g controller flights(plural)
Rails g controller tickets(plural)
The “new create show edit” will create actions in your controller and view files for each of them.

An example of a controller is:

class ArtistsController < ApplicationController
 before_action :find_artist, only: [:show]

 def index
   @artists = Artist.all
 end

 def show
 end

 def new
   @artist = Artist.new
 end


 def create
   @artist = Artist.new(artist_params)
   if @artist.save
     redirect_to artist_path(@artist)
   else
     render :new
   end
 end

def edit
   @artist = Artist.find(params[:id])
  end

def update
      If @artist.update(artist_params)
    redirect_to cities_path(@artist.city)
    else
    render :edit
    end
end

def destroy
    @artist = Artist.find(params[:id]).destroy
    redirect_to cities_path
end

private

def artist_params
   params.require(:artist).permit(:name, :age, :img)
 end

def find_artist
   @artist = Artist.find(params[:id])
 end
end

11) Go back and update your routes for every action that you need (1 resource route per model) i.e. resources :posts, only: [:index, :new, :create] OR get '/post/:id', to: posts#show', as: 'post'. Join table is always first in the routes.rb

12) Once your controllers are done set up your view files.

13) Type in the terminal rails s and then open up your localhost website to see if everything is working. If an error occur the web sever will tell you. These error messages are very clear and easy to follow.

Helpful Websites:

You can also add Validations. A great Website for this is: https://guides.rubyonrails.org/active_record_validations.html
For Routing and controllers: https://dev.to/morinoko/the-basics-of-sinatra--la-mvc--configuration--routes--forms-417e &&& https://guides.rubyonrails.org/routing.html
For Render and Redirect: https://medium.com/@kerenlerner/render-and-redirect-which-to-use-106ff653ee9a

Hashes and Arrays in Ruby Programming

Brontesewell — Wed, 01 Jan 2020 21:53:56 +0000

In this article we are going to examine Arrays and Hashes and their syntaxes, storing values, accessing and grabbing values and iterating over them.

Firstly what are Arrays and Hashes in Ruby?

Hashes and Arrays are indexed collections which store multiple objects(integer, string, floating number, etc) and values. They are accessed using a key. In Array’s the key is an integer and it is more efficient to access array elements than hashes. In Hashes the key is any object and hashes are more flexible than arrays.

Arrays [ ]

Lets take a look at an Array in Ruby

arr = [3, 4.55, “Poppy”, “The Fat Cat”, 788, false, -54]

We can access each item in an array through its index number. The first item has an index of 0, the next has an index of 1, and it increases with each item starting left to right in the array. We always start counting at zero. For example:

puts arr[0] => 3                            [1st item]
puts arr[5] => false                        [6th item]
puts arr[3] => “The Fat Cat”                [4th item]

Nested or Multi-dimensional Arrays

A Nested or Multi-dimensional Array is an array that has elements which are also arrays. We can do this because arrays can contain any kind of data. It is useful for storing groups of related data.

multi_arr = [ 
      [Hannah, “Soccer”, 12, “A average”], 
      [Tom, “Ice Hockey”, 14, “C average”], 
      [Kate, “Basketball”, 15, “A average”]
  ]

We can access each item in the Multi-dimensional Array by doubling up on the bracket notation to navigate down to the second nested level of the array.

puts multi_arr[0][0] => Hannah                           [1st item][1st item in 1st item]
puts multi_arr[1] =>[Tom, “Ice Hockey”, 14, “C average”]   [2nd item]
puts multi_arr[2][3] => “A average”                      [3rd item][4th item in 3rd item]

Hash { }

Lets take a look at a Hash in Ruby

hash = {
        “3” => “three”,
        “I Love Cats” => true,
        :nickname => “Dan”,
        :numbers => [1, 2, “Three”]
}

In hashes we have key-value pairs where the key doesn’t have to be a number like in an array. To access a value in the hash you have to use the key in the brackets.

puts hash[“3”] => three
puts hash[:nickname] => Dan
puts hash[:numbers][0] => 1    [within the numbers array get the 1st element (index 0)]

Iteration

Iteration is defined as the act or process of repeating. It is where a computer is instructed to preform a certain process over and over again for a specific number of times or until a specific condition has been met/reached.

For each iteration example in Arrays and Hashes below we will use the each method. Which iterates over each element in an array or hash.

Iterating over Array

arr = [3, 4.55, “Poppy”, “The Fat Cat”, 788, false, -54]


arr.each do    | value |
     puts value
end

For every element in our array, 'each' runs the block and passes it the element as an argument(value in the example which is between the pipes | value | ).

👇 And it will print 👇
3
4.55
Poppy
The Fat Cat
788
false
-54

Iterating over Nested Arrays

multi_arr = [ 
      [Hannah, “Soccer”, 12, “A average”], 
      [Tom, “Ice Hockey”, 14, “C average”], 
      [Kate, “Basketball”, 15, “A average”]
  ]


multi_arr.each do |student_array|
  student_array.each do |student_detail|
            puts student_detail
   end
end

👇 And it will print 👇
Hannah
Soccer
12
A average
Tom
Ice Hockey
14
C average
Kate
Basketball
15
A average

Iterating through the Hash

hash = {
        “3” => “three”,
        “I Love Cats” => true,
        :nickname => “Dan”,
        :numbers => [1, 2, “Three”]
}


hash.each do    | key, value |
    puts “#{key}: #{value}”
end

The only difference between iterating over a Hash vs array is that in a Hash the block has two arguments (key and value in the example which is between the pipes | key, value | ).

👇 And it will print 👇
3: three
I Love Cats: true
nickname: Dan
numbers: 1, 2, “Three

In conclusion we learnt and explored syntaxes, storing values, accessing values and iterating over them. It really is not too hard when you break it down and make it simple! Hope this helped. Many more blogs coming!

Feel free to leave a comment with your thoughts or questions below!

From Bronte Sewell