Valentine's 2020

.gitignore

@@ -0,0 +1,4 @@
+.cache
+node_modules/
+build/
+static/

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "klb2",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "lasso --main src/client.js --plugins lasso-marko --inject-into www/index.html"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "lasso": "^3.3.1",
+    "lasso-marko": "^2.4.8",
+    "marko": "^4.18.46"
+  }
+}

src/client.js

@@ -0,0 +1,3 @@
+const mainComponent = require('./main')
+
+mainComponent.renderSync({}).appendTo(document.body)

src/components/growShape.marko

@@ -0,0 +1,3 @@
+
+
+div.growShape

src/components/sinePoint.marko

@@ -0,0 +1,46 @@
+class {
+  onCreate() {
+    this.state = {
+      position: 0,
+    }
+    this.step = this.step.bind(this)
+  }
+  onMount() {
+    console.log(this.input)
+    this.step()
+  }
+  step() {
+    let p = this.input.start + this.state.position
+    let reached = false
+    if (this.input.dir === 1) {
+      if (p < this.input.dest) {
+        this.state.position += this.input.step
+      } else {
+        reached = true
+        this.emit('reached')
+      }
+    } else if (this.input.dir === -1) {
+      if (p > this.input.dest) {
+        this.state.position -= this.input.step
+      } else {
+        reached = true
+        this.emit('reached')
+      }
+    }
+    if (!reached) window.requestAnimationFrame(this.step)
+  }
+}
+
+style {
+  .sinePoint {
+    position: absolute;
+    top: 50%;
+    left: 0;
+  }
+}
+
+div.sinePoint class=input.class style={
+  left: input.start+state.position-5 + '%',
+  top: 50+Math.sin(input.start+state.position) + '%',
+}
+  <${input.renderBody}/>

src/main.marko

