JS Битва

Выберите юнита

Напишите код

Создайте алгоритм

Технологии

• Phaser
• Ace Editor
• RxJS
• Preact
• Workers, WebSocket

Мотивация

1. Все хотят сражаться
2. Крутой стенд
3. Геймификация

Геймификация

Как это выглядит

Немного цифр

1. 5 минут на идею
2. 4 часа в день
3. всего 3 недели

Первая реализация

1. Phaser
2. Ace editor
3. Node.js

Основные модули

1. Renderer
2. JS Sandbox
3. State sharing
4. Server – source of truth

Итак, песочница

1. Изоляция
2. API юнитов
3. Асинхронный код

Асинхронность:☹️

            goTo(5, 0)
              .then(() => attack())
              .then(() => goTo(5, 0))
              .then(() => attack())
        

Асинхронность:😀

            await goTo(5, 0)
            await attack()
            await goTo(5, 0)
            await attack()
        

Асинхронность:❤️️

            goTo(5, 0)
            attack()
            goTo(5, 0)
            attack()
        

Интерпретация

eval() + with?

1. исполняет код из строки
2. в текущем контексте

Harmful code

1. while (true) {}
2. for (i++) {}
3. alert()
4. prompt()

Workers!

Hello Worker

            const worker = new Worker('script.js')
            setTimeout(() => worker.close(), 1000)
        

script.js

            onmessage = (message) => {
              postMessage(message)
            }
        

Код из строки

            const customCode = 'attack()'
            const blob = new Blob([customCode], {...})
            const codeUrl = URL.createObjectURL(blob)
             
            const worker = new Worker(codeUrl)
            setTimeout(() => worker.terminate(), 1000)
        

Добавим RxJS

                const message$ = fromEvent(worker, 'message')
                  .pipe(map(e => JSON.parse(e.data)))
                 
                const timeoutClose$ = timer(1000).pipe(
                  takeUntil(message$),
                  switchMap(() => throwError(`to much time!`))
                );
                  
                merge(timeoutClose$, message$)
                  .pipe(
                      map(e => e.data),
                      finalize(() => worker.terminate()),
                      catchError(error => {
                          reject(error)
                          return []
                      })
                  )
                  .subscribe(success => {
                      resolve(success)
                  })
            

Unit Api

            goTo(5, 0)
             
            for(i = 0; i < 10; i++) {
              shoot(unitId)
            }
        

with?

            with(unitApi) {
              goTo(5, 0)
             
              for(i = 0; i < 10; i++) {
                  shoot(unitId)
              }
            }
        

JS Scopes

Proxy + scopes

Как работает with

            with({foo: 'bar'}) {
              foo
            }
        

            'foo' in obj
              ? obj.foo
              : global.foo
        

with + Proxy

            const safeApi = new Proxy(unitApi, {
              has: () => true
            })
             
            with(safeApi) {
              ${userCode}
            }
        

with + Proxy = ❤️

1. > eval()
2. >> eval in unitApi?
3. << true!
4. undefined is not a function!

А так можно 0_о

            with ([1, 2, 3]) {
              filter(i => i !== 3)
              .some(i => i === 3)
            }
            // false
        

И даже так

            with ({hello: 'HolyJS'}) {
              valueOf()
            }
            // {hello: 'HolyJS'}
        

Symbol.unscopables

            const safeApi = new Proxy(unitApi, {
              has: () => true,
              get: (target, key) =>
                  key === Symbol.unscopables ? undefined : target[key]
            })
        

Окружение Worker

1. this
2. self
3. postMessage()
4. onmessage
5. fetch()
6. FileApi
7. ...

