WIP holiday event manager #13
|
@ -0,0 +1,66 @@
|
||||||
|
from os import path
|
||||||
|
import subprocess
|
||||||
|
from importlib import import_module
|
||||||
|
|
||||||
|
from files.__main__ import app, db_session, engine
|
||||||
|
from flask import g
|
||||||
|
from sqlalchemy import inspect
|
||||||
|
|
||||||
|
from files.helpers.const import AWARDS2, AWARDS_DISABLED
|
||||||
|
|
||||||
|
from .table import Event
|
||||||
|
from .columns import *
|
||||||
|
|
||||||
|
from events.classes import *
|
||||||
|
from events.helpers import *
|
||||||
|
from events.routes import *
|
||||||
|
|
||||||
|
def link_assets():
|
||||||
|
asset_dirs = { # We assume WD is always in root of repository
|
||||||
|
"files/assets/css": "../../../events/assets/css",
|
||||||
|
"files/assets/js": "../../../events/assets/js",
|
||||||
|
"files/assets/fonts": "../../../events/assets/fonts",
|
||||||
|
"files/assets/images": "../../../events/assets/images",
|
||||||
|
"files/assets/media": "../../../events/assets/media",
|
||||||
|
"files/templates": "../../events/templates",
|
||||||
|
}
|
||||||
|
|
||||||
|
print("[EVENT] Linking event assets...")
|
||||||
|
|
||||||
|
for link_dir in asset_dirs:
|
||||||
|
target = asset_dirs[link_dir]
|
||||||
|
link = link_dir + "/event"
|
||||||
|
|
||||||
|
try:
|
||||||
|
if path.exists(link):
|
||||||
|
subprocess.run(["rm", link])
|
||||||
|
|
||||||
|
subprocess.run(["ln", "-s", target, link])
|
||||||
|
print("[EVENT] Linked " + link + " -> " + target)
|
||||||
|
except Exception as e:
|
||||||
|
print(e)
|
||||||
|
|
||||||
|
def build_table():
|
||||||
|
if not inspect(engine).has_table("event", schema="public"):
|
||||||
|
print("[EVENT] Building event table...")
|
||||||
|
|
||||||
|
with app.app_context():
|
||||||
|
g.db = db_session()
|
||||||
|
|
||||||
|
Event.__table__.create(bind=g.db.bind, checkfirst=True)
|
||||||
|
g.db.commit()
|
||||||
|
|
||||||
|
def populate_awards():
|
||||||
|
temp = {x: AWARDS2[x] for x in AWARDS2 if x not in EVENT_AWARDS}
|
||||||
|
AWARDS2.clear()
|
||||||
|
AWARDS2.update(EVENT_AWARDS)
|
||||||
|
AWARDS2.update(temp)
|
||||||
|
|
||||||
|
for award in EVENT_AWARDS:
|
||||||
|
if award in AWARDS_DISABLED:
|
||||||
|
AWARDS_DISABLED.remove(award)
|
||||||
|
|
||||||
|
def init_event():
|
||||||
|
link_assets()
|
||||||
|
build_table()
|
||||||
|
populate_awards()
|
|
@ -0,0 +1,224 @@
|
||||||
|
/* text */
|
||||||
|
#banner-halloween-title.life > tspan {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
#banner-halloween-title-II {
|
||||||
|
text-shadow: 0 4px 10px #ff000060;
|
||||||
|
}
|
||||||
|
#banner-halloween-title.life > #banner-halloween-title-II {
|
||||||
|
animation: blinker 0.5s forwards;
|
||||||
|
}
|
||||||
|
@media (max-width: 767.98px) {
|
||||||
|
#banner-halloween-title {
|
||||||
|
transform: scale(1.4) translate(-90px, -120px);
|
||||||
|
animation:none !important;
|
||||||
|
}
|
||||||
|
#banner-halloween-presenting {
|
||||||
|
transform: scale(1.4) translate(-90px, -120px);
|
||||||
|
}
|
||||||
|
#banner-halloween-bats {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes blinker {
|
||||||
|
10% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
,
|
||||||
|
30% {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
,
|
||||||
|
60% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
,
|
||||||
|
85% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
,
|
||||||
|
100% {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*days*/
|
||||||
|
:root {
|
||||||
|
/*sky*/
|
||||||
|
--sky-gradient-day1: radial-gradient(at bottom, #d43a27 25%, #761ab3 100%);
|
||||||
|
--sky-gradient-day2: radial-gradient(at bottom, #bf055c 25%, #6b007d 70%);
|
||||||
|
--sky-gradient-day3: radial-gradient(at bottom, #bf0583 5%, #560272 60%);
|
||||||
|
--sky-gradient-day4: radial-gradient(at bottom, #930184 -15%, #490272 60%);
|
||||||
|
--sky-gradient-day5: radial-gradient(at bottom, #800073 -55%, #400179 60%);
|
||||||
|
--sky-gradient-day6: radial-gradient(at bottom, #69017a 25%, #390271 70%);
|
||||||
|
--sky-gradient-day7: radial-gradient(at bottom, #69017a 25%, #2d005b 70%);
|
||||||
|
--sky-gradient-day8: radial-gradient(at bottom, #af00a6 -20%, #270146 70%);
|
||||||
|
--sky-gradient-day9: radial-gradient(at bottom, #69047b -10%, #1e0037 70%);
|
||||||
|
--sky-gradient-day10: radial-gradient(at bottom, #59047b 10%, #150026 70%);
|
||||||
|
|
||||||
|
/*moon*/
|
||||||
|
--moon-fill-day1:gold;
|
||||||
|
--moon-fill-day2:gold;
|
||||||
|
--moon-fill-day3:goldenrod;
|
||||||
|
--moon-fill-day4:none;
|
||||||
|
--moon-fill-day5:none;
|
||||||
|
--moon-fill-day6:#e4e4e4;
|
||||||
|
--moon-fill-day7:#e4e4e4;
|
||||||
|
--moon-fill-day8:#e4e4e4;
|
||||||
|
--moon-fill-day9:#e4e4e4;
|
||||||
|
--moon-fill-day10:#e4e4e4;
|
||||||
|
|
||||||
|
--moon-shadow-day1:drop-shadow(0px 0px 20px yellow);
|
||||||
|
--moon-shadow-day2:drop-shadow(0px 0px 20px yellow);
|
||||||
|
--moon-shadow-day3:drop-shadow(0px 0px 20px gold);
|
||||||
|
--moon-shadow-day4:none;
|
||||||
|
--moon-shadow-day5:none;
|
||||||
|
--moon-shadow-day6:drop-shadow(0px 0px 5px #deddcf);
|
||||||
|
--moon-shadow-day7:drop-shadow(0px 0px 10px #deddcf);
|
||||||
|
--moon-shadow-day8:drop-shadow(0px 0px 10px #deddcf);
|
||||||
|
--moon-shadow-day9:drop-shadow(0px 0px 10px #deddcf);
|
||||||
|
--moon-shadow-day10:drop-shadow(0px 0px 10px #deddcf);
|
||||||
|
|
||||||
|
--moon-position-day1:303;
|
||||||
|
--moon-position-day2:308;
|
||||||
|
--moon-position-day3:320;
|
||||||
|
--moon-position-day4:350;
|
||||||
|
--moon-position-day5:350;
|
||||||
|
--moon-position-day6:322;
|
||||||
|
--moon-position-day7:312;
|
||||||
|
--moon-position-day8:308;
|
||||||
|
--moon-position-day9:303;
|
||||||
|
--moon-position-day10:300;
|
||||||
|
|
||||||
|
/*ground*/
|
||||||
|
--ground-shadow-day1:#5818bd;
|
||||||
|
--ground-shadow-day2:#5818bd;
|
||||||
|
--ground-shadow-day3:#5818bd;
|
||||||
|
--ground-shadow-day4:#5818bd;
|
||||||
|
--ground-shadow-day5:#5818bd;
|
||||||
|
--ground-shadow-day6:#5818bd;
|
||||||
|
--ground-shadow-day7:#4e16a6;
|
||||||
|
--ground-shadow-day8:#51009a;
|
||||||
|
--ground-shadow-day9:#4b028c;
|
||||||
|
--ground-shadow-day10:#41017b;
|
||||||
|
|
||||||
|
--house-shadow-day1:#5818bd;
|
||||||
|
--house-shadow-day2:#5818bd;
|
||||||
|
--house-shadow-day3:#5818bd;
|
||||||
|
--house-shadow-day4:#5818bd;
|
||||||
|
--house-shadow-day5:#5818bd;
|
||||||
|
--house-shadow-day6:#5818bd;
|
||||||
|
--house-shadow-day7:#5818bd;
|
||||||
|
--house-shadow-day8:#4a149f;
|
||||||
|
--house-shadow-day9:#431290;
|
||||||
|
--house-shadow-day10:#3a1476;
|
||||||
|
|
||||||
|
--object-fill-day1:#240441;
|
||||||
|
--object-fill-day2:#240441;
|
||||||
|
--object-fill-day3:#240441;
|
||||||
|
--object-fill-day4:#240441;
|
||||||
|
--object-fill-day5:#240441;
|
||||||
|
--object-fill-day6:#240441;
|
||||||
|
--object-fill-day7:#240441;
|
||||||
|
--object-fill-day8:#1e0538;
|
||||||
|
--object-fill-day9:#18042c;
|
||||||
|
--object-fill-day10:#18042c;
|
||||||
|
|
||||||
|
--star-opacity-day1: 0;
|
||||||
|
--star-opacity-day2: 0;
|
||||||
|
--star-opacity-day3: 0;
|
||||||
|
--star-opacity-day4: 0.2;
|
||||||
|
--star-opacity-day5: 0.3;
|
||||||
|
--star-opacity-day6: 0.4;
|
||||||
|
--star-opacity-day7: 0.5;
|
||||||
|
--star-opacity-day8: 0.5;
|
||||||
|
--star-opacity-day9: 0.6;
|
||||||
|
--star-opacity-day10: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stars */
|
||||||
|
.star {
|
||||||
|
animation: linear infinite alternate twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star1 {
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star2 {
|
||||||
|
animation-duration: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star3 {
|
||||||
|
animation-duration: 3.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star4 {
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star5 {
|
||||||
|
animation-duration: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star1 circle {
|
||||||
|
r: 0.5;
|
||||||
|
}
|
||||||
|
.star2 circle {
|
||||||
|
r: 0.75;
|
||||||
|
}
|
||||||
|
.star3 circle {
|
||||||
|
r: 1.0;
|
||||||
|
}
|
||||||
|
.star4 circle {
|
||||||
|
r: 1.2;
|
||||||
|
}
|
||||||
|
.star5 circle {
|
||||||
|
r: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767.98px) {
|
||||||
|
.star {
|
||||||
|
animation: none;
|
||||||
|
fill-opacity: 0.5;
|
||||||
|
}
|
||||||
|
.star1 circle {
|
||||||
|
r: 1;
|
||||||
|
}
|
||||||
|
.star2 circle {
|
||||||
|
r: 1.5;
|
||||||
|
}
|
||||||
|
.star3 circle {
|
||||||
|
r: 2;
|
||||||
|
}
|
||||||
|
.star4 circle {
|
||||||
|
r: 2;
|
||||||
|
}
|
||||||
|
.star5 circle {
|
||||||
|
r: 2.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,872 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
/* Fonts */
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "DoubleFeature";
|
||||||
|
src: url("/assets/fonts/event/DoubleFeature.woff") format("woff");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Jo_wrote_a_lovesong";
|
||||||
|
src: url("/assets/fonts/event/Jo_wrote_a_lovesong.woff") format("woff");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "XTypewriter-Regular";
|
||||||
|
src: url("/assets/fonts/event/XTypewriter-Regular.woff") format("woff");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "SpecialElite-Regular";
|
||||||
|
src: url("/assets/fonts/event/SpecialElite-Regular.woff") format("woff");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Halloween Theming */
|
||||||
|
:root {
|
||||||
|
--primary: #F66A3C;
|
||||||
|
--dark: #140224;
|
||||||
|
--secondary: #820263;
|
||||||
|
--white: #E1E1E1;
|
||||||
|
--black: #CFCFCF;
|
||||||
|
--light: #170535;
|
||||||
|
--muted: #E1E1E1;
|
||||||
|
--gray: #383838;
|
||||||
|
--gray-100: #E1E1E1;
|
||||||
|
--gray-200: #E1E1E1;
|
||||||
|
--gray-300: #291720;
|
||||||
|
--gray-400: #303030;
|
||||||
|
--gray-500: var(--dark);
|
||||||
|
--gray-600: var(--dark);
|
||||||
|
--gray-700: var(--dark);
|
||||||
|
--gray-800: var(--dark);
|
||||||
|
--gray-900: var(--dark);
|
||||||
|
--background: var(--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header--icon {
|
||||||
|
height: 33px;
|
||||||
|
width: 33px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover.user-name {
|
||||||
|
cursor: url('/assets/images/event/machete.webp'), auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-color: var(--primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
background: transparent;
|
||||||
|
border-color: var(--primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background: transparent;
|
||||||
|
border-color: var(--primary) !important;
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control:disabled, .form-control[readonly] {
|
||||||
|
background: transparent;
|
||||||
|
border-color: var(--primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
border-color: #38A169 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
border-color: #E53E3E !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#frontpage .pseudo-submit-form.card .card-body .form-control {
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-lg {
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
color: #CFCFCF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent {
|
||||||
|
background: None !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#frontpage .post-title a:visited {
|
||||||
|
color: #7a7a7a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title a, h1.post-title {
|
||||||
|
font-family: 'SpecialElite-Regular';
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-up::before, .arrow-down::before {
|
||||||
|
content: '\f720';
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-down::before {
|
||||||
|
display: inline-block;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
#thread .arrow-up::before, #thread .arrow-down::before {
|
||||||
|
content: '\f720';
|
||||||
|
width: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cob Webs */
|
||||||
|
body::before {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
background-image: url('/assets/images/event/cobweb-bl.webp');
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
left: -1.5rem;
|
||||||
|
bottom: -1.5rem;
|
||||||
|
width: 170px;
|
||||||
|
height: 230px;
|
||||||
|
z-index: 10001;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
|
body::after {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
background-image: url('/assets/images/event/cobweb-tr.webp');
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
right: -1.5rem;
|
||||||
|
top: -1.5rem;
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
z-index: 10001;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: .45;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blood Effect */
|
||||||
|
.blood::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background-image: url('/assets/images/event/blood-anim.webp');
|
||||||
|
width: 100%;
|
||||||
|
height: 55px;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blood {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blood .comment-text {
|
||||||
|
color: #dc3545 !important;
|
||||||
|
font-family: 'DoubleFeature';
|
||||||
|
}
|
||||||
|
|
||||||
|
.sketch {
|
||||||
|
z-index: 10000;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Haunted Effect */
|
||||||
|
.haunt > div:not(.modal) {
|
||||||
|
animation: haunted 10s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes haunted {
|
||||||
|
0% {
|
||||||
|
backdrop-filter: brightness(20%);
|
||||||
|
}
|
||||||
|
1% {
|
||||||
|
backdrop-filter: brightness(20%);
|
||||||
|
}
|
||||||
|
2% {
|
||||||
|
backdrop-filter: sepia(0.8) contrast(1.5) brightness(200%);
|
||||||
|
}
|
||||||
|
3% {
|
||||||
|
backdrop-filter: sepia(0.8) contrast(1.5) brightness(20%);
|
||||||
|
}
|
||||||
|
4% {
|
||||||
|
backdrop-filter: brightness(300%);
|
||||||
|
}
|
||||||
|
7% {
|
||||||
|
backdrop-filter: brightness(1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
backdrop-filter: brightness(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes haunted-upsidedown {
|
||||||
|
0% {
|
||||||
|
backdrop-filter: brightness(20%) sepia(1) saturate(3) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
1% {
|
||||||
|
backdrop-filter: brightness(20%) sepia(1) saturate(3) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
2% {
|
||||||
|
backdrop-filter: sepia(1) contrast(1.5) brightness(200%) saturate(3) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
3% {
|
||||||
|
backdrop-filter: sepia(1) contrast(1.5) brightness(20%) saturate(3) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
4% {
|
||||||
|
backdrop-filter: brightness(300%) sepia(1) saturate(3) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
7% {
|
||||||
|
backdrop-filter: brightness(1) sepia(1) saturate(3) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
backdrop-filter: brightness(1) sepia(1) saturate(3) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Spiders */
|
||||||
|
.spider:nth-child(odd) {
|
||||||
|
animation-name: swingFast;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:nth-child(2) {
|
||||||
|
animation-delay: 250ms;
|
||||||
|
animation-duration: 2100ms;
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:nth-child(3) {
|
||||||
|
animation-delay: 300ms;
|
||||||
|
animation-duration: 1600ms;
|
||||||
|
left: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:nth-child(4) {
|
||||||
|
animation-delay: 400ms;
|
||||||
|
animation-duration: 1800ms;
|
||||||
|
left: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:nth-child(5) {
|
||||||
|
animation-delay: 240ms;
|
||||||
|
animation-duration: 1900ms;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:nth-child(6) {
|
||||||
|
animation-delay: 250ms;
|
||||||
|
animation-duration: 2300ms;
|
||||||
|
left: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:nth-child(7) {
|
||||||
|
animation-delay: 400ms;
|
||||||
|
animation-duration: 2100ms;
|
||||||
|
left: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:nth-child(8) {
|
||||||
|
animation-delay: 4000ms;
|
||||||
|
animation-duration: 200ms;
|
||||||
|
left: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider {
|
||||||
|
z-index: 10;
|
||||||
|
position: fixed;
|
||||||
|
display: inline-block;
|
||||||
|
top: 0;
|
||||||
|
left: 10%;
|
||||||
|
|
||||||
|
animation: swing 2s infinite;
|
||||||
|
transform-origin: top;
|
||||||
|
|
||||||
|
transition: 0.8s ease-in-out;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:hover .body {
|
||||||
|
transform: rotate(20deg);
|
||||||
|
transition: 0.4s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:nth-child(odd):hover .body {
|
||||||
|
transform: rotate(-10deg);
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider .spiderweb {
|
||||||
|
width: 2px;
|
||||||
|
height: 200px;
|
||||||
|
margin-left: 49px;
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider .body {
|
||||||
|
width: 100px;
|
||||||
|
height: 80px;
|
||||||
|
background: #222;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider .body .eye {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 24px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider .body .eye.left {
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider .body .eye.right {
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider .body .eye:after {
|
||||||
|
background: #222;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
margin: 55%;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
animation: look 4s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:nth-child(8) .body .eye {
|
||||||
|
background-color: #FF0000;
|
||||||
|
background: radial-gradient(#FF9B9B, #FF0000);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider:nth-child(odd) .body .eye:after {
|
||||||
|
animation-delay: 1400ms;
|
||||||
|
animation-duration: 3600ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider .legs .leg {
|
||||||
|
width: 80px;
|
||||||
|
height: 40px;
|
||||||
|
margin-top: -20px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
border-top-color: #333;
|
||||||
|
border-radius: 40px 40px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider .legs {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spider .legs.left {
|
||||||
|
left: -70%;
|
||||||
|
}
|
||||||
|
.spider .legs.right {
|
||||||
|
right: -60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legs.left .leg:nth-child(1) {
|
||||||
|
transform: rotate(10deg);
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.legs.right .leg:nth-child(1) {
|
||||||
|
transform: rotate(-10deg);
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legs.left .leg:nth-child(2) {
|
||||||
|
transform: rotate(-20deg);
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.legs.right .leg:nth-child(2) {
|
||||||
|
transform: rotate(20deg);
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legs.left .leg:nth-child(3) {
|
||||||
|
transform: rotate(-50deg);
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.legs.right .leg:nth-child(3) {
|
||||||
|
transform: rotate(50deg);
|
||||||
|
margin-left: -30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes look {
|
||||||
|
0%,
|
||||||
|
40%,
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
45%,
|
||||||
|
95% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes swing {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(-24px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes swingFast {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
55% {
|
||||||
|
transform: translateY(-36px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fog effect */
|
||||||
|
.fog-effect {
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fog-effect {
|
||||||
|
pointer-events: none;
|
||||||
|
position:fixed;
|
||||||
|
bottom:0;
|
||||||
|
left: 0;
|
||||||
|
width:100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1031;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Eyes */
|
||||||
|
.eye {
|
||||||
|
position: relative;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Candy Corn */
|
||||||
|
.candy-corn {
|
||||||
|
--color3: #FBED21;
|
||||||
|
--color2: #F66A3C;
|
||||||
|
--color1: #FDFBDA;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
var(--color1),
|
||||||
|
var(--color1) 10px,
|
||||||
|
var(--color2) 20px,
|
||||||
|
var(--color2) 20px,
|
||||||
|
var(--color3) 60px,
|
||||||
|
var(--color3) 60px
|
||||||
|
);
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
animation: 32s linear 0s infinite candycorn-move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.candy-corn:not(a) > p {
|
||||||
|
color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#post-title > a.candy-corn {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.candy-corn:hover {
|
||||||
|
animation-duration: 10s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes candycorn-move {
|
||||||
|
from {
|
||||||
|
background-position: 0px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-position: 1000px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ectoplasm */
|
||||||
|
.ectoplasm {
|
||||||
|
text-shadow: 0 0 20px #3AE63A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ectoplasm .comment-text > p, .ectoplasm .post-body, h1.ectoplasm {
|
||||||
|
font-family: 'Creepster';
|
||||||
|
color: #90ee90;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ectoplasm .candy-corn {
|
||||||
|
--color3: rgb(140, 255, 0);
|
||||||
|
--color2: rgb(0, 111, 0);
|
||||||
|
--color1: rgb(131, 255, 131);
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ectoplasm.blood .comment-text > p {
|
||||||
|
font-family: 'DoubleFeature';
|
||||||
|
letter-spacing: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ectoplasm .rainbow-text > p {
|
||||||
|
color: #90ee90 !important;
|
||||||
|
font-weight: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ectoplasm .comment-text, .ectoplasm .post-body, h1.ectoplasm {
|
||||||
|
overflow:visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Upsidedown */
|
||||||
|
#canvas {
|
||||||
|
position:absolute;
|
||||||
|
pointer-events:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bones */
|
||||||
|
#animate{
|
||||||
|
margin-left:45%;
|
||||||
|
margin-top:-5%;
|
||||||
|
position: fixed;
|
||||||
|
z-index:999;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity:0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pumpkin */
|
||||||
|
.fall-pumpkin {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1em;
|
||||||
|
font-family: Serif;
|
||||||
|
text-shadow: 0 0 1px #000;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fall-pumpkins-fall {
|
||||||
|
0% {
|
||||||
|
top: -20%
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 100%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fall-pumpkins-shake {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translateX(0px);
|
||||||
|
transform: translateX(0px)
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: translateX(80px);
|
||||||
|
transform: translateX(80px)
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateX(0px) rotate(360deg);
|
||||||
|
transform: translateX(0px) rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fall-pumpkins-fall {
|
||||||
|
0% {
|
||||||
|
top: -20%
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 100%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fall-pumpkins-shake {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0px)
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(80px)
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px) rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fall-pumpkin {
|
||||||
|
position: fixed;
|
||||||
|
top: -20%;
|
||||||
|
z-index: 999;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
cursor: default;
|
||||||
|
-webkit-animation-name: fall-pumpkins-fall, fall-pumpkins-shake;
|
||||||
|
-webkit-animation-duration: 10s, 4s;
|
||||||
|
-webkit-animation-timing-function: linear, ease-in-out;
|
||||||
|
-webkit-animation-iteration-count: infinite, infinite;
|
||||||
|
-webkit-animation-play-state: running, running;
|
||||||
|
animation-name: fall-pumpkins-fall, fall-pumpkins-shake;
|
||||||
|
animation-duration: 10s, 4s;
|
||||||
|
animation-timing-function: linear, ease-in-out;
|
||||||
|
animation-iteration-count: infinite, infinite;
|
||||||
|
animation-play-state: running, running
|
||||||
|
}
|
||||||
|
|
||||||
|
.fall-pumpkin:nth-of-type(0) {
|
||||||
|
left: 1%;
|
||||||
|
-webkit-animation-delay: 0s, 0s;
|
||||||
|
animation-delay: 0s, 0s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(1) {
|
||||||
|
left: 10%;
|
||||||
|
-webkit-animation-delay: 1s, 1s;
|
||||||
|
animation-delay: 1s, 1s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(2) {
|
||||||
|
left: 20%;
|
||||||
|
-webkit-animation-delay: 6s, .5s;
|
||||||
|
animation-delay: 6s, .5s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(3) {
|
||||||
|
left: 30%;
|
||||||
|
-webkit-animation-delay: 4s, 2s;
|
||||||
|
animation-delay: 4s, 2s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(4) {
|
||||||
|
left: 40%;
|
||||||
|
-webkit-animation-delay: 2s, 2s;
|
||||||
|
animation-delay: 2s, 2s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(5) {
|
||||||
|
left: 50%;
|
||||||
|
-webkit-animation-delay: 8s, 3s;
|
||||||
|
animation-delay: 8s, 3s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(6) {
|
||||||
|
left: 60%;
|
||||||
|
-webkit-animation-delay: 6s, 2s;
|
||||||
|
animation-delay: 6s, 2s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(7) {
|
||||||
|
left: 70%;
|
||||||
|
-webkit-animation-delay: 2.5s, 1s;
|
||||||
|
animation-delay: 2.5s, 1s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(8) {
|
||||||
|
left: 80%;
|
||||||
|
-webkit-animation-delay: 1s, 0s;
|
||||||
|
animation-delay: 1s, 0s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(9) {
|
||||||
|
left: 90%;
|
||||||
|
-webkit-animation-delay: 3s, 1.5s;
|
||||||
|
animation delay: 3s, 1.5s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(10) {
|
||||||
|
left: 100%;
|
||||||
|
-webkit-animation-delay: 3s, 2s;
|
||||||
|
animation-delay: 3s, 2s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(11) {
|
||||||
|
left: 5%;
|
||||||
|
-webkit-animation-delay: 1s, 4s;
|
||||||
|
animation-delay: 1s, 4s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(12) {
|
||||||
|
left: 15%;
|
||||||
|
-webkit-animation-delay: 1s, 1.5s;
|
||||||
|
animation-delay: 1s, 1.5s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(13) {
|
||||||
|
left: 25%;
|
||||||
|
-webkit-animation-delay: 6s, 2.5s;
|
||||||
|
animation-delay: 6s, 2.5s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(14) {
|
||||||
|
left: 35%;
|
||||||
|
-webkit-animation-delay: 4s, 1s;
|
||||||
|
animation-delay: 4s, 1s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(15) {
|
||||||
|
left: 45%;
|
||||||
|
-webkit-animation-delay: 2s, 4s;
|
||||||
|
animation-delay: 2s, 4s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(16) {
|
||||||
|
left: 55%;
|
||||||
|
-webkit-animation-delay: 8s, 3s;
|
||||||
|
animation-delay: 8s, 3s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(17) {
|
||||||
|
left: 65%;
|
||||||
|
-webkit-animation-delay: 6s, 3s;
|
||||||
|
animation-delay: 6s, 3s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(18) {
|
||||||
|
left: 75%;
|
||||||
|
-webkit-animation-delay: 2.5s, 4s;
|
||||||
|
animation-delay: 2.5s, 4s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(19) {
|
||||||
|
left: 85%;
|
||||||
|
-webkit-animation-delay: 2s, 0s;
|
||||||
|
animation-delay: 2s, 0s
|
||||||
|
}
|
||||||
|
.fall-pumpkin:nth-of-type(20) {
|
||||||
|
left: 95%;
|
||||||
|
-webkit-animation-delay: 3s, 1.5s;
|
||||||
|
animation delay: 3s, 1.5s
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-spin {
|
||||||
|
animation: spin 5600ms linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Trick or Treat */
|
||||||
|
#trick-or-treat {
|
||||||
|
font-family: Jo_wrote_a_lovesong;
|
||||||
|
font-size: 2rem;
|
||||||
|
letter-spacing: 0.5rem;
|
||||||
|
border-color: var(--primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#trick-or-treat::before {
|
||||||
|
content:"";
|
||||||
|
background-image:url('/e/marseyface.webp'); ;
|
||||||
|
background-size: cover;
|
||||||
|
height:28px;
|
||||||
|
width:32px;
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#trick-or-treat::after {
|
||||||
|
content:"";
|
||||||
|
background-image:url('/e/marseytrickortreat.webp'); ;
|
||||||
|
background-size: cover;
|
||||||
|
height:28px;
|
||||||
|
width:32px;
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump-scare-img {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
object-fit: cover;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* progressbar */
|
||||||
|
.progress {
|
||||||
|
background-color: #1d9bf0;
|
||||||
|
background-image: linear-gradient(0deg, #1d9bf0 0%, #59b1ec 100%);
|
||||||
|
width: 270px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: inset 0px 12px 2px #ffffff10;
|
||||||
|
backdrop-filter: blur(2px) brightness(101%);
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress::before {
|
||||||
|
content: "\f48e";
|
||||||
|
font-family: "Font Awesome 6 Pro";
|
||||||
|
position: absolute;
|
||||||
|
left: 6px;
|
||||||
|
top: 2px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.progress::after {
|
||||||
|
content: "\f780";
|
||||||
|
font-family: "Font Awesome 6 Pro";
|
||||||
|
position: absolute;
|
||||||
|
right: 6px;
|
||||||
|
top: 2px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress > .legend {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 6px;
|
||||||
|
padding: 0 6px;
|
||||||
|
color: #dc3545;
|
||||||
|
font-family: -apple-system,BlinkMacSystemFont,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress > .legend span:nth-child(1) {
|
||||||
|
color: #d3bc00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-left {
|
||||||
|
display: inline-block;
|
||||||
|
width: var(--width);
|
||||||
|
height: 24px;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
background-color: #d3bc00;
|
||||||
|
background-image: linear-gradient(180deg, #d3bc00 50%, #877800 100%);
|
||||||
|
box-shadow: inset 0px 12px 2px #ffffff20;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-right {
|
||||||
|
display: inline-block;
|
||||||
|
width: var(--width);
|
||||||
|
height: 24px;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
background-color: #dc3545;
|
||||||
|
background-image: linear-gradient(180deg, #dc3545 50%, #9e1b32 100%);
|
||||||
|
box-shadow: inset 2px 12px 0px #ffffff20;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
|
@ -0,0 +1,56 @@
|
||||||
|
/* <body> tag 'background-color' is boilerplate here. We only care about the box-shadow and filter effects. We can add a woods background-image for added effect. */
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-color: #000;
|
||||||
|
filter: sepia(100%) hue-rotate(180deg) saturate(300%);
|
||||||
|
box-shadow: 0 0 900px rgba(0, 0, 0, 0.9) inset;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.particles {
|
||||||
|
pointer-events: none;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
filter: blur(1.5px);
|
||||||
|
animation: flicker 4s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flicker {
|
||||||
|
0% {
|
||||||
|
filter: brightness(30%);
|
||||||
|
}
|
||||||
|
48% {
|
||||||
|
filter: brightness(30%);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: contrast(1.5) brightness(40%);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
filter: contrast(1.5) brightness(40%);
|
||||||
|
}
|
||||||
|
62% {
|
||||||
|
filter: brightness(30%);
|
||||||
|
}
|
||||||
|
78% {
|
||||||
|
filter: brightness(20%);
|
||||||
|
}
|
||||||
|
84% {
|
||||||
|
filter: brightness(40%);
|
||||||
|
}
|
||||||
|
88% {
|
||||||
|
filter: brightness(30%);
|
||||||
|
}
|
||||||
|
96% {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
98% {
|
||||||
|
filter: brightness(30%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
filter: brightness(90%);
|
||||||
|
}
|
||||||
|
}
|
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 4.4 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 4.4 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 4.8 KiB |
After Width: | Height: | Size: 6.1 KiB |
After Width: | Height: | Size: 77 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 70 KiB |
After Width: | Height: | Size: 42 KiB |
After Width: | Height: | Size: 360 B |
After Width: | Height: | Size: 71 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 514 B |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 244 KiB |
After Width: | Height: | Size: 127 KiB |
After Width: | Height: | Size: 334 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 66 KiB |
After Width: | Height: | Size: 55 KiB |
After Width: | Height: | Size: 106 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 47 KiB |
After Width: | Height: | Size: 113 KiB |
After Width: | Height: | Size: 41 KiB |
After Width: | Height: | Size: 212 KiB |
After Width: | Height: | Size: 259 KiB |
After Width: | Height: | Size: 254 KiB |
After Width: | Height: | Size: 802 B |
After Width: | Height: | Size: 6.1 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 6.4 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 6.4 KiB |
After Width: | Height: | Size: 5.9 KiB |
After Width: | Height: | Size: 6.2 KiB |
After Width: | Height: | Size: 6.1 KiB |
After Width: | Height: | Size: 5.2 KiB |
After Width: | Height: | Size: 6.9 KiB |
|
@ -0,0 +1,26 @@
|
||||||
|
function setBannerDay(day){
|
||||||
|
let sky = document.getElementById("banner-halloween-svg"),
|
||||||
|
moon = document.getElementById("banner-halloween-moon"),
|
||||||
|
house = document.getElementById("house-fill-gradient-stop"),
|
||||||
|
ground = document.getElementById("ground-gradient-stop"),
|
||||||
|
objects = document.getElementById("banner-halloween-objects"),
|
||||||
|
stars = document.getElementById("banner-halloween-stars")
|
||||||
|
|
||||||
|
sky.style.backgroundImage = "var(--sky-gradient-day"+day+")"
|
||||||
|
moon.style.fill = "var(--moon-fill-day"+day+")"
|
||||||
|
moon.style.filter = "var(--moon-shadow-day"+day+")"
|
||||||
|
moon.style.cy = "var(--moon-position-day"+day+")"
|
||||||
|
house.style.stopColor = "var(--house-shadow-day"+day+")"
|
||||||
|
ground.style.stopColor = "var(--ground-shadow-day"+day+")"
|
||||||
|
objects.style.fill = "var(--object-fill-day"+day+")"
|
||||||
|
stars.style.opacity = "var(--star-opacity-day"+day+")"
|
||||||
|
}
|
||||||
|
|
||||||
|
function cycleBanner(){
|
||||||
|
i=1
|
||||||
|
asdf = setInterval(function(){
|
||||||
|
setBannerDay(i)
|
||||||
|
if (i > 9){clearInterval(asdf)}
|
||||||
|
i++
|
||||||
|
}, 250)
|
||||||
|
}
|
|
@ -0,0 +1,13 @@
|
||||||
|
const el = document.getElementById("banner-halloween-title");
|
||||||
|
|
||||||
|
function animateBannerText() {
|
||||||
|
const letters = el.getElementsByTagName("tspan");
|
||||||
|
|
||||||
|
for (let i = 0; i < letters.length; i++) {
|
||||||
|
letters.item(i).style.transition = `all 600ms ${600 + i * 40}ms`;
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => el.classList.add("life"), 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
animateBannerText();
|
|
@ -0,0 +1,51 @@
|
||||||
|
/*
|
||||||
|
A Bloody Mess by Rob Glazebrook
|
||||||
|
By default, canvas does not clear between frames. I'm taking advantage of that to create the running blood effect.
|
||||||
|
This pen was inspired by Katy Decorah's BLOOD: https://codepen.io/katydecorah/pen/Lkogi
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
var i = 0;
|
||||||
|
|
||||||
|
var blood = Sketch.create({autoclear: false, autopause: false}),
|
||||||
|
drops = [],
|
||||||
|
dropCount = stabs*10,
|
||||||
|
maxDrops = dropCount+1,
|
||||||
|
Drop = function() {
|
||||||
|
this.x = random(0,blood.width);
|
||||||
|
this.radius = random(10,20);
|
||||||
|
this.y = -this.radius - random(50,100);
|
||||||
|
this.vy = this.radius/6;
|
||||||
|
this.r = ~~random(240,255);
|
||||||
|
this.g = ~~random(0,20);
|
||||||
|
this.b = ~~random(0,20);
|
||||||
|
};
|
||||||
|
|
||||||
|
blood.update = function() {
|
||||||
|
var d = drops.length;
|
||||||
|
while(d < dropCount && i < maxDrops) {
|
||||||
|
var drop = new Drop();
|
||||||
|
drops.push(drop);
|
||||||
|
d++;
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
while(d-- && i < maxDrops) {
|
||||||
|
var drop = drops[d];
|
||||||
|
drop.y += drop.vy;
|
||||||
|
if(drop.y - drop.radius > blood.height) {
|
||||||
|
drops.splice(d,1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
blood.draw = function() {
|
||||||
|
var d = drops.length;
|
||||||
|
while(d-- && i < maxDrops) {
|
||||||
|
var drop = drops[d];
|
||||||
|
blood.beginPath();
|
||||||
|
blood.fillStyle = 'rgba('+drop.r+','+drop.g+','+drop.b+',.8)';
|
||||||
|
blood.arc(drop.x,drop.y,drop.radius,0,TWO_PI);
|
||||||
|
blood.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,75 @@
|
||||||
|
function bones(number){
|
||||||
|
var container = document.getElementById('animate');
|
||||||
|
|
||||||
|
// Stackable
|
||||||
|
// With each award, append a new image to array
|
||||||
|
const sources = ['skeleton1.webp','skeleton2.webp','skeleton3.webp','skeleton4.webp','skeleton5.webp','skeleton6.webp'];
|
||||||
|
|
||||||
|
if(number > sources.length){
|
||||||
|
number = sources.length
|
||||||
|
}
|
||||||
|
|
||||||
|
const n = sources.length - number,
|
||||||
|
emoji = sources.slice(n),
|
||||||
|
pw = screen.availWidth/6
|
||||||
|
|
||||||
|
let circles = [];
|
||||||
|
|
||||||
|
for (var i = 0; i < 3; i++) {
|
||||||
|
addCircle(i * 150, [10 + 0, pw], emoji[Math.floor(Math.random() * emoji.length)]);
|
||||||
|
addCircle(i * 150, [10 + 0, -pw], emoji[Math.floor(Math.random() * emoji.length)]);
|
||||||
|
addCircle(i * 150, [10 - (0.5*pw), -pw], emoji[Math.floor(Math.random() * emoji.length)]);
|
||||||
|
addCircle(i * 150, [10 + (0.5*pw), pw], emoji[Math.floor(Math.random() * emoji.length)]);
|
||||||
|
addCircle(i * 150, [10 - (1.5*pw), -pw], emoji[Math.floor(Math.random() * emoji.length)]);
|
||||||
|
addCircle(i * 150, [10 + (1.5*pw), pw], emoji[Math.floor(Math.random() * emoji.length)]);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function addCircle(delay, range, color) {
|
||||||
|
setTimeout(function() {
|
||||||
|
var c = new Circle(range[0] + Math.random() * range[1], 80 + Math.random() * 4, color, {
|
||||||
|
x: -0.15 + Math.random() * 0.3,
|
||||||
|
y: 1 + Math.random() * 1
|
||||||
|
}, range);
|
||||||
|
circles.push(c);
|
||||||
|
}, delay);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Circle(x, y, c, v, range) {
|
||||||
|
var _this = this;
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.color = c;
|
||||||
|
this.v = v;
|
||||||
|
this.range = range;
|
||||||
|
this.element = document.createElement('img');
|
||||||
|
/*this.element.style.display = 'block';*/
|
||||||
|
this.element.style.opacity = 0;
|
||||||
|
this.element.style.position = 'absolute';
|
||||||
|
this.element.style.height = '3rem';
|
||||||
|
this.element.src = "/assets/images/event/skeletons/"+c;
|
||||||
|
container.appendChild(this.element);
|
||||||
|
|
||||||
|
this.update = function() {
|
||||||
|
if (_this.y > window.innerHeight) {
|
||||||
|
_this.y = 80 + Math.random() * 4;
|
||||||
|
_this.x = _this.range[0] + Math.random() * _this.range[1];
|
||||||
|
}
|
||||||
|
_this.y += _this.v.y;
|
||||||
|
_this.x += _this.v.x;
|
||||||
|
this.element.style.opacity = 1;
|
||||||
|
this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
||||||
|
this.element.style.webkitTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
||||||
|
this.element.style.mozTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
for (var i in circles) {
|
||||||
|
circles[i].update();
|
||||||
|
}
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
animate();
|
||||||
|
}
|
|
@ -0,0 +1,42 @@
|
||||||
|
if (innerWidth >= 992)
|
||||||
|
{
|
||||||
|
/*init*/
|
||||||
|
let sidebar = document.getElementById("main-content-row")
|
||||||
|
sidebar = sidebar.getElementsByClassName("sidebar")[0].firstElementChild
|
||||||
|
|
||||||
|
const eye_left = sidebar.getElementsByClassName("eye")[0],
|
||||||
|
eye_right = sidebar.getElementsByClassName("eye")[1]
|
||||||
|
|
||||||
|
/*eye movement*/
|
||||||
|
document.onmousemove = function(event) {
|
||||||
|
let click = {x: event.clientX, y: event.clientY},
|
||||||
|
/*recalculating eye position on every mousemove is less efficient
|
||||||
|
but ensures eyes track properly upon pageload even if script doesnt fire*/
|
||||||
|
eye_left_center = getCenter(eye_left),
|
||||||
|
eye_right_center = getCenter(eye_right)
|
||||||
|
|
||||||
|
eye_left.style.transform = 'rotate('+getAngle(click, eye_left_center)+'rad)'
|
||||||
|
eye_right.style.transform = 'rotate('+getAngle(click, eye_right_center)+'rad)'
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCenter(element) {
|
||||||
|
const bounds = element.getBoundingClientRect()
|
||||||
|
|
||||||
|
let centerX = bounds["left"] + bounds["width"]/2,
|
||||||
|
centerY = bounds["top"] + bounds["height"]/2
|
||||||
|
|
||||||
|
return({x: centerX, y: centerY})
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAngle(point1, point2) {
|
||||||
|
let x = point1["x"] - point2["x"],
|
||||||
|
y = point1["y"] - point2["y"],
|
||||||
|
angle = Math.atan(y/x)
|
||||||
|
|
||||||
|
if(point1["x"] < point2["x"]) {
|
||||||
|
angle += Math.PI
|
||||||
|
}
|
||||||
|
|
||||||
|
return(angle)
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,30 @@
|
||||||
|
// Original codepen: https://codepen.io/Coding-Artist/pen/ExLyRJg
|
||||||
|
|
||||||
|
let mouseX = 0;
|
||||||
|
let mouseY = 0;
|
||||||
|
|
||||||
|
// Detect touch device
|
||||||
|
const isTouchDevice = () => {
|
||||||
|
try {
|
||||||
|
// We try to create TouchEvent (it would fail for desktops and throw error)
|
||||||
|
document.createEvent("TouchEvent");
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
function getMousePosition(e) {
|
||||||
|
try {
|
||||||
|
// Get position of mouse or touch
|
||||||
|
mouseX = !isTouchDevice() ? e.clientX : e.touches[0].clientX;
|
||||||
|
mouseY = !isTouchDevice() ? e.clientY : e.touches[0].clientY;
|
||||||
|
|
||||||
|
// Set the Xpos and Ypos variables to current mouse/touch position
|
||||||
|
document.getElementById("flashlight-effect").style.setProperty("--Xpos", mouseX + "px");
|
||||||
|
document.getElementById("flashlight-effect").style.setProperty("--Ypos", mouseY + "px");
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update mouse position on mouse move / touch move
|
||||||
|
document.addEventListener("mousemove", getMousePosition);
|
||||||
|
document.addEventListener("touchmove", getMousePosition);
|
|
@ -0,0 +1,139 @@
|
||||||
|
console.clear();
|
||||||
|
|
||||||
|
canvasWidth = 1600;
|
||||||
|
canvasHeight = 200;
|
||||||
|
|
||||||
|
pCount = 0;
|
||||||
|
|
||||||
|
|
||||||
|
pCollection = new Array();
|
||||||
|
|
||||||
|
var puffs = 1;
|
||||||
|
var particlesPerPuff = 1000;
|
||||||
|
var img = '/assets/images/event/smoke.webp';
|
||||||
|
|
||||||
|
var smokeImage = new Image();
|
||||||
|
smokeImage.src = img;
|
||||||
|
|
||||||
|
for (var i1 = 0 ; i1 < puffs; i1++)
|
||||||
|
{
|
||||||
|
var puffDelay = i1 * 1500; //300 ms between puffs
|
||||||
|
|
||||||
|
for (var i2 = 0 ; i2 < particlesPerPuff; i2++)
|
||||||
|
{
|
||||||
|
addNewParticle((i2*50) + puffDelay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
draw(new Date().getTime(), 3000)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function addNewParticle(delay)
|
||||||
|
{
|
||||||
|
|
||||||
|
var p = {};
|
||||||
|
p.top = canvasHeight;
|
||||||
|
p.left = randBetween(-200,800);
|
||||||
|
|
||||||
|
p.start = new Date().getTime() + delay;
|
||||||
|
p.life = 16000;
|
||||||
|
p.speedUp = 30;
|
||||||
|
|
||||||
|
|
||||||
|
p.speedRight = randBetween(0,20);
|
||||||
|
|
||||||
|
p.rot = randBetween(-1,1);
|
||||||
|
p.red = Math.floor(randBetween(0,255));
|
||||||
|
p.blue = Math.floor(randBetween(0,255));
|
||||||
|
p.green = Math.floor(randBetween(0,255));
|
||||||
|
|
||||||
|
|
||||||
|
p.startOpacity = .3
|
||||||
|
p.newTop = p.top;
|
||||||
|
p.newLeft = p.left;
|
||||||
|
p.size = 200;
|
||||||
|
p.growth = 10;
|
||||||
|
|
||||||
|
pCollection[pCount] = p;
|
||||||
|
pCount++;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw(startT, totalT)
|
||||||
|
{
|
||||||
|
//Timing
|
||||||
|
var timeDelta = new Date().getTime() - startT;
|
||||||
|
var stillAlive = false;
|
||||||
|
|
||||||
|
//Grab and clear the canvas
|
||||||
|
var c=document.getElementById("fog-effect");
|
||||||
|
var ctx=c.getContext("2d");
|
||||||
|
ctx.clearRect(0, 0, c.width, c.height);
|
||||||
|
c.width = c.width;
|
||||||
|
|
||||||
|
//Loop through particles
|
||||||
|
for (var i= 0; i < pCount; i++)
|
||||||
|
{
|
||||||
|
//Grab the particle
|
||||||
|
var p = pCollection[i];
|
||||||
|
|
||||||
|
//Timing
|
||||||
|
var td = new Date().getTime() - p.start;
|
||||||
|
var frac = td/p.life
|
||||||
|
|
||||||
|
if (td > 0)
|
||||||
|
{
|
||||||
|
if (td <= p.life )
|
||||||
|
{ stillAlive = true; }
|
||||||
|
|
||||||
|
//attributes that change over time
|
||||||
|
var newTop = p.top - (p.speedUp * (td/1000));
|
||||||
|
var newLeft = p.left + (p.speedRight * (td/1000));
|
||||||
|
var newOpacity = Math.max(p.startOpacity * (1-frac),0);
|
||||||
|
|
||||||
|
var newSize = p.size + (p.growth * (td/1000));
|
||||||
|
p.newTop = newTop;
|
||||||
|
p.newLeft = newLeft;
|
||||||
|
|
||||||
|
//Draw!
|
||||||
|
ctx.fillStyle = 'rgba(150,150,150,' + newOpacity + ')';
|
||||||
|
ctx.globalAlpha = newOpacity;
|
||||||
|
ctx.drawImage(smokeImage, newLeft, newTop, newSize, newSize);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//Repeat if there's still a living particle
|
||||||
|
if (stillAlive)
|
||||||
|
{
|
||||||
|
requestAnimationFrame(function(){draw(startT,totalT);});
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
clog(timeDelta + ": stopped");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function randBetween(n1,n2)
|
||||||
|
{
|
||||||
|
var r = (Math.random() * (n2 - n1)) + n1;
|
||||||
|
return r;
|
||||||
|
}
|
||||||
|
|
||||||
|
function randOffset(n, variance)
|
||||||
|
{
|
||||||
|
//e.g. variance could be 0.1 to go between 0.9 and 1.1
|
||||||
|
var max = 1 + variance;
|
||||||
|
var min = 1 - variance;
|
||||||
|
var r = Math.random() * (max - min) + min;
|
||||||
|
return n * r;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clog(s)
|
||||||
|
{
|
||||||
|
console.log(s);
|
||||||
|
}
|
|
@ -0,0 +1,45 @@
|
||||||
|
const thunder1 = new Audio(`/assets/media/event/haunted/thunder1.mp3`),
|
||||||
|
thunder2 = new Audio(`/assets/media/event/haunted/thunder2.mp3`),
|
||||||
|
stylesheet_haunted = document.createElement("STYLE"),
|
||||||
|
is_upsidedown = localStorage.getItem('setting_upsidedown'),
|
||||||
|
div = document.getElementById("haunted-effect")
|
||||||
|
|
||||||
|
window.onload = function(){
|
||||||
|
temp = document.createTextNode("#banner-halloween-title {opacity:0;}#banner-halloween-text-evil {opacity:1!important;}img {filter: invert(1);}")
|
||||||
|
stylesheet_haunted.appendChild(temp)
|
||||||
|
document.head.appendChild(stylesheet_haunted)
|
||||||
|
stylesheet_haunted.disabled = true
|
||||||
|
|
||||||
|
thunder2.volume = 0.5
|
||||||
|
|
||||||
|
lightningStrike("normal")
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(function(){
|
||||||
|
if(Math.floor(Math.random()*3) > 1){
|
||||||
|
lightningStrike("haunted")
|
||||||
|
} else {
|
||||||
|
lightningStrike("normal")
|
||||||
|
}
|
||||||
|
},14000)
|
||||||
|
|
||||||
|
function lightningStrike(strike) {
|
||||||
|
if(is_upsidedown == 'true'){
|
||||||
|
div.style.animation = "haunted-upsidedown 20s"
|
||||||
|
} else {
|
||||||
|
div.style.animation = "haunted 20s"
|
||||||
|
}
|
||||||
|
|
||||||
|
if(strike == "haunted"){
|
||||||
|
stylesheet_haunted.disabled = false
|
||||||
|
thunder2.play()
|
||||||
|
setTimeout(function(){
|
||||||
|
stylesheet_haunted.disabled = true
|
||||||
|
},700)
|
||||||
|
}
|
||||||
|
|
||||||
|
thunder1.play()
|
||||||
|
setTimeout(function(){
|
||||||
|
div.style.animation = "none"
|
||||||
|
},1000)
|
||||||
|
}
|
|
@ -0,0 +1,14 @@
|
||||||
|
// Jump scare function
|
||||||
|
const scare = () => {
|
||||||
|
const image = document.getElementById("jump-scare-img");
|
||||||
|
|
||||||
|
jumpscare_audio.play();
|
||||||
|
image.style.display = "block";
|
||||||
|
|
||||||
|
// Hide image and reset sound
|
||||||
|
setTimeout(function () {
|
||||||
|
image.style.display = "none";
|
||||||
|
jumpscare_audio.pause()
|
||||||
|
jumpscare_audio.currentTime = 0;
|
||||||
|
}, 3000);
|
||||||
|
}
|
|
@ -0,0 +1,630 @@
|
||||||
|
/* Copyright (C) 2013 Justin Windle, http://soulwire.co.uk */
|
||||||
|
|
||||||
|
(function ( root, factory ) {
|
||||||
|
|
||||||
|
if ( typeof exports === 'object' ) {
|
||||||
|
|
||||||
|
// CommonJS like
|
||||||
|
module.exports = factory(root, root.document);
|
||||||
|
|
||||||
|
} else if ( typeof define === 'function' && define.amd ) {
|
||||||
|
|
||||||
|
// AMD
|
||||||
|
define( function() { return factory( root, root.document ); });
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// Browser global
|
||||||
|
root.Sketch = factory( root, root.document );
|
||||||
|
}
|
||||||
|
|
||||||
|
}( typeof window !== "undefined" ? window : this, function ( window, document ) {
|
||||||
|
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
/*
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
|
||||||
|
Config
|
||||||
|
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
var MATH_PROPS = 'E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min'.split( ' ' );
|
||||||
|
var HAS_SKETCH = '__hasSketch';
|
||||||
|
var M = Math;
|
||||||
|
|
||||||
|
var CANVAS = 'canvas';
|
||||||
|
var WEBGL = 'webgl';
|
||||||
|
var DOM = 'dom';
|
||||||
|
|
||||||
|
var doc = document;
|
||||||
|
var win = window;
|
||||||
|
|
||||||
|
var instances = [];
|
||||||
|
|
||||||
|
var defaults = {
|
||||||
|
|
||||||
|
fullscreen: true,
|
||||||
|
autostart: true,
|
||||||
|
autoclear: true,
|
||||||
|
autopause: true,
|
||||||
|
container: doc.body,
|
||||||
|
interval: 1,
|
||||||
|
globals: true,
|
||||||
|
retina: false,
|
||||||
|
type: CANVAS
|
||||||
|
};
|
||||||
|
|
||||||
|
var keyMap = {
|
||||||
|
|
||||||
|
8: 'BACKSPACE',
|
||||||
|
9: 'TAB',
|
||||||
|
13: 'ENTER',
|
||||||
|
16: 'SHIFT',
|
||||||
|
27: 'ESCAPE',
|
||||||
|
32: 'SPACE',
|
||||||
|
37: 'LEFT',
|
||||||
|
38: 'UP',
|
||||||
|
39: 'RIGHT',
|
||||||
|
40: 'DOWN'
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
|
||||||
|
Utilities
|
||||||
|
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
function isArray( object ) {
|
||||||
|
|
||||||
|
return Object.prototype.toString.call( object ) == '[object Array]';
|
||||||
|
}
|
||||||
|
|
||||||
|
function isFunction( object ) {
|
||||||
|
|
||||||
|
return typeof object == 'function';
|
||||||
|
}
|
||||||
|
|
||||||
|
function isNumber( object ) {
|
||||||
|
|
||||||
|
return typeof object == 'number';
|
||||||
|
}
|
||||||
|
|
||||||
|
function isString( object ) {
|
||||||
|
|
||||||
|
return typeof object == 'string';
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyName( code ) {
|
||||||
|
|
||||||
|
return keyMap[ code ] || String.fromCharCode( code );
|
||||||
|
}
|
||||||
|
|
||||||
|
function extend( target, source, overwrite ) {
|
||||||
|
|
||||||
|
for ( var key in source )
|
||||||
|
|
||||||
|
if ( overwrite || !( key in target ) )
|
||||||
|
|
||||||
|
target[ key ] = source[ key ];
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function proxy( method, context ) {
|
||||||
|
|
||||||
|
return function() {
|
||||||
|
|
||||||
|
method.apply( context, arguments );
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function clone( target ) {
|
||||||
|
|
||||||
|
var object = {};
|
||||||
|
|
||||||
|
for ( var key in target ) {
|
||||||
|
|
||||||
|
if ( key === 'webkitMovementX' || key === 'webkitMovementY' )
|
||||||
|
continue;
|
||||||
|
|
||||||
|
if ( isFunction( target[ key ] ) )
|
||||||
|
|
||||||
|
object[ key ] = proxy( target[ key ], target );
|
||||||
|
|
||||||
|
else
|
||||||
|
|
||||||
|
object[ key ] = target[ key ];
|
||||||
|
}
|
||||||
|
|
||||||
|
return object;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
|
||||||
|
Constructor
|
||||||
|
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
function constructor( context ) {
|
||||||
|
|
||||||
|
var request, handler, target, parent, bounds, index, suffix, clock, node, copy, type, key, val, min, max, w, h;
|
||||||
|
|
||||||
|
var counter = 0;
|
||||||
|
var touches = [];
|
||||||
|
var resized = false;
|
||||||
|
var setup = false;
|
||||||
|
var ratio = win.devicePixelRatio || 1;
|
||||||
|
var isDiv = context.type == DOM;
|
||||||
|
var is2D = context.type == CANVAS;
|
||||||
|
|
||||||
|
var mouse = {
|
||||||
|
x: 0.0, y: 0.0,
|
||||||
|
ox: 0.0, oy: 0.0,
|
||||||
|
dx: 0.0, dy: 0.0
|
||||||
|
};
|
||||||
|
|
||||||
|
var eventMap = [
|
||||||
|
|
||||||
|
context.eventTarget || context.element,
|
||||||
|
|
||||||
|
pointer, 'mousedown', 'touchstart',
|
||||||
|
pointer, 'mousemove', 'touchmove',
|
||||||
|
pointer, 'mouseup', 'touchend',
|
||||||
|
pointer, 'click',
|
||||||
|
pointer, 'mouseout',
|
||||||
|
pointer, 'mouseover',
|
||||||
|
|
||||||
|
doc,
|
||||||
|
|
||||||
|
keypress, 'keydown', 'keyup',
|
||||||
|
|
||||||
|
win,
|
||||||
|
|
||||||
|
active, 'focus', 'blur',
|
||||||
|
resize, 'resize'
|
||||||
|
];
|
||||||
|
|
||||||
|
var keys = {}; for ( key in keyMap ) keys[ keyMap[ key ] ] = false;
|
||||||
|
|
||||||
|
function trigger( method ) {
|
||||||
|
|
||||||
|
if ( isFunction( method ) )
|
||||||
|
|
||||||
|
method.apply( context, [].splice.call( arguments, 1 ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
function bind( on ) {
|
||||||
|
|
||||||
|
for ( index = 0; index < eventMap.length; index++ ) {
|
||||||
|
|
||||||
|
node = eventMap[ index ];
|
||||||
|
|
||||||
|
if ( isString( node ) )
|
||||||
|
|
||||||
|
target[ ( on ? 'add' : 'remove' ) + 'EventListener' ].call( target, node, handler, false );
|
||||||
|
|
||||||
|
else if ( isFunction( node ) )
|
||||||
|
|
||||||
|
handler = node;
|
||||||
|
|
||||||
|
else target = node;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
|
||||||
|
cAF( request );
|
||||||
|
request = rAF( update );
|
||||||
|
|
||||||
|
if ( !setup ) {
|
||||||
|
|
||||||
|
trigger( context.setup );
|
||||||
|
setup = isFunction( context.setup );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !resized ) {
|
||||||
|
trigger( context.resize );
|
||||||
|
resized = isFunction( context.resize );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( context.running && !counter ) {
|
||||||
|
|
||||||
|
context.dt = ( clock = +new Date() ) - context.now;
|
||||||
|
context.millis += context.dt;
|
||||||
|
context.now = clock;
|
||||||
|
|
||||||
|
trigger( context.update );
|
||||||
|
|
||||||
|
// Pre draw
|
||||||
|
|
||||||
|
if ( is2D ) {
|
||||||
|
|
||||||
|
if ( context.retina ) {
|
||||||
|
|
||||||
|
context.save();
|
||||||
|
|
||||||
|
if (context.autoclear) {
|
||||||
|
context.scale( ratio, ratio );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( context.autoclear )
|
||||||
|
|
||||||
|
context.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw
|
||||||
|
|
||||||
|
trigger( context.draw );
|
||||||
|
|
||||||
|
// Post draw
|
||||||
|
|
||||||
|
if ( is2D && context.retina )
|
||||||
|
|
||||||
|
context.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
counter = ++counter % context.interval;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
|
||||||
|
target = isDiv ? context.style : context.canvas;
|
||||||
|
suffix = isDiv ? 'px' : '';
|
||||||
|
|
||||||
|
w = context.width;
|
||||||
|
h = context.height;
|
||||||
|
|
||||||
|
if ( context.fullscreen ) {
|
||||||
|
|
||||||
|
h = context.height = win.innerHeight;
|
||||||
|
w = context.width = win.innerWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( context.retina && is2D && ratio ) {
|
||||||
|
|
||||||
|
target.style.height = h + 'px';
|
||||||
|
target.style.width = w + 'px';
|
||||||
|
|
||||||
|
w *= ratio;
|
||||||
|
h *= ratio;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( target.height !== h )
|
||||||
|
|
||||||
|
target.height = h + suffix;
|
||||||
|
|
||||||
|
if ( target.width !== w )
|
||||||
|
|
||||||
|
target.width = w + suffix;
|
||||||
|
|
||||||
|
if ( is2D && !context.autoclear && context.retina )
|
||||||
|
|
||||||
|
context.scale( ratio, ratio );
|
||||||
|
|
||||||
|
if ( setup ) trigger( context.resize );
|
||||||
|
}
|
||||||
|
|
||||||
|
function align( touch, target ) {
|
||||||
|
|
||||||
|
bounds = target.getBoundingClientRect();
|
||||||
|
|
||||||
|
touch.x = touch.pageX - bounds.left - (win.scrollX || win.pageXOffset);
|
||||||
|
touch.y = touch.pageY - bounds.top - (win.scrollY || win.pageYOffset);
|
||||||
|
|
||||||
|
return touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
function augment( touch, target ) {
|
||||||
|
|
||||||
|
align( touch, context.element );
|
||||||
|
|
||||||
|
target = target || {};
|
||||||
|
|
||||||
|
target.ox = target.x || touch.x;
|
||||||
|
target.oy = target.y || touch.y;
|
||||||
|
|
||||||
|
target.x = touch.x;
|
||||||
|
target.y = touch.y;
|
||||||
|
|
||||||
|
target.dx = target.x - target.ox;
|
||||||
|
target.dy = target.y - target.oy;
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function process( event ) {
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
copy = clone( event );
|
||||||
|
copy.originalEvent = event;
|
||||||
|
|
||||||
|
if ( copy.touches ) {
|
||||||
|
|
||||||
|
touches.length = copy.touches.length;
|
||||||
|
|
||||||
|
for ( index = 0; index < copy.touches.length; index++ )
|
||||||
|
|
||||||
|
touches[ index ] = augment( copy.touches[ index ], touches[ index ] );
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
touches.length = 0;
|
||||||
|
touches[0] = augment( copy, mouse );
|
||||||
|
}
|
||||||
|
|
||||||
|
extend( mouse, touches[0], true );
|
||||||
|
|
||||||
|
return copy;
|
||||||
|
}
|
||||||
|
|
||||||
|
function pointer( event ) {
|
||||||
|
|
||||||
|
event = process( event );
|
||||||
|
|
||||||
|
min = ( max = eventMap.indexOf( type = event.type ) ) - 1;
|
||||||
|
|
||||||
|
context.dragging =
|
||||||
|
|
||||||
|
/down|start/.test( type ) ? true :
|
||||||
|
|
||||||
|
/up|end/.test( type ) ? false :
|
||||||
|
|
||||||
|
context.dragging;
|
||||||
|
|
||||||
|
while( min )
|
||||||
|
|
||||||
|
isString( eventMap[ min ] ) ?
|
||||||
|
|
||||||
|
trigger( context[ eventMap[ min-- ] ], event ) :
|
||||||
|
|
||||||
|
isString( eventMap[ max ] ) ?
|
||||||
|
|
||||||
|
trigger( context[ eventMap[ max++ ] ], event ) :
|
||||||
|
|
||||||
|
min = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function keypress( event ) {
|
||||||
|
|
||||||
|
key = event.keyCode;
|
||||||
|
val = event.type == 'keyup';
|
||||||
|
keys[ key ] = keys[ keyName( key ) ] = !val;
|
||||||
|
|
||||||
|
trigger( context[ event.type ], event );
|
||||||
|
}
|
||||||
|
|
||||||
|
function active( event ) {
|
||||||
|
|
||||||
|
if ( context.autopause )
|
||||||
|
|
||||||
|
( event.type == 'blur' ? stop : start )();
|
||||||
|
|
||||||
|
trigger( context[ event.type ], event );
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public API
|
||||||
|
|
||||||
|
function start() {
|
||||||
|
|
||||||
|
context.now = +new Date();
|
||||||
|
context.running = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function stop() {
|
||||||
|
|
||||||
|
context.running = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggle() {
|
||||||
|
|
||||||
|
( context.running ? stop : start )();
|
||||||
|
}
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
|
||||||
|
if ( is2D )
|
||||||
|
|
||||||
|
context.clearRect( 0, 0, context.width * ratio, context.height * ratio );
|
||||||
|
}
|
||||||
|
|
||||||
|
function destroy() {
|
||||||
|
|
||||||
|
parent = context.element.parentNode;
|
||||||
|
index = instances.indexOf( context );
|
||||||
|
|
||||||
|
if ( parent ) parent.removeChild( context.element );
|
||||||
|
if ( ~index ) instances.splice( index, 1 );
|
||||||
|
|
||||||
|
bind( false );
|
||||||
|
stop();
|
||||||
|
}
|
||||||
|
|
||||||
|
extend( context, {
|
||||||
|
|
||||||
|
touches: touches,
|
||||||
|
mouse: mouse,
|
||||||
|
keys: keys,
|
||||||
|
|
||||||
|
dragging: false,
|
||||||
|
running: false,
|
||||||
|
millis: 0,
|
||||||
|
now: NaN,
|
||||||
|
dt: NaN,
|
||||||
|
|
||||||
|
destroy: destroy,
|
||||||
|
toggle: toggle,
|
||||||
|
clear: clear,
|
||||||
|
start: start,
|
||||||
|
stop: stop
|
||||||
|
});
|
||||||
|
|
||||||
|
instances.push( context );
|
||||||
|
|
||||||
|
return ( context.autostart && start(), bind( true ), resize(), update(), context );
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
|
||||||
|
Global API
|
||||||
|
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
var element, context, Sketch = {
|
||||||
|
|
||||||
|
CANVAS: CANVAS,
|
||||||
|
WEB_GL: WEBGL,
|
||||||
|
WEBGL: WEBGL,
|
||||||
|
DOM: DOM,
|
||||||
|
|
||||||
|
instances: instances,
|
||||||
|
|
||||||
|
install: function( context ) {
|
||||||
|
|
||||||
|
if ( !context[ HAS_SKETCH ] ) {
|
||||||
|
|
||||||
|
for ( var i = 0; i < MATH_PROPS.length; i++ )
|
||||||
|
|
||||||
|
context[ MATH_PROPS[i] ] = M[ MATH_PROPS[i] ];
|
||||||
|
|
||||||
|
extend( context, {
|
||||||
|
|
||||||
|
TWO_PI: M.PI * 2,
|
||||||
|
HALF_PI: M.PI / 2,
|
||||||
|
QUARTER_PI: M.PI / 4,
|
||||||
|
|
||||||
|
random: function( min, max ) {
|
||||||
|
|
||||||
|
if ( isArray( min ) )
|
||||||
|
|
||||||
|
return min[ ~~( M.random() * min.length ) ];
|
||||||
|
|
||||||
|
if ( !isNumber( max ) )
|
||||||
|
|
||||||
|
max = min || 1, min = 0;
|
||||||
|
|
||||||
|
return min + M.random() * ( max - min );
|
||||||
|
},
|
||||||
|
|
||||||
|
lerp: function( min, max, amount ) {
|
||||||
|
|
||||||
|
return min + amount * ( max - min );
|
||||||
|
},
|
||||||
|
|
||||||
|
map: function( num, minA, maxA, minB, maxB ) {
|
||||||
|
|
||||||
|
return ( num - minA ) / ( maxA - minA ) * ( maxB - minB ) + minB;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
context[ HAS_SKETCH ] = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
create: function( options ) {
|
||||||
|
|
||||||
|
options = extend( options || {}, defaults );
|
||||||
|
|
||||||
|
if ( options.globals ) Sketch.install( self );
|
||||||
|
|
||||||
|
element = options.element = options.element || doc.createElement( options.type === DOM ? 'div' : 'canvas' );
|
||||||
|
|
||||||
|
context = options.context = options.context || (function() {
|
||||||
|
|
||||||
|
switch( options.type ) {
|
||||||
|
|
||||||
|
case CANVAS:
|
||||||
|
|
||||||
|
return element.getContext( '2d', options );
|
||||||
|
|
||||||
|
case WEBGL:
|
||||||
|
|
||||||
|
return element.getContext( 'webgl', options ) || element.getContext( 'experimental-webgl', options );
|
||||||
|
|
||||||
|
case DOM:
|
||||||
|
|
||||||
|
return element.canvas = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
||||||
|
( options.container || doc.body ).appendChild( element );
|
||||||
|
|
||||||
|
return Sketch.augment( context, options );
|
||||||
|
},
|
||||||
|
|
||||||
|
augment: function( context, options ) {
|
||||||
|
|
||||||
|
options = extend( options || {}, defaults );
|
||||||
|
|
||||||
|
options.element = context.canvas || context;
|
||||||
|
options.element.className += ' sketch';
|
||||||
|
|
||||||
|
extend( context, options, true );
|
||||||
|
|
||||||
|
return constructor( context );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
|
||||||
|
Shims
|
||||||
|
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
var vendors = [ 'ms', 'moz', 'webkit', 'o' ];
|
||||||
|
var scope = self;
|
||||||
|
var then = 0;
|
||||||
|
|
||||||
|
var a = 'AnimationFrame';
|
||||||
|
var b = 'request' + a;
|
||||||
|
var c = 'cancel' + a;
|
||||||
|
|
||||||
|
var rAF = scope[ b ];
|
||||||
|
var cAF = scope[ c ];
|
||||||
|
|
||||||
|
for ( var i = 0; i < vendors.length && !rAF; i++ ) {
|
||||||
|
|
||||||
|
rAF = scope[ vendors[ i ] + 'Request' + a ];
|
||||||
|
cAF = scope[ vendors[ i ] + 'Cancel' + a ];
|
||||||
|
}
|
||||||
|
|
||||||
|
scope[ b ] = rAF = rAF || function( callback ) {
|
||||||
|
|
||||||
|
var now = +new Date();
|
||||||
|
var dt = M.max( 0, 16 - ( now - then ) );
|
||||||
|
var id = setTimeout( function() {
|
||||||
|
callback( now + dt );
|
||||||
|
}, dt );
|
||||||
|
|
||||||
|
then = now + dt;
|
||||||
|
return id;
|
||||||
|
};
|
||||||
|
|
||||||
|
scope[ c ] = cAF = cAF || function( id ) {
|
||||||
|
clearTimeout( id );
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
|
||||||
|
Output
|
||||||
|
|
||||||
|
----------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
return Sketch;
|
||||||
|
|
||||||
|
}));
|
|
@ -0,0 +1,24 @@
|
||||||
|
function postToastTrickOrTreat(t, url) {
|
||||||
|
const xhr = createXhrWithFormKey(url);
|
||||||
|
xhr[0].onload = function() {
|
||||||
|
postToastLoadTrickOrTreat(xhr[0])
|
||||||
|
};
|
||||||
|
xhr[0].send(xhr[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function postToastLoadTrickOrTreat(xhr) {
|
||||||
|
let data
|
||||||
|
try {
|
||||||
|
data = JSON.parse(xhr.response)
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
success = xhr.status >= 200 && xhr.status < 300;
|
||||||
|
showToast(success, getMessageFromJsonData(success, data));
|
||||||
|
|
||||||
|
if (data["result"] == 0){
|
||||||
|
scare()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,81 @@
|
||||||
|
let st = init("canvas"), // stranger things var
|
||||||
|
w = (canvas.width = window.innerWidth),
|
||||||
|
h = (canvas.height = window.innerHeight);
|
||||||
|
//initiation
|
||||||
|
|
||||||
|
class firefly {
|
||||||
|
constructor() {
|
||||||
|
this.x = Math.random() * w;
|
||||||
|
this.y = Math.random() * h;
|
||||||
|
this.s = Math.random() * 2;
|
||||||
|
this.ang = Math.random() * 2 * Math.PI;
|
||||||
|
this.v = (this.s * this.s) / 4;
|
||||||
|
}
|
||||||
|
move() {
|
||||||
|
this.x += this.v * Math.cos(this.ang);
|
||||||
|
this.y += this.v * Math.sin(this.ang);
|
||||||
|
this.ang += (Math.random() * 20 * Math.PI) / 180 - (10 * Math.PI) / 180;
|
||||||
|
}
|
||||||
|
show() {
|
||||||
|
st.beginPath();
|
||||||
|
st.arc(this.x, this.y, this.s, 0, 2 * Math.PI);
|
||||||
|
st.fillStyle = "#fff";
|
||||||
|
st.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let f = [];
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
if (f.length < 100) {
|
||||||
|
for (let j = 0; j < 10; j++) {
|
||||||
|
f.push(new firefly());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//animation
|
||||||
|
for (let i = 0; i < f.length; i++) {
|
||||||
|
f[i].move();
|
||||||
|
f[i].show();
|
||||||
|
if (f[i].x < 0 || f[i].x > w || f[i].y < 0 || f[i].y > h) {
|
||||||
|
f.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function init(elemid) {
|
||||||
|
let canvas = document.getElementById(elemid),
|
||||||
|
st = canvas.getContext("2d"),
|
||||||
|
w = (canvas.width = window.innerWidth),
|
||||||
|
h = (canvas.height = window.innerHeight);
|
||||||
|
st.fillStyle = "rgba(30,30,30,1)";
|
||||||
|
st.fillRect(0, 0, w, h);
|
||||||
|
return st;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.requestAnimFrame = function () {
|
||||||
|
return (
|
||||||
|
window.requestAnimationFrame ||
|
||||||
|
window.webkitRequestAnimationFrame ||
|
||||||
|
window.mozRequestAnimationFrame ||
|
||||||
|
window.oRequestAnimationFrame ||
|
||||||
|
window.msRequestAnimationFrame ||
|
||||||
|
function (callback) {
|
||||||
|
window.setTimeout(callback);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function loop() {
|
||||||
|
window.requestAnimFrame(loop);
|
||||||
|
st.clearRect(0, 0, w, h);
|
||||||
|
draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
(w = canvas.width = window.innerWidth),
|
||||||
|
(h = canvas.height = window.innerHeight);
|
||||||
|
loop();
|
||||||
|
});
|
||||||
|
|
||||||
|
loop();
|
||||||
|
setInterval(loop, 1000 / 60);
|