battles/game2.php

203 lines
5.7 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?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);
?>
<!doctype html>
<html>
<head>
<title>Окно игры</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<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>
</head>
<body>
<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>
</body>
</html>