mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 19:16:41 +07:00
stickers: implemented click-adding
This commit is contained in:
muerwre
parent
93e05b7efe
commit
4ea56aa43c
4 changed files with 60 additions and 43 deletions
|
|
@ -2,7 +2,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { STICKERS } from '$constants/stickers';
|
import { STICKERS } from '$constants/stickers';
|
||||||
import sprite from '$sprites/stickers.svg';
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
setActiveSticker: Function
|
setActiveSticker: Function
|
||||||
|
|
@ -12,14 +11,15 @@ export const StickersDialog = ({ setActiveSticker }: Props) => (
|
||||||
<div className="helper stickers-helper">
|
<div className="helper stickers-helper">
|
||||||
{
|
{
|
||||||
Object.keys(STICKERS).map(set => (
|
Object.keys(STICKERS).map(set => (
|
||||||
STICKERS[set].layers.map((sticker, i) => (
|
Object.keys(STICKERS[set].layers).map(sticker => (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url(${STICKERS[set].url})`,
|
backgroundImage: `url(${STICKERS[set].url})`,
|
||||||
backgroundPosition: `${-sticker.off * 48}px 50%`,
|
backgroundPosition: `${-STICKERS[set].layers[sticker].off * 48}px 50%`,
|
||||||
}}
|
}}
|
||||||
className="sticker-preview"
|
className="sticker-preview"
|
||||||
key={`${set}-${i}`}
|
key={`${set}-${sticker}`}
|
||||||
|
onClick={() => setActiveSticker({ set, sticker })}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
))
|
))
|
||||||
|
|
|
||||||
|
|
@ -3,43 +3,43 @@
|
||||||
|
|
||||||
// export const stickers = ['green', 'basic', 'green-small'];
|
// export const stickers = ['green', 'basic', 'green-small'];
|
||||||
export const STICKERS = {
|
export const STICKERS = {
|
||||||
BASE: {
|
base: {
|
||||||
title: 'Простые',
|
title: 'Простые',
|
||||||
url: require('$sprites/stickers/stickers-base.svg'),
|
url: require('$sprites/stickers/stickers-base.svg'),
|
||||||
size: 72,
|
size: 72,
|
||||||
layers: [
|
layers: {
|
||||||
{ off: 5, title: 'Александр 3', title_long: 'Парк Городское Начало' },
|
men: { off: 5, title: 'Александр 3', title_long: 'Парк Городское Начало' },
|
||||||
{ off: 9, title: 'пл.Калинина', title_long: 'пл.Калинина' },
|
square: { off: 9, title: 'пл.Калинина', title_long: 'пл.Калинина' },
|
||||||
{ off: 4, title: 'Мост', title_long: 'Мост' },
|
bridge: { off: 4, title: 'Мост', title_long: 'Мост' },
|
||||||
{ off: 7, title: 'Икея', title_long: 'Парковка ТЦ Мега' },
|
ikea: { off: 7, title: 'Икея', title_long: 'Парковка ТЦ Мега' },
|
||||||
{ off: 8, title: 'Бугринка', title_long: 'Та самая коса\n(культовое место Усталых Педалек)' },
|
bugr: { off: 8, title: 'Бугринка', title_long: 'Та самая коса\n(культовое место Усталых Педалек)' },
|
||||||
{ off: 10, title: 'ГПНТБ', title_long: 'ГПНТБ' },
|
monum: { off: 10, title: 'ГПНТБ', title_long: 'ГПНТБ' },
|
||||||
{ off: 18, title: 'Оперный', title_long: 'Оперный театр' },
|
opera: { off: 18, title: 'Оперный', title_long: 'Оперный театр' },
|
||||||
{ off: 1, title: 'Лес', title_long: 'Берёзовая роща' },
|
forest: { off: 1, title: 'Лес', title_long: 'Берёзовая роща' },
|
||||||
{ off: 2, title: 'Трасса', title_long: 'Дорога' },
|
road: { off: 2, title: 'Трасса', title_long: 'Дорога' },
|
||||||
{ off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' },
|
empty1: { off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' },
|
||||||
{ off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' },
|
empty2: { off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' },
|
||||||
{ off: 3, title: 'Курочка', title_long: 'Курочка' },
|
chicken: { off: 3, title: 'Курочка', title_long: 'Курочка' },
|
||||||
{ off: 6, title: 'Палатка', title_long: 'Палаточный лагерь' },
|
camp: { off: 6, title: 'Палатка', title_long: 'Палаточный лагерь' },
|
||||||
{ off: 11, title: 'Фастфуд', title_long: 'Двухколёсное ожирение' },
|
burger: { off: 11, title: 'Фастфуд', title_long: 'Двухколёсное ожирение' },
|
||||||
{ off: 12, title: 'Пивко', title_long: 'В Питере - пить!' },
|
beer: { off: 12, title: 'Пивко', title_long: 'В Питере - пить!' },
|
||||||
{ off: 13, title: 'Шаварма', title_long: 'Вкусная шаурма' },
|
shawarma: { off: 13, title: 'Шаварма', title_long: 'Вкусная шаурма' },
|
||||||
{ off: 14, title: 'Камни', title_long: 'Кааааммммуушшшки' },
|
rocks: { off: 14, title: 'Камни', title_long: 'Кааааммммуушшшки' },
|
||||||
{ off: 15, title: 'Болото', title_long: 'Пошла ты,\nтрясина грёбаная!' },
|
swamp: { off: 15, title: 'Болото', title_long: 'Пошла ты,\nтрясина грёбаная!' },
|
||||||
{ off: 16, title: 'Роджер', title_long: 'Может не надо?' },
|
skull: { off: 16, title: 'Роджер', title_long: 'Может не надо?' },
|
||||||
{ off: 17, title: 'Какашка', title_long: 'Нехорошее место' },
|
dump: { off: 17, title: 'Какашка', title_long: 'Нехорошее место' },
|
||||||
{ off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' },
|
empty3: { off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' },
|
||||||
{ off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' },
|
empty4: { off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' },
|
||||||
{ off: 21, title: 'Старт', title_long: 'Старт здесь' },
|
start: { off: 21, title: 'Старт', title_long: 'Старт здесь' },
|
||||||
{ off: 22, title: '1', title_long: 'Первая точка' },
|
p1: { off: 22, title: '1', title_long: 'Первая точка' },
|
||||||
{ off: 23, title: '2', title_long: 'Вторая точка' },
|
p2: { off: 23, title: '2', title_long: 'Вторая точка' },
|
||||||
{ off: 24, title: '3', title_long: 'Третья точка' },
|
p3: { off: 24, title: '3', title_long: 'Третья точка' },
|
||||||
{ off: 25, title: '4', title_long: 'Четвёртая точка' },
|
p4: { off: 25, title: '4', title_long: 'Четвёртая точка' },
|
||||||
{ off: 26, title: '5', title_long: 'Пятая точка' },
|
p5: { off: 26, title: '5', title_long: 'Пятая точка' },
|
||||||
{ off: 27, title: '7', title_long: 'Шестая точка' },
|
p6: { off: 27, title: '7', title_long: 'Шестая точка' },
|
||||||
{ off: 28, title: 'Финиш', title_long: 'Финиш здесь' },
|
p7: { off: 28, title: 'Финиш', title_long: 'Финиш здесь' },
|
||||||
{ off: 29, title: 'Осторожно!', title_long: 'Осторожно!' },
|
p8: { off: 29, title: 'Осторожно!', title_long: 'Осторожно!' },
|
||||||
{ off: 30, title: 'Вопрос', title_long: 'Что тут?' }
|
p9: { off: 30, title: 'Вопрос', title_long: 'Что тут?' },
|
||||||
]
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import 'leaflet-editable';
|
||||||
import { DomMarker } from '$utils/DomMarker';
|
import { DomMarker } from '$utils/DomMarker';
|
||||||
|
|
||||||
import stickers from '$sprites/stickers.svg';
|
import stickers from '$sprites/stickers.svg';
|
||||||
|
import { STICKERS } from '$constants/stickers';
|
||||||
|
|
||||||
export class Sticker {
|
export class Sticker {
|
||||||
constructor({
|
constructor({
|
||||||
|
|
@ -124,11 +125,17 @@ export class Sticker {
|
||||||
this.stickerArrow.style.transform = `rotate(${angle + 3.14}rad)`;
|
this.stickerArrow.style.transform = `rotate(${angle + 3.14}rad)`;
|
||||||
};
|
};
|
||||||
|
|
||||||
generateStickerSVG = sticker => (
|
generateStickerSVG = ({ set, sticker }) => (
|
||||||
|
// `
|
||||||
|
// <svg width="64" height="64">
|
||||||
|
// <use xlink:href="${stickers}#sticker-${sticker}" x="0" y="0" width="64" height="64" />
|
||||||
|
// </svg>
|
||||||
|
// `
|
||||||
`
|
`
|
||||||
<svg width="64" height="64">
|
<div
|
||||||
<use xlink:href="${stickers}#sticker-${sticker}" x="0" y="0" width="64" height="64" />
|
class="sticker-image"
|
||||||
</svg>
|
style="background-image: url('${STICKERS[set].url}');background-position: ${-STICKERS[set].layers[sticker].off * 64} 50%">
|
||||||
|
</div>
|
||||||
`
|
`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -72,6 +72,16 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sticker-image {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
left: -8px;
|
||||||
|
top: -8px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sticker-arrow {
|
.sticker-arrow {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue