<?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;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
    <header>
        <a href="/user_anketa.php" title="Анкета" target="main"><img src="http://placehold.it/32x32/33ff33?text=A"/></a>
        <a href="/friend.php" title="Друзья" target="main"><img src="http://placehold.it/32x32/33ff33?text=F"/></a>
        <a href="/main.php?edit=1" title="Инвентарь" target="main"><img src="http://placehold.it/32x32/33ff33?text=I"/></a>
        <a href="/relikt.php?edit=1" title="Реликты" target="main"><img src="http://placehold.it/32x32?text=R"/></a>
        <a href="/clan.php" title="Клан" target="main"><img src="http://placehold.it/32x32/33ff33?text=K"/></a>
        <a href="/orden.php" title="Особые умения" target="main"><img
                    src="http://placehold.it/32x32/33ff33?text=O"/></a>
        <a href="/moderators.php" title="Модераторы" target="main"><img src="http://placehold.it/32x32/33ff33?text=M"/></a>
        <a href="/forum.php" title="Форум" target="main"><img src="http://placehold.it/32x32?text=F"/></a>
        <a href="javascript:$('#game').load('/forum.php')"><img src="http://placehold.it/32x32?text=F"/></a>
    </header>
    <div id="game"></div>
    <div id="chat"></div>
    <footer>
        <form action="chat.php" method="post" target="chat">
            <input id="msg" name="msg" size="100" placeholder="Введите сообщение...">
            <input type="submit" value="Отправить">
        </form>
    </footer>
</div>
<script>
    $("#game").load("main.php");

    function loadlink() {
        $('#chat').load('chat.php');
    }

    loadlink(); // This will run on page load
    setInterval(function () {
        loadlink() // this will run after every 5 seconds
    }, 5000);
</script>