Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#1 Визуализация и веб #2

Open
btseytlin opened this issue Apr 13, 2016 · 0 comments
Open

#1 Визуализация и веб #2

btseytlin opened this issue Apr 13, 2016 · 0 comments
Labels
enhancement

Comments

@btseytlin
Copy link
Member

btseytlin commented Apr 13, 2016 •
edited by murych
Loading

Задание: Сделать визуализацию игры на веб странице.

При запуске игры с ключом -w или --web программа должна выводить три пирамидки на html странице по ссылке localhost:5000.

Для выполнения необходимо:

1. Создать серверный компонент.

Необходимо создать файл server.py с функцией запуска сервера, которая будет запускаться при запуске игры.
Сервер должен:

  • принимать GET запрос на отрисовку страницы с визуализацией по ссылке localhost:5000. Отвечать сервер должен html страницей. Сервер должен так же обеспечить подключение в HTML странице JS скрипта main.js.
  • принимать GET запрос на получение состояния игрового поля по ссылке localhost:5000/get_game_state. Отвечать сервер должен данными в JSON формате, например:
{ "board": [ [3,2,1], [], [] ] }

Что означает, что на поле три стержня, один из них имеет диски 3, 2, 1.
Больше про JSON здесь, а про JSON в Python здесь.

Реализовать сервер проще всего используя Flask.
Нужно реализовать два route (/, /get_game_state): один возвращает HTML, другой возвращает JSON с данными из игры в JSON.

2. Создать клиентский компонент.

Клиентский компонент это HTML файл, CSS файл и Javascript документ main.js.
HTML содержит только следующее

<html>
    <head></head>
    <body>
        <div class="board">
        </div>
    </body>
</html>

Скрипт должен запускаться при открытии страницы и делать следующее:

  • Каждую секунду направлять AJAX запрос по ссылке localhost:5000/get_updates. При получении ответа стирать содержимое контейнера <div class="board"> и заполнять его используя полученные от сервера данные, например для приведенного выше JSON так:
<div class="board">
    <div class="pyramid">
        <div class="disk">
            1
        </div>

        <div class="disk">
            2
        </div>

        <div class="disk">
            3
        </div>
    </div>

    <div class="pyramid">
    </div>

    <div class="pyramid">
    </div>

</div>

Таким образом с помощью HTML реализуется визуализация дисков.

Чтобы это было похоже на пирамидки и диски нужно добавить CSS. Сделать так, чтобы:

  • div с классом pyramid занимали 500px в высоту и 30% экрана в ширину и имели зазор между друг другом размером 5%.
  • div с классом disk должны иметь залитый синим цветом фон, иметь ширину 100% и высоту 150px, а так же зазор по вертикали 50px.

Вам понадобятся css атрибуты width, height, margin и background-color. Подробнее здесь

Схема работы

  1. Пользователь запускает программу с ключом --web.
  2. Пользователь открывает браузер и заходит на localhost:5000.
  3. Запускается скрипт main.js, запрашивает положение пирамидок.
  4. Пользователь получает визуализацию пирамидок в браузере.
  5. Пользователь делает ход и через секунду видит изменения на странице в браузере.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@btseytlin