paper-cranes/index.html at main · loqwai/paper-cranes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html lang="en">

<head>
    <link rel="stylesheet" href="index.css" />
    <title>Paper Cranes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#000000">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon" href="/icons/icon-192.png">
    <script>
    // Must be inline + synchronous (not type="module") so the manifest link
    // exists in the DOM before Chrome's early installability check.
    // We load the pre-built manifest then override start_url with the current
    // page URL so the installed PWA preserves all query params (image, etc.).
    (function() {
      var shader = new URLSearchParams(window.location.search).get('shader')
      var safe = shader ? shader.replace(/\//g, '--') : 'default'
      var link = document.createElement('link')
      link.rel = 'manifest'
      link.href = '/manifests/' + safe + '.json'
      document.head.appendChild(link)
      // Override start_url with current URL so installed app keeps all params.
      // Icon srcs must be absolute since the blob URL has no origin for relative paths.
      fetch('/manifests/' + safe + '.json').then(function(r) { return r.json() }).then(function(manifest) {
        var origin = window.location.origin
        manifest.start_url = origin + window.location.pathname + window.location.search
        manifest.icons = manifest.icons.map(function(icon) {
          icon.src = origin + icon.src
          return icon
        })
        link.href = URL.createObjectURL(new Blob([JSON.stringify(manifest)], { type: 'application/json' }))
      })
      if (shader) {
        var parts = shader.split('/')
        var last = parts[parts.length - 1]
        var displayName = last
        // If last segment is just a number or very short, include parent folder
        if (parts.length > 1 && (/^\d+$/.test(last) || last.length <= 2)) {
          displayName = parts[parts.length - 2] + ' ' + last
        }
        document.title = 'Paper Cranes - ' + displayName.replace(/[-_]/g, ' ').replace(/\b\w/g, function(c) { return c.toLowerCase() })
      }
    })()
    </script>
    <script>
    // Capture beforeinstallprompt so we can trigger it later.
    // 9 taps within 2 seconds: install prompt on website, Instagram if already installed.
    var pwaPrompt = null
    var tapTimes = []
    var lastTapTime = 0
    window.addEventListener('beforeinstallprompt', function(e) {
      e.preventDefault()
      pwaPrompt = e
    })
    window.addEventListener('appinstalled', function() {
      pwaPrompt = null
    })
    function onTap() {
      var now = Date.now()
      // Deduplicate touchend+click from the same physical tap
      if (now - lastTapTime < 50) return
      lastTapTime = now
      tapTimes.push(now)
      tapTimes = tapTimes.filter(function(t) { return now - t < 2000 })
      if (tapTimes.length < 9) return
      tapTimes = []
      if (pwaPrompt) {
        pwaPrompt.prompt()
        pwaPrompt.userChoice.then(function() { pwaPrompt = null })
        return
      }
      window.location.href = 'https://instagram.com/redaphid'
    }
    // click works on desktop, touchend works on mobile (click is delayed/swallowed on canvas)
    document.addEventListener('click', onTap)
    document.addEventListener('touchend', onTap)
    </script>
    <script type="module" src="./src/worker-communication.js"></script>
</head>

<body class="ready">
    <canvas id="visualizer" width="2160" height="1920"></canvas>
    <script type="module" src="./index.js"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-4BWWJ5ZPHY"></script>
</body>

</html>