@buley/hexgrid-3d 3.3.1 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HexGrid.d.ts","sourceRoot":"","sources":["../../src/components/HexGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAYhF,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAI/C,YAAY,EAAE,KAAK,EAAE,CAAA;AAWrB,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,OAAO;IAEvC,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAA;IAGhB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IACzC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAC9C,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAA;IAC5G,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,KAAK,CAAA;IACZ,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAoLD,eAAO,MAAM,OAAO,GAAI,CAAC,GAAG,OAAO,EAAE,iMAalC,YAAY,CAAC,CAAC,CAAC,4CAytIjB,CAAA;
|
|
1
|
+
{"version":3,"file":"HexGrid.d.ts","sourceRoot":"","sources":["../../src/components/HexGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAYhF,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAI/C,YAAY,EAAE,KAAK,EAAE,CAAA;AAWrB,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,OAAO;IAEvC,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAA;IAGhB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IACzC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAC9C,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAA;IAC5G,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,KAAK,CAAA;IACZ,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAoLD,eAAO,MAAM,OAAO,GAAI,CAAC,GAAG,OAAO,EAAE,iMAalC,YAAY,CAAC,CAAC,CAAC,4CAytIjB,CAAA;AAk7DD,eAAe,OAAO,CAAC"}
|
|
@@ -4052,6 +4052,15 @@ function drawHexagon(ctx, position, radius, infection, textures, index, blankNei
|
|
|
4052
4052
|
}
|
|
4053
4053
|
ctx.drawImage(tmp, -radius, -radius, radius * 2, radius * 2);
|
|
4054
4054
|
ctx.restore();
|
|
4055
|
+
// Subtle emotion color tint overlay on textured tiles
|
|
4056
|
+
if (infection.photo.dominantColor) {
|
|
4057
|
+
ctx.globalCompositeOperation = 'source-atop';
|
|
4058
|
+
ctx.fillStyle = infection.photo.dominantColor;
|
|
4059
|
+
ctx.globalAlpha = 0.15;
|
|
4060
|
+
ctx.fill();
|
|
4061
|
+
ctx.globalAlpha = 1.0;
|
|
4062
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
4063
|
+
}
|
|
4055
4064
|
// Restore alpha for overlays
|
|
4056
4065
|
ctx.globalAlpha = 1.0;
|
|
4057
4066
|
// Glass overlay: subtle top highlight with animated sheen (guarded)
|
|
@@ -4102,9 +4111,75 @@ function drawHexagon(ctx, position, radius, infection, textures, index, blankNei
|
|
|
4102
4111
|
ctx.globalAlpha = prevAlpha;
|
|
4103
4112
|
}
|
|
4104
4113
|
else {
|
|
4105
|
-
// Fallback: muted glass tile
|
|
4106
|
-
|
|
4107
|
-
|
|
4114
|
+
// Fallback: use dominantColor if available, otherwise muted glass tile
|
|
4115
|
+
const dc = infection.photo.dominantColor;
|
|
4116
|
+
if (dc) {
|
|
4117
|
+
ctx.clip();
|
|
4118
|
+
// Apply neighbor-based translucency
|
|
4119
|
+
const prevAlpha = ctx.globalAlpha;
|
|
4120
|
+
ctx.globalAlpha = neighborAlpha;
|
|
4121
|
+
// Fill with emotion color at moderate opacity
|
|
4122
|
+
ctx.fillStyle = dc;
|
|
4123
|
+
ctx.globalAlpha = 0.7;
|
|
4124
|
+
ctx.fill();
|
|
4125
|
+
ctx.globalAlpha = 1.0;
|
|
4126
|
+
// Add radial gradient for depth (lighter center, darker edges)
|
|
4127
|
+
const grad = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
|
|
4128
|
+
grad.addColorStop(0, 'rgba(255,255,255,0.15)');
|
|
4129
|
+
grad.addColorStop(1, 'rgba(0,0,0,0.2)');
|
|
4130
|
+
ctx.fillStyle = grad;
|
|
4131
|
+
ctx.fill();
|
|
4132
|
+
// Glass overlay: sheen effect (same as textured tiles)
|
|
4133
|
+
if (sheenEnabled) {
|
|
4134
|
+
const sheenWidth = radius * 1.6;
|
|
4135
|
+
const sheenX = ((sheenProgress * 0.6 + index * 0.13) % 1.0) * (radius * 2 + sheenWidth) - sheenWidth / 2 - radius;
|
|
4136
|
+
const sheenGrad = ctx.createLinearGradient(sheenX, -radius, sheenX + sheenWidth, radius);
|
|
4137
|
+
sheenGrad.addColorStop(0, `rgba(255,255,255,0.00)`);
|
|
4138
|
+
sheenGrad.addColorStop(0.45, `rgba(255,255,255,${Math.max(0, sheenIntensity * 0.5)})`);
|
|
4139
|
+
sheenGrad.addColorStop(0.5, `rgba(255,255,255,${sheenIntensity})`);
|
|
4140
|
+
sheenGrad.addColorStop(0.55, `rgba(255,255,255,${Math.max(0, sheenIntensity * 0.5)})`);
|
|
4141
|
+
sheenGrad.addColorStop(1, `rgba(255,255,255,0.00)`);
|
|
4142
|
+
ctx.fillStyle = sheenGrad;
|
|
4143
|
+
ctx.globalCompositeOperation = 'source-atop';
|
|
4144
|
+
ctx.fill();
|
|
4145
|
+
}
|
|
4146
|
+
// Slight inner darkening at edges to simulate depth
|
|
4147
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
4148
|
+
ctx.fillStyle = 'rgba(0,0,0,0.06)';
|
|
4149
|
+
ctx.beginPath();
|
|
4150
|
+
for (let i = 0; i < 6; i++) {
|
|
4151
|
+
const angle = (i / 6) * Math.PI * 2 + Math.PI / 6;
|
|
4152
|
+
const hx = Math.cos(angle) * (radius * 0.98);
|
|
4153
|
+
const hy = Math.sin(angle) * (radius * 0.98);
|
|
4154
|
+
if (i === 0)
|
|
4155
|
+
ctx.moveTo(hx, hy);
|
|
4156
|
+
else
|
|
4157
|
+
ctx.lineTo(hx, hy);
|
|
4158
|
+
}
|
|
4159
|
+
ctx.closePath();
|
|
4160
|
+
ctx.fill();
|
|
4161
|
+
// Scratch overlay for micro details (optional)
|
|
4162
|
+
if (scratchEnabled && scratchCanvas) {
|
|
4163
|
+
ctx.globalAlpha = 0.08;
|
|
4164
|
+
ctx.globalCompositeOperation = 'source-atop';
|
|
4165
|
+
const scale = (radius * 2) / scratchCanvas.width;
|
|
4166
|
+
ctx.save();
|
|
4167
|
+
ctx.scale(scale, scale);
|
|
4168
|
+
ctx.drawImage(scratchCanvas, -radius / scale, -radius / scale);
|
|
4169
|
+
ctx.restore();
|
|
4170
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
4171
|
+
}
|
|
4172
|
+
// Subtle outer stroke
|
|
4173
|
+
ctx.globalAlpha = 1.0;
|
|
4174
|
+
ctx.strokeStyle = 'rgba(255,255,255,0.04)';
|
|
4175
|
+
ctx.lineWidth = 0.6;
|
|
4176
|
+
ctx.stroke();
|
|
4177
|
+
ctx.globalAlpha = prevAlpha;
|
|
4178
|
+
}
|
|
4179
|
+
else {
|
|
4180
|
+
ctx.fillStyle = 'rgba(100,110,120,0.12)';
|
|
4181
|
+
ctx.fill();
|
|
4182
|
+
}
|
|
4108
4183
|
}
|
|
4109
4184
|
}
|
|
4110
4185
|
else {
|
|
@@ -4147,7 +4222,16 @@ function drawHexagon(ctx, position, radius, infection, textures, index, blankNei
|
|
|
4147
4222
|
ctx.lineTo(hx, hy);
|
|
4148
4223
|
}
|
|
4149
4224
|
ctx.closePath();
|
|
4150
|
-
|
|
4225
|
+
const pulseColor = infection?.photo.dominantColor;
|
|
4226
|
+
if (pulseColor && pulseColor.length >= 7 && pulseColor[0] === '#') {
|
|
4227
|
+
const r = parseInt(pulseColor.slice(1, 3), 16);
|
|
4228
|
+
const g = parseInt(pulseColor.slice(3, 5), 16);
|
|
4229
|
+
const b = parseInt(pulseColor.slice(5, 7), 16);
|
|
4230
|
+
ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${glowAlpha})`;
|
|
4231
|
+
}
|
|
4232
|
+
else {
|
|
4233
|
+
ctx.fillStyle = `rgba(180, 220, 255, ${glowAlpha})`;
|
|
4234
|
+
}
|
|
4151
4235
|
ctx.fill();
|
|
4152
4236
|
ctx.restore();
|
|
4153
4237
|
}
|