Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@GithubMaster212
GithubMaster212 authored Dec 1, 2024
1 parent 683c005 commit 91955f5
Showing 1 changed file with 94 additions and 84 deletions.
178 changes: 94 additions & 84 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/2991/2991644.png" type="image/png">
<style>
body {
background-color: #111;
background-color: #111; /* Dark background */
color: white;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-x: hidden; /* Prevent horizontal scrolling */
}
.top-bar {
background-color: #222;
background-color: #222; /* Dark gray for the top bar */
color: white;
padding: 10px;
text-align: center;
Expand All @@ -27,54 +27,57 @@
.category-container {
margin: 20px 0;
}
.category-title {
margin-left: 60px; /* Space for category title */
font-size: 24px; /* Font size for category title */
}
.game-row {
display: flex;
align-items: center;
padding: 0 60px;
overflow-x: hidden;
padding: 0 60px; /* Padding for the row */
}
.game-container {
display: flex;
scroll-behavior: smooth;
padding: 10px 0;
scroll-behavior: smooth; /* Smooth scrolling */
padding: 10px 0; /* Padding for the container */
}
.game-card {
background-color: #333;
border-radius: 10px;
padding: 20px;
width: 240px;
margin-right: 20px;
flex-shrink: 0;
cursor: pointer;
background-color: #333; /* Darker gray for card background */
border-radius: 10px; /* Rounded corners for cards */
padding: 20px; /* Padding for cards */
width: 240px; /* Width of cards */
margin-right: 20px; /* Space between cards */
flex-shrink: 0; /* Prevent shrinking */
cursor: pointer;
}
.game-card img {
width: 100%;
height: auto;
width: 100%; /* Full width for images */
height: auto;
}
.game-card h3 {
font-size: 18px;
margin: 10px 0 5px;
font-size: 18px; /* Font size for title */
margin: 10px 0 5px;
}
.game-card p {
font-size: 14px;
margin: 0;
font-size: 14px; /* Font size for description */
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* Limit description to two lines */
-webkit-box-orient: vertical;
}
.scroll-arrow {
background-color: #444;
color: white;
border-radius: 10px;
border: none;
font-size: 24px;
padding: 15px;
cursor: pointer;
z-index: 100;
margin-left: 20px;
margin-right: 20px;
background-color: #444; /* Lighter gray for arrows */
color: white;
border-radius: 10px; /* Rounded corners for arrows */
border: none;
font-size: 24px;
padding: 15px;
cursor: pointer;
z-index: 100;
margin-left: 20px; /* Space between arrow and container */
margin-right: 20px; /* Space between arrow and container */
}
</style>
</head>
Expand All @@ -83,63 +86,70 @@
<div id="categories-container"></div>

<script>
const categories = {
'1': 'Featured',
'2': '2 Player'
};

async function loadGames() {
const categoriesContainer = document.getElementById('categories-container');
try {
const response = await fetch('https://api.github.com/repos/githubmaster212/game/contents/games');
const files = await response.json();
const gamesByRow = {};
const categoriesContainer = document.getElementById('categories-container');

try {
const response = await fetch('https://api.github.com/repos/githubmaster212/game/contents/games');
const files = await response.json();

const gamesByCategory = { '1': [], '2': [] }; // Initialize arrays for Featured and 2 Player

for (const file of files) {
if (file.name.endsWith('.txt')) {
const [rowPriority, gameName] = file.name.split('_');
const row = rowPriority[0];
const priority = rowPriority[1];

if (!gamesByRow[row]) {
gamesByRow[row] = [];
}

const gameData = await fetch(file.download_url).then(res => res.text());
const [title, description, imageUrl, gameUrl] = gameData.split('\n');
gamesByRow[row].push({title, description, imageUrl, gameUrl, priority});
}
}
// Categorize games based on filename
for (const file of files) {
if (file.name.endsWith('.txt')) {
const [rowPriority, gameName] = file.name.split('_');
const row = rowPriority[0];
const priority = rowPriority[1];

Object.keys(gamesByRow).sort().forEach(row => {
const games = gamesByRow[row].sort((a, b) => a.priority - b.priority);
const categoryContainer = document.createElement('div');
categoryContainer.className = 'category-container';
categoryContainer.innerHTML = `
<div class="game-row">
<button class="scroll-arrow" onclick="scroll('row-${row}', -1)">&#9664;</button>
<div id="game-container-row-${row}" class="game-container">
${games.map(game => `
<div class="game-card" onclick="window.open('${game.gameUrl}', '_blank')">
<img src="${game.imageUrl}" alt="${game.title}">
<h3>${game.title}</h3>
<p>${game.description}</p>
</div>
`).join('')}
</div>
<button class="scroll-arrow" onclick="scroll('row-${row}', 1)">&#9654;</button>
</div>
`;
categoriesContainer.appendChild(categoryContainer);
});
} catch (error) {
console.error('Error loading games:', error);
}
}
// Only add games to Featured (row '1') or Two Player (row '2')
if (gamesByCategory[row]) {
const gameData = await fetch(file.download_url).then(res => res.text());
const [title, description, imageUrl, gameUrl] = gameData.split('\n');
gamesByCategory[row].push({ title, description, imageUrl, gameUrl, priority });
}
}
}

function scroll(rowId, direction) {
const container = document.getElementById(`game-container-${rowId}`);
container.scrollBy({left: direction * 250, behavior: 'smooth'});
}
// Create rows for each category
Object.keys(categories).forEach(row => {
const games = gamesByCategory[row].sort((a, b) => a.priority - b.priority);
const categoryContainer = document.createElement('div');
categoryContainer.className = 'category-container';
categoryContainer.innerHTML = `
<h2 class="category-title">${categories[row]}</h2>
<div class="game-row">
<button class="scroll-arrow" onclick="scroll('row-${row}', -1)">&#9664;</button>
<div id="game-container-row-${row}" class="game-container">
${games.map(game => `
<div class="game-card" onclick="window.open('${game.gameUrl}', '_blank')">
<img src="${game.imageUrl}" alt="${game.title}">
<h3>${game.title}</h3>
<p>${game.description}</p>
</div>
`).join('')}
</div>
<button class="scroll-arrow" onclick="scroll('row-${row}', 1)">&#9654;</button>
</div>
`;
categoriesContainer.appendChild(categoryContainer);
});
} catch (error) {
console.error('Error loading games:', error);
}
}

function scroll(rowId, direction) {
const container = document.getElementById(`game-container-${rowId}`);
container.scrollBy({ left: direction * 250, behavior: 'smooth' });
}

loadGames();
loadGames();
</script>
</body>
</html>

0 comments on commit 91955f5

Please sign in to comment.