> For the complete documentation index, see [llms.txt](https://maxifaxipaxi-1.gitbook.io/mfpscripts-fivem-discontinued/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://maxifaxipaxi-1.gitbook.io/mfpscripts-fivem-discontinued/lb-phone/lb-games.md).
# Games-App for LB-Phone
### **Requirements**:
* [LB-Phone](https://lbphone.com/) \[LB-Docs: ]
### **Installation**:
Just start the script. It will be added automaticly to your appstore!
### **Config**:
```lua
Config = {}
----------- App Settings -------
Config.AppName = "Games"
-- Displayed Name for OS & AppStore
Config.Description = "Play Games"
-- Displayed Description for AppStore
Config.DefaultApp = false
-- 'true' sets App Pre-Installed, 'false' requires download via AppStore
Config.Size = 52812
-- Sets App Size for Storage Usage from Phone
Config.Images = {}
-- Displayed Images in AppStore,
-- Usage: {"https://link.com/example.png", "https://link.com/example2.png"}
```
### How to add new games:
*(some basic dev-knowledge required)*\
First of all fork our newest branch of the games app from our github.
#### For app version > v1.1.1 (newest)
coming soon
#### For app version < v1.1.1 (old)
Then you can add the game you want into */html/games/yourgamename/\**\
Here you can place all gamedata needed like assets for the game itself and the required banner and logo of the game. You are free to use *png, jpeg or webp*, whatever you need.\
\
After adding your game to the folder make sure it will be framed right. Otherwise you will need an iframe like the following:
```html
Your Game
Your Game
```
```javascript
// You can ignore this file. All it does is make the UI work on your browser.
window.addEventListener("load", () => {
if (window.invokeNative) {
const phoneWrapper = document.getElementById("phone-wrapper");
const app = phoneWrapper.querySelector(".app");
phoneWrapper.parentNode.insertBefore(app, phoneWrapper);
phoneWrapper.parentNode.removeChild(phoneWrapper);
return;
}
document.getElementById("phone-wrapper").style.display = "block";
document.body.style.visibility = "visible";
const center = () => document.getElementById("phone-wrapper").style.scale = window.innerWidth / 1920;
center();
window.addEventListener("resize", center);
});
```
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
visibility: hidden;
font-family: 'Poppins', sans-serif;
}
.app {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
background-color: #212528;
}
.app-wrapper {
width: 200px;
height: 55%;
scale: 1.37;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3rem;
}
.header-wrapper {
margin-top: -65px;
width: 100%;
height: 5%;
background-color: #1b1d21;
}
img {
height: 41px;
width: 41px;
}
p {
font-size: 25px;
font-weight: 400;
color: white;
margin-top: -48px;
/* margin-right: 2px; */
text-align: center;
}
.header,
.button-wrapper {
display: flex;
flex-direction: column;
text-align: center;
gap: 0.2rem;
}
.button-wrapper {
gap: 1rem;
}
.title {
font-size: 20px;
font-weight: 700;
color: #000000;
}
.subtitle {
font-size: 16px;
font-weight: 400;
color: #8e8e93;
}
button {
width: 14rem;
height: 3.25rem;
background-color: rgb(20, 20, 20);
color: #f2f2f7;
border: none;
border-radius: 7px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s ease-in-out;
user-select: none;
}
button:hover {
filter: brightness(0.8);
}
input {
width: 14rem;
height: 3.25rem;
background-color: rgb(20, 20, 20);
color: #000000;
border: none;
border-radius: 7px;
padding: 0 1rem;
font-size: 12px;
font-weight: 600;
transition: all 0.25s ease-in-out;
outline: none;
}
iframe {
margin-top: -90px;
margin-left: -3px;
}
/* Do not edit, this allows you to view changes easily in your browser */
#phone-wrapper {
display: none;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 29rem;
height: 58.5rem;
}
```
That will add the game into an iframe.
Last but not least you need to display the app in the games tab. *(html/index.html)*\
You will need to add the following code after line 97, like the lines before.
```html
Your Game
Your Game Desc.
```
**Thats it!**\
Feel free to constribute and make a pull-request so we can benefit as a community on the game.\
\
**Let's make gaming on the LB-Phone great again!**
