DEV Community: Kyle A.

ReactJS - Character Selection

Kyle A. — Fri, 01 Mar 2024 23:13:50 +0000

Test out: https://kylestech95.github.io/tile-selection-tool-interactive
Source Code: https://github.com/KylesTech95/tile-selection-tool-interactive
Clone Ref: https://github.com/KylesTech95/tile-selection-tool-interactive.git

As a gamer it is essential to navigate through options & characters. You can do exactly that with this traditional selection-feature created with ReactJS, CSS, & HTML.

Users can navigate through characters with their mouse or keypad:

Controls:

Mouse move/hover
> Right Arrow
< Left Arrow
v Down Arrow
^ Up Arrow

Instructions

Languages:

ReactJS
CSS
JavaScript
HTML

Learning Objectives from project-code

Understanding of project setup
Mapping data with key index
Understanding a few basic ReactJS-Hooks:

a. useState()
d. useRef()

Project Setup

While there are a number of ways to setup a tile-selection program,
this project utilizes an array of objects, stored into a state called player, and then rendered into 6 list-items <li className="list-item"></li> in the domain(DOM).

Tile Tracking
Within App.js, take a look at the player Array.
Each object listed contains a src: property with an array of 2 numbers representing x & y, respectively.
After iterating through the array, each player src: is parsed into objects and used for tracking tiles in the DOM.

