magicspoiler.io

[Savior]

Всем привет,

 

В целях самообучения Angularjs, сделал веб приложение magicspoiler.io.

 

Обычный визульный спойлер, который представляет из себя одностраничное приложение (SPA).

Далеко не все готово, но основной функционал есть. Вещи, которые планирую реализовать, ниже, в списке TODO.

 

Основные "фишки":

 

1. Высокая скорость (например, фильтры работают мгновенно, т.к. не происходит перехода на другие страницы);
   
2. Оптимизация под мобильные устройства.
   

 

Все представления генерируются автоматически, база всех сетов у меня есть. Добавил пока лишь несколько, т.к. не могу найти базы изображений. Был бы признателен, если бы кто-нибудь мог помочь.

 

Надеюсь, кто-нибудь найдет сайт полезным и, по возможности, меня интересуют любые советы, предложения и детали вашего пользовательского опыта. Например, насколько хорошо и быстро все работает в мобильных сетях 3G/4G.

 

TODO:

 

• Создать самому возможность оставлять комментарии или разобраться как прикрутить Disqus к SPA;
  
• Разобраться с SEO для SPA;
  
• Разработать поиск по сайту.
  

[mrSadPanda]

Был бы признателен, если бы кто-нибудь мог помочь.

 

http://www.woogerworks.com/

[EEk1TwEEk]

Спасибо за труд, но почему когда я навожу на карту, у неё появляется серый фон и надпись с изданием и названием. Это зачем вообще сделано? ) Если бы картинка просто была кликабельна, без затемнения было бы лучше, но это косметическое улучшение, так всё норм

[Savior]

http://www.woogerworks.com/

 

Спасибо!

 

Спасибо за труд, но почему когда я навожу на карту, у неё появляется серый фон и надпись с изданием и названием. Это зачем вообще сделано? ) Если бы картинка просто была кликабельна, без затемнения было бы лучше, но это косметическое улучшение, так всё норм

 

У некоторых людей плохое зрение и они не могу прочитать название карты на картинке, сделано, чтобы упростить им жизнь. Так же была идея добавить туда кнопку "Купить", не знаю на сколько это актуально. Но учту, подумаю, спс.

[protasov]

Вроде баг:

в спойлере Origins при просмотре всех карт после базиков идет еще часть карт

 

 

 

 

 

[candybober]

Вроде баг:

в спойлере Origins при просмотре всех карт после базиков идет еще часть карт

 

 

 

 

 

Это из набора. В сет входит, но в бустерах нету.

[Savior]

Вроде баг:

в спойлере Origins при просмотре всех карт после базиков идет еще часть карт

 

 

 

 

 

 

 

Не настроил ещё сортировку. Думал сделать по редкости, но с базой данных mtgjson не выходит. Можно, конечно, задать всем картам свойство для сортировки (mythic rare - 1, rare -2 etc.). Сейчас показываю карты, как они идут в базе. Могу пока сделать по номеру карты.

Могу еще сделать поле для кастомной фильтрации карт. Будет так же мгновенно отображать карты, в зависимости от того, что вводит пользователь.

 

Еду на неделю в Россию, поэтому добавлю все сеты и изменения только по приезде обратно.

[mrSadPanda]

А в чём проблема с сортировкой? БД SQL?

Изменено 10 ноября 2015 пользователем mrSadPanda

[Savior]

А в чём проблема с сортировкой? БД SQL?

 

БД нет, я беру данные из json файла. Проблема в том, что в rarity возможные значения 'Mythic Rare', 'Rare', 'Uncommon', 'Common'. По алфавиту они не сортируются. Как отсортировать их именно по определенному значению, я не знаю. Хотя, можно конечно прогонять data и показывать сперва все карты для которых 'rarity' = 'mythic rare', потом 'rare' etc. Надо будет поразмыслить над этим.

[Tinefol]

Savior

var rarityWeights = [];
rarityWeights["Common"] = 1;
rarityWeights["Uncommon"] = 2;
rarityWeights["Rare"] = 3;
rarityWeights["Mythic Rare"] = 4;

cards.sort(function(a, b) { return rarityWeights[b.rarity] - rarityWeights[a.rarity]; });

[mrSadPanda]