Окружение Worker

                const nativePostMessage = this.postMessage;
                 
                Object.keys(this).forEach(key => {
                  delete this[key]
                }
                 
                with (sandboxProxy) {
                  (function() {
                      ${USER_CODE}
                  }).call({"hi": '=)'})
                }
            

console, Math?

                const apis = {console, Math, parseInt, ...}
                const unitApi = Object.assign(unitApi, apis)
                const sandboxProxy = new Proxy(unitApi, {has, get})
                 
                with (sandboxProxy) {
                  try {
                      ${USER_CODE}
                  } catch (e) {
                      console.error(e)
                  }
                }
            

Custom console

                ['log', 'info', 'warn', 'error'].forEach(patchMethod);
                 
                with (sandboxProxy) {
                  try {
                      ${USER_CODE}
                  } catch (e) {
                      console.error(e)
                  }
                }
                 
                function patchMethod(name) {
                  const nativeMethod = console[name].bind(console);
                  
                  console[name] = (...data) => {
                      attributes = attributes.map(parseParams)
                      
                      postMessage(JSON.stringify({type: name, data}))
                  }
                }
            

Асинхронность

Unit api:

            goTo(x, y) {
              return {type: 'goTo', x, y}
            }
        

Результат Worker

            actions = [
              {type: 'goTo', x, y},
              {type: 'shoot', id},
              {type: 'goTo', x, y}
            ]
        

Изолированные Workers

1. Каждый юнит имеет изолированный поток
2. Ели код юнита упал, остальные продолжают работать

Пример кода

            const ids = ['IE', 'DART', 'EVAL'];
             
            for(i = 0; i < 10; i++) {
                shoot(ids[(ids.length * Math.random())|0])
            }
        

Проблема random()

            (ids.length * Math.random())|0
            1
            (ids.length * Math.random())|0
            3
            (ids.length * Math.random())|0
            2
        

Проблема random()

100 / 200

200 / 100

300 / 10

Проблема random()

• Разная битва у всех клиентов
• Разные результаты
• Крики "нечестно"
• ...вилы и факелы!

Подсолим random()

• Нужно найти уникальную "соль"
• Но одинаковую в рамках одного боя
• Всегда разную при изменении кода
• Чтобы никто ничего не заподозрил =)

Функция

            // LCG – Линейный конгруэнтный метод
            function LCG(seed) {
              return function() {
                  seed = Math.imul(16807, seed) | 0 % 2147483647
                  return (seed & 2147483647) / 2147483648
              }
            }
        

Соль?

            const getRandomSalt = (seed) =>
              [...seed].reduce((acc, curr) =>
                  acc + curr.charCodeAt(0), 0) % 2147483647
             
            const salt = getRandomSalt(userCode)
            Math.random = LCG(salt)
        

Есть 4 роли

1. Left player
2. Right player
3. Watcher
4. Admin

Источник истины

RxJS на сервере

RxJS на сервере

            leftIsReady$ = socket$.pipe(filter(...))
            rightIsReady$ = socket$.pipe(filter(...))
             
            forkJoin(leftIsReady$, rightIsReady$)
              .subscribe(() => {
                this.setState({mode: 'ready'})
              })
        

Фильтрация стейта

• Игроки не могут менять стейт друг у друга
• Зритель не может менять стейт
• Админ может все =)

Роли

            class LeftPlayer extends Client {}
            class RightPlayer extends Client {}
            class Watcher extends Client {}
            class Admin extends Client {}
        

Connections Pool

            class Client {
              connections = new Set()
              
              onUnsafeMessage$ = new Subject()
            }
        

Игрок

            class LeftPlayer extends Client {
              get onMessage$() {
                  return this.onUnsafeMessage$
                      .pipe(
                          filter(query => query.type === 'state'),
                          map(state => ({left: state.left}))
                      )
              }
        

Комната

            class Room {
              onState$ = this.clients.onMessage$
                  .pipe(filter(query => query.type === 'state'))
              
              constructor() {
                  this.onState$.subscribe(state => 
                      this.setState(state))
              }
        

RxJS на клиенте

• емитит события из соккета
• можно подписываться только на конкретные ветки стейта

RxJS на клиенте

            rightArmyChanges$ = socket$.pipe(
                  filter(state => !!state.right),
                  pluck('right', 'army')
              )
              .subscribe(enemyArmy => {
                  this.setState({right: {army: enemyArmy}})
              })
        

RxJS на клиенте

            rightArmyChanges$
              .subscribe(army => this.setRightArmy(army))
              
            rightNameChanges$
              .subscribe(name => this.setRightName(name))
        

Взять и переписать

Список лидеров

В обычном вебе

• Не нравится авторизация?
• Компонент ввода по маске не подходит?
• Всплывающие окна не так всплывают?

Не беда, в течение рабочего дня можно написать все свое

В JS gamedev

• Phaser -> + 5Мб в бандле
• Плагины для него не умеют в webpack
• В gamedev вообще мало что умеет в webpack и TS
• Нативные технологии экономически нецелесообразны

Но есть решение

cursedcoder/awesome-pixijs

• React-pixi
• tween.js
• ...

Итак, почти готово

Исследователи

• Самые приятные
• Находят, додумывают, предлагают

Рядовые игроки

• Приходят ради фана
• Могут даже не замечать багов

Собиратели багов

• С ними очень непросто
• Порождают массу критики
• У них не работает практически все

Тестирование

• Покажет что скрыто
• Укажет что не работает
• Перенаправит фокус разработки
• И конечно даст мощнейшего пинка

Ссылки

• Репозиторий с игрой
• Phaser
• awesome-pixijs
• Colyseus multiplayer game server
• Ace editor