diff --git a/files/events/assets/js/snowed-in.js b/files/events/assets/js/snowed-in.js new file mode 100644 index 000000000..7cfb2e173 --- /dev/null +++ b/files/events/assets/js/snowed-in.js @@ -0,0 +1,101 @@ +var canvas = document.querySelector('#canvas-snowed-in-overlay'); +var lineCanvas = document.querySelector('#canvas-snowed-in-lines'); + +var canvasContext = canvas.getContext('2d'); +var lineCanvasContext = lineCanvas.getContext('2d'); + +var pointLifetime = 4000; +var points = []; + +//FILL CANVAS +canvasContext.fillStyle="rgba(0, 0, 0, 0.1)"; +canvasContext.fillRect(0, 0, canvas.width, canvas.height); + +//INIT +function init() { + document.addEventListener('mousemove', onMouseMove); + window.addEventListener('resize', resizeCanvases); + resizeCanvases(); + tick(); +} + +init(); + +//RESIZE CANVAS +function resizeCanvases() { + canvas.width = lineCanvas.width = window.innerWidth; + canvas.height = lineCanvas.height = window.innerHeight; +} + +function onMouseMove(event) { + points.push({ + time: Date.now(), + x: event.clientX, + y: event.clientY + }); +} + +function tick() { + // Remove old points + // points = points.filter(function(point) { + // var age = Date.now() - point.time; + // return age < pointLifetime; + // }); + + drawLineCanvas(); + drawImageCanvas(); + requestAnimationFrame(tick); + //setTimeout(() => { + //tick(); + //}, 1000 / 60); +} + +function drawLineCanvas() { + var minimumLineWidth = 40; + var maximumLineWidth = 60; + var lineWidthRange = maximumLineWidth - minimumLineWidth; + var maximumSpeed = 200; + + lineCanvasContext.clearRect(0, 0, lineCanvas.width, lineCanvas.height); + lineCanvasContext.lineCap = 'round'; + lineCanvasContext.shadowBlur = 90; + lineCanvasContext.shadowColor = '#fff'; + + for (var i = 1; i < points.length; i++) { + var point = points[i]; + var previousPoint = points[i - 1]; + + // Change line width based on speed + var distance = getDistanceBetween(point, previousPoint); + var speed = Math.max(0, Math.min(maximumSpeed, distance)); + var percentageLineWidth = (maximumSpeed - speed) / maximumSpeed; + lineCanvasContext.lineWidth = minimumLineWidth + percentageLineWidth * lineWidthRange; + + // Fade points as they age + // var age = Date.now() - point.time; + // var opacity = (pointLifetime - age) / pointLifetime; + // lineCanvasContext.strokeStyle = 'rgba(255, 255, 255, ' + opacity + ')'; + lineCanvasContext.strokeStyle = 'rgba(255, 255, 255, 1)'; + + lineCanvasContext.beginPath(); + lineCanvasContext.moveTo(previousPoint.x, previousPoint.y); + lineCanvasContext.lineTo(point.x, point.y); + lineCanvasContext.stroke(); + } +} + +function getDistanceBetween(a, b) { + return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2)); +} + +function drawImageCanvas() { + canvasContext.globalCompositeOperation = 'source-over'; + canvasContext.save(); + canvasContext.fillStyle="rgb(255,255,255)"; + canvasContext.globalAlpha = 0.09; + canvasContext.fillRect(0, 0, canvas.width, canvas.height); + canvasContext.restore(); + canvasContext.globalCompositeOperation = 'destination-out'; + canvasContext.drawImage(lineCanvas, 0, 0); + +} diff --git a/files/events/helpers/const.py b/files/events/helpers/const.py index 7a9c8fd39..874ecf65b 100644 --- a/files/events/helpers/const.py +++ b/files/events/helpers/const.py @@ -60,6 +60,21 @@ EVENT_AWARDS = { "cosmetic": True }, } + +""" + "snowed-in": { + "kind": "snowed-in", + "title": "Snowed In", + "description": "", + "icon": "fas fa-temperature-snow", + "color": "text-blue", + "price": 600, + "deflectable": False, + "cosmetic": True + }, + +""" + EVENT_FORCED_HATS = ['/i/hats/Santa Hat III.webp?h=1', \ '/i/hats/Winter Cap.webp?h=1', \ '/i/hats/Present Bow.webp?h=1'] diff --git a/files/events/templates/awards.html b/files/events/templates/awards.html index d01409d65..d79580992 100644 --- a/files/events/templates/awards.html +++ b/files/events/templates/awards.html @@ -37,6 +37,30 @@ } {% endif %} + + {% if p.award_count("snowed-in", v) %} + + + + + {% endif %} {% if p.award_count("lights", v) %}