📲Games-App for LB-Phone

This is a custom app for the LB-Phone. It works by simply running the script and does not require much knowledge.

Requirements:

LB-Phone [LB-Docs: https://docs.lbphone.com/]

Installation:

Just start the script. It will be added automaticly to your appstore!

Config:

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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Your Game</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="colors.css" />
    <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />

</head>
<body>
    <div id="phone-wrapper">
        <div class="app" id="content">
            <div class="header-wrapper">
                <img src="assets/your-game.png" alt="logo">
                <p>Your Game</p>
            </div>
            <div class="app-wrapper">
                <iframe id="webview" border="0" frameborder="0" marginheight="0" marginwidth="0" width="400px" height="612px" scrolling="no" allowtransparency="true" src="yourgame.html/"></iframe>
            </div>
        </div>
    </div>

    <script src="dev.js"></script>
</body>
</html>

// 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);
});

* {
    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.

<div class="game-card glass" onclick="openGame('games/yourgame/index.html')">
      <div class="game-header">
        <img src="games/yourgame/assets/icon.png" class="game-logo" alt="Game Logo">
        <div>
          <h2>Your Game</h2>
          <p>Your Game Desc.</p>
        </div>
      </div>
      <img src="games/yourgame/assets/banner.webp" class="game-banner" alt="Game Banner">
      <button class="play-button">Play</button>
    </div>

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!

PreviousDispatches-App for LB-Phone

Last updated 9 months ago

hashtagRequirements:

hashtagInstallation:

hashtagConfig:

hashtagHow to add new games:

hashtagFor app version > v1.1.1 (newest)