battles/game2.php

<?php
/**
 * Copyright (c) 2018.
 * Author: Igor Barkov <lopar.4ever@gmail.com>
 * Project name: Battles-Game
 */

session_start();
if (empty($_SESSION['uid'])) header("Location: index.php");
//include("config.php");

//$msg = filter_input(INPUT_POST,'msg');
//$uid = $_SESSION['uid'];
//if ($msg) db::c()->query('INSERT INTO `chat` (`cid`, `uid`, `msg`) VALUES (?i, ?i, "?s")', 1, $uid, $msg);
Template::header('Окно игры');
?>
<style>
    form {
        width: 100%;
        text-align: center;
    }

    form input {
        border: 1px solid silver;
        width: 80%;
        margin-right: .5%;
    }

    form input[type="submit"] {
        width: 15%;
    }

    body {
        margin: 0;
    }

    .wrap {
        display: grid;
        height: 100vh;
        grid-template-rows: 45px /* Шапка */ 2fr /* Окно игры */ 1fr /* Окно чата*/ 30px; /* Подвал */
    }

    header {
        text-align: right;
        box-shadow: 0 3px 2px -2px slategray;
    }

    footer {
        margin: 5px;
    }

    #game, #chat {
        overflow: auto;
        box-shadow: 0 3px 2px -2px slategray;
        padding: 5px;
    }

    a img {
        border: 1px solid #fff;
        transition: box-shadow 0.5s ease;
        margin: 5px;
    }

    a img:hover {
        box-shadow: 0 0 7px slategray;
    }


    .chat {
        border: 1px solid #333;
        margin: 15px;
        width: 40%;
        height: 70%;
        background: #555;
        color: #fff;
    }

    .chat-messages {
        min-height: 93%;
        max-height: 93%;
        overflow: auto;
    }

    .chat-messages__content {
        padding: 1px;
    }

    .chat__message {
        border-left: 3px solid #333;
        margin-top: 2px;
        padding: 2px;
    }

    .chat__message_black {
        border-color: #000;
    }

    .chat__message_blue {
        border-color: blue;
    }

    .chat__message_green {
        border-color: green;
    }

    .chat__message_red {
        border-color: red;
    }

    .chat-input {
        min-height: 6%;
    }

    input {
        font-family: arial;
        font-size: 16px;
        vertical-align: middle;
        background: #333;
        color: #fff;
        border: 0;
        display: inline-block;
        margin: 1px;
        height: 30px;
    }

    .chat-form__input {
        width: 79%;
    }

    .chat-form__submit {
        width: 18%;
    }

</style>
<div class="wrap">
    <header>
        Всякие заголовки, кнопки, ссылки, etc...
    </header>
    <div id="game"></div>

    <div class='chat'>
        <div class='chat-messages'>
            <div class='chat-messages__content' id='messages'>
                Загрузка...
            </div>
        </div>
        <div class='chat-input'>
            <form method='post' id='chat-form'>
                <input id='message-text' class='chat-form__input' placeholder='Введите сообщение'> <input type='submit'
                                                                                                          class='chat-form__submit'
                                                                                                          value='=>'>
            </form>
        </div>
    </div>


</div>
<script>
    $("#game").load("main.php");
</script>

<script>
    var messages__container = document.getElementById('messages');
    //Контейнер сообщений — скрипт будет добавлять в него сообщения
    var interval = null; //Переменная с интервалом подгрузки сообщений
    var sendForm = document.getElementById('chat-form'); //Форма отправки
    var messageInput = document.getElementById('message-text'); //Инпут для текста сообщения

    function send_request(act, login = null, password = null) {//Основная функция
//Переменные, которые будут отправляться
        var var1 = null;
        var var2 = null;
        if (act == 'auth') {
//Если нужно авторизоваться, получаем логин и пароль, которые были переданы в функцию
            var1 = login;
            var2 = password;
        } else if (act == 'send') {
//Если нужно отправить сообщение, то получаем текст из поля ввода
            var1 = messageInput.value;
        }
        $.post('includes/chat.php', { //Отправляем переменные
            act: act,
            var1: var1,
            var2: var2
        }).done(function (data) {
//Заносим в контейнер ответ от сервера
            messages__container.innerHTML = data;
            if (act == 'send') {
//Если нужно было отправить сообщение, очищаем поле ввода
                messageInput.value = '';
            }
        });
    }

    function update() {
        send_request('load');
    }

    interval = setInterval(update, 500);

    //отлавливается событие отправки формы — это поможет отказаться от обновления страницы:
    sendForm.onsubmit = function () {
        send_request('send');
        return false; //Возвращаем ложь, чтобы остановить классическую отправку формы
    };
</script>