Enemies

[kenymc1]

User Story

As a user, I should be able to view all the Enemies.

Acceptance Critirea

when I click on the enemy button I will see all the enemies that are to be attacked for the missions

Dev Note

on the index create a div called enemy-area with a class of hide. •create enemies folder that contain enemies.js enemiesComponent.js enemies.scss enemies.js ``import enemyData from '../../helpers/data/enemyData'; import enemyComponent from './enemiesComponent'; import utils from '../../helpers/utils';

const printEnemy = () => { enemyData.getAllEnemies() .then((enemies) => { let domString = ''; domString += '

'; enemies.forEach((enemy) => { domString += enemyComponent.buildEnemies(enemy); }); utils.printToDom('enemy-area', domString); utils.printToDom('enemy-navbar-button'); }) .catch((err) => console.error('get enemy broke', err)); };

export default { printEnemy };`

enemies.componet.js `import './enemies.scss';

const buildEnemies = (enemies) => { let domString = ''; domString += <div id=${enemies.id} class="col-md-4">; domString += '

'; domString += '

'; domString += ''; domString += '

'; domString += '

'; domString += <img src="${enemies.imageUrl}" alt="profile-image" class="profile"/>; domString += '

'; domString += '

'; domString += <h2>${enemies.name}<small>Skills</small></h2>; domString += <p>${enemies.special_skills}</p>; domString += 'Weakness'; domString += <p>${enemies.weakness}</p>; domString += '

'; domString += '

'; domString += '

';

return domString; };

export default { buildEnemies };`

enemies.scss

.profile-card-3 { font-family: 'Open Sans', Arial, sans-serif; position: relative; float: left; overflow: hidden; width: 100%; text-align: center; /* height:368px; */ border:none; } .profile-card-3 .background-block { float: left; width: 100%; height: 200px; overflow: hidden; } .profile-card-3 .background-block .background { width:100%; vertical-align: top; opacity: 0.9; -webkit-filter: blur(0.5px); filter: blur(0.5px); -webkit-transform: scale(1.8); transform: scale(2.8); } .profile-card-3 .card-content { width: 100%; padding: 15px 25px; color:#232323; float:left; background:#efefef; height:50%; border-radius:0 0 5px 5px; position: relative; z-index: 9999; } /* .profile-card-3 .card-content::before { content: ''; background: #efefef; width: 120%; height: 100%; left: 11px; bottom: 51px; position: absolute; z-index: -1; transform: rotate(-13deg); } */ .profile-card-3 .profile { /* border-radius: 50%; */ position: absolute; bottom: 50%; left: 50%; max-width: 300px; opacity: 1; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 1); -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); z-index:99999; } .profile-card-3 h2 { margin: 0 0 5px; font-weight: 600; font-size:25px; } .profile-card-3 h2 small { display: block; font-size: 15px; margin-top:10px; } .profile-card-3 i { display: inline-block; font-size: 16px; color: #232323; text-align: center; border: 1px solid #232323; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; margin:0 5px; } .profile-card-3 .icon-block{ float:left; width:100%; margin-top:15px; } .profile-card-3 .icon-block a{ text-decoration:none; } .profile-card-3 i:hover { background-color:#232323; color:#fff; text-decoration:none; }

EnemyData `import axios from 'axios'; import apiKeys from '../apiKeys.json';

const baseUrl = apiKeys.firebaseKeys.databaseURL;

const getAllEnemies = () => new Promise((resolve, reject) => { axios.get(${baseUrl}/enemies.json) .then((response) => { const demEnemies = response.data; const enemies = []; if (demEnemies) { Object.keys(demEnemies).forEach((enemiesId) => { demEnemies[enemiesId].id = enemiesId; enemies.push(demEnemies[enemiesId]); }); } resolve(enemies); }) .catch((err) => reject(err)); });

// const deleteCrew = (crewId) => axios.delete(${baseUrl}/crew/${crewId}.json);

// const addCrew = (newCrew) => axios.post(${baseUrl}/crew.json, newCrew);

// const getSingleEnemy = (enemiesId) => axios.get(${baseUrl}/enemies/${enemiesId}.json);

// const updateCrew = (crewId, modifiedCrew) => axios.put(${baseUrl}/crew/${crewId}.json, modifiedCrew);

export default { getAllEnemies };`

•then create an enemies hideout folder then create an hidoutjs