Feather/index.html at master · FdelMazo/Feather · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="en-us">
  <head>
    <title>Feather · fede.dm</title>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" href="game/assets/favicon.png">
    <meta name="description" content="Mini game about dealing with anxiety and panic attacks">
    <link rel="author" href="https://github.com/FdelMazo/" />
    <link rel="canonical" href="https://fdelmazo.github.io/Feather/" />

    <meta property="og:url" content="https://fdelmazo.github.io/Feather/">
    <meta property="og:description" content="Mini game about dealing with anxiety and panic attacks">
    <meta property="og:title" content="Feather">

    <link rel="stylesheet" type="text/css" href="love.css">
  </head>
  <body>
    <center>
      <div>
        <h1>Feather</h1>
        <p style="width:70%">
          Just breathe slow and steady, in and out. <br>
          <div class='tag' style='text-align: right;'>
              <strong>Spacebar or Left Click for floating</strong>
          </div>
          <div class='tag' style='width:5%'>
          •
          </div>
          <div class='tag' style="text-align:left">
              <strong>M to turn on the sound</strong>
          </div>
        </p>
        <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
        <canvas id="loadingCanvas" oncontextmenu="event.preventDefault()" width="800" height="600"></canvas>
      </div>

      <p id='explanation' style="display: none;">
        Feather is a mini game inspired by <a href='http://www.celestegame.com/'>Celeste</a>. It's purpose is to visualize the <a href='http://davidvago.bwh.harvard.edu/the-floating-feather-meditation-technique/'>floating feather meditation technique</a>, a technique designed to relax and reduce anxiety.
        <br><br>
        The idea of this technique is really simple: you close your eyes and imagine a feather in front of you. When you inhale, the feather rises a few inches, when you exhale, it descends. Keeping a simple count of four for the inhalation, two for a pause and four for the exhalation, you will get into a rythm that will help you when you have trouble breathing, or in the middle of a panic attack.
        <br><br>
        The game helps you visualize the feather. Whenever you press the spacebar, the feather rises, when you release it, it will descend. Just keep the feather inside the white box and breathe while you play.
      </p>
      <p onclick='show()'><strong>Explanation</strong></p>
    </center>
    <footer>
        <a href="https://github.com/fdelmazo/Feather">
          <span>
            <svg viewBox="0 0 16 16" width="2.5em" height="2.5em">
                <path fill="black" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
            </svg>
          </span>
        </a>
        <p>Play <a href="http://www.celestegame.com/">Celeste!</a></p>
      </footer>
  </body>

  <script type='text/javascript'>
    var loadingContext = document.getElementById('loadingCanvas').getContext('2d');
    function drawLoadingText(text) {
      var canvas = loadingContext.canvas;

      loadingContext.fillStyle = "rgb(142, 195, 227)";
      loadingContext.fillRect(0, 0, canvas.scrollWidth, canvas.scrollHeight);

      loadingContext.font = '2em arial';
      loadingContext.textAlign = 'center'
      loadingContext.fillStyle = "rgb( 11, 86, 117 )";
      loadingContext.fillText(text, canvas.scrollWidth / 2, canvas.scrollHeight / 2);

      loadingContext.fillText("Powered By Emscripten.", canvas.scrollWidth / 2, canvas.scrollHeight / 4);
      loadingContext.fillText("Powered By LÖVE.", canvas.scrollWidth / 2, canvas.scrollHeight / 4 * 3);
    }

    window.addEventListener("keydown", function(e) {
      // space and arrow keys
      if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
      }
    }, false);

    var Module = {
      arguments: ['./'],
      printErr: console.error.bind(console),
      canvas: (function() {
        var canvas = document.getElementById('canvas');

        // As a default initial behavior, pop up an alert when webgl context is lost. To make your
        // application robust, you may want to override this behavior before shipping!
        // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
        canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

        return canvas;
      })(),
      setStatus: function(text) {
        if (text) {
          drawLoadingText(text);
        } else if (Module.didSyncFS && Module.remainingDependencies === 0) {
          Module.callMain(Module.arguments);
          document.getElementById('loadingCanvas').style.display = 'none';
          document.getElementById('canvas').style.display = 'block';
        }
      },
      didSyncFS: false,
      totalDependencies: 0,
      remainingDependencies: 0,
      monitorRunDependencies: function(left) {
        this.remainingDependencies = left;
        this.totalDependencies = Math.max(this.totalDependencies, left);
        Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
      }
    };
    Module.setStatus('Downloading...');
    window.onerror = function(event) {
      // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
      Module.setStatus('Exception thrown, see JavaScript console');
      Module.setStatus = function(text) {
        if (text) Module.printErr('[post-exception status] ' + text);
      };
    };

  function show() {
    var x = document.getElementById("explanation");
    if (x.style.display === "none") {
      x.style.display = "block";
    }
    else {
      x.style.display = "none";
    }
  }
  </script>
  <script type="text/javascript" src="game.js"></script>
  <script async type="text/javascript" src="love.js"></script>

</html>