<commit_before># InBetTest

Данный проект выполнен Афанасьевым Михаилом в качестве тестового задания для компании InBet. 

# Задание и результаты

Результат можно посмотреть [ТУТ](https://borodagames.org/inbettest)

Разработать программу, в которой:

1. Элементы интерфейса состоят из двух кнопок и колеса фортуны. - **реализовано**
2. При нажатии на первую кнопку, колесо начинает вращение. - **реализовано, функционал также доступен по нажатию клавиши Space**
3. При нажатии на вторую кнопку, колесо останавливается. - **реализовано, функционал также доступен по нажатию клавиши Space**

Инструментарий:
- PIXI.js версии 4.1 и выше. - **использована библиотека PIXI.js версии 4.5.3**
- Язык программирования - javascript (ES6). - **использовано в разработке**
- Использовать ресурсы находящиеся в предоставленном spritesheet. - **ресурсы использованы с замечаниями - см. Замечания п. 1**

Минимальный функционал:
- Кнопки должны иметь три состояния: normal, hover, down. - **реализовано, дополнительно реализовано состояние disabled**
- Встраивание canvas-элемента в html объект (div). - **реализовано, для встраивания куда бы то ни было требуется создать в html-документе элемент canvas с id='fortune_wheel_canvas', а также подключить итоговый файл со скриптом**
- Корректная работа на Google Chrome (любая версия, лучше последняя) - **проверено в Google Chrome 58.0.3029.110 (64-bit)**
- Итоговый файл должен быть один, и содержать в себе исключительно javascript код  - **итоговый файл находится в папке build, имя файла game.js**
- Все ресурсы (spritesheet) должны подгружаться с помощью инструментария PIXI (см. PIXI.loaders. Loader) - **реализована загрузка текстурного атласа и отдельного png-ассета стоппера**
- К скоупам требований не предъявляется, к качеству css/html требований не предъявляется - **слава Богу**

Ожидаемый функционал:
1. Плавная анимация начала вращения и остановки колеса  - **реализовано с помощью библиотеки gsap от Greensock, т.к. привык к ней с флеша**
2. Работа на мобильных устройствах  - **реализовано, проверено в нескольких браузерах нескольких мобильных устройств, для удобства пользования предусмотрел ресайз под размер доступной области**
3. После остановки колеса, программа должна выводить выпавшее число - **реализовано, в центре круга выводится анимированное число после остановки колеса**
4. При разработке игры использовать парадигму ООП  - **использовал ООП, насколько это можно назвать ООП применительно к текущему состоянию JavaScript**


# Замечания

1. Графика, предоставленная в виде спрайтшита имеет несколько недостатков: 
	* wheel.png, изображение самого колеса попало в спрайтшит с тенью, что портит нормальную центровку колеса при вращении и требует появления в коде magic number для выравнивания по оси ординат, а также логично предполагать, что тень не должна крутиться вместе с колесом, если источник света остается на месте.
	* wheel.png, изображение изначально имеет неудобный поворот (минимальный, но все же), который не совпадает с границей ни одного сектора при разбиении осями координат проведенными из центра колеса. Пришлось руками прямо в атласе повернуть на 1-2 градуса против часовой стрелки для того, чтоб левая граница Зеро совпала с направлением оси ординат (знаю, что это не очень правильно, но размер спрайта колеса остался неизменным, так что тут можно). После этого гораздо проще в коде по углу поворота колеса определить результат вращения.
	* в спрайтшите просто нет графического ассета для указателя на результирующий выпавший сектор - иначе как определить, что выпало? Поэтому самостоятельно нарисовал примитивную стрелку и положил отдельным png-ассетом.
	
2. Я не до конца разобрался с принципами сборки webpack, осознал ее в той мере, которая достаточна для сборки этого проекта. Далее буду совершенствовать эти навыки.<commit_msg>third addition in readme<commit_after># InBetTest

Данный проект выполнен Афанасьевым Михаилом в качестве тестового задания для компании InBet. 

# Задание и результаты

Результат можно посмотреть [ТУТ](https://borodagames.org/inbettest)

Разработать программу, в которой:

1. Элементы интерфейса состоят из двух кнопок и колеса фортуны. - **реализовано**
2. При нажатии на первую кнопку, колесо начинает вращение. - **реализовано, функционал также доступен по нажатию клавиши Space**
3. При нажатии на вторую кнопку, колесо останавливается. - **реализовано, функционал также доступен по нажатию клавиши Space**

Инструментарий:
- PIXI.js версии 4.1 и выше. - **использована библиотека PIXI.js версии 4.5.3**
- Язык программирования - javascript (ES6). - **использовано в разработке**
- Использовать ресурсы находящиеся в предоставленном spritesheet. - **ресурсы использованы с замечаниями - см. Замечания п. 1**

Минимальный функционал:
- Кнопки должны иметь три состояния: normal, hover, down. - **реализовано, дополнительно реализовано состояние disabled**
- Встраивание canvas-элемента в html объект (div). - **реализовано, для встраивания куда бы то ни было требуется создать в html-документе элемент canvas с id='fortune_wheel_canvas', а также подключить итоговый файл со скриптом**
- Корректная работа на Google Chrome (любая версия, лучше последняя) - **проверено в Google Chrome 58.0.3029.110 (64-bit)**
- Итоговый файл должен быть один, и содержать в себе исключительно javascript код  - **итоговый файл находится в папке build, имя файла game.js**
- Все ресурсы (spritesheet) должны подгружаться с помощью инструментария PIXI (см. PIXI.loaders. Loader) - **реализована загрузка текстурного атласа и отдельного png-ассета стоппера**
- К скоупам требований не предъявляется, к качеству css/html требований не предъявляется - **слава Богу**

Ожидаемый функционал:
1. Плавная анимация начала вращения и остановки колеса  - **реализовано с помощью библиотеки gsap от Greensock, т.к. привык к ней с флеша**
2. Работа на мобильных устройствах  - **реализовано, проверено в нескольких браузерах нескольких мобильных устройств, для удобства пользования предусмотрел ресайз под размер доступной области**
3. После остановки колеса, программа должна выводить выпавшее число - **реализовано, в центре круга выводится анимированное число после остановки колеса**
4. При разработке игры использовать парадигму ООП  - **использовал ООП, насколько это можно назвать ООП применительно к текущему состоянию JavaScript**


# Замечания

1. Графика, предоставленная в виде спрайтшита имеет несколько недостатков: 
	* wheel.png, изображение самого колеса попало в спрайтшит с тенью, что портит нормальную центровку колеса при вращении и требует появления в коде magic number для выравнивания по оси ординат, а также логично предполагать, что тень не должна крутиться вместе с колесом, если источник света остается на месте.
	* wheel.png, изображение изначально имеет неудобный поворот (минимальный, но все же), который не совпадает с границей ни одного сектора при разбиении осями координат проведенными из центра колеса. Пришлось руками прямо в атласе повернуть на 1-2 градуса против часовой стрелки для того, чтоб левая граница Зеро совпала с направлением оси ординат (знаю, что это не очень правильно, но размер спрайта колеса остался неизменным, так что тут можно). После этого гораздо проще в коде по углу поворота колеса определить результат вращения.
	* в спрайтшите просто нет графического ассета для указателя на результирующий выпавший сектор - иначе как определить, что выпало? Поэтому самостоятельно нарисовал примитивную стрелку и положил отдельным png-ассетом.
	
2. Я не до конца разобрался с принципами сборки webpack, осознал ее в той мере, которая достаточна для сборки этого проекта. Далее буду совершенствовать эти навыки.

3. Отдельно отмечу, что после нажатия на "STOP" колесо останавливается на заранее определенном секторе. В реальной игре номер выпавшего сектора приходит от сервера, в моем же случае - это определяет функция, выдающая рандомное целое число от 0 до 36. Т.е. колесо не просто останавливается, а докручивается до нужного сектора.
{'fraction_non_alphanumeric': 0.05669975186104218, 'fraction_numerical': 0.00794044665012407, 'mean_word_length': 4.828633405639914, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5662539', 'n_tokens_mistral': 3199, 'n_tokens_neox': 3927, 'n_words': 1016}