From 4ea56aa43cdbc2d9b4889a0f91ae49997f0139b0 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 3 Dec 2018 18:24:58 +0700 Subject: [PATCH] stickers: implemented click-adding --- src/components/dialogs/StickersDialog.jsx | 8 +-- src/constants/stickers.js | 70 +++++++++++------------ src/modules/Sticker.js | 15 +++-- src/styles/stickers.less | 10 ++++ 4 files changed, 60 insertions(+), 43 deletions(-) diff --git a/src/components/dialogs/StickersDialog.jsx b/src/components/dialogs/StickersDialog.jsx index fc4fb03..5f4af87 100644 --- a/src/components/dialogs/StickersDialog.jsx +++ b/src/components/dialogs/StickersDialog.jsx @@ -2,7 +2,6 @@ import React from 'react'; import { STICKERS } from '$constants/stickers'; -import sprite from '$sprites/stickers.svg'; type Props = { setActiveSticker: Function @@ -12,14 +11,15 @@ export const StickersDialog = ({ setActiveSticker }: Props) => (
{ Object.keys(STICKERS).map(set => ( - STICKERS[set].layers.map((sticker, i) => ( + Object.keys(STICKERS[set].layers).map(sticker => (
setActiveSticker({ set, sticker })} /> )) )) diff --git a/src/constants/stickers.js b/src/constants/stickers.js index dae2e93..cbf429c 100644 --- a/src/constants/stickers.js +++ b/src/constants/stickers.js @@ -3,43 +3,43 @@ // export const stickers = ['green', 'basic', 'green-small']; export const STICKERS = { - BASE: { + base: { title: 'Простые', url: require('$sprites/stickers/stickers-base.svg'), size: 72, - layers: [ - { off: 5, title: 'Александр 3', title_long: 'Парк Городское Начало' }, - { off: 9, title: 'пл.Калинина', title_long: 'пл.Калинина' }, - { off: 4, title: 'Мост', title_long: 'Мост' }, - { off: 7, title: 'Икея', title_long: 'Парковка ТЦ Мега' }, - { off: 8, title: 'Бугринка', title_long: 'Та самая коса\n(культовое место Усталых Педалек)' }, - { off: 10, title: 'ГПНТБ', title_long: 'ГПНТБ' }, - { off: 18, title: 'Оперный', title_long: 'Оперный театр' }, - { off: 1, title: 'Лес', title_long: 'Берёзовая роща' }, - { off: 2, title: 'Трасса', title_long: 'Дорога' }, - { off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' }, - { off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' }, - { off: 3, title: 'Курочка', title_long: 'Курочка' }, - { off: 6, title: 'Палатка', title_long: 'Палаточный лагерь' }, - { off: 11, title: 'Фастфуд', title_long: 'Двухколёсное ожирение' }, - { off: 12, title: 'Пивко', title_long: 'В Питере - пить!' }, - { off: 13, title: 'Шаварма', title_long: 'Вкусная шаурма' }, - { off: 14, title: 'Камни', title_long: 'Кааааммммуушшшки' }, - { off: 15, title: 'Болото', title_long: 'Пошла ты,\nтрясина грёбаная!' }, - { off: 16, title: 'Роджер', title_long: 'Может не надо?' }, - { off: 17, title: 'Какашка', title_long: 'Нехорошее место' }, - { off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' }, - { off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' }, - { off: 21, title: 'Старт', title_long: 'Старт здесь' }, - { off: 22, title: '1', title_long: 'Первая точка' }, - { off: 23, title: '2', title_long: 'Вторая точка' }, - { off: 24, title: '3', title_long: 'Третья точка' }, - { off: 25, title: '4', title_long: 'Четвёртая точка' }, - { off: 26, title: '5', title_long: 'Пятая точка' }, - { off: 27, title: '7', title_long: 'Шестая точка' }, - { off: 28, title: 'Финиш', title_long: 'Финиш здесь' }, - { off: 29, title: 'Осторожно!', title_long: 'Осторожно!' }, - { off: 30, title: 'Вопрос', title_long: 'Что тут?' } - ] + layers: { + men: { off: 5, title: 'Александр 3', title_long: 'Парк Городское Начало' }, + square: { off: 9, title: 'пл.Калинина', title_long: 'пл.Калинина' }, + bridge: { off: 4, title: 'Мост', title_long: 'Мост' }, + ikea: { off: 7, title: 'Икея', title_long: 'Парковка ТЦ Мега' }, + bugr: { off: 8, title: 'Бугринка', title_long: 'Та самая коса\n(культовое место Усталых Педалек)' }, + monum: { off: 10, title: 'ГПНТБ', title_long: 'ГПНТБ' }, + opera: { off: 18, title: 'Оперный', title_long: 'Оперный театр' }, + forest: { off: 1, title: 'Лес', title_long: 'Берёзовая роща' }, + road: { off: 2, title: 'Трасса', title_long: 'Дорога' }, + empty1: { off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' }, + empty2: { off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' }, + chicken: { off: 3, title: 'Курочка', title_long: 'Курочка' }, + camp: { off: 6, title: 'Палатка', title_long: 'Палаточный лагерь' }, + burger: { off: 11, title: 'Фастфуд', title_long: 'Двухколёсное ожирение' }, + beer: { off: 12, title: 'Пивко', title_long: 'В Питере - пить!' }, + shawarma: { off: 13, title: 'Шаварма', title_long: 'Вкусная шаурма' }, + rocks: { off: 14, title: 'Камни', title_long: 'Кааааммммуушшшки' }, + swamp: { off: 15, title: 'Болото', title_long: 'Пошла ты,\nтрясина грёбаная!' }, + skull: { off: 16, title: 'Роджер', title_long: 'Может не надо?' }, + dump: { off: 17, title: 'Какашка', title_long: 'Нехорошее место' }, + empty3: { off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' }, + empty4: { off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' }, + start: { off: 21, title: 'Старт', title_long: 'Старт здесь' }, + p1: { off: 22, title: '1', title_long: 'Первая точка' }, + p2: { off: 23, title: '2', title_long: 'Вторая точка' }, + p3: { off: 24, title: '3', title_long: 'Третья точка' }, + p4: { off: 25, title: '4', title_long: 'Четвёртая точка' }, + p5: { off: 26, title: '5', title_long: 'Пятая точка' }, + p6: { off: 27, title: '7', title_long: 'Шестая точка' }, + p7: { off: 28, title: 'Финиш', title_long: 'Финиш здесь' }, + p8: { off: 29, title: 'Осторожно!', title_long: 'Осторожно!' }, + p9: { off: 30, title: 'Вопрос', title_long: 'Что тут?' }, + } } }; diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js index 7920cd1..9ebfeab 100644 --- a/src/modules/Sticker.js +++ b/src/modules/Sticker.js @@ -4,6 +4,7 @@ import 'leaflet-editable'; import { DomMarker } from '$utils/DomMarker'; import stickers from '$sprites/stickers.svg'; +import { STICKERS } from '$constants/stickers'; export class Sticker { constructor({ @@ -124,11 +125,17 @@ export class Sticker { this.stickerArrow.style.transform = `rotate(${angle + 3.14}rad)`; }; - generateStickerSVG = sticker => ( + generateStickerSVG = ({ set, sticker }) => ( + // ` + // + // + // + // ` ` - - - +
+
` ); diff --git a/src/styles/stickers.less b/src/styles/stickers.less index 9da5d97..d73e527 100644 --- a/src/styles/stickers.less +++ b/src/styles/stickers.less @@ -72,6 +72,16 @@ position: relative; z-index: 0; } + + .sticker-image { + width: 64px; + height: 64px; + left: -8px; + top: -8px; + position: relative; + z-index: 0; + background-size: cover; + } } .sticker-arrow {