@@ -0,0 +1,206 @@
+class {
+  onCreate() {
+    this.state = {
+      catReached: false,
+      birbReached: false,
+      catHearts: [],
+      birbHearts: [],
+      bigHearts: [],
+      revealedSecret: false,
+    }
+  }
+  startCatHearts() {
+    for (let i = 0; i < 8; i++) {
+      this.state.catHearts.push({
+        position: 0,
+        lifetime: 300 * Math.random(),
+      })
+    }
+    let catHearts = () => {
+      this.state.catHearts.forEach(heart => {
+        heart.lifetime -= 1
+        heart.position += Math.random()
+        if (heart.lifetime <= 0) {
+          heart.position = 0
+          heart.lifetime = 300 * Math.random()
+        }
+      })
+      this.forceUpdate()
+      window.requestAnimationFrame(catHearts)
+    }
+    window.requestAnimationFrame(catHearts)
+  }
+  handleCatDone() {
+    this.state.catReached = true
+    this.startCatHearts()
+    if (this.state.catReached && this.state.birbReached && this.state.bigHearts.length === 0) this.startBigHearts()
+  }
+  startBirbHearts() {
+    for (let i = 0; i < 8; i++) {
+      this.state.birbHearts.push({
+        position: 0,
+        lifetime: 300 * Math.random(),
+      })
+    }
+    let birbHearts = () => {
+      this.state.birbHearts.forEach(heart => {
+        heart.lifetime -= 1
+        heart.position += Math.random()
+        if (heart.lifetime <= 0) {
+          heart.position = 0
+          heart.lifetime = 300 * Math.random()
+        }
+      })
+      this.forceUpdate()
+      window.requestAnimationFrame(birbHearts)
+    }
+    window.requestAnimationFrame(birbHearts)
+  }
+  handleBirbDone() {
+    this.state.birbReached = true
+    this.startBirbHearts()
+    if (this.state.catReached && this.state.birbReached && this.state.bigHearts.length === 0) this.startBigHearts()
+  }
+  startBigHearts() {
+    for (let i = 0; i < 4; i++) {
+      this.state.bigHearts.push({
+        position: 0,
+        lifetime: 300 * Math.random(),
+      })
+    }
+    let bigHearts = () => {
+      this.state.bigHearts.forEach(heart => {
+        heart.lifetime -= 1
+        heart.position += Math.random()/2
+        if (heart.lifetime <= 0) {
+          heart.position = 0
+          heart.lifetime = 300 * Math.random()
+        }
+      })
+      this.forceUpdate()
+      window.requestAnimationFrame(bigHearts)
+    }
+    window.requestAnimationFrame(bigHearts)
+  }
+  revealSecret() {
+    this.state.revealedSecret = true
+  }
+}
+style {
+  html {
+    width: 100%;
+    height: 100%;
+  }
+  body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    font-size: 10vw;
+    overflow: hidden;
+    background: rgb(255,199,199);
+    background: linear-gradient(0deg, rgba(128,192,200,1) 0%, rgba(8,16,64,1) 100%);
+  }
+  .kitty {
+    position: relative;
+    color: orange;
+  }
+  .birb {
+    position: relative;
+    transform: scaleX(-1);
+    color: lightgreen;
+  }
+  .birbHeart {
+    color: lightblue;
+  }
+  .kittyHeart {
+    color: red;
+  }
+  .heart {
+    position: absolute;
+    font-size: 2vw;
+  }
+  .bigHeart {
+    position: absolute;
+    font-size: 4vw;
+    color: pink;
+  }
+  .heartLeft {
+    background-color: red;
+    height: 20vw;
+    transform: rotate(-45deg);
+    width: 20vw;
+  }
+  .heartLeft:after {
+    content: "";
+    background-color: red;
+    border-radius: 50%;
+    height: 20vw;
+    position: absolute;
+    width: 20vw;
+  }
+  .secret {
+    position: absolute;
+    top: 25%;
+    width: 100%;
+    text-align: center;
+    font-size: 5vw;
+    color: pink;
+    font-weight: bold;
+    font-family: sans-serif;
+    z-index: 1000;
+  }
+  .revealed {
+    animation: wooble 8s ease-in-out infinite;
+  }
+  @keyframes wooble {
+    0% {
+      font-size: 5vw;
+      transform: rotate(-4deg);
+      color: white;
+    }
+    50% {
+      font-size: 6.5vw;
+      transform: rotate(2deg);
+      color: red;
+    }
+    100% {
+      font-size: 5vw;
+      transform: rotate(-4deg);
+      color: white;
+    }
+  }
+}
+
+sinePoint dir=-1 dest=55 step=0.1 start=100 on-reached('handleCatDone')
+  div.kitty -- 🐈
+  if(state.catReached)
+    for|heart| of=state.catHearts
+      div.heart.kittyHeart style={
+        left: Math.cos(heart.position/6)*60+'%',
+        top: -heart.position+'%',
+        opacity: heart.lifetime / 500 + ''
+      } -- ❤️
+sinePoint dir=1 dest=45 step=0.1 start=0 on-reached('handleBirbDone')
+  div.birb -- 🐦
+  if(state.birbReached)
+    for|heart| of=state.birbHearts
+      div.heart.birbHeart style={
+        left: Math.cos(heart.position/6)*60+'%',
+        top: -heart.position+'%',
+        opacity: heart.lifetime / 500 + ''
+      } -- ❤️
+if(state.catReached && state.birbReached)
+  for|heart| of=state.bigHearts
+    div.bigHeart style={
+      left: 47+Math.cos(heart.position/6)+'%',
+      top: 50-heart.position+'%',
+      opacity: heart.lifetime / 500 + ''
+    } -- ❤️
+  if(!state.revealedSecret)
+    div.secret on-click('revealSecret') -- (click here for a secret!)
+  else
+    div.secret.revealed -- I love youu~
+growShape dir=-1 width=20
+  div.heartLeft
+growShape dir=1 width=20
+  div.heartRight

www/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <title>KlB2</title>
+  <meta charset="utf-8">
+<!-- <lasso-head> --><link rel="stylesheet" href="../static/www-index.css"><!-- </lasso-head> --></head>
+<body>
+ 
+<!-- <lasso-body> --><script src="../static/www-index.js"></script>
+<script>$_mod.ready();</script><!-- </lasso-body> --></body>
+</html>