comparing 154c545dc28228c88eae7660358b51f0749bd2ba and main on treybastian.com/winterVibesJS

+39 -9

README.md

···

       1
       1
       -
       # winterVibesJS

     

       2
       2
       -
       No build JS twitch wintery overlay.

     

       1
       1
       +
       # Winter Vibes JS

     

       2
       2
       +
       Simple, no build OBS winter overlay!

     

       3
       3
        
       

     

       4
       4
       -
       Run locally and tweak or add the Github page https://treybastian.github.io/winterVibesJS as a browser source.

     

       4
       4
       +
       ## About

     

       5
       5
        
       

     

       6
       6
       -
       ## 0 Dependencies required!

     

       7
       7
       -
       This project has no required dependencies.

     

       6
       6
       +
       This is a simple winter overlay you can use for your Twitch stream or for anything else! What does it do? It adds snow that you can adjust, and a small plow that will clear all the accumulated snow. The easiest way to use it for your stream is by adding it as a browser source in OBS, and boom, it's snowing!!

     

       8
       7
        
       

     

       9
       9
       -
       The only dependency in package.json is vite for HMR purposes while developing.

     

       8
       8
       +
       You can find it at [https://wintervibes.treybastian.com](https://wintervibes.treybastian.com/index.html?v=1&cw=320&ch=180&smx=40&smnsz=1&smxsz=4&smxspd=0.07&snmnspd=0.04&plwspd=0.1&plwd=left&plws=1&gamax=4&gas=20")

     

       10
       9
        
       

     

       11
       11
       -
       Everything uses JSDoc

     

       10
       10
       +
       Once on the page, you can right-click, and a context menu will appear, from which you can navigate to settings.

     

       12
       11
        
       

     

       12
       12
       +
       ##### What all can you adjust:

     

       13
       13
       +
       - Window size

     

       14
       14
       +
       - Snow (max, size, speed)

     

       15
       15
       +
       - Plow (speed, direction WIP, scale)

     

       16
       16
       +
       - Ground (accumulator max, accumulator slices)

     

       13
       17
        
       

     

       14
       14
       -
       # THIS IS NOT DONE YET AND IS A WIP

     

       15
       18
        
       

     

       16
       16
       -
       # WARNING The query parameters are versioned, but the version isn't enforced yet bookmarks may be unstable

     

       19
       19
       +
       You can run it locally if you want to change sprites or any other code. It has 0 dependencies; the only dependency in the `package.json` is Vite for HMR purposes while developing.

     

       20
       20
       +
       

     

       21
       21
       +
       To run it, use:

     

       22
       22
       +
       ```sh

     

       23
       23
       +
          pnpm run dev

     

       24
       24
       +
          ```

     

       25
       25
       +
       or any other way you would like to render index.html

     

       26
       26
       +
       

     

       27
       27
       +
       Optionally, if you want to use dependencies:

     

       28
       28
       +
       ```sh

     

       29
       29
       +
          pnpm install

     

       30
       30
       +
          ```

     

       31
       31
       +
       

     

       32
       32
       +
       ## WIP

     

       33
       33
       +
       

     

       34
       34
       +
       Keep in mind that this project is still a work in progress. Some features are not yet implemented.

     

       35
       35
       +
       - [ ] Plow direction - Right

     

       36
       36
       +
       - [ ] More customization

     

       37
       37
       +
       - [ ] More weather types... 

     

       38
       38
       +
       

     

       39
       39
       +
       

     

       40
       40
       +
       ## Contributing

     

       41
       41
       +
       

     

       42
       42
       +
       This project is open source, not just public source.

     

       43
       43
       +
       

     

       44
       44
       +
       To contribute email a git patch to patches@treybastian.com

     

       45
       45
       +
       

     

       46
       46
       +
       I do not accept pull requests on any of my projects.

+1 -2

index.html

···

       12
       12
        
             <div id="contextMenu" class="context-menu" style="display:none">

     

       13
       13
        
               <ul>

     

       14
       14
        
                   <li><a href="./src/pages/config.html">Settings</a></li>

     

       15
       15
       -
                   <li><a href="https://github.com/TreyBastian/winterVibesJS/blob/main/README.md" target="_blank">Help</a></li>

     

       16
       16
       -
                   <li><a href="https://buymeacoffee.com/treysdevshed" target="_blank">Buy me a coffee</a></li>

     

       15
       15
       +
                   <li><a href="https://tangled.org/TreyBastian.com/winterVibesJS" target="_blank">Help</a></li>

     

       17
       16
        
               </ul>

     

       18
       17
        
             </div>

     

       19
       18

+70

···

       1
       1
       +
       [?1049h[?1h=[H[2J[?2004h[?u[c[?25h[?25l(B[m[H                                                                                

     

       2
       2
       +
                                                                                       

     

       3
       3
       +
                                                                                       

     

       4
       4
       +
                                                                                       

     

       5
       5
       +
                                                                                       

     

       6
       6
       +
                                                                                       

     

       7
       7
       +
                                                                                       

     

       8
       8
       +
                                                                                       

     

       9
       9
       +
                                                                                       

     

       10
       10
       +
                                                                                       

     

       11
       11
       +
                                                                                       

     

       12
       12
       +
                                                                                       

     

       13
       13
       +
                                                                                       

     

       14
       14
       +
                                                                                       

     

       15
       15
       +
                                                                                       

     

       16
       16
       +
                                                                                       

     

       17
       17
       +
                                                                                       

     

       18
       18
       +
                                                                                       

     

       19
       19
       +
                                                                                       

     

       20
       20
       +
                                                                                       

     

       21
       21
       +
                                                                                       

     

       22
       22
       +
                                                                                       

     

       23
       23
       +
                                                                                       

     

       24
       24
       +
                                                                                       [?1004h[?25h[?25l[H(B[m  1                                                                             

     

       25
       25
       +
       ~[K

     

       26
       26
       +
       ~[K

     

       27
       27
       +
       ~[K

     

       28
       28
       +
       ~[K

     

       29
       29
       +
       ~[K

     

       30
       30
       +
       ~[K

     

       31
       31
       +
       ~[K

     

       32
       32
       +
       ~[K

     

       33
       33
       +
       ~[K

     

       34
       34
       +
       ~[K

     

       35
       35
       +
       ~[K

     

       36
       36
       +
       ~[K

     

       37
       37
       +
       ~[K

     

       38
       38
       +
       ~[K

     

       39
       39
       +
       ~[K

     

       40
       40
       +
       ~[K

     

       41
       41
       +
       ~[K

     

       42
       42
       +
       ~[K

     

       43
       43
       +
       ~[K

     

       44
       44
       +
       ~[K

     

       45
       45
       +
       ~[K

     

       46
       46
       +
       (B[0;7mREADME                                                        0,0-1          All(B[m

     

       47
       47
       +
       [J[2 q[2 q[?1002h[?1006h[H  1   [K

     

       48
       48
       +
       ~[K

     

       49
       49
       +
       ~[K

     

       50
       50
       +
       ~[K

     

       51
       51
       +
       ~[K

     

       52
       52
       +
       ~[K

     

       53
       53
       +
       ~[K

     

       54
       54
       +
       ~[K

     

       55
       55
       +
       ~[K

     

       56
       56
       +
       ~[K

     

       57
       57
       +
       ~[K

     

       58
       58
       +
       ~[K

     

       59
       59
       +
       ~[K

     

       60
       60
       +
       ~[K

     

       61
       61
       +
       ~[K

     

       62
       62
       +
       ~[K

     

       63
       63
       +
       ~[K

     

       64
       64
       +
       ~[K

     

       65
       65
       +
       ~[K

     

       66
       66
       +
       ~[K

     

       67
       67
       +
       ~[K

     

       68
       68
       +
       ~[K

     

       69
       69
       +
       (B[0;7mREADME                                                        0,0-1          All(B[m

     

       70
       70
       +
       [J[1;7H[?25h[?25l[2 q[?1002l[?1006l(B[m[?25h[2 q[?1l>[>4;0m[?2004l[?1004l[c[?25h[?25l
[23B[?1049l[?25h

+15 -13

src/contextMenu.js

···

       2
       2
        
       document.oncontextmenu = rightClick;

     

       3
       3
        
       

     

       4
       4
        
       function hideMenu() {

     

       5
       5
       -
           document.getElementById("contextMenu").style.display = "none"

     

       5
       5
       +
         document.getElementById("contextMenu").style.display = "none";

     

       6
       6
        
       }

     

       7
       7
        
       

     

       8
       8
       +
       /**

     

       9
       9
       +
        * @param {MouseEvent} e

     

       10
       10
       +
        */

     

       8
       11
        
       function rightClick(e) {

     

       9
       9
       -
           e.preventDefault();

     

       12
       12
       +
         e.preventDefault();

     

       10
       13
        
       

     

       11
       11
       -
           if (document.getElementById(

     

       12
       12
       -
               "contextMenu").style.display == "block")

     

       13
       13
       -
               hideMenu();

     

       14
       14
       -
           else {

     

       15
       15
       -
               let menu = document

     

       16
       16
       -
                   .getElementById("contextMenu")

     

       14
       14
       +
         if (document.getElementById("contextMenu").style.display == "block")

     

       15
       15
       +
           hideMenu();

     

       16
       16
       +
         else {

     

       17
       17
       +
           let menu = document.getElementById("contextMenu");

     

       17
       18
        
       

     

       18
       18
       -
               menu.style.display = 'block';

     

       19
       19
       -
               menu.style.left = e.pageX + "px";

     

       20
       20
       -
               menu.style.top = e.pageY + "px";

     

       21
       21
       -
           }

     

       22
       22
       -
       }
     

       19
       19
       +
           menu.style.display = "block";

     

       20
       20
       +
           menu.style.left = e.pageX + "px";

     

       21
       21
       +
           menu.style.top = e.pageY + "px";

     

       22
       22
       +
         }

     

       23
       23
       +
       }

     

       24
       24
       +

+103 -28

src/pages/config.html

···

       8
       8
        
         </head>

     

       9
       9
        
         <body>

     

       10
       10
        
           <div class="container">

     

       11
       11
       -
       

     

       12
       11
        
             <h1>Settings</h1>

     

       13
       12
        
       

     

       14
       13
        
             <form action="../../index.html" method="get" class="form-container">

     

       14
       14
       +
               <input type="hidden" name="v" value="1" />

     

       15
       15
        
       

     

       16
       16
       -
               <input type="hidden" name="v" value="1">

     

       17
       17
       -
         

     

       18
       16
        
               <div class="settings-group">

     

       19
       17
        
                 <span class="title">Window</span>

     

       20
       18
        
                 <div class="separator"></div>

     

       21
       19
        
       

     

       22
       20
        
                 <label for="cw">Width</label>

     

       23
       23
       -
                 <input type="number" name="cw" id="cw" placeholder="320" min="0" required>

     

       24
       24
       -
         

     

       21
       21
       +
                 <input

     

       22
       22
       +
                   type="number"

     

       23
       23
       +
                   name="cw"

     

       24
       24
       +
                   id="cw"

     

       25
       25
       +
                   placeholder="320"

     

       26
       26
       +
                   min="0"

     

       27
       27
       +
                   required

     

       28
       28
       +
                 />

     

       29
       29
       +
       

     

       25
       30
        
                 <label for="ch">Height</label>

     

       26
       26
       -
                 <input type="number" name="ch" id="ch" placeholder="180" min="0" required>

     

       31
       31
       +
                 <input

     

       32
       32
       +
                   type="number"

     

       33
       33
       +
                   name="ch"

     

       34
       34
       +
                   id="ch"

     

       35
       35
       +
                   placeholder="180"

     

       36
       36
       +
                   min="0"

     

       37
       37
       +
                   required

     

       38
       38
       +
                 />

     

       27
       39
        
               </div>

     

       28
       28
       -
         

     

       40
       40
       +
       

     

       29
       41
        
               <div class="settings-group">

     

       30
       42
        
                 <span class="title">Snow</span>

     

       31
       43
        
                 <div class="separator"></div>

     

       32
       44
        
       

     

       33
       45
        
                 <label for="smx">Snow max</label>

     

       34
       34
       -
                 <input type="number" name="smx" id="smx" placeholder="40" min="0" required>

     

       35
       35
       -
         

     

       46
       46
       +
                 <input

     

       47
       47
       +
                   type="number"

     

       48
       48
       +
                   name="smx"

     

       49
       49
       +
                   id="smx"

     

       50
       50
       +
                   placeholder="40"

     

       51
       51
       +
                   min="0"

     

       52
       52
       +
                   required

     

       53
       53
       +
                 />

     

       54
       54
       +
       

     

       36
       55
        
                 <label for="smnsz">Snow min size</label>

     

       37
       37
       -
                 <input type="number" name="smnsz" id="smnz" placeholder="1" min="0" required>

     

       38
       38
       -
         

     

       56
       56
       +
                 <input

     

       57
       57
       +
                   type="number"

     

       58
       58
       +
                   name="smnsz"

     

       59
       59
       +
                   id="smnz"

     

       60
       60
       +
                   placeholder="1"

     

       61
       61
       +
                   min="0"

     

       62
       62
       +
                   required

     

       63
       63
       +
                 />

     

       64
       64
       +
       

     

       39
       65
        
                 <label for="smxsz">Snow max size</label>

     

       40
       40
       -
                 <input type="number" name="smxsz" id="smxsz" placeholder="4" min="0" required>

     

       41
       41
       -
         

     

       66
       66
       +
                 <input

     

       67
       67
       +
                   type="number"

     

       68
       68
       +
                   name="smxsz"

     

       69
       69
       +
                   id="smxsz"

     

       70
       70
       +
                   placeholder="4"

     

       71
       71
       +
                   min="0"

     

       72
       72
       +
                   required

     

       73
       73
       +
                 />

     

       74
       74
       +
       

     

       42
       75
        
                 <label for="smxspd">Snow max speed</label>

     

       43
       43
       -
                 <input type="number" step=".01" name="smxspd" id="smxspd" placeholder="0.07" required>

     

       44
       44
       -
         

     

       76
       76
       +
                 <input

     

       77
       77
       +
                   type="number"

     

       78
       78
       +
                   step=".01"

     

       79
       79
       +
                   name="smxspd"

     

       80
       80
       +
                   id="smxspd"

     

       81
       81
       +
                   placeholder="0.07"

     

       82
       82
       +
                   required

     

       83
       83
       +
                 />

     

       84
       84
       +
       

     

       45
       85
        
                 <label for="snmnspd">Snow min speed</label>

     

       46
       46
       -
                 <input type="number" step=".01" name="snmnspd" id="snmnspd" placeholder="0.04" required>

     

       86
       86
       +
                 <input

     

       87
       87
       +
                   type="number"

     

       88
       88
       +
                   step=".01"

     

       89
       89
       +
                   name="snmnspd"

     

       90
       90
       +
                   id="snmnspd"

     

       91
       91
       +
                   placeholder="0.04"

     

       92
       92
       +
                   required

     

       93
       93
       +
                 />

     

       47
       94
        
               </div>

     

       48
       48
       -
               

     

       95
       95
       +
       

     

       49
       96
        
               <div class="settings-group">

     

       50
       97
        
                 <span class="title">Plow</span>

     

       51
       98
        
                 <div class="separator"></div>

     

       52
       99
        
       

     

       53
       100
        
                 <label for="plwspd">Plow speed</label>

     

       54
       54
       -
                 <input type="number" step=".01" name="plwspd" id="plwspd" placeholder="0.1" required>

     

       55
       55
       -
         

     

       101
       101
       +
                 <input

     

       102
       102
       +
                   type="number"

     

       103
       103
       +
                   step=".01"

     

       104
       104
       +
                   name="plwspd"

     

       105
       105
       +
                   id="plwspd"

     

       106
       106
       +
                   placeholder="0.1"

     

       107
       107
       +
                   required

     

       108
       108
       +
                 />

     

       109
       109
       +
       

     

       56
       110
        
                 <label for="smnsz">Plow direction</label>

     

       57
       111
        
                 <select name="plwd" id="plwd" placeholder="right" required>

     

       58
       112
        
                   <option value="left">left</option>

     

       59
       113
        
                   <option value="right" disabled>right WIP</option>

     

       60
       114
        
                   <option value="random" disabled>random WIP</option>

     

       61
       115
        
                 </select>

     

       62
       62
       -
         

     

       116
       116
       +
       

     

       63
       117
        
                 <label for="plws">Plow scale</label>

     

       64
       64
       -
                 <input type="number" name="plws" id="plws" placeholder="1" min="0" required>

     

       118
       118
       +
                 <input

     

       119
       119
       +
                   type="number"

     

       120
       120
       +
                   name="plws"

     

       121
       121
       +
                   id="plws"

     

       122
       122
       +
                   placeholder="1"

     

       123
       123
       +
                   min="0"

     

       124
       124
       +
                   required

     

       125
       125
       +
                 />

     

       65
       126
        
               </div>

     

       66
       66
       -
         

     

       127
       127
       +
       

     

       67
       128
        
               <div class="settings-group">

     

       68
       129
        
                 <span class="title">Ground</span>

     

       69
       130
        
                 <div class="separator"></div>

     

       70
       131
        
       

     

       71
       132
        
                 <label for="gamax">Ground accumulator max</label>

     

       72
       72
       -
                 <input type="number" name="gamax" id="gamax" placeholder="4" min="0" required>

     

       73
       73
       -
         

     

       133
       133
       +
                 <input

     

       134
       134
       +
                   type="number"

     

       135
       135
       +
                   name="gamax"

     

       136
       136
       +
                   id="gamax"

     

       137
       137
       +
                   placeholder="4"

     

       138
       138
       +
                   min="0"

     

       139
       139
       +
                   required

     

       140
       140
       +
                 />

     

       141
       141
       +
       

     

       74
       142
        
                 <label for="gas">Ground accumulatior slices</label>

     

       75
       75
       -
                 <input type="number" name="gas" id="gas" placeholder="20" min="0" required>

     

       143
       143
       +
                 <input

     

       144
       144
       +
                   type="number"

     

       145
       145
       +
                   name="gas"

     

       146
       146
       +
                   id="gas"

     

       147
       147
       +
                   placeholder="20"

     

       148
       148
       +
                   min="0"

     

       149
       149
       +
                   required

     

       150
       150
       +
                 />

     

       76
       151
        
               </div>

     

       77
       77
       -
         

     

       78
       78
       -
               <button type="button" onclick="window.location.href='/'">Cancel</button>

     

       79
       79
       -
               <button type="submit" value="submit">Submit</button>

     

       152
       152
       +
       

     

       153
       153
       +
               <a href="../../index.html" class="button" style="color: red">Default</a>

     

       154
       154
       +
               <button type="submit" value="submit" style="color: green">Save</button>

     

       80
       155
        
             </form>

     

       81
       156
        
           </div>

     

       82
       157

+9 -4

src/styles/config.css

···

       1
       1
       -
       @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

     

       1
       1
       +
       @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap");

     

       2
       2
        
       

     

       3
       3
        
       * {

     

       4
       4
        
         font-family: "Pixelify Sans", sans-serif;

     
···

       39
       39
        
         color: #e0e0e0;

     

       40
       40
        
       }

     

       41
       41
        
       

     

       42
       42
       -
       button {

     

       42
       42
       +
       button,

     

       43
       43
       +
       .button {

     

       44
       44
       +
         text-decoration: none;

     

       45
       45
       +
         font-size: 1em;

     

       43
       46
        
         border-radius: 10px;

     

       44
       47
        
         padding: 5px;

     

       45
       48
        
         background-color: #1e2a3a;

     
···

       47
       50
        
         border: 1px solid #555;

     

       48
       51
        
       }

     

       49
       52
        
       

     

       50
       50
       -
       button:hover {

     

       53
       53
       +
       button:hover,

     

       54
       54
       +
       .button:hover {

     

       51
       55
        
         background-color: #273950;

     

       52
       56
        
         cursor: pointer;

     

       53
       57
        
       }

     
···

       87
       91
        
         height: 1px;

     

       88
       92
        
         background-color: #555;

     

       89
       93
        
         margin: 10px 0;

     

       90
       90
       -
       }
     

       94
       94
       +
       }

     

       95
       95
       +

Compare changes