БД нет, я беру данные из json файла. Проблема в том, что в rarity возможные значения 'Mythic Rare', 'Rare', 'Uncommon', 'Common'. По алфавиту они не сортируются. Как отсортировать их именно по определенному значению, я не знаю. Хотя, можно конечно прогонять data и показывать сперва все карты для которых 'rarity' = 'mythic rare', потом 'rare' etc. Надо будет поразмыслить над этим.

Ну ты странный. Реализуй справочник весов и сортируй наздоровье.

 

PS

Не оно?

http://jsfiddle.net/VAKrE/105/

 

PPS

А вот я бы замутил бы по бырому SQL базу, импортнул бы туда базу карт, и крутил бы их на скорости инстант без смс и регистрации. Есть предположение(тут не уверен), что запрос к серверу пролетит быстрее, чем парсить джейсоны.

Изменено 10 ноября 2015 пользователем mrSadPanda

[Tinefol]

mrSadPanda запрос в БД более тяжелая операция, чем запрос текстового файла. Парсинг json'а производится на клиенте и не грузит сервер. Но для поиска это не особо пригодно, а вся ценность подобных сайтов именно в поиске.

[mrSadPanda]

"запрос в БД более тяжелая операция, чем запрос текстового файла"

Более чем сомнительное утверждение. Смотря какой текстовый файл и смотря какой запрос. Выкачивать к себе текстовичок мегабайта на полтора каженный раз когда пользователь обновляет страницу, очевидно, не лучшее решение. Это я, конечно, в вакууме теоритизирую. Ровно также как, пожалуй, не стоит тащить из БД "ФинкельИграетВТоп4.avi"

 

"Парсинг json'а производится на клиенте и не грузит сервер"

Не знаю, всегда ли это хорошо. Кмк сервера нужны именно для того, чтоб их грузить. Тут, конечно, зависит, что в приоритете. Мои вебщики к примеру ужасно не любят крутить вещи на клиенте. И я их прекрасно понимаю.

[Tinefol]

mrSadPanda сжатый спойлер BFZ занимает 36 килобайт. И его конечно надо кешировать в localStorage, чего автор не делает почему-то. Для просмотра/фильтрации одного спойлера одного сета это вполне нормально. И клиент это точно не особо загрузит.

 

Для поиска по нескольким сетам при таком подходе конечно каши не сваришь, но если цель просто показывать спойлеры, а не делать подобие http://magiccards.info - то сойдет.

[mrSadPanda]

А, ну в таком разрезе, конечно, проблемы нет. Но я предполагаю, что он там собирается делать базу всех карт МТГ, да еще и с картинками. Хотя картинки можно и просто на харде хранить...

 

 

Savior: (например, фильтры работают мгновенно, т.к. не происходит перехода на другие страницы);

Ну это у тебя там изи мод. Не нашел как сделать фильтр "CMC >=3 AND CMC < 5 AND Color IN ('red', 'blue') AND Set IN ('KtK', 'BfZ') "

Изменено 10 ноября 2015 пользователем mrSadPanda

[Savior]

Я сделал спойлер в качестве практики, изучая фронт-енд, поэтому БД не реализовывал.

JSON должен кешироваться.

 

По поводу БД, я хотел попробовать изучить noSQL (mongoDB).

[jdo]

Только веса лучше так объявить, наверное:

 

var rarityWeights = {
"Common": 1,
"Uncommon": 2,
"Rare": 3,
"Mythic Rare": 4
};

Изменено 16 ноября 2015 пользователем jdo

[Savior]

Вернулся домой, немного покрапел над сайтом:

 

- Убрал темный фон и текс при наведении на карту,

- Отсортировал карты в спойлере по редкости,

- Добавил кастомный фильтр. Фильтрует карты по мере написания запроса. Можно писать любые ключевые слова (Например, "Angel" или "Devoid"),

- Добавил Oath of the Gatewatch и From the Vault: Angels.

 

Не могу найти где нормально можно скачать изображения Commander 2015. (Только 56 есть, как найду, добавлю все).

Oath of the Gatewatch буду обновлять, старые сеты добавлю по возможности.

[bkszbs]

Не могу найти где нормально можно скачать изображения Commander 2015. (Только 56 есть, как найду, добавлю все).

Там всего 56 карт(новых, остальное - репринты)