Project Name: Webrcade Website
Description: This project is a web-based arcade platform that allows users to play various games directly from their browser. It includes features such as game loading from an Excel file, a collapsible sidebar, fullscreen mode, and random image display.
To get started with the Webrcade Website, follow these steps:
-
Clone the Repository:
git clone https://github.com/fortisq/webrcade_website.git cd webrcade_website -
Install Dependencies: Ensure you have Node.js installed. Then, install the necessary dependencies:
npm install
-
Run the Project: Start the development server:
npm start
The project uses the SheetJS library to read game data from an Excel file (games.xlsx). The data is then used to generate a list of games in the sidebar.
async function loadGamesFromXLSX() {
const response = await fetch('games.xlsx');
const arrayBuffer = await response.arrayBuffer();
const workbook = XLSX.read(arrayBuffer, {type: "buffer"});
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
const csvData = XLSX.utils.sheet_to_json(worksheet);
generateGameList(csvData);
}The generateGameList function organizes games by category and creates a collapsible list in the sidebar.
function generateGameList(games) {
const sidebar = document.getElementById('sidebar');
const categories = {};
games.forEach(game => {
if (!categories[game.category]) categories[game.category] = [];
categories[game.category].push(game);
});
Object.keys(categories).forEach(category => {
const categoryDiv = document.createElement('div');
categoryDiv.classList.add('category');
const categoryTitle = document.createElement('h3');
categoryTitle.textContent = category;
categoryDiv.appendChild(categoryTitle);
const gameList = document.createElement('ul');
gameList.style.display = 'none';
categories[category].forEach(game => {
const gameItem = document.createElement('li');
const gameLink = document.createElement('a');
gameLink.href = "#";
gameLink.textContent = game.name;
gameLink.dataset.gameData = JSON.stringify(game);
gameLink.addEventListener('click', (event) => {
event.preventDefault();
loadGame(game.link);
showGameDetails(JSON.parse(gameLink.dataset.gameData));
});
gameItem.appendChild(gameLink);
gameList.appendChild(gameItem);
});
categoryDiv.appendChild(gameList);
sidebar.appendChild(categoryDiv);
categoryTitle.addEventListener('click', () => {
gameList.style.display = gameList.style.display === 'none' ? 'block' : 'none';
});
});
}The loadGame function loads the selected game into an iframe and hides the random image container.
function loadGame(gameUrl) {
const imgContainer = document.getElementById('random-image-container');
imgContainer.style.display = 'none'; // Hide the image container
const gameFrame = document.getElementById('gameFrame');
gameFrame.src = gameUrl; // Load the selected game
var sidebar = document.getElementById('sidebar');
sidebar.classList.add('collapsed');
showFullscreenButtonTemporarily(); // Show the fullscreen button temporarily
}The project includes functionality to toggle fullscreen mode for the game iframe.
document.getElementById('fullscreenToggle').addEventListener('click', function() {
var elem = document.getElementById('gameFrame');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
}
});The loadRandomImage function displays a random image from a predefined list.
function loadRandomImage() {
const images = [
"game1.png",
"game2.png",
"game3.png",
"game4.png",
"game5.png",
"game6.png",
"game7.png",
"game8.png",
"game9.png",
// Add more image filenames as needed
];
const randomIndex = Math.floor(Math.random() * images.length);
const imageUrl = `img/${images[randomIndex]}`;
const imgContainer = document.getElementById('random-image-container');
imgContainer.style.backgroundImage = `url('${imageUrl}')`;
imgContainer.style.height = '100%'; // Ensure the container fills the area
imgContainer.style.backgroundSize = 'cover'; // Cover the area with the image without stretching
imgContainer.style.backgroundPosition = 'center'; // Center the background image
}- Game Loading: Load games from an Excel file and display them in a categorized list.
- Collapsible Sidebar: Toggle the visibility of the sidebar.
- Fullscreen Mode: Enter fullscreen mode for an immersive gaming experience.
- Random Image Display: Show a random image on the homepage.
- Fork the Repository: Click the "Fork" button at the top right of the repository page.
- Create a New Branch:
git checkout -b feature-branch
- Make Your Changes: Implement your feature or fix.
- Commit Your Changes:
git commit -m "Add new feature" - Push to the Branch:
git push origin feature-branch
- Open a Pull Request: Navigate to the original repository and open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.