-
Notifications
You must be signed in to change notification settings - Fork 0
/
sprite_map_css.js
68 lines (55 loc) · 1.8 KB
/
sprite_map_css.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
'use strict';
function toInt(n) {
return ~~n
}
const map = {
"clear-day": [1, 3],
"clear-night": [5, 5],
"rain": [5, 4],
"snow": [4, 1],
"sleet": [5, 2],
"wind": [3, 3],
"fog": [2, 4],
"cloudy": [4, 3],
"partly-cloudy-day": [2, 3],
"partly-cloudy-night": [2, 6]
}
function config(intrinsicCellWidth, rows, columns, map, url) {
// NOTE: instrinsic cell height is disregarding b/c we assume it's a square
return function matrixPosToCss(iw, midfix) {
let retMap2 = Object.create(null),
scaledSpriteW = (iw / intrinsicCellWidth) * (intrinsicCellWidth * columns),
scaledSpriteH = iw * rows
midfix = midfix && midfix.length ? midfix + "-" : ""
Object.keys(map).map((key) => {
let [x, y] = map[key],
startX, startY
startX = iw * (x -1)
startY = iw * (y -1)
return [key,[startX === 0 ? 0 : -startX, startY === 0 ? 0 : -startY]]
}).forEach(([key, [offX, offY]]) => {
retMap2[key] =
`.icon-${midfix}${key} {
width: ${toInt(iw)}px;
height: ${toInt(iw)}px;
background: url(${url}) ${toInt(offX)}px ${toInt(offY)}px;
background-size: ${toInt(scaledSpriteW)}px ${toInt(scaledSpriteH)}px; }
`
})
function joinCss(map) {
return Object.keys(map).map((key) => map[key]).join("")
}
return joinCss(retMap2)
}
}
/**
* public/weather_icons.png
* + intrinsic size: 580 x 696
* + tot. images: 5 x 6
* + single img. dimensions: 116 x 116
*
* Usage: node sprite_map_css.js > src/css/icons.css
*/
let matrixPosToCss = config(116, 6, 5, map, "\"../imgs/weather_icons.png\"")
console.log(matrixPosToCss(116))
console.log(matrixPosToCss(37, "sm"))