Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@mayarkhaled111
mayarkhaled111 committed Aug 1, 2024
0 parents commit 4ef021e
Show file tree
Hide file tree
Showing 19 changed files with 399 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Games
9 changes: 9 additions & 0 deletions css/all.min.css

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions css/bootstrap.min.css

Large diffs are not rendered by default.

100 changes: 100 additions & 0 deletions css/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
body{
background-color: #272B30;
font-family: 'Cedarville Cursive', Courier, monospace;
font-style: italic;
}
section.image{
background-image: url(../images/wraper.png);
height: 300px;
background-repeat: no-repeat;
background-size: cover;
}
.navbar{
top: 30px;
transform: translateY(-50%);
background-color: #3A497B;
box-shadow: 0px 0px 6px 0px #000000ad;
}
.navbar .navbar-brand img{
width: 50px;
}
.navbar p,.navbar p:hover{
color: #fff;
}
.navbar a{
color: #fff;
transition: .5s;
}
.navbar button:focus{
box-shadow: none;
}
.navbar-nav .nav-link.active,.navbar a:hover,.navbar .nav-link:focus{
color: #1F99CC;
}

.games .card-item .card{
background-color: #272B30;
color: #fff;
filter: grayscale(0.7);
transition: transform 0.5s, filter 0.5s 0.1s;
}
.games .card-item .card .image img{
width: 90%;
}
.games .card-item .card:hover{
filter: grayscale(0);
transform: scale(1.1);
cursor: pointer;
}
.games .card-item button{
background-color: #0D6EFD;
}
.games .card-item .card-body .card-text{
color: #6a727b;
}
.card-footer{
background-color: transparent;
color: #7E8185;
padding: 10px 0;
}
.card-footer span{
background-color: #32383e;
border-radius: 5px;
padding: 0px 5px;
}

.details .gname i{
right: 150px;
}
.details .gname i:hover{
cursor: pointer;
}
.details .dgame span{
background-color: #1F99CC;
padding: 0 5px;
border-radius: 5px;
color: black;
}
.details .dgame button{
border: 1px solid #FDC109;
color: white;
}
.details .dgame button:hover{
border: 1px solid #FDC109;
background-color: #FDC109;
color: white;
}


.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
Binary file added images/logo-sm.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/thumbnail (1).jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/thumbnail.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/wraper.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 92 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<div id="loadingScreen" class="loading-screen d-none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div id="home" >
<section class="image"></section>
<div class="container">
<nav class="navbar navbar-expand-lg w-100 m-auto position-sticky px-5 z-3">
<div class="container">
<p class="navbar-brand m-0" href="#"><img src="images/logo-sm.png" alt="logo">GAME REVIEWS</p>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-solid fa-bars fa-lg" style="color: #ffffff;"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" aria-current="page" data-cat="mmorpg" href="#">mmorpg</a>
</li>
<li class="nav-item">
<a class="nav-link" data-cat="shooter" href="#">shooter</a>
</li>
<li class="nav-item">
<a class="nav-link" data-cat="sailing" href="#">sailing</a>
</li>
<li class="nav-item">
<a class="nav-link" data-cat="permadeath" href="#">permadeath</a>
</li>
<li class="nav-item">
<a class="nav-link" data-cat="superhero" href="#">superhero</a>
</li>
<li class="nav-item">
<a class="nav-link" data-cat="pixel" href="#">pixel</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="games">
<div class="container">
<div class="row g-4">
</div>
</div>
</div>
</div>
<section class="details text-light d-none">
<div class="container">
<div class="gname d-flex justify-content-between align-items-center mx-5">
<h2 class="text-light">Details Game</h2>
<i class="fa-solid fa-xmark fa-xl position-absolute " style="color: #ffffff;" ></i>
</div>
<div class="conntent m-5 position-relative ">
<div class="row">
<div class="col-4">
<img src="images/thumbnail (1).jpg" alt="" class="w-100">
</div>
<div class="col-8 dgame">
<h3>Title: Marvel Snap</h3>
<p>Category: <span> Card Game</span></p>
<p>Platform: <span> windows</span></p>
<p>Status: <span> live</span></p>
<p class="text-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatem quidem repudiandae, esse
magni soluta accusantium ipsa maxime non quasi modi reprehenderit dolore et. Maxime doloribus suscipit vel
perspiciatis quia?</p>
<button class="btn">show game</button>
</div>
</div>
</div>
</div>
</section>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>

</html>
7 changes: 7 additions & 0 deletions js/bootstrap.bundle.min.js

Large diffs are not rendered by default.

184 changes: 184 additions & 0 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
class GameService {
constructor(apiKey, apiHost) {
this.apiKey = apiKey;
this.apiHost = apiHost;
}

async fetchGames(category = 'shooter') {
this.showLoadingScreen();
const url = `https://free-to-play-games-database.p.rapidapi.com/api/games?category=${category}`;
const options = {
method: 'GET',
headers: {
'x-rapidapi-key': this.apiKey,
'x-rapidapi-host': this.apiHost
}
};

try {
const response = await fetch(url, options);
const data = await response.json();
this.hideLoadingScreen();
console.log(data)
return data;
} catch (error) {
console.error(error);
this.hideLoadingScreen();
return [];
}
}

async fetchGameDetails(id) {
this.showLoadingScreen();
const url = `https://free-to-play-games-database.p.rapidapi.com/api/game?id=${id}`;
const options = {
method: 'GET',
headers: {
'x-rapidapi-key': this.apiKey,
'x-rapidapi-host': this.apiHost
}
};

try {
const response = await fetch(url, options);
const data = await response.json();
this.hideLoadingScreen();
return data;

} catch (error) {
console.error(error);
this.hideLoadingScreen();
return null;
}
}

showLoadingScreen() {
document.getElementById('loadingScreen').classList.remove('d-none');
}

hideLoadingScreen() {
document.getElementById('loadingScreen').classList.add('d-none');
}
}

class UI {
constructor(gameService) {
this.gameService = gameService;
this.links = document.querySelectorAll('.navbar .navbar-nav a');
this.row = document.querySelector('.row');
this.homeSection = document.querySelector('#home');
this.detailsSection = document.querySelector('.details');
this.initEventListeners();
this.loadDefaultGames();
}

initEventListeners() {
this.links.forEach(link => {
link.addEventListener('click', async (e) => {
e.preventDefault();
let category = e.target.getAttribute('data-cat');
let games = await this.gameService.fetchGames(category);
this.displayGames(games);
});
});
}

async loadDefaultGames() {
let defaultGames = await this.gameService.fetchGames();
this.displayGames(defaultGames);
}

displayGames(dataArray) {
let box = '';
dataArray.forEach(game => {
box += `
<div class="card-item col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="card h-100 bg-transparent" data-id="${game.id}">
<div class="card-body">
<div class="position-relative">
<img class="card-img-top object-fit-cover h-100" src="${game.thumbnail}">
</div>
<div>
<div class="hstack my-3 justify-content-between">
<h3 class="h6 small">${game.title}</h3>
<span class="badge text-bg-primary p-2">Free</span>
</div>
<p class="card-text small text-center opacity-50">
${game.short_description}
</p>
</div>
</div>
<footer class="card-footer small hstack justify-content-between">
<span class="badge badge-color">${game.genre}</span>
<span class="badge badge-color">${game.platform}</span>
</footer>
</div>
</div>
`;
});
this.row.innerHTML = box;

let cards = this.row.querySelectorAll('.card');
cards.forEach(card => {
card.addEventListener('click', () => {
let gameId = card.getAttribute('data-id');
this.showGameDetails(gameId);
});
});
}

async showGameDetails(id) {
this.homeSection.classList.add('d-none');
this.detailsSection.classList.remove('d-none');
this.detailsSection.innerHTML = '';

let gameDetails = await this.gameService.fetchGameDetails(id);
if (gameDetails) {
this.displayDetails(gameDetails);
}
}

displayDetails(detailGame) {
let detailContent = `
<div class="container">
<header class="hstack justify-content-between">
<h1 class="text-center h3 py-4 text-white">Details Game</h1>
<button class="btn-close btn-close-white" id="btnClose"></button>
</header>
<div class="row g-4" id="detailsContent">
<div class="col-md-4">
<div class="picture">
<img src="${detailGame.thumbnail}" class="w-100" alt="">
</div>
</div>
<div class="col-md-8">
<div class="content text-white">
<h4>Title: ${detailGame.title}</h4>
<p class="py-2">Category: <span class="bg-info text-black rounded px-1">${detailGame.genre}</span></p>
<p class="pb-2">Platform: <span class="bg-info text-black rounded px-1">${detailGame.platform}</span></p>
<p>Status: <span class="bg-info text-black rounded px-1">${detailGame.status}</span></p>
<p>${detailGame.description}</p>
<button class="btn btn-outline-warning">
<a href="${detailGame.freetogame_profile_url}" target="_blank" class="text-decoration-none text-white">Show Game</a>
</button>
</div>
</div>
</div>
</div>`;
this.detailsSection.innerHTML = detailContent;

document.getElementById('btnClose').addEventListener('click', () => {
this.detailsSection.classList.add('d-none');
this.homeSection.classList.remove('d-none');
});
}
}

const apiKey = '74bc22de12msh664c7a31eb59d13p1fcc97jsna0471ba836a1';
const apiHost = 'free-to-play-games-database.p.rapidapi.com';

const gameService = new GameService(apiKey, apiHost);
const ui = new UI(gameService);



Binary file added webfonts/fa-brands-400.ttf
Binary file not shown.
Binary file added webfonts/fa-brands-400.woff2
Binary file not shown.
Binary file added webfonts/fa-regular-400.ttf
Binary file not shown.
Binary file added webfonts/fa-regular-400.woff2
Binary file not shown.
Binary file added webfonts/fa-solid-900.ttf
Binary file not shown.
Binary file added webfonts/fa-solid-900.woff2
Binary file not shown.
Binary file added webfonts/fa-v4compatibility.ttf
Binary file not shown.
Binary file added webfonts/fa-v4compatibility.woff2
Binary file not shown.

0 comments on commit 4ef021e

Please sign in to comment.