Within choice.js, un-comment the code below and press any arrow key to view the output:
// fn converts array to object with 2 arguments (element,index) const arrayToObject = (p,index) =>{ return {x:p[index].pos[0],y:p[index].pos[1]} }
const items = document.querySelectorAll('.list-item')
for(let i = 0; i < items.length; i++){ // convery array to an object let obj = arrayToObject(player,i) // console.log(obj) // console.log(items[i]) // console.log("\n") }

ReactJS Key

Stay on choice.js and navigate to // return render. Here,
player, or the array of objects, is being mapped to list all lite-items <li><li/> by its key property key={p.key}.
Typically a key is required if multiple objects/arrays within a list are being rendered.
The main purpose of keys is to determine which elements have been modified (modify,delete).
View the code below for a better understanding.

{[...player].map((p,index)=>{ return ( <div key={p.key} className="button-back"> <li key={p.key} className={list-item p${index+1}}><img className="img" src={p.src} alt={p.alt} /></li> </div> ) })}
Test out: https://kylestech95.github.io/tile-selection-tool-interactive
Source Code: https://github.com/KylesTech95/tile-selection-tool-interactive
Clone Ref: https://github.com/KylesTech95/tile-selection-tool-interactive.git

hooks

Think of react hooks as an individual who is asthmatic & holds onto an inhaler to sustain life, or the life-cycle.

You, the developer have asthma and need to ensure your quality of life is functional.
Do I only have to use my inhaler? ... NO

In addition, you can:

Exercise to increase your stamina
Sustain a healthy diet
Sip on Tea Fennel Tea, Licorice Tea, Ginger Tea, etc...

Basically, whatever you need to do to maintain asthma may come in the form of the above bulletins.
Similarly, ReactJS uses hooks such as useState() and useRef.

useState Example
Within App.js, we declare a useState() with a string and store it in a variable called header.
Now we can use this state, or "life-sustainer" inside of a functional component

Within the same file App.js scroll down to the bottom of the file.
Within the <Header/> component, plug in the header variable as a prop.
Just like the header prop, I carry my inhaler wherever I go to prevent asthma attacks or shortness of breath. I need to make living work!

Within the same file, scroll to the top to access the Header
Component.
Plug your prop [header] into the function's arguments and pass it as text in the <h1> element.
At this point, we completed a quarter-mile jog.
But wait, in our current state we need to take our medicine[inhaler]! The welcome header is displayed.

Within the same file App.js scroll down to the bottom of the file.
Within the <Choice/> component, plug in both header & setHeader variables as a prop.

Access choice.js, navigate the Choice component. Plug-in both props [header & setHeader] into the function's arguments.

Finally we set the header's state to the tile's animal-name by accessing it's alt property when we land on a tile.
Just like both header & setHeader props, after I use my inhaler[header] my breathing, or state changes. We then set the header to a different state with setHeader(). After arriving home, I drank ginger tea which changed my state again.

For more information on useState() learn more with www3Schools

useRef Example
The useRef() hook allows developers to reference elements that do not need to be rendered.

Imagine hiring a jewel-thief to access a secure diamond room by roping down from the roof. Despite evading all of security controls (trip-wires, lasers, cameras,automatic firearms,etc...), the thief keeps their cool. They tactfully grab the diamond and helicopter out from the roof!

The thief is your useRef() called thiefRef.
We hire the thief to change the state of the jewelry’s position.
The state changes after the thief steals the diamond without crashing the application. We summoned our _ref, the application's state changes and no one gets hurt or in trouble...unless you were the jeweler..

Since you hired the thief, and the job was successful, the thief is willing to rob more diamonds for you, in other words the theif,thiefRef can be reused without being rendered.

useRef in code
Scenario: I want to access the object {} at the top of the screen with the useRef() hook

Within App.js declare a useRef() and store it in a variable called posRef.

Just like states, carry the posRef down to a component, in this case, we carry posRef down to the <Object/> component.

Within the same file, scroll to the top of the page, locate the Object function, and plug-in posRef into the argument.

Next, we plant our posRef into an html attribute called "ref".

Finally, we access posRef with posRef.current which gives us access to the element where the id="object-container".
In the below code, we are removing the value's class, obj-remove with posRef.current. How cool is that!

For more information on useRef() learn more with www3Schools

In conclusion,
working with the ReactJS Framework takes time and patience in order to understand how state works as well as the hooks that come with ReactJS.
May this blog post help broaden your understanding of the ReactJS Framework.

Mongoose/Mongodb - CRUD(Create, Retrieve, Update, and Delete) Playground

Kyle A. — Thu, 22 Feb 2024 02:35:37 +0000

Intro

A simple & interactive guide to understanding CRUD Storage/Database operations created with NodeJS, Mongoose and Mongodb.

Languages:

HTML
CSS
JavaScript
SQL

Setup

Before accessing mongoDB datasets, install the required packages:

npm install mongoose
const mongoose = require('mongoose')

To use an environment Variable(.env), install the required packages:

npm install --save dotenv
require('dotenv').config();

To Build Applications & APIs, install the required packages:

npm install express
const express = require('express');

Feel free to install nodemon, which monitors your activity and restarts scripts automatically upon reading changes in code.

npm install --save-dev nodemon
h
Terminal:
Instead of Running:
npm run start
run:
nodemon myApp.js

Create

First, creating a dataset requires input (user-input or auto-generated) as well as developed Schema for the data to fit into.

This process can be synonymous to students attending a new classroom for the first time & being assigned to a seat by the teacher.
You are the teacher and the data are your students.

Creating a schema can be developed in different ways and is going to be dependent on the application as far as data-types, amount of data entered, and the associations chosen between data.

For more information on starting your own mongoose schema, check the docs:Mongoose Schemas

User1 is created after entering:
1.Name
2.Email
3.Todo

**View the Code snippet for example codes*

Anonymous0 user is created after entering:
1.____
2.Email
3.Todo
Feat: Anonymous usernames increment automatically by filtering through the existing array of names that match /Anonymous/ & obtaining the array's length.
Store the modified array in a variable called count
Upon creating a new user, if a name is not stored, then "Anonymous" + count will take undefined's place.
const newUser = new User({ // create new user & email name:name?name:'Anonymous'+count, email }) const sU = await newUser.save() //save user console.log(sU)
**View the Code snippet for example codes*

testUser is created after entering:
1.Name
2.Email
3._____
Feat: Users who do not store a todo will automatically be replaced with "n/a" .
const todoObj = new Todo({ email: sU.email, todo:todo ? todo : 'N/A'.toLowerCase() }) const sTodo = await todoObj.save(); console.log(sTodo)
**View the Code snippet for example codes*

No User is created after reaching the max capacity (10)

// if user is not found in db, create new user if(!findUser){ if(allUsers.length > 9){ res.sendFile(__dirname + '/views/max.html') }
**View the Code snippet for example codes*

Retrieve

Retrieve or Read operations in C.R.U.D involves searching data & receiving data.
-Upon visiting one of the three filtered search endpoints, users can filter through data based on that type (users,todos,email).
-Else, users can scroll through the table to view all data.

In the event that the database is empty,
users will not be able to:

Drop User
Drop All Users
Filter todos
Filter Users
Filter email
Change Email
Change Name

Users will be redirected to a web page that states, "No Users Found".

Remember that classroom analogy above?
Think of reading as roll-call where the teacher is reading off of a list of user's names to determine who is absent or present.
You, the teacher, are reading off of a list & filtering the present students from the absent students

Update

Updating allows the user to change already-existing data.
This process is not Creating a data record. Existing data is in the process of being updated.

A POST request is sent to endpoint, "/form/users/email/change". User input is sent to the body object.
Destructing Assignment is used to extract values from the body's object (user input).
Take advantage of the id property and use it as a filter.
Next, use the model.findById() function to find the record.

Conditions:

If current & new email inputs contain an @ and is true
If a user is found
If the discovered user's email findOne.email === currentemail (input)

If the above conditions are met, execute the model.findOneAndUpdate() function

example:
User.findOneAndUpdate({email:currentemail},{email:newemail},{new:true})

Update Name with current Name & ID

Update Email with current email & ID

Update fails

Delete

Deleting specific data takes place with the deleteOne() function.
await User.deleteOne({_id:id})//user found

Deleting Multiple data takes place with the deleteMany() function.
const d = await User.deleteMany({}) const e = await Todo.deleteMany({})

Web Link: Database Playground
IG: Instagram - index_daddy0
Git: Github

Currently the web service is set for limited use.
If you want access to the playground, send me a DM and I will restart the service for you.

Alternatively, users can clone the repository
https://github.com/KylesTech95/database-playground-fork.git
and fork for improved use.
Don't forget to add me.

ReactJS - Create Magic Eight Ball

Kyle A. — Thu, 01 Feb 2024 16:33:59 +0000

Classic Magic 8 Ball accessible for Desktop & Mobile use.

Languages:

HTML
React JS
Javascript
CSS

Desktop

Play the Game: https://kylestech95.github.io/eight-ball-react-js/
Source Code: https://github.com/KylesTech95/eight-ball-react-js
Clone Ref: https://github.com/KylesTech95/eight-ball-react-js.git

Mobile (Portrait)

Mobile (Landscape)

Never-ending Fun
Ask 8 ball a question
Answers are limited
Keyboard/Touch Controls on Desktop & Mobile

What makes this version of Magic 8 unique?
Code is made by scratch, using pure react/javaScript.
Please view through the presented code and let me know how you can improve my version.

Magic 8 Controls

Click/tap on the input and type a question to receive a response.

ReactJS - Simon Says

Kyle A. — Thu, 01 Feb 2024 16:18:15 +0000

Classic Simon Says Game accessible for Desktop & Mobile play.

Languages:

HTML
React JS
Javascript
CSS

Desktop

Play the Game: https://kylestech95.github.io/react-simon-says
Source Code: https://github.com/KylesTech95/react-simon-says
Clone Ref: https://github.com/KylesTech95/react-simon-says.git

Mobile (Portrait)

Mobile (Landscape)

Features

Never-ending Fun
Score Tracking
Automatic-Type Animation (Desktop view)
Game over screen with the option to restart
Mouse/Touch Controls on Desktop & Mobile

Simon Controls

Desktop: Mouse to tap
Mobile: tap to touch
Reset symbol - Reset game

JavaScript - Mancala

Kyle A. — Fri, 26 Jan 2024 01:35:29 +0000

Classic Mancala Game accessible for Desktop & Mobile play.

Languages:

HTML
Javascript
CSS

Desktop

Play the Game: https://kylestech95.github.io/mancala-game/
Source Code: https://github.com/KylesTech95/mancala-game
Clone Ref: https://github.com/KylesTech95/mancala-game.git

Mobile (Portrait)

Play the Game: https://kylestech95.github.io/mancala-game/
Source Code: https://github.com/KylesTech95/mancala-game
Clone Ref: https://github.com/KylesTech95/mancala-game.git

Mobile (Landscape)

Play the Game: https://kylestech95.github.io/mancala-game/
Source Code: https://github.com/KylesTech95/mancala-game
Clone Ref: https://github.com/KylesTech95/mancala-game.git

Features

Never-ending Fun
Score Tracking
Instructions
Automatic Computer play
Touch & mouse click

Setup:

Both you and the computer have 6 "Holes" or "Pits" on your perspective side
Each pit starts with 4 marbles
The colors of the marbles do not mean anything
Both players are given a "goal" or a "Mancala" to the right of board.

Object:
The goal is to collect as many marbles in your "goal" by the end of the game

Gameplay:

The game starts with you (Player) choosing a "pit" in order to grab all of your marbles
Moving counter-clockwise, you place of stone in your hand into each pocket until the stones run out
If you run into your own Mancala (goal), deposit one piece in it. If you run into the computer's Mancala, skip it and continue moving to the next pocket.
Consistenly aim to place as many marbles as you can in your goal
If you drop the last marble (in your hand) into the goal, play again
The game ends when all six pockets on one side of the Mancala board are empty (Computer side or Player side)
The currnet player who still has pieces on their side of the board when the game ends captures all of those pieces.
Count all the pieces in each Mancala
The winner is the player with the most pieces

ReactJS - Classic Snake

Kyle A. — Tue, 23 Jan 2024 14:02:25 +0000

Classic Snake Game accessible for Desktop & Mobile play.

Languages:

HTML
React JS
Javascript
CSS

Desktop

Play the Game: https://kylestech95.github.io/snake-game/
Source Code: https://github.com/KylesTech95/snake-game
Clone Ref: https://github.com/KylesTech95/snake-game.git

Mobile (Portrait)

Play the Game: https://kylestech95.github.io/snake-game/
Source Code: https://github.com/KylesTech95/snake-game
Clone Ref: https://github.com/KylesTech95/snake-game.git

Mobile (Landscape)

Play the Game: https://kylestech95.github.io/snake-game/
Source Code: https://github.com/KylesTech95/snake-game
Clone Ref: https://github.com/KylesTech95/snake-game.git

Features

Never-ending Fun
Score Tracking
Automatic-Type Animation (Desktop view)
Game over screen with the option to restart
Keyboard/Touch Controls on Desktop & Mobile

What makes this version of Snake unique?
As snake, you are given the chance to move through your body (provided by an empty space) without collapsing.

Snake Controls

Use the arrow keys or W,A,S,D keys on your keyboard to update the snake's position :

↑ (Up) or W - Move Up
↓ (Down) or S - Move Down
← (Left) or A - Move Left
→ (Right) or D - Move Right