<?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>