lsreg's IT blog

Для знакомства с очередным игровым движком я всегда использую одну и ту же игру HitMeBrick. Посмотрим, как написать ее на phaser.

За основу я взял официальный туториал.

Сначала дорабатываем инициализацию

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.add.sprite(0, 0, 'sky');
    initGround();
    initPlayer();
    bricks = game.add.group();
    bricks.enableBody = true;
    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
    livesText = game.add.text(16, 64, 'lives: 5', { fontSize: '32px', fill: '#000' });
    gameOverText = game.add.text(16, 112, '', { fontSize: '32px', fill: '#000' });
    leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
    rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
}

Здесь я вынес в отдельные функции инициализацию игрока и земли, они практически не изменились. read more

quill.js — это браузерный редактор текста, имеющий достаточно простое API. Встраивается он очень просто.

Сначала нужно подключить библиотеку

<script src="http://cdn.quilljs.com/1.3.0/quill.min.js"></script>
<link href="http://cdn.quilljs.com/1.3.0/quill.snow.css" rel="stylesheet">

Если планируется использовать редактор формул, то нужно так же подключить KaTeX

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>

Теперь инициализируем редактор

var quill = new Quill('#text-editor', {
  modules: {
    formula: true,
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['image', 'blockquote', 'code-block'],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'indent': '-1'}, { 'indent': '+1' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['formula'],
      ['clean']     
    ]
  },
  placeholder: 'Write your text here',
  theme: 'snow'
});

Первым параметром передается селектор элемента, который будет контейнером для редактора. read more

relap.io — это сервис, предлагающий вашим посетителям контент с вашего сайта, и основным преимуществом является алгоритм рекомендации контента. Разработали его в SurfingBird, что позволяет надеяться на то, что алгоритм работает хорошо.

Добавить виджет с такими рекомендациями совсем не трудно:

1. Регистрируемся в сервисе

2. На странице https://relap.io/widgets регистрируем домен. Сервис заработает на домене не сразу, а минут через 20. read more

Создание блога на Dart. Часть 1.
Создание блога на Dart. Часть 2.
Создание блога на Dart. Часть 3.

Хранение данных

Для Dart написаны драйверы практически для всех популярных СУБД. Я решил использовать PostgreSQL. Драйвер подключается в пабспеке:

dependencies:
  ...
  postgresql: ^0.3.4

К полям в результатах запроса можно обращаться по алиасам

class PostRepository {
  Future<List<Post>> getAllPosts() async {
    var result = new List<Post>();

    var dbUserName = Config.dbUserName;
    var dbUserPass = Config.dbUserPass;
    var dbServerHost = Config.dbServerHost;
    var dbServerPort = Config.dbServerPort;
    var dbName = Config.dbName;

    var uri =
        'postgres://$dbUserName:$dbUserPass@$dbServerHost:$dbServerPort/$dbName';
    Connection connection = await connect(uri);
    List<Row> rows = await connection
        .query(
            'SELECT title, body, tags, permalink, created, updated FROM public.posts;')
        .toList();
    for (var i = 0; i < rows.length; i++) {
      Row row = rows[i];
      result.add(new Post(row.title, row.body, (row.tags as String).split(','),
          row.permalink, row.created, row.updated));
    }
    connection.close();
    return result;
  }
}

Класс поста для понимания:

class Post {
  String title;
  String body;
  List<String> tags;
  String permalink;
  DateTime created;
  DateTime updated;

  Post(this.title, this.body, this.tags, this.permalink, this.created, this.updated);
}

Создание блога на Dart. Часть 1.
Создание блога на Dart. Часть 2.
Создание блога на Dart. Часть 3.

Роутинг

Роутинг я реализовал просто — обработкой запросов занимаются контроллеры, каждый из которых сам решает, может он обработать запрос или нет. Запрос обрабатывается первым подходящим контроллером.

Класс базового контроллера:

abstract class ControllerBase {
  Future processRequest(HttpRequest request);
  Future<bool> canProcessRequest(HttpRequest request);   
}

Базовый класс для контроллеров, возвращающих HTML:

abstract class HttpController extends ControllerBase {
  Future processRequest(HttpRequest request)  async {
    request.response.headers.contentType = ContentType.HTML;    
  }
}

Класс контроллера, отдающего содержимое поста по пермалинку:

class PostController extends HttpController {
  PostRepository postRepository = injector.get(PostRepository);
  PostController() {}

  Future processRequest(HttpRequest request) async {
    await super.processRequest(request);
    var requestPermalink = StringUtils.Trim(request.requestedUri.path, '/');
    postRepository.getAllPosts().then((List<Post> posts) {
      var post = posts.where((p) => p.permalink == requestPermalink).single;
      request.response
        ..write(post.body)
        ..close();
    });
  }

  Future<bool> canProcessRequest(HttpRequest request) {
    var requestPermalink = StringUtils.Trim(request.requestedUri.path, '/');
    return postRepository.getAllPosts().then((List<Post> posts) {
      return posts.any((p) => p.permalink == requestPermalink);
    });
  }
}

Урл для этого контроллера выглядит так: /permalink

Из репозитория постов получаются все посты, из них выбирается единственный с соответствующим пермалинком и в ответ пишется содержимое поста. read more

Создание блога на Dart. Часть 1.
Создание блога на Dart. Часть 2.
Создание блога на Dart. Часть 3.

HTTP сервер на Dart

Язык Dart позиционируется его создателями как язык, который можно использовать как на клиенте, так и на сервере. И если с клиентом, блягодаря ангуляру, вопросов не возникает, то на сервере dartlang используют редко. read more

Как получить индекс текущего элемента в директиве NgFor в Angular2

< span *ngFor="let item of items; let i = index">
  {{i}}: {{item}}
< /span>

Как изменить язык в Visual Studio Code

• Нажать Ctrl+Shift+P
• в открывшемся окне начать вводить config
• выбрать пункт «Configure Language»
• создастся файл locale.json, в котором можно поменять язык.

Предположим у нас есть асинхронная функция

Future doWork(int val) async {
  print("start ${val}");
  await new Future.delayed(new Duration(seconds: 2));
  print("finish ${val}");
}

и массив чисел

List<int> list = [1, 2, 3, 4, 5];

если мы последовательно вызовем для всех элементов массива функцию doWork

Future main() async {
  list.forEach((int val) => doWork(val));
}

то результат будет вот таким:

start 1
start 2
start 3
start 4
start 5
finish 1
finish 2
finish 3
finish 4
finish 5

Чаще всего это нормально, но бывают ситуации, когда функция doWork должна одновременно работать только для одного элемента. read more

Сохраняем состояние в урле

Для сохранения данных будем использовать хеш часть урла. Сохранять будем объект с введенными пользователем числами. Сначала создадим его

var settings = {};
settings.sum = sum;
settings.months = months;
settings.percent = percent;

и сохраним в кеш, предварительно завернув в JSON

location.hash = JSON.stringify(settings);

Загрузка состояния из урла

Сначала нужно получить данные из урла. read more

На примере кредитного калькулятора посмотрим, как создать клиентское приложение на javascript.

Начнем с разметки. Нам понадобятся три инпута для ввода параметров, подписи к ним, кнопка для запуска расчета и таблица для отображения результатов.

        <div class="debt_calc_param_container"><span class="debt_calc_param">Сумма кредита</span><input id="debt_calc_amount" /></div>
        <div class="debt_calc_param_container"><span class="debt_calc_param">Процентная ставка</span><input id="debt_calc_percent" /></div>
        <div class="debt_calc_param_container"><span class="debt_calc_param">Срок кредита в месяцах</span><input id="debt_calc_period" /></div>
        <button id="debt_calc_button">Рассчитать</button>
        <table id="debt_calc_paymentcalendar" border="1" bordercolor="black" cellpadding="10"></table>

Можно приступать к написанию кода. read more