├── .gitattributes
├── JSONCrush.js
├── NoteCraft.zip
├── README.md
├── index.html
├── index.min.html
├── levelData.js
└── screenshotSmall.png


/.gitattributes:
--------------------------------------------------------------------------------
1 | *.html linguist-language=Javascript
2 | 


--------------------------------------------------------------------------------
/JSONCrush.js:
--------------------------------------------------------------------------------
  1 | /////////////////////////////////////////////////////////////////////// 
  2 | // JSONCrush by Frank Force [MIT] https://github.com/KilledByAPixel/JSONCrush
  3 | /////////////////////////////////////////////////////////////////////// 
  4 | 
  5 | "use strict";
  6 | 
  7 | function JSONCrush(string)
  8 | {
  9 |     const maxSubstringLength = 50; // speed it up by limiting max length
 10 |     const delimiter = '\u0001'; // used to split parts of crushed string
 11 |         
 12 |     const JSCrush=(string, replaceCharacters)=>
 13 |     {
 14 |         // JSCrush Algorithm (repleace repeated substrings with single characters)
 15 |         let replaceCharacterPos = replaceCharacters.length;
 16 |         let splitString = '';
 17 |         
 18 |         const ByteLength =(string)=>encodeURI(encodeURIComponent(string)).replace(/%../g,'i').length;
 19 |         const HasUnmatchedSurrogate =(string)=>
 20 |         {
 21 |             // check ends of string for unmatched surrogate pairs
 22 |             let c1 = string.charCodeAt(0);
 23 |             let c2 = string.charCodeAt(string.length-1);
 24 |             return (c1 >= 0xDC00 && c1 <= 0xDFFF) || (c2 >= 0xD800 && c2 <= 0xDBFF);
 25 |         }
 26 |         
 27 |         // count instances of substrings
 28 |         let substringCount = {};
 29 |         for (let substringLength = 2; substringLength < maxSubstringLength; substringLength++)
 30 |         for (let i = 0; i < string.length - substringLength; ++i)
 31 |         {
 32 |             let substring = string.substr(i, substringLength);
 33 | 
 34 |             // don't recount if already in list
 35 |             if (substringCount[substring])
 36 |                 continue;
 37 | 
 38 |             // prevent breaking up unmatched surrogates
 39 |             if (HasUnmatchedSurrogate(substring))
 40 |                 continue;
 41 | 
 42 |             // count how many times the substring appears
 43 |             let count = 1;
 44 |             for (let substringPos = string.indexOf(substring, i+substringLength); substringPos >= 0; ++count)
 45 |                 substringPos = string.indexOf(substring, substringPos + substringLength);
 46 |                 
 47 |             // add to list if it appears multiple times
 48 |             if (count > 1)
 49 |                 substringCount[substring] = count;
 50 |         }
 51 |         
 52 |         while(true) // loop while string can be crushed more
 53 |         {
 54 |             // get the next character that is not in the string
 55 |             for (;replaceCharacterPos-- && string.includes(replaceCharacters[replaceCharacterPos]);){}
 56 |             if (replaceCharacterPos < 0)
 57 |                 break; // ran out of replacement characters
 58 |             let replaceCharacter = replaceCharacters[replaceCharacterPos];
 59 |             
 60 |             // find the longest substring to replace
 61 |             let bestSubstring;  
 62 |             let bestLengthDelta = 0;  
 63 |             let replaceByteLength = ByteLength(replaceCharacter);
 64 |             for (let substring in substringCount) 
 65 |             {
 66 |                 // calculate change in length of string if it substring was replaced
 67 |                 let count = substringCount[substring];
 68 |                 let lengthDelta = (count-1)*ByteLength(substring) - (count+1)*replaceByteLength;
 69 |                 if (!splitString.length)
 70 |                     lengthDelta -= ByteLength(delimiter); // include the delimiter length 
 71 |                 if (lengthDelta <= 0)
 72 |                     delete substringCount[substring]
 73 |                 else if (lengthDelta > bestLengthDelta)
 74 |                 {
 75 |                     bestSubstring = substring
 76 |                     bestLengthDelta = lengthDelta;
 77 |                 }
 78 |             }
 79 |             if (!bestSubstring)
 80 |                 break; // string can't be compressed further
 81 |                 
 82 |             // create new string with the split character
 83 |             string = string.split(bestSubstring).join(replaceCharacter) + replaceCharacter + bestSubstring;
 84 |             splitString = replaceCharacter + splitString;
 85 |             
 86 |             // update substring count list after the replacement
 87 |             let newSubstringCount = {};
 88 |             for (let substring in substringCount)
 89 |             {
 90 |                 // make a new substring with the replacement
 91 |                 let newSubstring = substring.split(bestSubstring).join(replaceCharacter);
 92 |                 
 93 |                 // count how many times the new substring appears
 94 |                 let count = 0;
 95 |                 for (let i = string.indexOf(newSubstring); i >= 0; ++count)
 96 |                     i = string.indexOf(newSubstring, i + newSubstring.length);
 97 |                     
 98 |                 // add to list if it appears multiple times
 99 |                 if (count > 1)
100 |                     newSubstringCount[newSubstring] = count;
101 |                 
102 |             }
103 |             substringCount = newSubstringCount;
104 |         }
105 | 
106 |         return {a:string, b:splitString};
107 |     }
108 |     
109 |     // create a string of replacement characters
110 |     let characters = [];
111 |     
112 |     // prefer replacing with characters that will not be escaped by encodeURIComponent
113 |     const unescapedCharacters = `-_.!~*'()`;
114 |     for (let i=127; --i;)
115 |     {
116 |         if 
117 |         (
118 |             (i>=48 && i<=57) || // 0-9
119 |             (i>=65 && i<=90) || // A-Z
120 |             (i>=97 && i<=122)|| // a-z
121 |             unescapedCharacters.includes(String.fromCharCode(i))
122 |         )
123 |             characters.push(String.fromCharCode(i));
124 |     }
125 |     
126 |     // pick from extended set last
127 |     for (let i=32; i<255; ++i)
128 |     {
129 |         let c = String.fromCharCode(i);
130 |         if (c!='\\' && !characters.includes(c))
131 |             characters.unshift(c);
132 |     }
133 | 
134 |     // remove delimiter if it is found in the string
135 |     string = string.replace(new RegExp(delimiter,'g'),'');
136 |     
137 |     // swap out common json characters
138 |     string = JSONCrushSwap(string);
139 |     
140 |     // crush with JS crush
141 |     const crushed = JSCrush(string, characters);
142 |     
143 |     // insert delimiter between JSCrush parts
144 |     let crushedString = crushed.a;
145 |     if (crushed.b.length)
146 |         crushedString += delimiter + crushed.b;
147 |     
148 |     // fix issues with some links not being recognized properly
149 |     crushedString += '_'
150 |     
151 |     // encode URI
152 |     return encodeURIComponent(crushedString);
153 | }
154 | 
155 | function JSONUncrush(string)
156 | {
157 |     // string must be a decoded URI component, searchParams.get() does this automatically
158 |     
159 |     // remove last character
160 |     string = string.substring(0, string.length - 1);
161 | 
162 |     // unsplit the string using the delimiter
163 |     const stringParts = string.split('\u0001');
164 |     
165 |     // JSUncrush algorithm
166 |     let uncrushedString = stringParts[0];
167 |     if (stringParts.length > 1)
168 |     {
169 |         let splitString = stringParts[1];
170 |         for (let character of splitString)
171 |         {
172 |             // split the string using the current splitCharacter
173 |             let splitArray = uncrushedString.split(character);
174 | 
175 |             // rejoin the string with the last element from the split
176 |             uncrushedString = splitArray.join(splitArray.pop());
177 |         }
178 |     }
179 |     
180 |     // unswap the json characters in reverse direction
181 |     return JSONCrushSwap(uncrushedString, 0);
182 | }
183 | 
184 | function JSONCrushSwap(string, forward=1)
185 | {
186 |     // swap out characters for lesser used ones that wont get escaped
187 |     const swapGroups = 
188 |     [
189 |         ['"', "'"],
190 |         ["':", "!"],
191 |         [",'", "~"],
192 |         ['}', ")", '\\', '\\'],
193 |         ['{', "(", '\\', '\\'],
194 |     ];
195 |     
196 |     const Swap=(string, g)=>
197 |     {
198 |         let regex = new RegExp(`${(g[2]?g[2]:'')+g[0]}|${(g[3]?g[3]:'')+g[1]}`,'g');
199 |         return string.replace(regex, $1 => ($1 === g[0] ? g[1] : g[0]));
200 |     }
201 | 
202 |     // need to be able to swap characters in reverse direction for uncrush
203 |     if (forward)
204 |         for (let i = 0; i < swapGroups.length; ++i)
205 |             string = Swap(string, swapGroups[i]);
206 |     else
207 |         for (let i = swapGroups.length; i--;)
208 |             string = Swap(string, swapGroups[i]);
209 | 
210 |     return string;
211 | }


--------------------------------------------------------------------------------
/NoteCraft.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KilledByAPixel/NoteCraft/a967ed39023f3b6738a81b7b888f8da0c6338ad8/NoteCraft.zip


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NoteCraft 🎵🔨
 2 | 
 3 | # [Live Demo](https://killedbyapixel.github.io/NoteCraft/)
 4 | # [JS13k Submission](https://js13kgames.com/entries/notecraft)
 5 | 
 6 | NoteCraft is a Cellular Automata Music System
 7 | 
 8 | ![NoteCraft Image](/screenshotSmall.png)
 9 | 
10 | Features
11 | - Export to ZzFXM and OS13k
12 | - Share compressed links
13 | - Several example songs
14 | - Instruments are customizable
15 | - Undo and Redo
16 | - Cut, copy, and paste
17 | - Turing complete!
18 | 
19 | Controls
20 | - Draw = Left Mouse
21 | - Erase = Ctrl + Left Mouse or Left + Right Mouse
22 | - Test Cell / Eyedropper = Right Mouse
23 | - Move View = Click & Drag Middle Mouse
24 | - Zoom View = Wheel
25 | - Select Area = Shift + Left Mouse
26 | 
27 | Cell Types
28 | - Power/Mover - Provides power to neighbor cells and moves
29 | - Power Line - Transfers power
30 | - Rotator - Rotates cells and redirects movement when powered
31 | - Copier - Copies and unpoweres cell when powered
32 | - Push Blocks - Can be pushed or not pushed
33 | - Stop Block - Destroys anything pushed into it when powered
34 | - Note - Plays a note when powered and holds until unpowered
35 | - Note Control - Changes the key or attenuation of conneted notes
36 | 
37 | Selection Controls
38 | - R/E = Rotate
39 | - Q = Mirror
40 | - T = Spread
41 | - WASD = Move
42 | 
43 | Play Controls
44 | - Toggle Play/Edit = Space
45 | - 0 = Stop
46 | - 1 = Play
47 | - 2 = Pause
48 | - 3 = Step
49 | - 4 = Fast Forward
50 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!--
   2 | 
   3 | 🎵🔨 NoteCraft by Frank Force
   4 | https://github.com/KilledByAPixel/NoteCraft
   5 | 
   6 | todo
   7 | - smaler save format, group by type
   8 | - save i instead of x/y
   9 | 
  10 | -->
  11 | <meta charset=utf-8>
  12 | <style>
  13 | *
  14 | {
  15 |     font-family:monospace;
  16 |     font-size:20
  17 | }
  18 | body
  19 | {
  20 |     margin:0;
  21 |     overflow:hidden;
  22 |     user-select:none;
  23 |     white-space:nowrap;
  24 |     color:#fff;
  25 | }
  26 | .menuButton
  27 | {
  28 |     box-sizing:border-box;
  29 |     width:90;
  30 |     height:30;
  31 |     background:#ccc;
  32 |     color:#000;
  33 |     border:2px solid #000;
  34 |     border-radius:6px;
  35 |     display:inline-block;
  36 |     text-align:center;
  37 |     vertical-align:middle;
  38 |     padding:0;
  39 | }
  40 | .menuButton:active  { background:#faa; }
  41 | .menuButton:hover  { background:#ffa; }
  42 | input
  43 | {
  44 |     background:#ccc;
  45 |     width:80;
  46 |     height:25;
  47 |     margin:4;
  48 |     text-align:center;
  49 |     border-radius:6px;
  50 | }
  51 | .toolbar
  52 | {
  53 |     position:absolute;
  54 |     background:#222;
  55 |     border-bottom:4px solid #555;
  56 |     border-right:4px solid #555;
  57 |     border-bottom-right-radius:30px;
  58 | }
  59 | .toolbarTop
  60 | {
  61 |     display:flex;
  62 |     align-items:center;
  63 | }
  64 | .toolbarEditControls
  65 | {
  66 |     display:flex;
  67 |     margin-left:8;
  68 | }
  69 | .playControl
  70 | {
  71 |     display:inline-block;
  72 |     width:40;
  73 |     height:40;
  74 |     font-size:28;
  75 |     margin:3;
  76 |     border-radius:9px;
  77 |     text-align:center;
  78 | }
  79 | .songTimeDisplay
  80 | {
  81 |     text-align:center;
  82 |     white-space:pre;
  83 | }
  84 | .beatDisplay
  85 | {
  86 |     width:56;
  87 |     height:56;
  88 |     background:#0ff;
  89 |     border:4px solid #000;
  90 |     border-radius:50%;
  91 |     margin:0;
  92 |     overflow:hidden;
  93 |     margin-left:6;
  94 |     margin-right:6;
  95 | }
  96 | .beatDisplayMarker
  97 | {
  98 |     width:10;
  99 |     height:10;
 100 |     border:3px solid #000;
 101 |     background:#222;
 102 |     border-radius:50%;
 103 |     position: relative;
 104 |     left:22;
 105 |     top:4;
 106 |     pointer-events:none;
 107 | }
 108 | .beatDisplaySpinner
 109 | {
 110 |     width:100%;
 111 |     height:100%;
 112 | }
 113 | .watermark
 114 | {
 115 |     position:absolute;
 116 |     bottom:8;
 117 |     right:8;
 118 |     font-size:16;
 119 |     color:#fff5;
 120 |     pointer-events:none;
 121 | }
 122 | .loadingMessage
 123 | {
 124 |     font-size:4em;
 125 |     background:#000;
 126 |     z-index:100;
 127 |     position:fixed;
 128 |     left:0;
 129 |     top:300;
 130 |     width:100%;
 131 |     padding:20px;
 132 |     text-align:center;
 133 |     outline:9px solid #222;
 134 |     display:none;
 135 | }
 136 | .instrumentButton0 { background:hsl(0,60%,60%); }
 137 | .instrumentButton1 { background:hsl(90,60%,60%); }
 138 | .instrumentButton2 { background:hsl(180,60%,60%); }
 139 | .instrumentButton3 { background:hsl(270,60%,60%); }
 140 | .menu
 141 | {
 142 |     margin:8;
 143 |     padding:8;
 144 |     height:100;
 145 |     background:#000;
 146 |     border:1px solid #fff;
 147 |     border-radius:2px;
 148 |     display:none;
 149 |     overflow-x:auto;
 150 | }
 151 | .level:hover
 152 | {
 153 |     color:#000;
 154 |     background:#2c2;
 155 | }
 156 | </style><body>
 157 | <script src=JSONCrush.js?4></script>
 158 | <script src=levelData.js?4></script>
 159 | <script>
 160 | 
 161 | 'use strict'
 162 | 
 163 | // ==ClosureCompiler==
 164 | // @compilation_level ADVANCED_OPTIMIZATIONS
 165 | // @language_out ECMASCRIPT_2019
 166 | // @output_file_name MusicAutomata.min.js
 167 | // ==/ClosureCompiler==
 168 | 
 169 | const debug = 0;
 170 | const saveInstruments = 1;
 171 | 
 172 | ///////////////////////////////////////////////////////////////////////////////
 173 | // Helper Functions 
 174 | 
 175 | function Clamp   (a, max=1, min=0)       { return a < min ? min : a > max ? max : a; }
 176 | function Percent (v, a, b)               { return b-a ? Clamp((v-a)/(b-a)) : 0; }
 177 | function Lerp    (p, a, b)               { return a + Clamp(p) * (b-a); }
 178 | function HSLA    (h=0, s=0, l=0, a=1)    { return `hsla(${h*360},${s*100}%,${l*100}%,${a})`; }
 179 | 
 180 | function NoteFrequency(offset, root=440) { return root * 2 ** (offset / 12); }
 181 | function NoteName(n=0) { n+=keyOffset; return "CCDDEFFGGAAB"[n%12|0]  + ('02579'.indexOf(n%12-1) < 0 ? '' : '#') + (n < 12 ? '' : n/12|0); }
 182 | function AttenuationName(a=0) { return (10-a || '') + '0%'; }
 183 | function JSONStringifyNoNull(o)          { return JSON.stringify(o).replace(/null/g, ''); }
 184 | 
 185 | function GetDirectionXY(direction)
 186 | {
 187 |     const side = direction & 2 ? 1 : -1;
 188 |     return [direction & 1 ? -side : 0, direction & 1 ? 0 : side];
 189 | }
 190 |  
 191 | ///////////////////////////////////////////////////////////////////////////////
 192 | // Sound Object
 193 |  
 194 | class Sound
 195 | {
 196 |     Play(instrument, key, gain, pan)
 197 |     {
 198 |         if (this.source && this.instrument == instrument && this.key == key)
 199 |         {
 200 |             // only change gain if same instrument & note
 201 |             this.gain.gain.value = gain;
 202 |             return;
 203 |         }
 204 | 
 205 |         // stop old sound
 206 |         this.Stop();
 207 | 
 208 |         // cache sound sample
 209 |         let soundSamples = soundCache[[this.instrument = instrument, this.key = key]];
 210 |         if (!soundSamples)
 211 |         {
 212 |             const instrumentParameters = [...instruments[instrument]];
 213 |             instrumentParameters[2] = NoteFrequency(key + keyOffset, instrumentParameters[2]); 
 214 |             soundSamples = soundCache[[instrument, key]] = zzfxG(...instrumentParameters);
 215 |         }
 216 |         
 217 |         // play sound and set gain and pan
 218 |         (this.source = zzfxS(...soundSamples))
 219 |             .connect(this.gain = zzfxX.createGain())
 220 |             .connect(this.pan = zzfxX.createStereoPanner())
 221 |             .connect(volumeGain);
 222 |         this.SetGain(gain);
 223 |         this.SetPan(pan);
 224 |         this.source.start();
 225 |     }
 226 | 
 227 |     SetGain(gain) { this.source && (this.gain.gain.value = gain); }
 228 |     SetPan(pan)   { this.source && (this.pan.pan.value = pan); }
 229 | 
 230 |     Stop(delaySeconds = .02)
 231 |     {
 232 |         const source = this.source;
 233 |         if (!source)
 234 |             return;
 235 | 
 236 |         // unset and ramp off sound
 237 |         this.source = 0;
 238 |         this.gain.gain.linearRampToValueAtTime(this.gain.gain.value, zzfxX.currentTime);
 239 |         this.gain.gain.linearRampToValueAtTime(0, zzfxX.currentTime + delaySeconds);
 240 |         setTimeout(e=>source.stop(), delaySeconds*1e3);
 241 |     }
 242 | }
 243 | 
 244 | ///////////////////////////////////////////////////////////////////////////////
 245 | // Cell Object
 246 | 
 247 | const CELL_TYPE_BLOCK      = 0;
 248 | const CELL_TYPE_POWER      = 1;
 249 | const CELL_TYPE_NOTE       = 2;
 250 | const CELL_TYPE_CONTROL    = 3;
 251 | const CELL_TYPE_KILL       = 4;
 252 | const CELL_TYPE_COPY       = 5;
 253 | const CELL_TYPE_ROTATE     = 6;
 254 | const CELL_TYPE_POWER_LINE = 7;
 255 | const CELL_TYPE_COUNT      = 8;
 256 | 
 257 | const cellTypeInfo = 
 258 | [
 259 | //   name        data  power
 260 |     ['Block',     4,    0],
 261 |     ['Power',     5,    1],
 262 |     ['Play Note', 4,    1],
 263 |     ['Control',   4,    0],
 264 |     ['Remove',    1,    1],
 265 |     ['Copy',      5,    1],
 266 |     ['Rotate',    2,    1],
 267 |     ['Power Line',5,    1]
 268 | ];
 269 | 
 270 | const CELL_CONTROL_SEMI_TONE    = 0;
 271 | const CELL_CONTROL_ATTENUATE_10 = 1;
 272 | const CELL_CONTROL_OCTAVE       = 2;
 273 | const CELL_CONTROL_ATTENUATE_50 = 3;
 274 | const CELL_MAX_DATA_COUNT       = 5;
 275 | 
 276 | function CellDataCount(type)
 277 | {
 278 |     return cellTypeInfo[type][1];
 279 | }
 280 | function UsesPower(type)
 281 | {
 282 |     return cellTypeInfo[type][2];
 283 | }
 284 | 
 285 | class Cell
 286 | {
 287 |     constructor(x, y, type = 0, data = 0)
 288 |     {
 289 |         this.SetXY(x, y);
 290 |         this.type = type; 
 291 |         this.data = data;
 292 |         this.angle = 0;
 293 |         this.updateCount = 0;
 294 |         this.Reset();
 295 |     }
 296 | 
 297 |     Reset()
 298 |     {
 299 |         this.powered = this.type == CELL_TYPE_POWER;
 300 |         this.key = this.attenuation = 0;
 301 |         this.spawnFrame = this.notePowerFrame = this.moveFrame = -1;
 302 |     }
 303 | 
 304 |     SetXY(x, y)
 305 |     {
 306 |         this.lastX = this.x = x;
 307 |         this.lastY = this.y = y;
 308 |     }
 309 |     
 310 |     Destroy()
 311 |     {
 312 |         this.sound && this.sound.Stop();
 313 |         SetCellObject(this.x, this.y);
 314 |     }
 315 |     
 316 |     PlaySound(force)
 317 |     {
 318 |         if (this.type != CELL_TYPE_NOTE && !force)
 319 |             return;
 320 | 
 321 |         if (++frameSoundCount > 8) // limit max sounds per frame of music
 322 |             return;
 323 | 
 324 |         if (simulate)
 325 |             simulatePlayEvents.push([this, this.key, this.attenuation]);
 326 |         else
 327 |         {
 328 |             const gain = 1 - this.attenuation/10;
 329 |             const pan = this.x/(cellsWidth-1)*2-1;
 330 |             if (!this.sound)
 331 |                 this.sound = new Sound();
 332 |             this.sound.Play(this.type == CELL_TYPE_NOTE ? this.data : 0, this.key, gain, pan);
 333 |             auditionMode && this.sound.Stop(.5);
 334 |         }
 335 |     }
 336 | 
 337 |     StopSound()
 338 |     {
 339 |         if (simulate)
 340 |             simulateStopEvents.push(this);
 341 |         else
 342 |             this.sound && this.sound.Stop();
 343 |     }
 344 | 
 345 |     Audition()
 346 |     {
 347 |         // if control, play attached notes or sound instrument 1 if no attached
 348 |         // else play any powred notes (reset and se power)
 349 | 
 350 |         frameSoundCount = 0;
 351 |         //this.powered = 0;
 352 |         cellObjects.map(c=>c&&c.Reset());
 353 |         cellObjects.map(c=>c&&c.UpdatePowerPre());
 354 |         this.SetPowered();
 355 | 
 356 |         auditionMode = 1;
 357 |         this.UpdateControl();
 358 |         auditionMode = 0;
 359 |         cellObjects.map(c=>c&&c.UpdateControl());
 360 | 
 361 |         auditionMode = 1;
 362 |         cellObjects.map(c=>c&&c.UpdateNotes());
 363 | 
 364 |         // force play control notes if no sound
 365 |         this.type == CELL_TYPE_CONTROL && !frameSoundCount && this.PlaySound(1);
 366 | 
 367 |         auditionMode = 0;
 368 |     }
 369 |     
 370 |     BuildUpdateList()
 371 |     {
 372 |         this.lastX = this.x;
 373 |         this.lastY = this.y;
 374 |         ++this.updateCount;
 375 | 
 376 |         this.moveDirectionList = [];
 377 |         if (this.type == CELL_TYPE_POWER && this.powered && this.data < 4) // powered mover
 378 |             updateListCells.push(this);
 379 |         else if (this.type == CELL_TYPE_COPY) // copier
 380 |         {
 381 |             this.spawnActive = 0;
 382 |             if (!this.powered)
 383 |                 this.preventSpawn = 0;
 384 |             else
 385 |             {
 386 |                 if (!this.preventSpawn)
 387 |                 {
 388 |                     this.preventSpawn = 1;
 389 |                     this.spawnActive = 1;
 390 |                 }
 391 |                 updateListCells.push(this);
 392 |             }
 393 |         }
 394 |         else if (this.type == CELL_TYPE_ROTATE && this.powered)
 395 |         {
 396 |             // update rotators
 397 |             for(let i = 4; i--;)
 398 |             {
 399 |                 const d = GetDirectionXY(i);
 400 |                 const cell = GetCell(this.x + d[0], this.y +d[1]);
 401 |                 cell && cell.Rotate(this.data ? -1 : 1);
 402 |             }
 403 |         }
 404 |     }
 405 | 
 406 |     AddToMoveList(direction)
 407 |     {
 408 |         let i = this.moveDirectionList.indexOf(direction);
 409 |         i < 0 && this.moveDirectionList.push(direction);
 410 |     }   
 411 | 
 412 |     MoveTestRecurse(direction, isSelf)
 413 |     {
 414 |         if (this.moveTestID == moveTestID)
 415 |             return; // blocked by reursion, movement looped on self
 416 |         this.moveTestID = moveTestID;
 417 | 
 418 |         if (this.type == CELL_TYPE_BLOCK && (this.data > 2 || this.data == ((direction & 1) + 1)))
 419 |             return; // soild wall or one way slider
 420 | 
 421 |         if (this.type == CELL_TYPE_COPY && this.preventSpawn && !isSelf)
 422 |             return; // can't push copier that is spawning
 423 | 
 424 |         if (this.powered && this.type == CELL_TYPE_ROTATE)
 425 |             return; // can't push powered rotator
 426 | 
 427 |         if (this.powered && this.type == CELL_TYPE_KILL)
 428 |             return true; // powered kill blocks can always be moved into
 429 |           
 430 |         if (this.powered && this.type == CELL_TYPE_POWER && this.data < 4)
 431 |         {
 432 |             // change direction to move direction
 433 |             direction = this.data;
 434 |         }
 435 | 
 436 |         // try to move
 437 |         let directionXY = GetDirectionXY(direction);
 438 |         let x = this.x + directionXY[0];
 439 |         let y = this.y + directionXY[1];
 440 |         if (!IsValidCell(x,y))
 441 |             return;
 442 | 
 443 |         // get object at target pos
 444 |         let target = GetCell(x, y);
 445 |         if (target && target.type == CELL_TYPE_ROTATE && target.powered)
 446 |         {
 447 |             // rotate direction against powered rotators
 448 |             direction = (direction + (target.data ? 3 : 1))%4;
 449 |             directionXY = GetDirectionXY(direction);
 450 |             x = this.x + directionXY[0];
 451 |             y = this.y + directionXY[1];
 452 |             if (!IsValidCell(x,y)) 
 453 |                 return;
 454 |             
 455 |             // get new target
 456 |             target = GetCell(x, y);
 457 |         }
 458 | 
 459 |         if (!target || target.MoveTestRecurse(direction))
 460 |         {
 461 |             // target could move, add to list
 462 |             this.AddToMoveList(direction);
 463 |             return true;
 464 |         }
 465 |     }
 466 | 
 467 |     MoveTest(direction)
 468 |     {
 469 |         moveTestID++; // prevent infinte recursion
 470 |         return this.MoveTestRecurse(direction, 1);
 471 |     }
 472 | 
 473 |     UpdateTestCopy()
 474 |     {
 475 |         const TestCopy = (direction)=>
 476 |         {
 477 |             let copyDirection = (direction + 2)%4;
 478 |             const copyDirectionXY = GetDirectionXY(copyDirection);
 479 |             const x = this.x + copyDirectionXY[0];
 480 |             const y = this.y + copyDirectionXY[1];
 481 | 
 482 |             const copyObject = GetCell(x, y);
 483 |             if (!copyObject)
 484 |                 return;
 485 | 
 486 |             if (copyObject.type == CELL_TYPE_KILL && copyObject.powered)
 487 |                 return; // can't copy powered kill block
 488 | 
 489 |             if (copyObject.type == CELL_TYPE_BLOCK && copyObject.data == 3)
 490 |                 return; // cant copy solid wall
 491 | 
 492 |             copyObject.copyFrame = frame;
 493 |             unpowerSet.add(copyObject);
 494 |             if (!this.MoveTest(direction))
 495 |                 return;
 496 | 
 497 |             // add to copy list
 498 |             this.copyList[copyDirection] = copyObject;
 499 |         }
 500 | 
 501 |         if (this.type != CELL_TYPE_COPY)
 502 |             return;
 503 | 
 504 |         // doesn't matter it has power (may be lose power from another coppier), but already set to spawn
 505 |         this.copyList = [];
 506 | 
 507 |         // dont upadate if prevent spawning unless this is the spawn frame
 508 |         if (this.preventSpawn && !this.spawnActive)
 509 |             return;
 510 | 
 511 |         if (this.data < 4)
 512 |             TestCopy(this.data); // single direction copy
 513 |         else
 514 |             for(let i=4;i--;) TestCopy(i);  // multi direction copy
 515 |     }
 516 | 
 517 |     UpdateTestPowerMove()
 518 |     {
 519 |         if (this.type != CELL_TYPE_POWER || !this.powered)
 520 |             return;
 521 | 
 522 |         // if it wasnt powered down by a copier
 523 |         this.MoveTest(this.data);
 524 |     }
 525 | 
 526 |     IncrementMoveTarget(direction)
 527 |     {
 528 |         // try to move
 529 |         let directionXY = direction >= 0 ? GetDirectionXY(direction) : [0,0];
 530 |         let x = this.x + directionXY[0];
 531 |         let y = this.y + directionXY[1];
 532 |         if (!IsValidCell(x,y))
 533 |             return;
 534 | 
 535 |         const target = GetCell(x, y);
 536 |         if (target && target.type == CELL_TYPE_KILL)
 537 |             return;
 538 | 
 539 |         const v = cellMoveTargets[x+cellsWidth*y];
 540 |         cellMoveTargets[x+cellsWidth*y] = v ? v + 1 : 1;
 541 |     }
 542 | 
 543 |     // for all objects
 544 |     UpdateCollisionDetect()
 545 |     {
 546 |         if (this.type == CELL_TYPE_COPY && this.spawnActive)
 547 |         {
 548 |             // increment current pos and all move directions in move array
 549 |             this.moveDirectionList.map(direction=>this.IncrementMoveTarget(direction));
 550 |             this.IncrementMoveTarget(-1);
 551 |             return;
 552 |         }
 553 | 
 554 |         if (this.moveDirectionList.length == 1)
 555 |         {
 556 |             this.IncrementMoveTarget(this.moveDirectionList[0])
 557 |             return;
 558 |         }
 559 | 
 560 |         // no move direction, or more then 1
 561 |         this.IncrementMoveTarget(-1);
 562 |     }
 563 | 
 564 |     // powered movers
 565 |     Move()
 566 |     {
 567 |         if (this.moveFrame == frame)
 568 |             return this.x != this.lastX || this.y != this.lastY; // return true if it moved
 569 |         this.moveFrame = frame; // prevent another move
 570 | 
 571 |         if (this.type == CELL_TYPE_KILL && this.powered)
 572 |             return true; // kill blocks don't really move, they just eat everything
 573 | 
 574 |         if (!this.moveDirectionList || this.moveDirectionList.length != 1)
 575 |             return false; // collision: multiple move directions or no move
 576 | 
 577 |         let directionXY = GetDirectionXY(this.moveDirectionList[0]);
 578 |         let x = this.x + directionXY[0];
 579 |         let y = this.y + directionXY[1];
 580 | 
 581 |         if (cellMoveTargets[x +cellsWidth*y] > 1)
 582 |             return false; // collision, move target is used
 583 | 
 584 |         // get new target
 585 |         let target = GetCell(x, y);
 586 |         if (target && target.powered && target.type == CELL_TYPE_KILL)
 587 |         {
 588 |             // destroy if moved into powered kill block
 589 |             this.Destroy();
 590 |             return true;
 591 |         }
 592 | 
 593 |         if (!target || target.Move())
 594 |         {
 595 |             // apply move
 596 |             SetCellObject(this.x, this.y);
 597 |             cellObjects[x + cellsWidth*y] = this;
 598 |             this.x = x;
 599 |             this.y = y;
 600 | 
 601 |             if (this.sound)
 602 |             {
 603 |                 // update pan
 604 |                 const pan = this.x/(cellsWidth-1)*2-1;
 605 |                 this.sound.SetPan(pan);
 606 |             }
 607 |             return true;
 608 |         }
 609 |     }
 610 | 
 611 |     // actual movement and collision detect part 2, for all objects in update list
 612 |     UpdateMovement()
 613 |     {
 614 |         if (this.type == CELL_TYPE_POWER && this.powered)
 615 |         {
 616 |             if (!this.Move())
 617 |                 this.powered = 0;
 618 |         }
 619 |         else if (this.type == CELL_TYPE_COPY)
 620 |         {
 621 |             this.moveDirectionList.map(direction=>
 622 |             {
 623 |                 let copyDirection = (direction + 2)%4;
 624 |                 let copyObject = this.copyList[copyDirection];
 625 |                 if (copyObject)
 626 |                 {
 627 |                     let directionXY = GetDirectionXY(direction);
 628 |                     let x = this.x + directionXY[0];
 629 |                     let y = this.y + directionXY[1];
 630 |                     
 631 |                     // get new target
 632 |                     let target = GetCell(x, y);
 633 |                     if (cellMoveTargets[x + cellsWidth*y] == 1 && (!target || target.Move()))
 634 |                         this.CopyObject(direction, copyObject);
 635 |                 }
 636 |             });
 637 |         }
 638 |     }
 639 |     
 640 |     CopyObject(spawnDirection, copyObject)
 641 |     {
 642 |         const spawnDirectionXY = GetDirectionXY(spawnDirection);
 643 |         const x = this.x + spawnDirectionXY[0];
 644 |         const y = this.y + spawnDirectionXY[1];
 645 | 
 646 |         if (GetCell(x, y)) // spawn blocked
 647 |             return;
 648 | 
 649 |         const newCell = new Cell(...copyObject.GetInfoArray());
 650 |         SetCellObject(x, y, newCell);
 651 |         newCell.spawnFrame = frame;
 652 |         newCell.lastX = this.x;
 653 |         newCell.lastY = this.y;
 654 |     }
 655 | 
 656 |     UpdatePowerPre()
 657 |     {
 658 |         this.wasPowered = this.powered;
 659 |         this.powered = 0;
 660 |         this.updatedControl = 0;
 661 |     }
 662 | 
 663 |     UpdatePower()
 664 |     {
 665 |         // update powere even if it was powered down this frame
 666 |         this.type == CELL_TYPE_POWER && this.wasPowered && this.SetPowered();
 667 |     }
 668 | 
 669 |     UpdateControl()
 670 |     {
 671 |         // update key and attenuation
 672 |         if (this.updatedControl || this.type != CELL_TYPE_CONTROL)
 673 |             return;
 674 | 
 675 |         // use fill routine to get connections
 676 |         let cellUpdated = [], updatedCells = [], value = 0, foundSmall = 0,
 677 |         UpdateControlCells = (x, y, wasControl = 1)=>
 678 |         {
 679 |             const cell = GetCell(x, y);
 680 |             if (!cell || cellUpdated[x + cellsWidth * y])
 681 |                 return;
 682 | 
 683 |             const isControl = cell.type == CELL_TYPE_CONTROL && (this.type==CELL_TYPE_NOTE || cell.data%2 == this.data%2);
 684 |             if (!isControl && cell.type != CELL_TYPE_NOTE)
 685 |                 return;
 686 | 
 687 |             if (!wasControl && !isControl)
 688 |                 return;
 689 | 
 690 |             if (cell.type == CELL_TYPE_NOTE || isControl)
 691 |             {
 692 |                 cell.updatedControl = 1;
 693 |                 cellUpdated[x + cellsWidth * y] = 1;
 694 |                 updatedCells.push(cell);
 695 |                 if (isControl)
 696 |                 {
 697 |                     if (!foundSmall && cell.data < 2) // skip the first small control
 698 |                         foundSmall = 1;
 699 |                     else
 700 |                         value += cell.data < 2 ? 1 : cell.data - 2 ? 5 : 12;
 701 |                 }
 702 | 
 703 | 
 704 |                 UpdateControlCells(x+1, y, isControl);
 705 |                 UpdateControlCells(x-1, y, isControl);
 706 |                 UpdateControlCells(x, y-1, isControl);
 707 |                 UpdateControlCells(x, y+1, isControl);
 708 |             }
 709 |         }
 710 | 
 711 |         UpdateControlCells(this.x, this.y);
 712 |         updatedCells.map( cell=> 
 713 |         {
 714 |             this.data % 2 ? cell.attenuation = Math.min(value, 10) : cell.key = value 
 715 |             if (cell.type == CELL_TYPE_NOTE && auditionMode)
 716 |             {
 717 |                 cell.powered = 1;
 718 |                 cell.PlaySound();
 719 |             }
 720 |         });
 721 |     }
 722 | 
 723 |     UpdateNotes()
 724 |     {
 725 |         if (this.type != CELL_TYPE_NOTE)
 726 |             return;
 727 |         
 728 |         if (!this.powered)
 729 |         {
 730 |             this.StopSound();
 731 |             return;
 732 |         }
 733 | 
 734 |         // flash when note plays
 735 |         let UpdateControlCells = (x, y, wasControl = 1)=>
 736 |         {
 737 |             const cell = GetCell(x, y);
 738 |             if (!cell || cell.notePowerFrame == frame)
 739 |                 return;
 740 | 
 741 |             const isControl = cell.type == CELL_TYPE_CONTROL && (this.type==CELL_TYPE_NOTE || cell.data%2 == this.data%2);
 742 |             if (!isControl && cell.type != CELL_TYPE_NOTE)
 743 |                 return;
 744 | 
 745 |             if (!wasControl && !isControl)
 746 |                 return;
 747 | 
 748 |             if (cell.type == CELL_TYPE_NOTE || isControl)
 749 |             {
 750 |                 cell.notePowerFrame = frame;
 751 | 
 752 |                 UpdateControlCells(x+1, y, isControl);
 753 |                 UpdateControlCells(x-1, y, isControl);
 754 |                 UpdateControlCells(x, y-1, isControl);
 755 |                 UpdateControlCells(x, y+1, isControl);
 756 |             }
 757 |         }
 758 | 
 759 |         UpdateControlCells(this.x, this.y, 1);
 760 | 
 761 |         if (IsPlaying() || auditionMode)
 762 |             this.PlaySound();
 763 |     }
 764 |     
 765 |     SetPowered()
 766 |     {
 767 |         if (this.type == CELL_TYPE_BLOCK || this.type == CELL_TYPE_CONTROL)
 768 |             return; // cant be powered
 769 | 
 770 |         if (this.type == CELL_TYPE_COPY && this.spawnActive)
 771 |             return; // cant power copiers while spawning
 772 | 
 773 |         if (this.powered)
 774 |             return; // already powered
 775 |         this.powered = 1;
 776 | 
 777 |         if (this.type == CELL_TYPE_POWER_LINE && this.data < 4)
 778 |         {
 779 |             // one direction power transfer
 780 |             const d = GetDirectionXY(this.data);
 781 |             const cell = GetCell(this.x + d[0], this.y +d[1]);
 782 |             cell && cell.SetPowered();
 783 |             return;
 784 |         }
 785 |         else if (this.type != CELL_TYPE_POWER && this.type != CELL_TYPE_POWER_LINE)
 786 |             return; // no need to update more
 787 | 
 788 |         // transfer power or rotate
 789 |         for(let i = 4; i--;)
 790 |         {
 791 |             const d = GetDirectionXY(i);
 792 |             const cell = GetCell(this.x + d[0], this.y +d[1]);
 793 |             cell && cell.SetPowered();
 794 |         }
 795 |     }
 796 |     
 797 |     Render(mode)
 798 |     {
 799 |         if (mode && (this.x < screenMinX | this.y < screenMinY | this.x > screenMaxX | this.y > screenMaxY))
 800 |             return; // cull offscreen objects
 801 | 
 802 |         if (mode == 1 && this.updateCount || mode == 3 && !this.updateCount) // new objects
 803 |             return;
 804 |             
 805 |         const iconRender = !mode;
 806 |         const percent = iconRender ? 1 : stepPercent;
 807 |         const x = Lerp(percent, this.lastX, this.x);
 808 |         const y = Lerp(percent, this.lastY, this.y);
 809 |         let set = this.powered;
 810 |         if (this.type == CELL_TYPE_COPY && this.preventSpawn ||             // active copier
 811 |                 this.type == CELL_TYPE_POWER && this.copyFrame == frame)    // object lost power due to active copier
 812 |             set = 2;
 813 | 
 814 |         if (this.type == CELL_TYPE_ROTATE)
 815 |         {
 816 |             const turnSpeed = set ? 4 : 1;
 817 |             this.angle += turnSpeed*(this.data ? 1 : -1) * deltaTime * bpm * bpmToStepsPerSecond/8;
 818 |         }
 819 |         else
 820 |             this.angle = 0;
 821 |         const scale = this.type == CELL_TYPE_KILL && set ? Lerp(.5+Math.cos(2*Math.PI*percent)/2, .8, 1) : 1;
 822 | 
 823 |         // set alpha when fading in
 824 |         context.globalAlpha = this.spawnFrame == frame ? percent : 1;
 825 | 
 826 |         if (scale == 1 && !this.angle)
 827 |         {
 828 |             // faster render with no scale or rotate
 829 |             context.drawImage(tilesCanvas, tilesScale*2*(this.data+CELL_MAX_DATA_COUNT*set)*cellSize, tilesScale*2*this.type*cellSize, 
 830 |                 tilesScale*cellSize, tilesScale*cellSize, cellSize*x, cellSize*y, cellSize, cellSize);
 831 |         }
 832 |         else
 833 |         {
 834 |             context.save();
 835 |             context.scale(cellSize, cellSize);
 836 |             context.translate(x+.5, y+.5);
 837 |             context.rotate(Math.PI * this.angle);
 838 |             context.drawImage(tilesCanvas, tilesScale*2*(this.data+CELL_MAX_DATA_COUNT*set)*cellSize, tilesScale*2*this.type*cellSize, 
 839 |                 tilesScale*cellSize, tilesScale*cellSize, -scale/2, -scale/2, scale, scale);
 840 |             context.restore();
 841 |         }
 842 | 
 843 |         const lightWeightMode0 = !iconRender && renderScale < 1;
 844 |         const lightWeightMode1 = !iconRender && renderScale <= .5;
 845 |         const lightWeightMode2 = !iconRender && renderScale <= .25;
 846 |         
 847 |         // draw extra info
 848 |         context.textAlign = 'center';
 849 |         context.textBaseline = 'middle';
 850 |         if (this.type == CELL_TYPE_NOTE)
 851 |         {
 852 |             if (!iconRender && !lightWeightMode0)
 853 |             {
 854 |                 // show connections
 855 |                 const leftCell = GetCell(this.x-1, this.y);
 856 |                 const upCell  = GetCell(this.x, this.y-1);
 857 |                 const w = .08;
 858 |                 if (leftCell && leftCell.type == CELL_TYPE_CONTROL)
 859 |                     FillRect(x-w, y+.2, 2*w, .6, '#fff');
 860 |                 if (upCell && upCell.type == CELL_TYPE_CONTROL)
 861 |                     FillRect(x+.2, y-w, .6, 2*w, '#fff');
 862 |             }
 863 | 
 864 |             context.fillStyle = '#fff';
 865 |             context.strokeStyle = '#000';
 866 |             context.lineWidth = 3;
 867 | 
 868 |             if (iconRender || !lightWeightMode2)
 869 |             {
 870 |                 if (this.attenuation)
 871 |                 {
 872 |                     context.font = '900 ' + cellSize*.4 + 'px arial';
 873 |                     const noteName = NoteName(this.key);
 874 |                     lightWeightMode0 || context.strokeText(noteName, (x+.5)*cellSize, (y+.34)*cellSize, cellSize*.8);
 875 |                     context.fillText(noteName, (x+.5)*cellSize, (y+.34)*cellSize, cellSize*.8);
 876 | 
 877 |                     const attenuationName = AttenuationName(this.attenuation);
 878 |                     lightWeightMode0 || context.strokeText(attenuationName, (x+.5)*cellSize, (y+.75)*cellSize, cellSize*.8);
 879 |                     context.fillText(attenuationName, (x+.5)*cellSize, (y+.75)*cellSize, cellSize*.8);
 880 |                 }
 881 |                 else
 882 |                 {
 883 |                     context.font = '900 ' + cellSize*.8 + 'px arial';
 884 |                     const noteName = NoteName(this.key);
 885 |                     lightWeightMode0 || context.strokeText(noteName, (x+.5)*cellSize, (y+.57)*cellSize, cellSize*.8);
 886 |                     context.fillText(noteName, (x+.5)*cellSize, (y+.57)*cellSize, cellSize*.8);
 887 |                 }
 888 |             }
 889 |         }
 890 |         else if (this.type == CELL_TYPE_CONTROL)
 891 |         {
 892 |             if (iconRender) // icon display values
 893 |             {
 894 |                 if (this.data % 2)
 895 |                     this.attenuation = this.data>1 ? 5 : 0;
 896 |                 else
 897 |                     this.key = this.data ? 12 : 0;
 898 |             }
 899 |             else if (!lightWeightMode0)
 900 |             {
 901 |                 // show connections
 902 |                 const leftCell = GetCell(this.x-1, this.y);
 903 |                 const upCell  = GetCell(this.x, this.y-1);
 904 |                 const w = .08;
 905 |                 if (leftCell && (leftCell.type == CELL_TYPE_CONTROL && leftCell.data % 2 == this.data % 2 || leftCell.type == CELL_TYPE_NOTE))
 906 |                     FillRect(x-w, y+.2, 2*w, .6, '#fff');
 907 |                 if (upCell && (upCell.type == CELL_TYPE_CONTROL && upCell.data % 2 == this.data % 2 || upCell.type == CELL_TYPE_NOTE))
 908 |                     FillRect(x+.2, y-w, .6, 2*w, '#fff');
 909 |             }
 910 | 
 911 |             if (iconRender || !lightWeightMode1)
 912 |             {
 913 |                 const text = this.data%2 ? AttenuationName(this.attenuation) : NoteName(this.key);
 914 |                 context.fillStyle = '#000'
 915 |                 context.font = cellSize/(this.data<2?3:2) + 'px arial';
 916 |                 context.fillText(text, (x+.5)*cellSize, (y+.51)*cellSize, cellSize*.8);
 917 |             }
 918 | 
 919 |             // flash when note plays
 920 |             frame == this.notePowerFrame && FillRect(x, y, 1, 1, '#fff8');
 921 |         }
 922 |         else if (this.type == CELL_TYPE_BLOCK && this.data == 3 && !iconRender && !lightWeightMode0)
 923 |         {
 924 |             // show connections
 925 |             const leftCell = GetCell(this.x-1, this.y);
 926 |             const upCell  = GetCell(this.x, this.y-1);
 927 |             if (leftCell && leftCell.type == this.type && leftCell.data == this.data)
 928 |                 FillRect(x-.5, y+.3, 1, .4, '#000');
 929 |             if (upCell && upCell.type == this.type && upCell.data == this.data)
 930 |                 FillRect(x+.3, y-.5, .4, 1, '#000');
 931 |         }
 932 |     }
 933 | 
 934 |     Rotate(direction)
 935 |     {
 936 |         const mirror = direction == 2;
 937 |         if (mirror && this.type == CELL_TYPE_ROTATE)
 938 |             this.data = this.data ? 0 : 1;
 939 |         if ((this.type == CELL_TYPE_POWER || this.type == CELL_TYPE_COPY|| this.type == CELL_TYPE_POWER_LINE) && this.data < 4)
 940 |         {
 941 |             if (mirror)
 942 |             {
 943 |                 if (this.data%2)
 944 |                     this.data = (this.data + 2) % 4;
 945 |             }
 946 |             else
 947 |                this.data = (this.data + 4 + direction) % 4;
 948 |         }
 949 |         else if (this.type == CELL_TYPE_BLOCK && this.data && this.data < 3)
 950 |             this.data = 1 + (this.data + 1 + direction) % 2;
 951 |     }
 952 | 
 953 |     GetInfoArray() { return [this.x, this.y, this.type, this.data]; }
 954 | }
 955 | 
 956 | ///////////////////////////////////////////////////////////////////////////////
 957 | // Cell control
 958 | 
 959 | function ClearLevel()
 960 | {
 961 |     cellObjects = [];
 962 |     //instruments = [...defaultInstruments];
 963 |     bpm = defaultBPM;
 964 |     keyOffset = 0;
 965 |     songName = '';
 966 | 
 967 |     InitLevel();
 968 | }
 969 | 
 970 | /*function Randomize()
 971 | {
 972 |     ClearLevel();
 973 | 
 974 |     const probabilities =
 975 |     [
 976 |         2,  // CELL_TYPE_BLOCK
 977 |         1,  // CELL_TYPE_POWER
 978 |         10, // CELL_TYPE_NOTE
 979 |         20, // CELL_TYPE_CONTROL
 980 |         1,  // CELL_TYPE_KILL
 981 |         2,  // CELL_TYPE_COPY
 982 |         2,  // CELL_TYPE_ROTATE
 983 |         5,  // CELL_TYPE_POWER_LINE
 984 |     ];
 985 |     const totalProbability = probabilities.reduce((p,c)=>p+=c);
 986 | 
 987 |     let maxCells = cellsWidth * cellsHeight;
 988 |     let x = Math.random()*cellsWidth | 0;
 989 |     let y = Math.random()*cellsHeight | 0;
 990 |     for(let i = maxCells / 4 | 0; i--;)
 991 |     {
 992 |         let type = 0, p = Math.random()*totalProbability;
 993 |         for(; type < probabilities.length && p > 0; ++type)
 994 |             p -= probabilities[type];
 995 | 
 996 |         const cell = SetCell(x, y, --type);
 997 |         cell.data = Math.random()*CellDataCount(type) | 0;
 998 | 
 999 |         x = Clamp(x + Math.random() * 5 - 2 | 0, cellsWidth-1);
1000 |         y = Clamp(y + Math.random() * 5 - 2 | 0, cellsHeight-1);
1001 |     }
1002 | }*/
1003 | 
1004 | function IsValidCell(x, y) { return x >= 0 && x < cellsWidth && y >= 0 && y < cellsHeight; }
1005 | function GetCell(x, y)     { return IsValidCell(x, y) && cellObjects[x + cellsWidth*y]; }
1006 | function SetCell(x, y, type = -1, data = 0)
1007 | {
1008 |     if (!IsValidCell(x, y))
1009 |         return;
1010 | 
1011 |     if (type >= 0)
1012 |         return cellObjects[x + cellsWidth*y] = new Cell(x, y, type, data);
1013 |     else
1014 |         delete cellObjects[x + cellsWidth*y];
1015 | }
1016 | 
1017 | function SetCellObject(x, y, object)
1018 | {
1019 |     if (!IsValidCell(x, y))
1020 |         return;
1021 |         
1022 |     if (object)
1023 |     {
1024 |         object.SetXY(x, y);
1025 |         return cellObjects[x + cellsWidth*y] = object;
1026 |     }
1027 |     else
1028 |         delete cellObjects[x + cellsWidth*y];
1029 | }
1030 | 
1031 | function GetCellPosFromScreenPos(x, y) 
1032 | { return [Math.floor((x/renderScale-renderOffsetX) / cellSize), Math.floor((y/renderScale-renderOffsetY) / cellSize)]; }
1033 | 
1034 | ///////////////////////////////////////////////////////////////////////////////
1035 | // Input
1036 | 
1037 | function CopyCells(remove = 0)
1038 | {
1039 |     copyCells = [];
1040 |     copyCellsWidth = selectAreaMaxX - selectAreaMinX + 1;
1041 | 
1042 |     for(let y = selectAreaMinY; y <= selectAreaMaxY; ++y)
1043 |     for(let x = selectAreaMinX; x <= selectAreaMaxX; ++x)
1044 |     {
1045 |         const cell = GetCell(x, y);
1046 |         copyCells.push([x-selectAreaMinX, y-selectAreaMinY, cell ? cell.type : -1, cell && cell.data]);
1047 |         remove && SetCell(x, y); // remove old cells if cut
1048 |     }
1049 |     InitCells();
1050 | }
1051 | 
1052 | function PasteCells(x, y, rotateDirection=0)
1053 | {
1054 |     if (copyCells)
1055 |     {
1056 |         let pasted = 0;
1057 |         copyCells.map(c=>
1058 |         {
1059 |             if (IsValidCell(c[0] + x, c[1] + y))
1060 |                 pasted = 1;
1061 | 
1062 |             let cell = SetCell(c[0] + x, c[1] + y, c[2], c[3]);
1063 |             if (cell)
1064 |             {
1065 |                 cell.Rotate(rotateDirection);
1066 |             }
1067 |         });
1068 | 
1069 |         if (pasted)
1070 |         {
1071 |             const copyCellsHeight = copyCells.length / copyCellsWidth;
1072 |             selectAreaMinX = Clamp(x, cellsWidth-1);
1073 |             selectAreaMinY = Clamp(y, cellsHeight-1);
1074 |             selectAreaMaxX = Clamp(x + copyCellsWidth-1, cellsWidth-1);
1075 |             selectAreaMaxY = Clamp(y + copyCellsHeight-1, cellsHeight-1);
1076 |             hasAreaSelect = 1;
1077 |             InitCells();
1078 |         }
1079 |         else
1080 |         {
1081 |             hasAreaSelect = 0; // did not copy anything
1082 |         }
1083 |     }
1084 |     Save();
1085 | }
1086 | 
1087 | function UpdateInput()
1088 | {
1089 |     let keyDown_control = keysDown[17];
1090 |     let keyDown_shift = keysDown[16];
1091 |     let keyDown_tab = keysDown[9];
1092 |     canvasHasMouse = document.body == document.activeElement && canvas == document.elementFromPoint(mouseX, mouseY);
1093 |     
1094 |     ///////////////////////////////////////////////////////////////////////////////
1095 |     // input update
1096 |     if (keysPressed[32]) // space = toggle edit
1097 |         ToggleEdit();
1098 | 
1099 |     const wasDrawing = drawing;
1100 |     const wasAreaSelecting = areaSelecting;
1101 |     const wasUsingEyedropper = usingEyedropper;
1102 |     drawing = 0;
1103 |     areaSelecting = 0;
1104 |     erasing = 0;
1105 |     usingEyedropper = 0;
1106 |     dragging = 0;
1107 | 
1108 |     if (mouseDown == 2 || keyDown_tab) // pan = middle mouse
1109 |     {
1110 |         dragging = 1;
1111 |         if (mouseDown)
1112 |         {
1113 |             if (mousePressed)
1114 |             {
1115 |                 dragStartX = mouseX/renderScale - renderOffsetX;
1116 |                 dragStartY = mouseY/renderScale - renderOffsetY;
1117 |             }
1118 | 
1119 |             renderOffsetX = mouseX/renderScale - dragStartX;
1120 |             renderOffsetY = mouseY/renderScale - dragStartY;
1121 |         }
1122 |     }
1123 |     if (mouseWheel | keysPressed[40] | keysPressed[38]) // zoom = mouse wheel or up/down
1124 |     {   
1125 |         // zoom towards edit object
1126 |         renderOffsetX = renderScale * (renderOffsetX / cellSize + editObject.x + .5);
1127 |         renderOffsetY = renderScale * (renderOffsetY / cellSize + editObject.y + .5);
1128 |         let renderScaleScale = keysPressed[40] ? .75 : keysPressed[38] ? 1/.75 : mouseWheel > 0 ? .9 : 1/.9;
1129 |         renderScale = Clamp(renderScale*renderScaleScale, 4, .1);
1130 |         renderOffsetX = cellSize * (renderOffsetX / renderScale - editObject.x - .5);
1131 |         renderOffsetY = cellSize * (renderOffsetY / renderScale - editObject.y - .5);
1132 |     }
1133 | 
1134 |     const editObjectPos = GetCellPosFromScreenPos(mouseX, mouseY);
1135 |     editObject.SetXY(editObjectPos[0], editObjectPos[1]);
1136 |     canvas.style.cursor = dragging ? 'grab' : '';
1137 | 
1138 |     // play mode shortcuts
1139 |     for(let mode = 0; mode < PLAY_MODE_COUNT; mode++)
1140 |     {
1141 |         if (keysPressed[mode + 49])
1142 |         {
1143 |             SetPlayMode(mode);
1144 |             break;
1145 |         }
1146 |     }
1147 | 
1148 |     if (!IsEditing())
1149 |         return;
1150 | 
1151 |     if (keyDown_control) // control down
1152 |     {
1153 |         if (keysPressed[90]) // undo = Z
1154 |             Undo();
1155 |         else if (keysPressed[89]) // redo = Y
1156 |             Redo();
1157 |         else if (keysPressed[67] || keysPressed[88]) // copy = C, cut = X
1158 |             CopyCells(keysDown[88]);
1159 |         else if (keysPressed[86] && copyCells) // V = paste
1160 |             PasteCells(editObject.x, editObject.y);
1161 |         else if (keysPressed[83]) // save = S
1162 |             ButtonSave();
1163 |         else if (keysPressed[86]) // load = V
1164 |             ButtonLoad();
1165 |     }
1166 |     else
1167 |     {
1168 |         // wasd movement
1169 |         const moveX = keysPressed[68] ? 1 : keysPressed[65] ? -1 : 0;
1170 |         const moveY = keysPressed[83] ? 1 : keysPressed[87] ? -1 : 0;
1171 |         
1172 |         if (moveX || moveY)
1173 |         {
1174 |             if (hasAreaSelect)
1175 |             {
1176 |                 CopyCells(1);
1177 |                 selectAreaMinX += moveX;
1178 |                 selectAreaMinY += moveY;
1179 |                 PasteCells(selectAreaMinX, selectAreaMinY);
1180 | 
1181 |                 if (!hasAreaSelect)
1182 |                     copyCells = 0;
1183 |             }
1184 |         }
1185 |         else if (keysPressed[84]) // T = Spread
1186 |         {
1187 |             if (hasAreaSelect)
1188 |             {
1189 |                 CopyCells(1);
1190 | 
1191 |                 // apply rotate
1192 |                 const copyCellsHeight = copyCells.length / copyCellsWidth;
1193 |                 const oldCopyCells = [...copyCells];
1194 |                 const w = copyCellsWidth*2-1;
1195 |                 const h = copyCellsHeight*2-1;
1196 | 
1197 |                 copyCells = [];
1198 |                 for(let y = 0; y < h; y++)
1199 |                 for(let x = 0; x < w; x++)
1200 |                 {
1201 |                     if (x%2 || y%2)
1202 |                     {
1203 |                         copyCells[x+w*y] = [x, y, -1, 0];
1204 |                         continue;
1205 |                     }
1206 | 
1207 |                     let cell = oldCopyCells[(x>>1)+copyCellsWidth*(y>>1)];
1208 |                     cell[0] = x;
1209 |                     cell[1] = y;
1210 |                     copyCells[x+w*y] = cell;
1211 |                 }
1212 |                 copyCellsWidth = w;
1213 |                 copyCells.length = w * h;
1214 | 
1215 |                 PasteCells(selectAreaMinX, selectAreaMinY);
1216 |             }
1217 | 
1218 |         }
1219 |         else if (keysPressed[82] || keysPressed[69] || keysPressed[81]) // X/Z=rotate Q=mirror
1220 |         {
1221 |             const direction = keysPressed[81] ? 2 : keysPressed[82] ? 1 : -1
1222 |             if (hasAreaSelect)
1223 |             {
1224 |                 CopyCells(1);
1225 | 
1226 |                 // apply rotate
1227 |                 const copyCellsHeight = copyCells.length / copyCellsWidth;
1228 |                 copyCells.map(c=>
1229 |                 {
1230 |                     let x, y;
1231 |                     if (direction == 2)
1232 |                     {
1233 |                         x = copyCellsWidth - c[0] - 1;
1234 |                         y = c[1];
1235 |                     }
1236 |                     else if (direction == 1)
1237 |                     {
1238 |                         x = copyCellsHeight - c[1] - 1;
1239 |                         y = c[0];
1240 |                     }
1241 |                     else
1242 |                     {
1243 |                         x = c[1];
1244 |                         y = copyCellsWidth - c[0] - 1;
1245 |                     }
1246 |                     c[0] = x;
1247 |                     c[1] = y;
1248 |                 });
1249 |                 if (direction < 2)
1250 |                     copyCellsWidth = copyCellsHeight;
1251 | 
1252 |                 PasteCells(selectAreaMinX, selectAreaMinY, direction);
1253 |             }
1254 |             else
1255 |             {
1256 |                 let cell = GetCell(editObject.x, editObject.y)
1257 |                 if (cell)
1258 |                     cell.Rotate(direction);
1259 |             }
1260 |         }
1261 |     }
1262 | 
1263 |     if (canvasHasMouse && !dragging)
1264 |     {
1265 |         if (keyDown_shift) // shift = area select
1266 |         {
1267 |             areaSelecting = 1;
1268 |             const hadAreaSelect = hasAreaSelect;
1269 | 
1270 |             const x = Clamp(editObject.x, cellsWidth-1);
1271 |             const y = Clamp(editObject.y, cellsHeight-1);
1272 | 
1273 |             if (mousePressed == 1 || mousePressed == 3 || (mouseDown == 1 || mouseDown == 3) && !hadAreaSelect)
1274 |             {
1275 |                 selectAreaStartX = x;
1276 |                 selectAreaStartY = y;
1277 |                 hasAreaSelect = 1;
1278 |             }
1279 |             if (mouseDown == 1 || mouseDown == 3 || hasAreaSelect && !hadAreaSelect)
1280 |             {
1281 |                 selectAreaMinX = Math.min(selectAreaStartX, x);
1282 |                 selectAreaMinY = Math.min(selectAreaStartY, y);
1283 |                 selectAreaMaxX = Math.max(selectAreaStartX, x);
1284 |                 selectAreaMaxY = Math.max(selectAreaStartY, y);
1285 |             }
1286 |         }
1287 |         else if ((mouseDown == 1 || mouseDown == 3 && keyDown_control || mouseButtons == 3)) // normal drawing/erasing mode
1288 |         {
1289 |             drawing = 1;
1290 |             hasAreaSelect = 0;
1291 |             
1292 |             let cell = GetCell(editObject.x, editObject.y);
1293 |             if (keyDown_control || mouseButtons == 3)  // erase mode
1294 |             {
1295 |                 SetCell(editObject.x, editObject.y);
1296 |                 IsPlaying() || InitCells();
1297 |                 erasing = 1;
1298 |             }
1299 |             else if (!cell || cell.type != editObject.type || cell.data != editObject.data) // draw mode
1300 |             {
1301 |                 cell = SetCell(editObject.x, editObject.y, editObject.type, editObject.data);
1302 |                 if (cell)
1303 |                 {
1304 |                     IsPlaying() || InitCells();
1305 |                     cell.angle = editObject.angle;
1306 |                     cell.Audition();
1307 |                     InitCells();
1308 |                 }
1309 |             }
1310 |         }
1311 |         else if (mouseDown == 3) // audition sound = right mouse
1312 |         {
1313 |             // only if mouse over new cell
1314 |             usingEyedropper = 1;
1315 |             if (lastEditX != editObject.x || lastEditY != editObject.y || mousePressed)
1316 |             {
1317 |                 
1318 |                 const cell = GetCell(editObject.x, editObject.y);
1319 |                 if (cell)
1320 |                 {
1321 |                     cell.Audition();
1322 |                     SetEditObject(cell.type, cell.data);
1323 |                 }
1324 |                 else
1325 |                 {
1326 |                     InitCells(1);
1327 |                 }
1328 |             }
1329 |         }
1330 |     }
1331 | 
1332 |     if (!areaSelecting && wasAreaSelecting)
1333 |         SaveUndo();
1334 | 
1335 |     if (!drawing && wasDrawing)
1336 |     {
1337 |         // exit draw mode
1338 |         drawing = 0;
1339 |         Save();
1340 |     }
1341 |     
1342 |     if (!usingEyedropper && wasUsingEyedropper)
1343 |         InitCells();
1344 | 
1345 |     lastEditX = editObject.x;
1346 |     lastEditY = editObject.y;
1347 | }
1348 | 
1349 | ///////////////////////////////////////////////////////////////////////////////
1350 | // Update
1351 | 
1352 | function LoadLevel(levelID)
1353 | {
1354 |     SetPlayMode();
1355 |     LoadSaveData(levelData[levelID]);
1356 |     InitLevel();
1357 | }
1358 | 
1359 | function InitLevel()
1360 | {
1361 |     // hide menu
1362 |     menu.style.display = '';
1363 |     hasAreaSelect = 0;
1364 |     SetPlayMode();
1365 |     UpdateUI();
1366 |     InitCells();
1367 |     Save();
1368 | }
1369 | 
1370 | function InitCells(noPower)
1371 | {
1372 |     soundCache = {};
1373 |     stepPercent = 0;
1374 |     frame = 0;
1375 |     frameSoundCount = 0;
1376 |     cellObjects.map(c=>c&&c.Reset());
1377 |     cellObjects.map(c=>c&&c.UpdatePowerPre());
1378 |     noPower || cellObjects.map(c=>c&&c.UpdatePower());
1379 |     cellObjects.map(c=>c&&c.UpdateControl());
1380 |     IsPlaying() && cellObjects.map(c=>c&&c.UpdateNotes());
1381 | }
1382 | 
1383 | function UpdateFrame()
1384 | {
1385 |     frame++;
1386 |     frameSoundCount = 0;
1387 | 
1388 |     // build update list
1389 |     updateListCells = [];
1390 |     cellObjects.map(c=>c&&c.BuildUpdateList());
1391 | 
1392 |     // clear move target array, tracks how many things are set to move onto each cell, if more then 1 its a collision
1393 |     cellMoveTargets = [];
1394 | 
1395 |     // test movement
1396 |     unpowerSet = new Set();
1397 |     updateListCells.map(c=>c.UpdateTestCopy());
1398 |     unpowerSet.forEach(c =>c.powered = 0 );
1399 | 
1400 |     updateListCells.map(c=>c.UpdateTestPowerMove());
1401 | 
1402 |     //now each object has a list of directions it wants to be moved in
1403 |     //- for spawning coppiers, the move list is for spawning movement, not self movement
1404 | 
1405 |     // collision detect, filter objects moving in multiple directions, get overlapping move targets positions
1406 |     cellObjects.map(c=>c&&c.UpdateCollisionDetect());
1407 | 
1408 |     // actual movement and collision detect part 2
1409 |     updateListCells.map(c=>c.UpdateMovement());
1410 | 
1411 |     // update everything else
1412 |     cellObjects.map(c=>c&&c.UpdatePowerPre());
1413 |     cellObjects.map(c=>c&&c.UpdatePower());
1414 |     cellObjects.map(c=>c&&c.UpdateControl());
1415 |     cellObjects.map(c=>c&&c.UpdateNotes());
1416 | }
1417 | 
1418 | function Update(animationTime = 0)
1419 | {
1420 |     requestAnimationFrame(Update);
1421 | 
1422 |     if (!--wantsToShare)
1423 |     {
1424 |         loadingMessageDisplay.style.display = 'none';
1425 | 
1426 |         const crushed = JSONCrush(GetSaveString());
1427 |         const url = new URL(window.location.href);
1428 |         //url.searchParams.append('c', crushed);
1429 |         url.search = '&c=' + crushed;
1430 |         
1431 |         try { 
1432 |             navigator['clipboard']['writeText'](url.toString()); alert('👍 Link copied!') 
1433 |         }
1434 |         catch (e) { ShowError(); }
1435 |     }
1436 | 
1437 |     if (!hasFocus && document.hasFocus())
1438 |     {
1439 |         // todo: prevent stuck input
1440 |         keysPressed = [];
1441 |         keysDown = [];
1442 |         mouseDown = mouseButtons = mousePressed = mouseWheel = 0;
1443 |     }
1444 |     hasFocus = document.hasFocus();
1445 | 
1446 |     UpdateInput();
1447 | 
1448 |     // update time
1449 |     deltaTime = Math.min(.1, (animationTime - lastTime)/1e3);
1450 |     lastTime = animationTime;
1451 |     deltaTime *= GetPlaySpeed();
1452 |     stepPercent += bpm*bpmToStepsPerSecond*deltaTime;
1453 | 
1454 |     // update frame
1455 |     if (IsEditing() || IsPaused() || IsStepping() && pauseStep)
1456 |     {
1457 |         stepPercent = Math.min(stepPercent, 1);
1458 |         if (stepPercent == 1 && pauseStep)
1459 |         {
1460 |             SetPlayMode(PLAY_MODE_PAUSE);
1461 |             pauseStep = 0;
1462 |         }
1463 |     }
1464 |     else if (stepPercent > 1)
1465 |     {
1466 |         UpdateFrame();
1467 |         stepPercent = Math.min(stepPercent-1,1);
1468 | 
1469 |         if (IsStepping())
1470 |             pauseStep = 1;
1471 |     }
1472 | 
1473 |     ///////////////////////////////////////////////////////////////////////////////
1474 |     // render
1475 | 
1476 |     canvas.width = innerWidth;
1477 |     canvas.height = innerHeight;
1478 |     
1479 |     // prevent center from moving too far away
1480 |     renderOffsetX = Clamp(renderOffsetX, canvas.width/2/renderScale, canvas.width/2/renderScale-cellsWidth*cellSize);
1481 |     renderOffsetY = Clamp(renderOffsetY, canvas.height/2/renderScale, canvas.height/2/renderScale-cellsHeight*cellSize);
1482 | 
1483 |     context.fillStyle = '#112'
1484 |     context.fillRect(0, 0, canvas.width, canvas.height);
1485 |     context.scale(renderScale, renderScale);
1486 |     context.translate(renderOffsetX, renderOffsetY);
1487 | 
1488 |     [screenMinX, screenMinY] = GetCellPosFromScreenPos(0,0);
1489 |     [screenMaxX, screenMaxY] = GetCellPosFromScreenPos(innerWidth, innerHeight);
1490 | 
1491 |     // background
1492 |     FillRect(0, 0, cellsWidth, cellsHeight, '#080808');
1493 |     
1494 |     // draw grid
1495 |     for(let i = 0; i < cellsWidth/4; ++i)
1496 |         FillRect(i*4, 0, 1, cellsHeight, '#111');
1497 |     for(let i = 0; i < cellsHeight/4; ++i)
1498 |         FillRect(0, i*4, cellsWidth, 1, '#111');
1499 | 
1500 |     // draw lines around cells
1501 |     context.fillStyle = '#000';
1502 |     for(let i = 0; i <= cellsWidth; ++i)
1503 |         context.fillRect(i*cellSize-1, 0, 2, cellsHeight*cellSize);
1504 |     for(let i = 0; i <= cellsHeight; ++i)
1505 |         context.fillRect(0, i*cellSize-1, cellsWidth*cellSize, 2);
1506 | 
1507 |     // render cells
1508 |     cellObjects.map(c=>c&&c.Render(1)); // render newly spawned first
1509 |     cellObjects.map(c=>c&&c.Render(2)); // render all others
1510 | 
1511 |     if (IsEditing())
1512 |     {
1513 |         // check if mouse is over canvas or ui
1514 |         if (hasFocus && (canvasHasMouse || drawing) && !dragging && !areaSelecting && IsValidCell(editObject.x, editObject.y)) // edit object
1515 |         {
1516 |             FillRect(editObject.x-.1, editObject.y-.1, 1.2, 1.2, 0, .1,
1517 |                 usingEyedropper ? '#0ff' : erasing ? '#f00' : '#fff');
1518 |             //usingEyedropper || erasing || editObject.Render();
1519 |         }
1520 | 
1521 |         if (hasAreaSelect) // select box
1522 |         {
1523 |             const minX = Math.min(selectAreaMinX, selectAreaMaxX);
1524 |             const minY = Math.min(selectAreaMinY, selectAreaMaxY);
1525 |             const maxX = Math.max(selectAreaMinX, selectAreaMaxX);
1526 |             const maxY = Math.max(selectAreaMinY, selectAreaMaxY);
1527 |             FillRect(minX-.1, minY-.1, maxX-minX + 1.2, maxY-minY + 1.2, 0, .1, '#0f0');
1528 |         }
1529 |     }
1530 |     
1531 |     ///////////////////////////////////////////////////////////////////////////////
1532 |     // update html / css
1533 | 
1534 |     rotateIcons.map( (i, j)=> i.style.transform = `rotate(${animationTime/2e3*(j? -1 : 1)}rad)`)
1535 |     
1536 |     const songBeat = Math.max(0,(frame + stepPercent-1));
1537 |     beatDisplaySpinner.style.transform = `rotate(${songBeat*Math.PI/4}rad)`;
1538 | 
1539 |     const songTime = songBeat/bpm/bpmToStepsPerSecond;
1540 |     const seconds = songTime%60|0;
1541 |     songTimeDisplay.innerText = (songTime/60|0) +':' + (seconds>9?'':'0') + seconds;
1542 | 
1543 |     // watermark and fps
1544 |     const frameFPSTimeNew = performance.now();
1545 |     fps = fps*.9 + .1 * (1e3/(frameFPSTimeNew - frameFPSTime));
1546 |     frameFPSTime = frameFPSTimeNew;
1547 |     watermarkDisplay.innerText = (debug? (fps|0) + ' FPS ' : '') + programName + ' v' + programVersion;
1548 | 
1549 |     // context.drawImage(tilesCanvas, 0, 0); // test render tiles
1550 | 
1551 |     ///////////////////////////////////////////////////////////////////////////////
1552 |     // clean up frame
1553 | 
1554 |     keysPressed = [];
1555 |     mousePressed = mouseWheel = 0;
1556 | }
1557 | 
1558 | ///////////////////////////////////////////////////////////////////////////////
1559 | // Save / Load
1560 | 
1561 | const C_Frequency = 261.6255653005986;
1562 | 
1563 | const defaultInstruments = 
1564 | [
1565 |     [2,0,C_Frequency,,1,,1,,,,,,.2,,,,.01,.5,.01,.2],  // lead
1566 |     [,0,C_Frequency/2,,1,,,2,,,.5,,,,,.1,,.4,.05],     // bass
1567 |     [1.3,0,C_Frequency/4,,.02,,,1.5,,,,,,5,,,,.7,.02], // kick
1568 |     [.5,0,260,,,.04,,,,,,,.1,99,,,,2,.005,.2],         // hat
1569 | ];
1570 | 
1571 | function GetSaveString(saveCamera = 1)
1572 | {
1573 |     const cellsSave = IsPlaying() ? cellSavedObjects : cellObjects;
1574 | 
1575 |     const cellsData = [];
1576 |     cellsSave.map((cell, i)=>
1577 |     {
1578 |         cell && cellsData.push(...cell.GetInfoArray());
1579 |     });
1580 | 
1581 |     return JSON.stringify(
1582 |     [
1583 |         dataVersion,
1584 |         songName,
1585 |         bpm,
1586 |         keyOffset,
1587 |         renderOffsetX|0,
1588 |         renderOffsetY|0,
1589 |         saveCamera ? renderScale*1e3|0 : 0,
1590 |         saveInstruments ? instruments : 0,
1591 |         0, // not used, old cell ids
1592 |         cellsData,
1593 |         cellsWidth,
1594 |         cellsHeight
1595 |     ]);
1596 | }
1597 | 
1598 | function LoadSaveString(dataString)
1599 | {
1600 |     LoadSaveData(JSON.parse(dataString, (key, value) => value === null ? undefined : value));
1601 | }
1602 | 
1603 | function LoadSaveData(data)
1604 | {
1605 |     let version = data[0];
1606 | 
1607 |     let renderOffsetXNew, renderOffsetYNew, renderScaleNew, cellData, cellIDs;
1608 | 
1609 |     if (version != dataVersion)
1610 |     {
1611 |         /*const oldVersion = data.shift();
1612 |         if (oldVersion > 0 && oldVersion < 4)
1613 |         {
1614 |             cellData = version;
1615 |             [bpm, keyOffset, cellsWidth, cellsHeight, songName, instruments, renderScaleNew, renderOffsetXNew, renderOffsetYNew] = data;
1616 |         }
1617 |         else*/
1618 |         {
1619 |             ShowError();
1620 |             ClearLevel()
1621 |             return;
1622 |         }
1623 |     }
1624 | 
1625 |     // convert old powerlines to multi directional
1626 |     //version <= 2 && cellObjects.map(cell=>cell && cell.type == CELL_TYPE_POWER_LINE && (cell.data = 4));
1627 |     
1628 |     let cellsData = [];
1629 |     let cellsIDs = [];
1630 | 
1631 |     [version, songName, bpm, keyOffset, renderOffsetXNew, renderOffsetYNew, renderScaleNew, instruments, cellsIDs, cellData, cellsWidth, cellsHeight] = data;
1632 | 
1633 |     cellObjects = [];
1634 |     
1635 |     for(let j = 0; j < cellData.length;)
1636 |         SetCell(cellData[j++], cellData[j++], cellData[j++], cellData[j++]);
1637 |     instruments || (instruments = [...defaultInstruments]);
1638 |     
1639 |     if (renderScaleNew)
1640 |     {
1641 |         renderScale = renderScaleNew / 1e3;
1642 |         renderOffsetX = renderOffsetXNew;
1643 |         renderOffsetY = renderOffsetYNew;
1644 |     }
1645 | 
1646 |     InitCells();
1647 |     UpdateUI();
1648 | }
1649 | 
1650 | function Save()
1651 | {
1652 |     SaveInternal();
1653 |     SaveUndo();
1654 | }
1655 | 
1656 | function SaveInternal()
1657 | {
1658 |     localStorage[programName + 'Save'] = JSON.stringify([
1659 |         dataGlobalVersion,
1660 |         volume
1661 |     ]);
1662 |     localStorage[programName + 'SaveLevel'] = GetSaveString();
1663 | }
1664 | 
1665 | function Load() // only happens on startup
1666 | {
1667 |     // load save data
1668 |     try
1669 |     {
1670 |         const saveObject = JSON.parse(localStorage[programName + 'Save']);
1671 |         if (saveObject[0] == dataGlobalVersion)
1672 |         {
1673 |             volume = saveObject[1];
1674 |         }
1675 |     }
1676 |     catch(e) 
1677 |     {
1678 |         // load demo
1679 |     }
1680 |     
1681 |     const url = new URL(window.location.href);
1682 |     try
1683 |     {
1684 |         // try to load crushed url
1685 |         const crushedString = url.searchParams.get('c');
1686 |         LoadSaveString(JSONUncrush(crushedString));
1687 |         InitLevel();
1688 |     }
1689 |     catch(e)
1690 |     {
1691 |         try
1692 |         {
1693 |             LoadSaveString(localStorage[programName + 'SaveLevel']);
1694 |             InitLevel();
1695 |         }
1696 |         catch (e) { 
1697 |             LoadLevel(0);
1698 |         }
1699 |     }
1700 | 
1701 |     // get rid of search in url
1702 |     url.search = '';
1703 |     window.history.pushState(null,null,url.toString());
1704 | }
1705 | 
1706 | ///////////////////////////////////////////////////////////////////////////////
1707 | // Play Controls
1708 | 
1709 | function IsEditing()      { return playMode == PLAY_MODE_STOP; }
1710 | function IsPlaying()      { return playMode > PLAY_MODE_STOP; }
1711 | function IsPaused()       { return IsEditing() || playMode == PLAY_MODE_PAUSE; }
1712 | function IsStepping()     { return playMode == PLAY_MODE_STEP; }
1713 | function ToggleEdit()     { SetPlayMode(IsEditing()); }
1714 | function GetPlaySpeed()   { return playMode == PLAY_MODE_FAST ? 8 : IsPlaying() ? 1 : 1/4; }
1715 | 
1716 | function SetPlayMode(playModeNew = 0)
1717 | {
1718 |     if (playMode == playModeNew)
1719 |         return;
1720 | 
1721 |     if (playMode >= 0) // enable color transition
1722 |         beatDisplay.style.transition = '.5s';
1723 | 
1724 |     const wasPlaying = IsPlaying();
1725 |     const playModeOld = playMode;
1726 |     playMode = playModeNew;
1727 |     
1728 |     // set buttons style
1729 |     playModes.map((mode, i)=>
1730 |     {
1731 |         const e = mode[3];
1732 |         const isActive = i == playMode;
1733 |         e.style.background = isActive ? mode[1] : '#555';
1734 |         e.style.border = '4px solid ' + (isActive ? '#fff' : '#000');
1735 |         
1736 |         // set beat display color
1737 |         if (isActive) 
1738 |             beatDisplay.style.background = i==0? '#888' : e.style.background;
1739 |     });
1740 | 
1741 |     if (wasPlaying != IsPlaying())
1742 |     {
1743 |         // make/load copy of cells while playing
1744 |         if (wasPlaying)
1745 |             cellObjects.map(c=>c && c.Destroy());
1746 |         else
1747 |             cellSavedObjects = cellObjects.map(c=>c && (new Cell(...c.GetInfoArray())));
1748 | 
1749 |         cellObjects = cellSavedObjects.map(c=>c && (new Cell(...c.GetInfoArray())));
1750 |         InitCells();
1751 |     }
1752 | }
1753 | 
1754 | ///////////////////////////////////////////////////////////////////////////////
1755 | // UI
1756 | 
1757 | const PLAY_MODE_STOP  = 0;
1758 | const PLAY_MODE_PLAY  = 1;
1759 | const PLAY_MODE_PAUSE = 2;
1760 | const PLAY_MODE_STEP  = 3;
1761 | const PLAY_MODE_FAST  = 4;
1762 | const PLAY_MODE_COUNT = 5;
1763 | 
1764 | const playModes = 
1765 | [
1766 |     ['⏹️', '#f00', 'Stop'],
1767 |     ['▶️', '#0f0', 'Play'],
1768 |     ['⏸️', '#ff0', 'Pause'],
1769 |     ['⏯️', '#0ff', 'Step'],
1770 |     ['⏩', '#f0f', 'Fast Forward'],
1771 | ];
1772 | 
1773 | const objectIconToolbar = 
1774 | [
1775 |     [1,0],[1,1],[1,2],[1,3],[1,4], // CELL_TYPE_POWER
1776 |     [7,0],[7,1],[7,2],[7,3],[7,4], // CELL_TYPE_POWER_LINE
1777 |     [6,1],                         // CELL_TYPE_ROTATE
1778 |     [3,2],[3,0],                   // CELL_TYPE_CONTROL
1779 |     [2,0],[2,1],                   // CELL_TYPE_NOTE
1780 | 
1781 |     [5,0],[5,1],[5,2],[5,3],[5,4], // CELL_TYPE_COPY
1782 |     [0,0],[0,1],[0,2],[0,3],       // CELL_TYPE_BLOCK
1783 |     [4,0],                         // CELL_TYPE_KILL
1784 |     [6,0],                         // CELL_TYPE_ROTATE
1785 |     [3,3],[3,1],                   // CELL_TYPE_CONTROL
1786 |     [2,2],[2,3],                   // CELL_TYPE_NOTE
1787 | ];
1788 | 
1789 | function SetEditObject(type, data)
1790 | {
1791 |     editObject.type = type;
1792 |     editObject.data = data;
1793 |     editObject.Reset();
1794 | 
1795 |     // update toolbar selection
1796 |     objectIconToolbar.map(i=>{
1797 |         const selected = i[0] == type && i[1] == data;
1798 |         i[2].style.border = selected ? '4px solid #f00' : '2px solid #000';
1799 |         i[2].style.padding = selected ? 2 : 4;
1800 |         i[2].style.background = selected? '#ccc' : '#444';
1801 |     });
1802 | }
1803 | 
1804 | function UpdateUI()
1805 | {
1806 |     inputSongName.value = songName;
1807 |     inputBPM.value = bpm = Clamp(bpm|0, inputBPM.max = 360, inputBPM.min = 30);
1808 |     inputKey.value = keyOffset = Clamp(keyOffset|0, inputKey.max = 60, inputKey.min = 0);
1809 |     inputVolume.value = volume*100;
1810 |     iconVolume.innerHTML = volume > .7 ? '🔊' : volume > .2 ? '🔉' : volume ? '🔈' : '🔇'
1811 |     document.title = programIcon + ' ' + programName + ' - ' + (songName ? songName : programSubName);
1812 | 
1813 |     if (volumeGain)
1814 |         volumeGain.gain.value = volume;
1815 | 
1816 |     BuildToolbarIcons();
1817 | }
1818 | 
1819 | function CreateElement(tag, parent, className='', style='', innerHTML='', title='')
1820 | {
1821 |     const e = parent.appendChild(document.createElement(tag));
1822 |     e.className = className;
1823 |     e.style = style;
1824 |     e.innerHTML = innerHTML;
1825 |     e.title = title;
1826 |     return e;
1827 | }
1828 | 
1829 | function BuildToolbarIcons()
1830 | {
1831 |     const iconsToolbar = CreateElement('div', toolbarEditControls);
1832 |     objectIconToolbar.map((objectIcon, i)=>
1833 |     {
1834 |         const type = objectIcon[0];
1835 |         const data = objectIcon[1];
1836 | 
1837 |         // get or create div and canvas for icons
1838 |         if (!objectIcon[2])
1839 |         {
1840 |             objectIcon[2] = CreateElement('div', iconsToolbar, '', 'display:inline-block');
1841 |             objectIcon[3] = CreateElement('canvas', objectIcon[2], '', '', '', GetCellTypeDescription(...objectIcon));
1842 | 
1843 |             // keep track of the icons that rotate
1844 |             type == CELL_TYPE_ROTATE && rotateIcons.push(objectIcon[3]);
1845 |         }
1846 | 
1847 |         // render the icon
1848 |         const iconCanvas = objectIcon[3];
1849 |         context = iconCanvas.getContext('2d');
1850 |         iconCanvas.height = iconCanvas.width = cellSize;
1851 |         const cell = new Cell(0, 0, type, data);
1852 |         cell.Render();
1853 | 
1854 |         // select event
1855 |         iconCanvas.onmousedown = iconCanvas.onmouseover = e=> drawing || dragging || e.buttons && SetEditObject(type, data);
1856 | 
1857 |         // next row
1858 |         (i==objectIconToolbar.length/2-1) && CreateElement('br', iconsToolbar);
1859 |     });
1860 | 
1861 |     context = canvas.getContext('2d');
1862 | }
1863 | 
1864 | function BuildHTML()
1865 | {
1866 |     let body = document.body, e;
1867 | 
1868 |     // main elements
1869 |     toolbar = CreateElement('div', body, 'toolbar');
1870 | 
1871 |     toolbarTop = CreateElement('div', toolbar, 'toolbarTop');
1872 |     toolbarEditControls = CreateElement('div', toolbar, 'toolbarEditControls');
1873 |     canvas = CreateElement('canvas', body);
1874 |     downloadLink = CreateElement('a', body, '', 'display:none');
1875 |     inputFile = CreateElement('input', body, '', 'display:none');
1876 |     inputFile.type = 'file';
1877 |     inputFile.accept = extension;
1878 | 
1879 |     BuildTiles();
1880 |     BuildToolbarIcons();
1881 | 
1882 |     // watermark
1883 |     watermarkDisplay = CreateElement('div', body, 'watermark');
1884 | 
1885 |     // top toolbar
1886 |     inputSongName = CreateElement('input', toolbarTop, '', 'font-size:30;height:50;width:530');
1887 |     inputSongName.placeholder = 'Song Name';
1888 |     inputSongName.onchange = e=> Save(UpdateUI(songName = e.target.value));
1889 | 
1890 |     const toolbarSettings = CreateElement('div', toolbarTop,'','margin-right:4;margin-left:4;text-align:center');
1891 | 
1892 |     e = CreateElement('span', toolbarSettings, '', '', 'BPM');
1893 |     inputBPM = e = CreateElement('input', toolbarSettings, '', '', '', 'Beats Per Minute - How fast the song is');
1894 |     e.onchange = e=> Save(UpdateUI(bpm = e.target.value));
1895 |     e.type = 'number';
1896 | 
1897 |     CreateElement('br', toolbarSettings);
1898 |     e = CreateElement('span', toolbarSettings, '', '', 'Key');
1899 |     inputKey = e = CreateElement('input', toolbarSettings, '', '', '', 'Transpose song key');
1900 |     e.onchange = e=> Save(UpdateUI(keyOffset = e.target.value));
1901 |     e.type = 'number';
1902 | 
1903 |     // instrument select
1904 |     const instrumentsToolbar = CreateElement('div', toolbarTop, '', 'margin-right:8');
1905 |     for(let i = 0; i < 4; ++i)
1906 |     {
1907 |         e = CreateElement('div', instrumentsToolbar, `instrumentButton${i} menuButton`, 'width:30', i+1, `Instrument ${i+1} Paremeters`);
1908 |         e.onmousedown =e=>
1909 |         {
1910 |             zzfx(...instruments[i]);
1911 |             let code = prompt(`🎹 Instrument ${i+1} ZzFX Code`, `zzfx(...${JSONStringifyNoNull(instruments[i])})`);
1912 |             if (!code)
1913 |                 return;
1914 | 
1915 |             code = code.split('[')[1];
1916 |             if (!code)
1917 |             {
1918 |                 ShowError();
1919 |                 return;
1920 |             }
1921 | 
1922 |             // split up parameters
1923 |             instruments[i] = code.split(',').map(p=>p.length? parseFloat(p) : undefined);
1924 |             zzfx(...instruments[i]);
1925 |             alert('Instrument Loaded!');
1926 |         }
1927 |         i-1 || CreateElement('br', instrumentsToolbar);
1928 |     }
1929 | 
1930 |     // buttons
1931 |     const buttonsToolbar = CreateElement('div', toolbarTop, '', '');
1932 |     [
1933 |         ['Save',    ButtonSave,     'Save to disk (current song is auto saved)'],
1934 |         ['Load',    ButtonLoad,     'Load from disk (you can also drag and drop)'],
1935 |         ['New',     ButtonClear,    'Start a new song'],
1936 |         ['Share',   ButtonShare,    'Share a compressed link'],
1937 |         ['Export',  ButtonExport,   'Export to ZzFXM and OS13k'],
1938 |         ['Demos',   ButtonMenu,     'Load a demo'],
1939 |     ]
1940 |     .map((button,i)=>{
1941 |         e = CreateElement('div', buttonsToolbar, 'menuButton', '', button[0]);
1942 |         e.onmousedown = button[1];
1943 |         e.title = button[2];
1944 |         i-2 || CreateElement('br', buttonsToolbar);
1945 |     });
1946 | 
1947 |     // beat display circle
1948 |     const beatDisplayWrapper = CreateElement('div', toolbarEditControls);
1949 |     beatDisplay = CreateElement('div', beatDisplayWrapper, 'beatDisplay');
1950 |     beatDisplay.onmousedown=e=>ToggleEdit();
1951 |     beatDisplaySpinner = CreateElement('div', beatDisplay, 'beatDisplaySpinner');
1952 |     beatDisplaySpinner.title = 'Toggle Play [Space]'
1953 |     e = CreateElement('div', beatDisplaySpinner, 'beatDisplayMarker');
1954 |     songTimeDisplay = CreateElement('div', beatDisplayWrapper, 'songTimeDisplay');
1955 | 
1956 |     // play controls
1957 |     const playControlToolbarWrapper = CreateElement('div', toolbarEditControls);
1958 |     const playControlToolbar = CreateElement('div', playControlToolbarWrapper);
1959 |     playModes.map((mode, i)=>
1960 |     {
1961 |         mode[3] = e = CreateElement('div', playControlToolbar, 'playControl', '', mode[0], mode[2] + ` [${i+1}]`);
1962 |         e.onmousedown = e=> SetPlayMode(i);
1963 |     });
1964 | 
1965 |     // volume
1966 |     const volumeSettings = CreateElement('div', playControlToolbarWrapper, '', 'display:flex');
1967 |     iconVolume = CreateElement('div', volumeSettings, '', 'width:30');
1968 |     inputVolume = e = CreateElement('input', volumeSettings, '', 'width:230;margin:0');
1969 |     e.oninput = e=> {volume = Clamp(e.target.value|0,100,0)/100, UpdateUI()};
1970 |     e.onchange = e=> Save(e.target.blur());
1971 |     e.type = 'range';
1972 | 
1973 |     // load message
1974 |     loadingMessageDisplay = CreateElement('div', body, 'loadingMessage');
1975 | 
1976 |     // menu
1977 |     menu = CreateElement('div', toolbar, 'menu');
1978 | 
1979 |     levelData.map((level, i)=>
1980 |     {
1981 |         e = CreateElement('div', menu, 'level', '', level[1]);
1982 |         e.onmousedown = e=>LoadLevel(i);
1983 |     });
1984 | 
1985 |     cellObjects = [];
1986 |     UpdateUI();
1987 |     SetEditObject(CELL_TYPE_NOTE, 0);
1988 |     SetPlayMode();
1989 | 
1990 |     context = canvas.getContext('2d');
1991 | }
1992 | 
1993 | function GetCellTypeDescription(type, data)
1994 | {
1995 |     let description = cellTypeInfo[type][0];
1996 | 
1997 |     if (type == CELL_TYPE_BLOCK)
1998 |     {
1999 |         description = [
2000 |             'Push',
2001 |             'Horzontial Push',
2002 |             'Vertical Push',
2003 |             'Solid'
2004 |         ][data] + ' ' + description;
2005 |     }
2006 |     else if (type == CELL_TYPE_POWER)
2007 |         description += data < 4 ? ' Mover' : ' Stationary';
2008 |     else if (type == CELL_TYPE_CONTROL && data%2)
2009 |         description = (data>1? 'Half Attenuate ' : 'Attenuate ') + description;
2010 |     else if (type == CELL_TYPE_CONTROL)
2011 |         description = (data? 'Octave Key ' : 'Semitone Key ') + description;
2012 |     else if (type == CELL_TYPE_COPY)
2013 |         description += (data < 4 ? ' Direction' : ' All Directions');
2014 |     else if (type == CELL_TYPE_ROTATE)
2015 |         description += (data ? ' CW' : ' CCW');
2016 |     return description;
2017 | }
2018 | 
2019 | ///////////////////////////////////////////////////////////////////////////////
2020 | // UI Buttons
2021 | 
2022 | function RemoveFocus() { document.activeElement && document.activeElement.blur(); }
2023 | 
2024 | function ButtonSave()
2025 | {
2026 |     RemoveFocus();
2027 |     UpdateUI();
2028 |     downloadLink.href = URL.createObjectURL(new Blob([GetSaveString()]));
2029 |     downloadLink.download = (songName || 'Song') + extension;
2030 |     downloadLink.click();
2031 | }
2032 | 
2033 | function LoadFile(file)
2034 | {
2035 |     const reader = new FileReader();
2036 |     reader.onload = e=>
2037 |     {
2038 |         SetPlayMode();
2039 |         const oldSaveString = GetSaveString();
2040 | 
2041 |         try
2042 |         {
2043 |             LoadSaveString(e.target.result);
2044 |         }
2045 |         catch(e) 
2046 |         {
2047 |             ShowError();
2048 |             
2049 |             // reload orginal level
2050 |             LoadSaveString(oldSaveString);
2051 |         }
2052 |         InitLevel();
2053 |         Save();
2054 |         inputFile.value = ''; // reset input so same file can be reloaded
2055 |     }
2056 |     file && reader.readAsText(file);
2057 | }
2058 | 
2059 | // allow drag and drop code into editor
2060 | ondragover = e=> false;
2061 | ondrop = e=>
2062 | {
2063 |     LoadFile(e.dataTransfer.files[0]); 
2064 |     return false;
2065 | }
2066 | 
2067 | function ButtonLoad()
2068 | {
2069 |     inputFile.onchange=e=>LoadFile(e.target.files[0]);
2070 |     inputFile.click();
2071 | } 
2072 | 
2073 | function ButtonClear()
2074 | {
2075 |     SetPlayMode();
2076 |     let levelSize = prompt('📐 Level Size?', 101);
2077 | 
2078 |     if (!levelSize)
2079 |         return;
2080 | 
2081 |     levelSize = Clamp(levelSize|0, 1000, 25);
2082 |     cellsWidth = levelSize;
2083 |     cellsHeight = levelSize;
2084 | 
2085 |     ClearLevel();
2086 | }
2087 | 
2088 | function ButtonShare()
2089 | {
2090 |     if (!wantsToShare) // prevent double clicking button
2091 |         return;
2092 |     loadingMessageDisplay.style.display = 'block';
2093 |     loadingMessageDisplay.innerHTML = '🗜️ Compressing URL...';
2094 |     wantsToShare = 2;
2095 | }
2096 | 
2097 | function ButtonExport()
2098 | {
2099 |     let beatCount = prompt("🥁 Export How many beats?", bpm);
2100 |     beatCount = Clamp(beatCount, bpm*10);
2101 |     if (!beatCount)
2102 |         return;
2103 | 
2104 |     Export(beatCount);
2105 | }
2106 | 
2107 | function ButtonMenu()
2108 | {
2109 |     menu.style.display = menu.style.display ? '' : 'block';
2110 | }
2111 | 
2112 | function ShowError()
2113 | {
2114 |     alert('👾 I am Error.');
2115 |     localStorage['OS13kTrophy,👾,NoteCraft,Found Bagu'] = 'Caused an error';
2116 | }
2117 | 
2118 | ///////////////////////////////////////////////////////////////////////////////
2119 | // Rendering
2120 | 
2121 | const tilesScale = 2;
2122 | 
2123 | function BuildTiles()
2124 | {
2125 |     // create a canvas with each tile
2126 |     tilesCanvas = tilesCanvas || CreateElement('canvas', document.body, '', 'display:none');
2127 |     tilesCanvas.height = tilesScale * 2 * CELL_TYPE_COUNT * cellSize;
2128 |     tilesCanvas.width = tilesScale * 2 * 3 * CELL_MAX_DATA_COUNT * cellSize;
2129 | 
2130 |     context = tilesCanvas.getContext('2d');
2131 |     context.scale(tilesScale, tilesScale);
2132 |     for(let type = 0; type < CELL_TYPE_COUNT; ++type)
2133 |     for(let data = 0; data < CellDataCount(type); ++data)
2134 |     for(let set = 0; set < 3; ++set)
2135 |     {
2136 |         // render cell
2137 |         const x = 2*(data + set*CELL_MAX_DATA_COUNT);
2138 |         const y = 2*type;
2139 | 
2140 |         // get color
2141 |         let hue = 0, saturation = 1, lightness = .5;
2142 |         if (type == CELL_TYPE_BLOCK && data < 3)
2143 |             saturation = .2, hue = .1, lightness = .4;
2144 |         else if (type == CELL_TYPE_BLOCK)
2145 |             saturation = 0, lightness = 0;
2146 |         else if (type == CELL_TYPE_POWER)
2147 |             hue = 1/6;
2148 |         else if (type == CELL_TYPE_CONTROL)
2149 |         {
2150 |             saturation = data<2 ? .2 : .7;
2151 |             lightness = set ? .9 : .7;
2152 |             hue = data % 2? .05 : .55;
2153 |         }
2154 |         else if (type == CELL_TYPE_NOTE)
2155 |             hue = data/instrumentCount, lightness = set ? .7 : .3;
2156 |         else if (type == CELL_TYPE_COPY)
2157 |             hue = 5/6, lightness = set ? .6 : .3;
2158 |         else if (type == CELL_TYPE_ROTATE)
2159 |             hue = 3/6, lightness = set ? .6 : .3;
2160 |         else if (type == CELL_TYPE_POWER_LINE)
2161 |             hue = 2/6, lightness = set ? .6 : .3;
2162 |         else if (type == CELL_TYPE_KILL)
2163 |             lightness =  set ? .5 : .2;
2164 | 
2165 |         const solid = type == CELL_TYPE_BLOCK && data > 2;
2166 |         const strokeColor = solid ? '#888' : set ? '#fff' : '#000';
2167 |         const outlineWidth = solid ? .2 : set ? .1 : .05;
2168 |         const color = HSLA(hue, saturation, lightness);
2169 | 
2170 |         // outline and fill
2171 |         if (type == CELL_TYPE_BLOCK || type == CELL_TYPE_NOTE || type == CELL_TYPE_CONTROL || type == CELL_TYPE_POWER_LINE)
2172 |             FillRect(x, y, 1, 1, color, outlineWidth, strokeColor);
2173 |         else if (type == CELL_TYPE_KILL)
2174 |         {
2175 |             // kill octagon
2176 |             context.fillStyle = color;
2177 |             context.strokeStyle = '#ff0';
2178 |             context.lineWidth = 2;
2179 | 
2180 |             context.beginPath();
2181 |             for(let i = 9; i--; )
2182 |             {
2183 |                 const angle = 2 * Math.PI * (i+.5) / 8;
2184 |                 context.arc((x+.5)*cellSize, (y+.5)*cellSize, cellSize*.5, angle, angle);
2185 |             }
2186 |             context.fill();
2187 |             context.stroke();
2188 |         }
2189 |         else
2190 |             FillCircle(x+.5, y+.5, .5, color, outlineWidth, strokeColor);
2191 | 
2192 |         // type data
2193 |         if (type == CELL_TYPE_POWER || type == CELL_TYPE_COPY || type == CELL_TYPE_POWER_LINE)
2194 |         {
2195 |             // direction arrow
2196 |             context.strokeStyle = '#000';
2197 |             context.fillStyle = set>1 ? HSLA(0, 1, .5) :  HSLA(hue, saturation, set ? .9 : .1);
2198 |             context.lineWidth = 2;
2199 | 
2200 |             const noDirection = data > 3; // use diamond if non directional
2201 |             context.beginPath();
2202 |             for(let i = 5+noDirection; i--; )
2203 |             {
2204 |                 const angle = (data+3)/4*Math.PI*2 + 2 * Math.PI * (i-1) / (3+noDirection);
2205 |                 context.arc((x+.5)*cellSize, (y+.5)*cellSize, cellSize*.3, angle, angle);
2206 |             }
2207 |             context.fill();
2208 |             context.stroke();
2209 |         }
2210 |         else if (type == CELL_TYPE_BLOCK)
2211 |         {
2212 |             if (data == 2) // vertical
2213 |                 FillRect((x+.5) - 1/8, y, 1/4, 1, '#000');
2214 |             else if (data == 1) // horizontal
2215 |                 FillRect(x, (y+.5) - 1/8, 1, 1/4, '#000');
2216 |         }
2217 |         else if (type == CELL_TYPE_ROTATE)
2218 |         {
2219 |             let w = .7, h = .25, w2 = .6, h2 = .15, c = HSLA(hue, saturation, set ? 1 : .8);
2220 |             context.save();
2221 |             context.translate((x+.5)*cellSize, (y+.5)*cellSize);
2222 |             FillRect(-w/2, -h/2, w, h, '#000');
2223 |             FillRect(-h/2, -w/2, h, w, '#000');
2224 |             FillRect(-w2/2, -h2/2, w2, h2, c);
2225 |             FillRect(-h2/2, -w2/2, h2, w2, c);
2226 |             context.restore();
2227 |         }
2228 |     }
2229 | 
2230 |     context = canvas.getContext('2d');
2231 | }
2232 | 
2233 | function FillRect(x, y, w, h, fillStyle, lineWidth = 0, strokeStyle = '#fff')
2234 | {
2235 |     context.save();
2236 |     context.scale(cellSize, cellSize);
2237 |     if (fillStyle)
2238 |     {
2239 |         context.fillStyle = fillStyle;
2240 |         context.fillRect(x, y, w, h);
2241 |     }
2242 |     if (lineWidth)
2243 |     {
2244 |         context.lineWidth = lineWidth
2245 |         context.strokeStyle = strokeStyle;
2246 |         context.strokeRect(x+lineWidth/2, y+lineWidth/2, w-lineWidth, h-lineWidth);
2247 |     }
2248 |     context.restore();
2249 | }
2250 | 
2251 | function FillCircle(x, y, r, fillStyle, lineWidth = 0, strokeStyle = '#fff')
2252 | {
2253 |     context.save();
2254 |     context.scale(cellSize, cellSize);
2255 |     context.beginPath();
2256 |     context.arc(x, y, r-lineWidth/2, 0, 7);
2257 |     if (fillStyle)
2258 |     {
2259 |         context.fillStyle = fillStyle;
2260 |         context.fill();
2261 |     }
2262 |     if (lineWidth)
2263 |     {
2264 |         context.lineWidth = lineWidth
2265 |         context.strokeStyle = strokeStyle;
2266 |         context.stroke();
2267 |     }
2268 |     context.restore();
2269 | }
2270 | 
2271 | ///////////////////////////////////////////////////////////////////////////////
2272 | // Undo / Redo
2273 | 
2274 | function SaveUndo()
2275 | {
2276 |     if (undo.length > maxUndos)
2277 |         undo.shift();
2278 | 
2279 |     undo.push([GetSaveString(0), hasAreaSelect, selectAreaMinX, selectAreaMinY, selectAreaMaxX, selectAreaMaxY]);
2280 |     redo = [];
2281 | }
2282 | 
2283 | function LoadUndoObject(u)
2284 | {
2285 |     let saveString;
2286 |     [saveString, hasAreaSelect, selectAreaMinX, selectAreaMinY, selectAreaMaxX, selectAreaMaxY] = u;
2287 |     LoadSaveString(saveString);
2288 | }
2289 | 
2290 | function Undo()
2291 | {
2292 |     hasAreaSelect = 0;
2293 |     if (undo.length <= 1)
2294 |         return;
2295 |         
2296 |     redo.push(undo.pop());
2297 |     LoadUndoObject(undo[undo.length-1]);
2298 |     SaveInternal();
2299 | }
2300 | 
2301 | function Redo()
2302 | {
2303 |     hasAreaSelect = 0;
2304 |     if (!redo.length)
2305 |         return;
2306 | 
2307 |     const s = redo.pop();
2308 |     LoadUndoObject(undo[undo.push(s)-1]);
2309 |     SaveInternal();
2310 | }
2311 | 
2312 | ///////////////////////////////////////////////////////////////////////////////
2313 | // Export to ZzFXM
2314 | 
2315 | let simulate = 0;
2316 | let simulateStopEvents;
2317 | let simulatePlayEvents;
2318 | function Export(beatCount)
2319 | {
2320 |     SetPlayMode(PLAY_MODE_STOP);
2321 | 
2322 |     // simulate playback
2323 |     simulate = 1;
2324 |     let tracks = [];  // [zzfxmTrack, instrument, activeCell, key, attenuation]
2325 | 
2326 |     while(frame < 4*beatCount-1)
2327 |     {
2328 |         simulateStopEvents = [];
2329 |         simulatePlayEvents = [];
2330 | 
2331 |         IsPlaying() ? UpdateFrame() : SetPlayMode(PLAY_MODE_PLAY);
2332 |         
2333 |         // process stop events
2334 |         simulateStopEvents.map(cell=>
2335 |         {
2336 |             // get cell for track
2337 |             let track = tracks.find(e=>e[2] == cell);
2338 |             if (!track)
2339 |                 return;
2340 | 
2341 |             const trackPattern = track[0];
2342 |             trackPattern[frame] = -1;
2343 | 
2344 |             track[2] = 0; // unset track cell
2345 |         });
2346 | 
2347 |         // process play/change events
2348 |         simulatePlayEvents.map(e=>
2349 |         {
2350 |             const cell        = e[0];
2351 |             const instrument  = cell.data;
2352 |             const key         = 12 + e[1];
2353 |             const attenuation = e[2]/10;
2354 | 
2355 |             // get cell for track
2356 |             let track = tracks.find(e=>e[2] == cell);
2357 |             if (!track)
2358 |             {
2359 |                 // find avilable track with no cell and same instrument
2360 |                 track = tracks.find(e=>!e[2] && e[1] == instrument);
2361 |                 if (!track)
2362 |                 {
2363 |                     // add new track
2364 |                     tracks.push([[], instrument, cell, -1, -1]);
2365 |                     track = tracks[tracks.length-1];
2366 |                 }
2367 |             }
2368 | 
2369 |             const trackPattern     = track[0]; 
2370 |             const trackInstrument  = track[1];
2371 |             const trackCell        = track[2];
2372 |             const trackKey         = track[3];
2373 |             const trackAttenuation = track[4];
2374 | 
2375 |             if (key == trackKey && cell == trackCell)
2376 |             {
2377 |                 // change attenuation only
2378 |                 trackPattern[frame] = Clamp(attenuation, .999); // can't be 1
2379 |             }
2380 |             else
2381 |             {
2382 |                 trackPattern[frame] = key + Clamp(attenuation, .999);
2383 |             }
2384 | 
2385 |             track[2] = cell;
2386 |             track[3] = key;
2387 |             track[4] = attenuation;
2388 |         });
2389 |     }
2390 | 
2391 |     SetPlayMode(PLAY_MODE_STOP);
2392 |     simulate = 0;
2393 | 
2394 |     // build zzfxm data
2395 |     const zzfxmPatterns = [];
2396 |     tracks.map(track=>
2397 |     {
2398 |         const instrument = track[1];
2399 |         let pattern = track[0];
2400 |         pattern.unshift(0);          // pan
2401 |         pattern.unshift(instrument); // instrument
2402 | 
2403 |         zzfxmPatterns.push(pattern);
2404 |     });
2405 | 
2406 |     // set all patterns to be same length
2407 |     const longestPattern = zzfxmPatterns.reduce((a,c)=>Math.max(c.length, a), 0);
2408 |     zzfxmPatterns.map(pattern=>pattern.length = longestPattern);
2409 | 
2410 |     // sort patterns by instrument
2411 |     zzfxmPatterns.sort((a,b)=>a[0] - b[0]);
2412 | 
2413 |     const zzfxmString = JSONStringifyNoNull([instruments, [zzfxmPatterns], [0], bpm]);
2414 |     downloadLink.href = URL.createObjectURL(new Blob([zzfxmString]));
2415 |     downloadLink.download = (songName || 'Song') + '.txt';
2416 |     downloadLink.click();
2417 | 
2418 |     // share to zzfx
2419 |     localStorage['OS13kMusic,NoteCraft - '+songName] = zzfxmString;
2420 |     localStorage['OS13kTrophy,🎵🔨,NoteCraft,Exporter'] = 'Exported to OS13k';
2421 | }
2422 | 
2423 | ///////////////////////////////////////////////////////////////////////////////
2424 | // Audio
2425 | 
2426 | function CreateAudioContext()
2427 | { 
2428 |     if (zzfxX)
2429 |         return;
2430 |         
2431 |     zzfxX = new(top.AudioContext||webkitAudioContext); 
2432 |     volumeGain = zzfxX.createGain();
2433 |     volumeGain.connect(zzfxX.destination);
2434 |     volumeGain.gain.value = volume;
2435 | }
2436 | 
2437 | const zzfxV = .5;    // volume
2438 | const zzfxR = 44100; // sample rate
2439 | let zzfxX;
2440 | 
2441 | // play zzfx sound
2442 | function zzfx(...parameters) { return zzfxP(...zzfxG(...parameters)); }
2443 | 
2444 | // create source
2445 | function zzfxS(...samples)
2446 | {    
2447 |     CreateAudioContext();
2448 | 
2449 |     // create buffer and source
2450 |     const buffer = zzfxX.createBuffer(1, samples.length, zzfxR);
2451 |     const source = zzfxX.createBufferSource();
2452 | 
2453 |     // copy samples to buffer
2454 |     buffer.getChannelData(0).set(samples);
2455 |     source.buffer = buffer;
2456 |     return source;
2457 | }
2458 | 
2459 | // play samples
2460 | function zzfxP(...samples)
2461 | {    
2462 |     // create and start source
2463 |     const source = zzfxS(...samples);
2464 |     source.connect(volumeGain);
2465 |     source.start();
2466 |     return source;
2467 | }
2468 | 
2469 | // generate zzfx sound
2470 | const zzfxG=(C=1,h=.05,p=220,d=0,t=0,q=.1,r=0,D=1,u=0,E=0,x=0,F=0,g=0,y=0,z=0,G=0,c=0,v=1,k=0,A=0)=>{let b=2*Math.PI;d=99+d*zzfxR;q=99+q*zzfxR;t*=zzfxR;k*=zzfxR;c*=zzfxR;g=g*zzfxR|0;let l=d+k+t+q+c|0,H=u*=500*b/zzfxR**2;h=p*=(1+2*h*Math.random()-h)*b/zzfxR;let I=(0<z?1:-1)*b/4,f=0,B=0,a=0,J=0,K=0,e=0,m=1,w=[],n;for(;a<l;w[a++]=e)++K%(100*G|0)||(e=r?1<r?2<r?3<r?Math.sin((f%b)**3):Math.max(Math.min(Math.tan(f),1),-1):1-(2*f/b%2+2)%2:1-4*Math.abs(Math.round(f/b)-f/b):Math.sin(f),
2471 | e=(0<e?1:-1)*Math.abs(e)**D*(g?1-A+A*Math.sin(2*Math.PI*a/g):1)*C*zzfxV*(a<d?a/d:a<d+k?1-(a-d)/k*(1-v):a<d+k+t?v:a<l-c?(l-a-c)/q*v:0),e=c?e/2+(c>a?0:(a<l-c?1:(a-l)/c)*w[a-c|0]/2):e),n=(p+=u+=500*E*b/zzfxR**3)*Math.sin(B*z*b/zzfxR-I),f+=n-n*y*(1-1E9*(Math.sin(a)+1)%2),B+=n-n*y*(1-1E9*(Math.sin(a)**2+1)%2),m&&++m>F*zzfxR&&(p+=x*b/zzfxR,h+=x*b/zzfxR,m=0),!g||++J%g||(p=h,u=H,m=m||1);return w}
2472 | 
2473 | ///////////////////////////////////////////////////////////////////////////////
2474 | 
2475 | const programIcon = '🎵🔨';
2476 | const programName = 'NoteCraft';
2477 | const programSubName = 'Musical Cellular Automata';
2478 | const programVersion = '1.05';
2479 | const dataVersion = 6;
2480 | const dataGlobalVersion = 2;
2481 | const maxUndos = 99;
2482 | const defaultBPM = 100;
2483 | const defaultCellsWidth = 57, defaultCellsHeight = 57;
2484 | const instrumentCount = 4;
2485 | 
2486 | let instruments, cellObjects, cellSavedObjects;
2487 | let cellsWidth = defaultCellsWidth, cellsHeight = defaultCellsHeight;
2488 | let cellSize = 32;
2489 | let bpm = defaultBPM;
2490 | let keyOffset = 0;
2491 | let bpmToStepsPerSecond = 4/60;
2492 | let lastTime = 0;
2493 | let frame = -1;
2494 | let pauseStep = 0;
2495 | let editObject = new Cell(0,0);
2496 | let mouseDown, mousePressed, mouseButtons, mouseX=0, mouseY=0, mouseWheel;
2497 | let dragStartX, dragStartY;
2498 | let playMode = -1;
2499 | let deltaTime = 0;
2500 | let auditionMode, frameSoundCount;
2501 | let soundCache;
2502 | let keysDown = [], keysPressed = [];
2503 | let canvas, tilesCanvas, context, menu;
2504 | let stepPercent;
2505 | let inputBPM, inputVolume, iconVolume, inputKey, inputSongName;
2506 | let downloadLink, inputFile, rotateIcons = [];
2507 | let songName = '', extension = '.nc';
2508 | let selectAreaStartX, selectAreaStartY, selectAreaMinX, selectAreaMinY, selectAreaMaxX, selectAreaMaxY;
2509 | let renderOffsetX = 0, renderOffsetY = 0, renderScale = 1;
2510 | let copyCells, copyCellsWidth;
2511 | let areaSelecting, hasAreaSelect, drawing, dragging, usingEyedropper, erasing;
2512 | let undo = [], redo = [];
2513 | let toolbar, toolbarEditControls, toolbarTop, beatDisplay, beatDisplaySpinner, songTimeDisplay;
2514 | let fps = 0, frameFPSTime = 0, watermarkDisplay;
2515 | let hasFocus = 0;
2516 | let screenMinX, screenMinY, screenMaxX, screenMaxY;
2517 | let unpowerSet;
2518 | let canvasHasMouse;
2519 | let wantsToShare = 0;
2520 | let loadingMessageDisplay;
2521 | 
2522 | let lastEditX, lastEditY;
2523 | 
2524 | let moveTestID = 0;
2525 | let cellMoveTargets, updateListCells;
2526 | 
2527 | // volume gain
2528 | let volume = .5;
2529 | let volumeGain;
2530 | 
2531 | BuildHTML();
2532 | 
2533 | ///////////////////////////////////////////////////////////////////////////////
2534 | // Input
2535 | 
2536 | // mouse
2537 | canvas.onmousedown = e=> {mousePressed = mouseDown = e.button + 1; mouseButtons = e.buttons;}
2538 | onmouseup = canvas.onmouseup = e=> {mouseDown = 0; mouseButtons = e.buttons;}
2539 | onmousemove = e=> { mouseX = e.x; mouseY = e.y; }
2540 | oncontextmenu = e=> false;
2541 | 
2542 | document.addEventListener('wheel', e=> 
2543 | {
2544 |     e.ctrlKey && e.preventDefault();
2545 | 
2546 |     if (e.target == canvas)
2547 |         mouseWheel = e.deltaY;
2548 | 
2549 | }, { passive: false });
2550 | 
2551 | // keyboard
2552 | onkeydown = e=> 
2553 | {
2554 |     if (e.keyCode == 9  || e.ctrlKey || e.altKey) // prevent tab & control
2555 |         e.preventDefault();
2556 |         
2557 |     if (e.target.localName == 'input')
2558 |         return;
2559 |         
2560 |     e.repeat || (keysDown[e.keyCode] = keysPressed[e.keyCode] =  1);
2561 | };
2562 | 
2563 | onkeyup = e=> keysDown[e.keyCode] = 0;
2564 | 
2565 | Load();
2566 | Update();
2567 | 
2568 | </script>


--------------------------------------------------------------------------------
/index.min.html:
--------------------------------------------------------------------------------
 1 | <meta charset=utf-8><style>*{font-family:monospace;font-size:20}body{margin:0;overflow:hidden;user-select:none;white-space:nowrap;color:#fff}.menuButton{box-sizing:border-box;width:90;height:30;background:#ccc;color:#000;border:2px solid #000;border-radius:6px;display:inline-block;text-align:center;vertical-align:middle;padding:0}.menuButton:active{background:#faa}.menuButton:hover{background:#ffa}input{background:#ccc;width:80;height:25;margin:4;text-align:center;border-radius:6px}.toolbar{position:absolute;background:#222;border-bottom:4px solid #555;border-right:4px solid #555;border-bottom-right-radius:30px}.toolbarTop{display:flex;align-items:center}.toolbarEditControls{display:flex;margin-left:8}.playControl{display:inline-block;width:40;height:40;font-size:28;margin:3;border-radius:9px;text-align:center}.songTimeDisplay{text-align:center;white-space:pre}.beatDisplay{width:56;height:56;background:#0ff;border:4px solid #000;border-radius:50%;margin:0;overflow:hidden;margin-left:6;margin-right:6}.beatDisplayMarker{width:10;height:10;border:3px solid #000;background:#222;border-radius:50%;position:relative;left:22;top:4;pointer-events:none}.beatDisplaySpinner{width:100%;height:100%}.watermark{position:absolute;bottom:8;right:8;font-size:16;color:#fff5;pointer-events:none}.loadingMessage{font-size:4em;background:#000;z-index:100;position:fixed;left:0;top:300;width:100%;padding:20px;text-align:center;outline:9px solid #222;display:none}.instrumentButton0{background:hsl(0,60%,60%)}.instrumentButton1{background:hsl(90,60%,60%)}.instrumentButton2{background:hsl(180,60%,60%)}.instrumentButton3{background:hsl(270,60%,60%)}.menu{margin:8;padding:8;height:100;background:#000;border:1px solid #fff;border-radius:2px;display:none;overflow-x:auto}.level:hover{color:#000;background:#2c2}</style><body></body>
 2 | <script>"use strict";
 3 | 
 4 | const levelData = 
 5 | [
 6 | 
 7 | [6,"404 Demo",100,0,517,282,728,0,0,[25,3,6,1,2,4,6,1,4,5,2,1,8,5,3,0,12,5,3,0,13,5,3,0,14,5,3,0,15,5,3,0,16,5,2,1,20,5,2,1,24,5,3,0,4,6,3,0,8,6,3,0,12,6,3,0,16,6,3,0,20,6,3,0,24,6,3,0,4,7,3,0,8,7,3,0,12,7,3,0,16,7,3,0,20,7,3,0,24,7,3,0,4,8,3,0,8,8,3,0,12,8,3,0,16,8,3,0,20,8,3,0,24,8,3,0,4,9,3,0,5,9,3,0,6,9,3,0,7,9,3,0,8,9,3,0,12,9,3,0,16,9,3,0,20,9,3,0,21,9,3,0,22,9,3,0,23,9,3,0,24,9,3,0,8,10,3,0,12,10,3,0,16,10,3,0,24,10,3,0,8,11,3,0,12,11,3,0,16,11,3,0,24,11,3,0,8,12,3,0,12,12,3,0,16,12,3,0,24,12,3,0,8,13,2,1,12,13,2,1,13,13,3,0,14,13,3,0,15,13,3,0,16,13,3,0,24,13,2,1,4,14,1,1,26,14,6,1,3,15,6,1,18,17,6,0,23,17,6,0,19,18,1,1,7,19,1,4,18,19,6,0,20,19,7,2,21,19,7,2,23,19,6,0,6,20,2,3,7,20,7,1,8,20,2,2,17,20,1,4,18,20,6,0,20,20,2,0,21,20,2,0,7,21,6,0,19,21,1,1,20,21,3,0,21,21,0,0,22,21,3,0,23,21,3,0,24,21,3,0,25,21,6,0,7,22,1,4,17,22,1,4,24,22,0,0,25,22,1,4,17,23,6,0,18,23,2,3,19,23,3,0,20,23,3,0,21,23,3,0,22,23,3,0,23,23,3,0,24,23,3,0,20,24,1,4,23,24,1,4,24,24,6,0],29,29],
 8 | 
 9 | [6,"Tetris Loop",120,0,-26,96,809,0,0,[31,5,0,0,28,6,0,0,29,6,0,0,31,6,0,0,17,7,0,0,18,7,0,0,19,7,0,0,21,7,0,0,22,7,0,0,24,7,0,0,25,7,0,0,26,7,0,0,28,7,0,0,31,7,0,0,34,7,0,0,35,7,0,0,18,8,0,0,21,8,0,0,22,8,0,0,25,8,0,0,28,8,0,0,31,8,0,0,33,8,0,0,34,8,0,0,20,10,3,0,21,10,3,0,29,10,3,0,30,10,3,0,20,11,3,0,21,11,3,0,29,11,3,0,30,11,3,0,20,12,3,0,21,12,3,0,29,12,3,0,30,12,3,0,20,13,3,0,21,13,3,0,29,13,3,0,30,13,3,0,15,14,3,0,16,14,3,0,20,14,3,0,21,14,3,0,29,14,3,0,30,14,3,0,40,14,3,0,41,14,3,0,15,15,3,0,16,15,3,0,20,15,3,0,24,15,3,0,25,15,3,0,30,15,3,0,32,15,3,0,33,15,3,0,34,15,3,0,35,15,3,0,36,15,3,0,40,15,3,0,41,15,3,0,15,16,3,0,16,16,3,2,17,16,7,4,20,16,3,0,22,16,3,2,24,16,3,2,25,16,3,0,28,16,3,2,30,16,3,0,32,16,3,0,33,16,3,0,34,16,3,0,35,16,3,0,36,16,3,0,38,16,3,2,40,16,3,0,41,16,3,2,11,17,6,0,16,17,2,0,17,17,7,4,20,17,2,0,22,17,2,0,24,17,2,0,25,17,7,4,26,17,7,4,28,17,2,0,30,17,2,0,32,17,2,0,33,17,7,4,34,17,7,4,36,17,2,0,38,17,2,0,40,17,2,0,41,17,7,4,42,17,7,4,43,17,7,4,10,18,7,4,16,18,1,1,42,18,6,0,43,18,7,4,9,19,7,4,10,19,7,4,12,19,2,2,14,19,2,3,16,19,2,2,18,19,2,3,22,19,2,3,24,19,2,2,26,19,2,3,30,19,2,3,32,19,2,2,34,19,2,3,36,19,2,2,38,19,2,2,40,19,2,3,42,19,7,4,43,19,7,4,9,20,7,4,10,20,6,0,9,21,7,4,10,21,7,4,11,21,7,4,12,21,2,0,14,21,7,4,15,21,7,4,16,21,2,0,18,21,7,4,19,21,7,4,20,21,2,0,22,21,7,4,23,21,7,4,24,21,2,0,26,21,7,4,27,21,7,4,28,21,2,0,30,21,2,0,32,21,7,4,33,21,7,4,34,21,7,4,35,21,7,4,36,21,2,0,38,21,2,0,40,21,2,0,41,21,6,0,12,22,3,0,13,22,3,0,14,22,3,0,15,22,3,0,16,22,3,0,20,22,3,2,23,22,3,2,24,22,3,0,28,22,3,2,30,22,3,2,36,22,3,0,38,22,3,2,40,22,3,2,12,23,3,0,13,23,3,0,14,23,3,0,15,23,3,0,16,23,3,0,24,23,3,0,28,23,3,0,36,23,3,0,40,23,3,0,24,24,3,0,28,24,3,0,36,24,3,0,37,24,3,0,40,24,3,0,24,25,3,0,28,25,3,0,36,25,3,0,37,25,3,0,40,25,3,0,24,26,3,0,36,26,3,0,37,26,3,0,36,27,3,0,37,27,3,0,36,28,3,0,37,28,3,0],57,57],
10 | 
11 | [6,"Mario Intro",100,0,392,186,485,0,0,[42,9,3,0,23,10,6,0,24,10,2,2,42,10,3,0,21,11,3,3,22,11,2,3,24,11,1,1,26,11,6,0,37,11,3,0,39,11,3,0,40,11,3,0,42,11,3,0,44,11,3,0,52,11,3,0,22,12,2,3,26,12,2,3,27,12,3,1,32,12,3,0,37,12,3,0,39,12,3,0,40,12,3,0,42,12,3,0,44,12,3,0,48,12,3,0,52,12,3,0,22,13,6,0,26,13,2,3,27,13,3,3,32,13,3,0,37,13,3,0,39,13,3,0,40,13,3,0,42,13,3,0,44,13,3,0,48,13,3,0,52,13,3,0,57,13,3,0,24,14,2,3,25,14,6,0,32,14,3,0,37,14,3,0,40,14,3,0,42,14,3,0,44,14,3,0,46,14,3,0,48,14,3,0,50,14,3,0,52,14,3,0,54,14,3,0,57,14,3,0,58,14,3,0,12,15,3,2,14,15,3,0,15,15,3,0,32,15,3,0,35,15,3,0,37,15,3,0,40,15,3,0,42,15,3,0,44,15,3,0,46,15,3,0,48,15,3,0,50,15,3,0,52,15,3,0,54,15,3,0,57,15,3,0,58,15,3,0,12,16,3,0,14,16,3,0,15,16,3,0,32,16,3,0,35,16,3,0,37,16,3,0,40,16,3,0,42,16,3,0,44,16,3,0,46,16,3,0,48,16,3,0,50,16,3,0,52,16,3,0,54,16,3,0,57,16,3,0,58,16,3,0,12,17,3,0,14,17,3,0,15,17,3,0,17,17,3,0,18,17,3,0,27,17,1,2,32,17,3,0,35,17,3,0,37,17,3,0,40,17,3,0,42,17,3,0,44,17,3,0,46,17,3,0,48,17,3,0,50,17,3,0,52,17,3,0,54,17,3,0,57,17,3,0,58,17,3,0,5,18,3,2,6,18,3,0,10,18,3,2,12,18,3,0,14,18,3,0,15,18,3,0,17,18,3,0,18,18,3,0,19,18,3,0,27,18,0,0,32,18,3,0,35,18,3,0,37,18,3,0,40,18,3,0,42,18,3,0,44,18,3,0,46,18,3,0,48,18,3,0,50,18,3,0,52,18,3,0,54,18,3,0,57,18,3,0,58,18,3,0,5,19,3,0,6,19,3,0,7,19,3,0,8,19,3,0,10,19,3,0,12,19,3,0,14,19,3,2,15,19,2,0,17,19,3,0,18,19,3,0,19,19,3,0,29,19,3,2,32,19,3,0,35,19,3,0,37,19,3,0,40,19,3,0,42,19,3,0,44,19,3,0,46,19,3,2,48,19,3,0,50,19,3,0,52,19,3,2,54,19,3,2,56,19,3,2,58,19,3,0,4,20,7,4,5,20,2,0,6,20,2,0,8,20,2,0,10,20,2,0,11,20,2,0,12,20,3,0,13,20,7,4,14,20,7,4,15,20,7,4,17,20,2,0,18,20,7,4,19,20,7,4,20,20,7,4,27,20,1,1,28,20,0,3,29,20,2,0,30,20,7,4,32,20,2,0,33,20,7,4,35,20,2,0,36,20,7,4,37,20,3,0,38,20,2,0,40,20,2,0,42,20,2,0,43,20,2,0,44,20,3,0,46,20,2,0,47,20,2,0,48,20,3,2,50,20,3,2,51,20,2,0,52,20,2,0,54,20,2,0,56,20,2,0,58,20,2,0,59,20,7,4,4,21,1,1,5,21,5,1,21,21,4,0,26,21,7,4,28,21,5,1,61,21,4,0,20,22,7,4,21,22,7,4,22,22,7,4,23,22,7,4,24,22,7,4,25,22,7,4,26,22,7,4,27,22,0,3,40,22,3,0,41,22,3,0,42,22,3,0,43,22,3,0,44,22,3,0,45,22,2,0,47,22,3,0,48,22,3,0,49,22,2,0,50,22,3,0,51,22,3,0,52,22,3,0,56,22,3,0,57,22,2,0,60,22,7,4,26,23,7,4,47,23,3,0,48,23,3,0,49,23,3,0,50,23,3,0,51,23,3,0,52,23,3,2,55,23,3,0,56,23,3,0,57,23,3,2,60,23,7,4,26,24,7,4,27,24,7,4,28,24,7,4,29,24,7,4,30,24,7,4,31,24,7,4,32,24,7,4,33,24,7,4,34,24,7,4,35,24,7,4,36,24,7,4,37,24,7,4,38,24,7,4,39,24,7,4,40,24,7,4,41,24,7,4,42,24,7,4,43,24,7,4,44,24,7,4,45,24,7,4,46,24,7,4,47,24,7,4,48,24,7,4,49,24,7,4,50,24,7,4,51,24,7,4,52,24,7,4,53,24,7,4,54,24,7,4,55,24,7,4,56,24,7,4,57,24,7,4,58,24,7,4,59,24,7,4,60,24,7,4,26,25,7,4,26,26,7,4,37,26,3,0,38,26,3,0,39,26,3,0,40,26,3,0,46,26,3,2,47,26,7,4,48,26,7,4,49,26,7,4,50,26,7,4,51,26,7,4,52,26,7,4,54,26,3,0,55,26,3,0,56,26,3,0,57,26,3,0,58,26,3,0,59,26,3,0,20,27,7,4,21,27,7,4,22,27,7,4,23,27,7,4,24,27,7,4,25,27,7,4,26,27,7,4,27,27,0,3,36,27,3,0,37,27,3,0,38,27,3,0,39,27,3,0,40,27,2,1,42,27,3,0,43,27,3,0,44,27,3,0,45,27,3,0,46,27,3,0,47,27,2,1,52,27,7,4,54,27,3,0,55,27,3,0,56,27,3,0,57,27,2,1,58,27,3,0,59,27,3,0,60,27,3,0,4,28,1,1,5,28,5,1,21,28,4,0,26,28,7,4,28,28,5,1,61,28,4,0,4,29,7,4,5,29,2,1,6,29,2,1,7,29,3,0,8,29,2,1,10,29,2,1,11,29,2,1,13,29,2,1,14,29,7,4,15,29,7,4,17,29,2,1,18,29,7,4,19,29,7,4,20,29,7,4,27,29,1,1,28,29,0,3,29,29,2,1,30,29,7,4,32,29,2,1,33,29,7,4,35,29,2,1,36,29,7,4,38,29,2,1,41,29,3,0,42,29,2,1,43,29,2,1,45,29,2,1,46,29,2,1,47,29,3,2,49,29,2,1,51,29,2,1,53,29,3,2,54,29,2,1,56,29,2,1,58,29,2,1,59,29,7,4,5,30,3,0,6,30,3,0,7,30,3,2,10,30,3,0,11,30,3,0,13,30,3,0,14,30,3,0,15,30,3,0,17,30,3,0,18,30,3,0,19,30,3,0,29,30,3,0,30,30,3,0,32,30,3,0,38,30,3,0,41,30,3,0,43,30,3,0,45,30,3,0,49,30,3,2,51,30,3,2,56,30,3,0,58,30,3,0,59,30,3,0,10,31,3,0,11,31,3,2,13,31,3,0,14,31,3,0,15,31,3,0,17,31,3,0,18,31,3,0,19,31,3,0,27,31,0,0,29,31,3,0,30,31,3,0,32,31,3,0,38,31,3,0,41,31,3,0,43,31,3,0,45,31,3,0,49,31,3,0,51,31,3,0,56,31,3,0,58,31,3,0,59,31,3,0,14,32,3,0,15,32,3,0,17,32,3,0,18,32,3,0,27,32,1,0,29,32,3,0,30,32,3,0,32,32,3,0,38,32,3,0,41,32,3,0,43,32,3,0,45,32,3,0,49,32,3,0,51,32,3,0,54,32,3,0,55,32,3,0,56,32,3,0,58,32,3,0,59,32,3,0,15,33,3,2,29,33,3,0,30,33,3,0,32,33,3,0,38,33,3,0,41,33,3,0,43,33,3,0,45,33,3,0,48,33,3,0,49,33,3,0,51,33,3,0,54,33,3,0,55,33,3,0,56,33,3,0,58,33,3,0,59,33,3,0,32,34,3,0,38,34,3,0,41,34,3,0,43,34,3,0,45,34,3,0,48,34,3,0,49,34,3,0,55,34,3,0,56,34,3,0,38,35,3,0,41,35,3,0,43,35,3,0],69,69],
12 | 
13 | [6,"Row your boat into a fire",120,0,382,163,655,0,0,[37,8,3,0,39,8,3,0,41,8,3,0,42,8,3,0,37,9,3,0,39,9,3,0,41,9,3,0,42,9,3,0,37,10,3,0,39,10,3,0,41,10,3,0,42,10,3,0,12,11,7,4,13,11,7,4,14,11,7,4,15,11,7,4,16,11,7,4,17,11,7,4,18,11,7,4,19,11,7,4,20,11,7,4,21,11,7,4,22,11,7,4,23,11,7,4,24,11,7,4,25,11,7,4,26,11,7,4,27,11,7,4,28,11,7,4,29,11,7,4,30,11,7,4,31,11,7,4,32,11,7,4,35,11,3,0,37,11,3,0,39,11,3,0,41,11,3,0,11,12,0,0,12,12,5,1,15,12,7,4,27,12,3,0,28,12,3,0,32,12,7,4,35,12,3,0,37,12,3,0,39,12,3,0,41,12,3,0,15,13,7,4,17,13,2,0,18,13,7,4,19,13,7,4,21,13,2,0,22,13,7,4,23,13,7,4,25,13,2,0,26,13,7,4,27,13,3,0,28,13,2,0,32,13,7,4,35,13,3,0,36,13,2,0,37,13,2,0,39,13,3,0,40,13,2,0,41,13,2,0,42,13,7,4,43,13,7,4,15,14,1,1,16,14,5,1,42,14,6,0,43,14,7,4,27,15,3,0,28,15,3,0,29,15,7,4,30,15,7,4,33,15,7,4,34,15,7,4,42,15,7,4,43,15,7,4,17,16,0,3,27,16,3,0,28,16,3,0,29,16,3,0,30,16,2,0,31,16,7,4,32,16,7,4,33,16,7,4,42,16,7,4,43,16,7,4,25,17,6,1,29,17,6,1,31,17,6,1,42,17,7,4,23,18,3,3,24,18,2,2,26,18,1,3,30,18,1,1,32,18,2,3,42,18,7,4,25,19,6,1,29,19,6,1,31,19,6,1,42,19,7,4,42,20,7,4,6,21,5,4,7,21,5,4,26,21,2,0,28,21,7,4,29,21,2,0,42,21,7,4,6,22,5,4,7,22,5,4,42,22,6,0,14,23,7,4,15,23,7,4,16,23,7,4,17,23,2,0,18,23,2,0,19,23,3,0,20,23,7,4,21,23,2,0,22,23,2,0,23,23,3,0,24,23,7,4,25,23,2,0,26,23,3,0,27,23,3,0,30,23,2,0,31,23,3,0,32,23,7,4,33,23,2,0,34,23,2,0,35,23,3,0,36,23,7,4,37,23,2,0,38,23,2,0,39,23,3,2,40,23,7,4,41,23,2,0,18,24,3,0,19,24,3,0,21,24,3,0,23,24,3,0,25,24,3,0,26,24,3,0,27,24,3,0,30,24,3,0,31,24,3,0,32,24,3,0,33,24,3,0,35,24,3,0,36,24,3,0,37,24,3,0,41,24,3,2,21,25,3,0,23,25,3,0,25,25,3,0,26,25,3,0,27,25,3,0,35,25,3,0,36,25,3,0,21,26,3,0,23,26,3,0,35,26,3,0,36,26,3,0,21,27,3,0,23,27,3,0,21,28,3,0,23,28,3,0],57,57],
14 | 
15 | [6,"Automata Bomb 1",100,0,440,5,477,0,0,[33,31,5,4,34,31,5,4,33,32,5,4,34,32,5,4,33,33,1,4,34,33,1,4],68,68],
16 | 
17 | [6,"Automata Bomb 2",100,0,310,-143,477,0,0,[31,30,1,4,32,30,1,4,33,30,1,4,34,30,1,4,35,30,1,4,36,30,1,4,31,31,1,4,32,31,5,4,33,31,5,4,34,31,5,4,35,31,5,4,36,31,1,4,31,32,1,4,32,32,5,4,33,32,1,4,34,32,1,4,35,32,5,4,36,32,1,4,31,33,1,4,32,33,5,4,33,33,1,4,34,33,1,4,35,33,5,4,36,33,1,4,31,34,1,4,32,34,5,4,33,34,5,4,34,34,5,4,35,34,5,4,36,34,1,4,31,35,1,4,32,35,1,4,33,35,1,4,34,35,1,4,35,35,1,4,36,35,1,4],68,68]
18 | 
19 | ];
20 | 
21 | function aa(){for(var t=ba(),a=[],e=127;--e;)(48<=e&&57>=e||65<=e&&90>=e||97<=e&&122>=e||"-_.!~*'()".includes(String.fromCharCode(e)))&&a.push(String.fromCharCode(e));for(e=32;255>e;++e){var n=String.fromCharCode(e);"\\"==n||a.includes(n)||a.unshift(n)}t=ca(t=t.replace(/\u0001/g,"")),e=a.length,n="";for(var o={},i=2;50>i;i++)for(var c=0;c<t.length-i;++c){var r=t.substr(c,i);if(!o[r]){var l=r.charCodeAt(0),b=r.charCodeAt(r.length-1);if(!(l=56320<=l&&57343>=l||55296<=b&&56319>=b)){for(l=1,b=t.indexOf(r,c+i);0<=b;++l)b=t.indexOf(r,b+i);1<l&&(o[r]=l)}}}for(;;){for(;e--&&t.includes(a[e]););if(0>e)break;i=a[e];var f=void 0;c=0,r=encodeURI(encodeURIComponent(i)).replace(/%../g,"i").length;for(let t in o)l=((l=o[t])-1)*encodeURI(encodeURIComponent(t)).replace(/%../g,"i").length-(l+1)*r,n.length||(l-=encodeURI(encodeURIComponent("
")).replace(/%../g,"i").length),0>=l?delete o[t]:l>c&&(f=t,c=l);if(!f)break;t=t.split(f).join(i)+i+f,n=i+n,c={};for(let a in o){for(o=a.split(f).join(i),r=0,l=t.indexOf(o);0<=l;++r)l=t.indexOf(o,l+o.length);1<r&&(c[o]=r)}o=c}return f=t,(a=n).length&&(f+="
"+a),encodeURIComponent(f+"_")}function ca(t,a=1){const e=[['"',"'"],["':","!"],[",'","~"],["}",")","\\","\\"],["{","(","\\","\\"]],n=(t,a)=>t.replace(new RegExp(`${(a[2]?a[2]:"")+a[0]}|${(a[3]?a[3]:"")+a[1]}`,"g"),t=>t===a[0]?a[1]:a[0]);if(a)for(a=0;a<e.length;++a)t=n(t,e[a]);else for(a=e.length;a--;)t=n(t,e[a]);return t}function h(t,a=1,e=0){return t<e?e:t>a?a:t}function da(t=0,a=0,e=0){return`hsla(${360*t},${100*a}%,${100*e}%,1)`}function ea(t,a=440){return a*2**(t/12)}function ha(t=0){return"CCDDEFFGGAAB"[(t+=ia)%12|0]+(0>"02579".indexOf(t%12-1)?"":"#")+(12>t?"":t/12|0)}function ja(t=0){return(10-t||"")+"0%"}function n(t){const a=2&t?1:-1;return[1&t?-a:0,1&t?0:a]}function ka(t,a=.02){const e=t.source;e&&(t.source=0,t.gain.gain.linearRampToValueAtTime(t.gain.gain.value,q.currentTime),t.gain.gain.linearRampToValueAtTime(0,q.currentTime+a),setTimeout(()=>e.stop(),1e3*a))}class la{Play(t,a,e,n){if(this.source&&this.C==t&&this.key==a)this.gain.gain.value=e;else{ka(this);var o=ma[[this.C=t,this.key=a]];o||((o=[...r[t]])[2]=ea(a+ia,o[2]),o=ma[[t,a]]=na(...o)),(this.source=oa(...o)).connect(this.gain=q.createGain()).connect(this.pan=q.createStereoPanner()).connect(qa),this.source&&(this.gain.gain.value=e),this.source&&(this.pan.pan.value=n),this.source.start()}}}const ra=[["Block",4,0],["Power",5,1],["Play Note",4,1],["Control",4,0],["Remove",1,1],["Copy",5,1],["Rotate",2,1],["Power Line",5,1]];function sa(t,a,e){t.h=t.x=a,t.i=t.y=e}function ta(t){t.a=1==t.type,t.key=t.f=0,t.u=t.l=t.s=-1}function ua(t){t.c&&ka(t.c),va(t.x,t.y)}function wa(a,e){if(!(2!=a.type&&!e||8<++xa))if(ya)za.push([a,a.key,a.f]);else{e=1-a.f/10;const n=a.x/(t-1)*2-1;a.c||(a.c=new la),a.c.Play(2==a.type?a.data:0,a.key,e,n),Aa&&ka(a.c,.5)}}function Ba(t){ya?Ca.push(t):t.c&&ka(t.c)}function Da(t){t.A=t.a,t.a=0,t.v=0}function Ea(t){if(0!=t.type&&3!=t.type&&!(5==t.type&&t.j||t.a))if(t.a=1,7==t.type&&4>t.data){var a=n(t.data);(t=u(t.x+a[0],t.y+a[1]))&&Ea(t)}else if(1==t.type||7==t.type)for(a=4;a--;){var e=n(a);(e=u(t.x+e[0],t.y+e[1]))&&Ea(e)}}function Fa(a){if(!a.v&&3==a.type){var e=[],n=[],o=0,i=0,c=(r,l,b=1)=>{const f=u(r,l);if(f&&!e[r+t*l]){var s=3==f.type&&(2==a.type||f.data%2==a.data%2);(s||2==f.type)&&(b||s)&&(2==f.type||s)&&(f.v=1,e[r+t*l]=1,n.push(f),s&&(!i&&2>f.data?i=1:o+=2>f.data?1:f.data-2?5:12),c(r+1,l,s),c(r-1,l,s),c(r,l-1,s),c(r,l+1,s))}};c(a.x,a.y),n.map(t=>{a.data%2?t.f=Math.min(o,10):t.key=o,2==t.type&&Aa&&(t.a=1,wa(t))})}}function Ga(t){if(2==t.type)if(t.a){var a=(e,n,o=1)=>{const i=u(e,n);if(i&&i.l!=v){var c=3==i.type&&(2==t.type||i.data%2==t.data%2);(c||2==i.type)&&(o||c)&&(2==i.type||c)&&(i.l=v,a(e+1,n,c),a(e-1,n,c),a(e,n-1,c),a(e,n+1,c))}};a(t.x,t.y,1),(0<w||Aa)&&wa(t)}else Ba(t)}function Ha(t){xa=0,x.map(t=>t&&ta(t)),x.map(t=>t&&Da(t)),Ea(t),Aa=1,Fa(t),Aa=0,x.map(t=>t&&Fa(t)),Aa=1,x.map(t=>t&&Ga(t)),3==t.type&&!xa&&wa(t,1),Aa=0}function Ia(t,a){const e=2==a;e&&6==t.type&&(t.data=t.data?0:1),(1==t.type||5==t.type||7==t.type)&&4>t.data?e?t.data%2&&(t.data=(t.data+2)%4):t.data=(t.data+4+a)%4:0==t.type&&t.data&&3>t.data&&(t.data=1+(t.data+1+a)%2)}function Ja(t,a,e){if(!(t.D==Ka||(t.D=Ka,0==t.type&&(2<t.data||t.data==1+(1&a)))||5==t.type&&t.g&&!e||t.a&&6==t.type)){if(t.a&&4==t.type)return!0;t.a&&1==t.type&&4>t.data&&(a=t.data);var o=n(a);if(Pa(e=t.x+o[0],o=t.y+o[1])){if((e=u(e,o))&&6==e.type&&e.a){if(o=n(a=(a+(e.data?3:1))%4),!Pa(e=t.x+o[0],o=t.y+o[1]))return;e=u(e,o)}if(!e||Ja(e,a))return 0>t.b.indexOf(a)&&t.b.push(a),!0}}}function Qa(t){const a=a=>{let e=(a+2)%4;var o=n(e);!(o=u(t.x+o[0],t.y+o[1]))||4==o.type&&o.a||0==o.type&&3==o.data||(o.B=v,Ra.add(o),Ka++,Ja(t,a,1)&&(t.o[e]=o))};if(5==t.type&&(t.o=[],!t.g||t.j))if(4>t.data)a(t.data);else for(let t=4;t--;)a(t)}function Sa(a,e){var o=0<=e?n(e):[0,0];Pa(e=a.x+o[0],a=a.y+o[1])&&((o=u(e,a))&&4==o.type||(o=Ta[e+t*a],Ta[e+t*a]=o?o+1:1))}function Ua(t){5==t.type&&t.j?(t.b.map(a=>Sa(t,a)),Sa(t,-1)):1==t.b.length?Sa(t,t.b[0]):Sa(t,-1)}function Va(a){if(a.s==v)return a.x!=a.h||a.y!=a.i;if(a.s=v,4==a.type&&a.a)return!0;if(!a.b||1!=a.b.length)return!1;var e=n(a.b[0]),o=a.x+e[0];if(e=a.y+e[1],1<Ta[o+t*e])return!1;let i=u(o,e);return i&&i.a&&4==i.type?(ua(a),!0):!i||Va(i)?(va(a.x,a.y),x[o+t*e]=a,a.x=o,a.y=e,a.c&&((o=a.c).source&&(o.pan.pan.value=a.x/(t-1)*2-1)),!0):void 0}function Wa(a){1==a.type&&a.a?Va(a)||(a.a=0):5==a.type&&a.b.map(e=>{var o=a.o[(e+2)%4];if(o){var i=n(e),c=a.x+i[0];let r=u(c,i=a.y+i[1]);1!=Ta[c+t*i]||r&&!Va(r)||(c=n(e),u(e=a.x+c[0],c=a.y+c[1])||(va(e,c,o=new Xa(...Ya(o))),o.u=v,o.h=a.x,o.i=a.y))}})}function Ya(t){return[t.x,t.y,t.type,t.data]}function Za(t,a){if(!(a&&t.x<$a|t.y<ab|t.x>bb|t.y>cb||1==a&&t.m||3==a&&!t.m)){var e=!a,n=e?1:y;a=t.h,a+=h(n)*(t.x-a);var o=t.i;o+=h(n)*(t.y-o);var i=t.a;(5==t.type&&t.g||1==t.type&&t.B==v)&&(i=2),t.angle=6==t.type?t.angle+(i?4:1)*(t.data?1:-1)*db*z*eb/8:0;var c=4==t.type&&i?.8+h(.5+Math.cos(2*Math.PI*n)/2)*(1-.8):1;if(A.globalAlpha=t.u==v?n:1,1!=c||t.angle?(A.save(),A.scale(32,32),A.translate(a+.5,o+.5),A.rotate(Math.PI*t.angle),A.drawImage(fb,128*(t.data+5*i),128*t.type,64,64,-c/2,-c/2,c,c),A.restore()):A.drawImage(fb,128*(t.data+5*i),128*t.type,64,64,32*a,32*o,32,32),n=!e&&1>B,i=!e&&.5>=B,c=!e&&.25>=B,A.textAlign="center",A.textBaseline="middle",2==t.type){if(!e&&!n){i=u(t.x-1,t.y);const e=u(t.x,t.y-1);i&&3==i.type&&D(a-.08,o+.2,.16,.6,"#fff"),e&&3==e.type&&D(a+.2,o-.08,.6,.16,"#fff")}A.fillStyle="#fff",A.strokeStyle="#000",A.lineWidth=3,!e&&c||(t.f?(A.font="900 12.8px arial",e=ha(t.key),n||A.strokeText(e,32*(a+.5),32*(o+.34),25.6),A.fillText(e,32*(a+.5),32*(o+.34),25.6),t=ja(t.f),n||A.strokeText(t,32*(a+.5),32*(o+.75),25.6),A.fillText(t,32*(a+.5),32*(o+.75),25.6)):(A.font="900 25.6px arial",t=ha(t.key),n||A.strokeText(t,32*(a+.5),32*(o+.57),25.6),A.fillText(t,32*(a+.5),32*(o+.57),25.6)))}else 3==t.type?(e?t.data%2?t.f=1<t.data?5:0:t.key=t.data?12:0:n||(n=u(t.x-1,t.y),c=u(t.x,t.y-1),n&&(3==n.type&&n.data%2==t.data%2||2==n.type)&&D(a-.08,o+.2,.16,.6,"#fff"),c&&(3==c.type&&c.data%2==t.data%2||2==c.type)&&D(a+.2,o-.08,.6,.16,"#fff")),!e&&i||(e=t.data%2?ja(t.f):ha(t.key),A.fillStyle="#000",A.font=32/(2>t.data?3:2)+"px arial",A.fillText(e,32*(a+.5),32*(o+.51),25.6)),v==t.l&&D(a,o,1,1,"#fff8")):0!=t.type||3!=t.data||e||n||(e=u(t.x-1,t.y),n=u(t.x,t.y-1),e&&e.type==t.type&&e.data==t.data&&D(a-.5,o+.3,1,.4,"#000"),n&&n.type==t.type&&n.data==t.data&&D(a+.3,o-.5,.4,1,"#000"))}}class Xa{constructor(t,a,e=0,n=0){sa(this,t,a),this.type=e,this.data=n,this.m=this.angle=0,ta(this)}}function gb(){x=[],z=100,ia=0,E="",hb()}function Pa(a,e){return 0<=a&&a<t&&0<=e&&e<F}function u(a,e){return Pa(a,e)&&x[a+t*e]}function ib(a,e,n=-1,o=0){if(Pa(a,e)){if(0<=n)return x[a+t*e]=new Xa(a,e,n,o);delete x[a+t*e]}}function va(a,e,n){Pa(a,e)&&(n?(sa(n,a,e),x[a+t*e]=n):delete x[a+t*e])}function jb(t,a){return[Math.floor((t/B-H)/32),Math.floor((a/B-I)/32)]}function kb(t=0){J=[],K=lb-L+1;for(let a=M;a<=mb;++a)for(let e=L;e<=lb;++e){const n=u(e,a);J.push([e-L,a-M,n?n.type:-1,n&&n.data]),t&&ib(e,a)}N()}function nb(a,e,n=0){if(J){let o=0;if(J.map(t=>{Pa(t[0]+a,t[1]+e)&&(o=1),(t=ib(t[0]+a,t[1]+e,t[2],t[3]))&&Ia(t,n)}),o){const n=J.length/K;L=h(a,t-1),M=h(e,F-1),lb=h(a+K-1,t-1),mb=h(e+n-1,F-1),O=1,N()}else O=0}ob()}function pb(){var a=qb[17],e=qb[16],n=qb[9];rb=document.body==document.activeElement&&R==document.elementFromPoint(sb,tb),S[32]&&T(0==w);const o=ub,i=vb,c=wb;for(xb=wb=yb=vb=ub=0,(2==U||n)&&(xb=1,U&&(zb&&(Ab=sb/B-H,Bb=tb/B-I),H=sb/B-Ab,I=tb/B-Bb)),Cb|S[40]|S[38]&&(H=B*(H/32+V.x+.5),I=B*(I/32+V.y+.5),B=h(B*(S[40]?.75:S[38]?1/.75:0<Cb?.9:1/.9),4,.1),H=32*(H/B-V.x-.5),I=32*(I/B-V.y-.5)),n=jb(sb,tb),sa(V,n[0],n[1]),R.style.cursor=xb?"grab":"",n=0;5>n;n++)if(S[n+49]){T(n);break}if(0==w){if(a)S[90]?(O=0,1>=W.length||(Db.push(W.pop()),Eb(W[W.length-1]),Fb())):S[89]?Gb():S[67]||S[88]?kb(qb[88]):S[86]&&J?nb(V.x,V.y):S[83]?Hb():S[86]&&Ib();else{n=S[68]?1:S[65]?-1:0;var r=S[83]?1:S[87]?-1:0;if(n||r)O&&(kb(1),nb(L+=n,M+=r),O||(J=0));else if(S[84]){if(O){kb(1);var l=J.length/K;n=[...J],r=2*K-1,l=2*l-1,J=[];for(let t=0;t<l;t++)for(let a=0;a<r;a++){if(a%2||t%2){J[a+r*t]=[a,t,-1,0];continue}let e=n[(a>>1)+K*(t>>1)];e[0]=a,e[1]=t,J[a+r*t]=e}K=r,J.length=r*l,nb(L,M)}}else if(S[82]||S[69]||S[81]){const t=S[81]?2:S[82]?1:-1;if(O){kb(1);const a=J.length/K;J.map(e=>{let n,o;2==t?(n=K-e[0]-1,o=e[1]):1==t?(n=a-e[1]-1,o=e[0]):(n=e[1],o=K-e[0]-1),e[0]=n,e[1]=o}),2>t&&(K=a),nb(L,M,t)}else(n=u(V.x,V.y))&&Ia(n,t)}}rb&&(e?(vb=1,a=O,e=h(V.x,t-1),n=h(V.y,F-1),1!=zb&&3!=zb&&(1!=U&&3!=U||a)||(Jb=e,Mb=n,O=1),(1==U||3==U||O&&!a)&&(L=Math.min(Jb,e),M=Math.min(Mb,n),lb=Math.max(Jb,e),mb=Math.max(Mb,n))):1==U||3==U&&a||3==Nb?(ub=1,O=0,e=u(V.x,V.y),a||3==Nb?(ib(V.x,V.y),0<w||N(),yb=1):e&&e.type==V.type&&e.data==V.data||(e=ib(V.x,V.y,V.type,V.data))&&(0<w||N(),e.angle=V.angle,Ha(e),N())):3==U&&(wb=1,Ob!=V.x||Pb!=V.y||zb)&&((a=u(V.x,V.y))?(Ha(a),Qb(a.type,a.data)):N(1))),!vb&&i&&Rb(),!ub&&o&&(ub=0,ob()),!wb&&c&&N(),Ob=V.x,Pb=V.y}}function hb(){Sb.style.display="",O=0,T(),Tb(),N(),ob()}function N(t){ma={},xa=v=y=0,x.map(t=>t&&ta(t)),x.map(t=>t&&Da(t)),t||x.map(t=>{var a;return(a=t)&&(1==t.type&&t.A&&Ea(t),a=void 0),a}),x.map(t=>t&&Fa(t)),0<w&&x.map(t=>t&&Ga(t))}function Ub(){v++,xa=0,Vb=[],x.map(t=>{var a;if(a=t){if(t.h=t.x,t.i=t.y,++t.m,t.b=[],1==t.type&&t.a&&4>t.data)Vb.push(t);else if(5==t.type)t.j=0,t.a?(t.g||(t.g=1,t.j=1),Vb.push(t)):t.g=0;else if(6==t.type&&t.a)for(a=4;a--;){var e=n(a);(e=u(t.x+e[0],t.y+e[1]))&&Ia(e,t.data?-1:1)}a=void 0}return a}),Ta=[],Ra=new Set,Vb.map(t=>Qa(t)),Ra.forEach(t=>t.a=0),Vb.map(t=>{if(1==t.type&&t.a){var a=t.data;Ka++,Ja(t,a,1)}}),x.map(t=>t&&Ua(t)),Vb.map(t=>Wa(t)),x.map(t=>t&&Da(t)),x.map(t=>{var a;return(a=t)&&(1==t.type&&t.A&&Ea(t),a=void 0),a}),x.map(t=>t&&Fa(t)),x.map(t=>t&&Ga(t))}function Wb(a=0){if(requestAnimationFrame(Wb),!--Xb){Yb.style.display="none";var e=aa(),n=new URL(window.location.href);n.search="&c="+e;try{navigator.clipboard.writeText(n.toString()),alert("👍 Link copied!")}catch(t){Zb()}}for(!$b&&document.hasFocus()&&(S=[],qb=[],U=Nb=zb=Cb=0),$b=document.hasFocus(),pb(),db=Math.min(.1,(a-ac)/1e3),ac=a,y+=z*eb*(db*=4==w?8:0<w?1:.25),0==w||0==w||2==w||3==w&&bc?1==(y=Math.min(y,1))&&bc&&(T(2),bc=0):1<y&&(Ub(),y=Math.min(y-1,1),3==w&&(bc=1)),R.width=innerWidth,R.height=innerHeight,H=h(H,R.width/2/B,R.width/2/B-32*t),I=h(I,R.height/2/B,R.height/2/B-32*F),A.fillStyle="#112",A.fillRect(0,0,R.width,R.height),A.scale(B,B),A.translate(H,I),[$a,ab]=jb(0,0),[bb,cb]=jb(innerWidth,innerHeight),D(0,0,t,F,"#080808"),e=0;e<t/4;++e)D(4*e,0,1,F,"#111");for(e=0;e<F/4;++e)D(0,4*e,t,1,"#111");for(A.fillStyle="#000",e=0;e<=t;++e)A.fillRect(32*e-1,0,2,32*F);for(e=0;e<=F;++e)A.fillRect(0,32*e-1,32*t,2);x.map(t=>t&&Za(t,1)),x.map(t=>t&&Za(t,2)),0==w&&($b&&(rb||ub)&&!xb&&!vb&&Pa(V.x,V.y)&&D(V.x-.1,V.y-.1,1.2,1.2,0,.1,wb?"#0ff":yb?"#f00":"#fff"),O&&D((e=Math.min(L,lb))-.1,(n=Math.min(M,mb))-.1,Math.max(L,lb)-e+1.2,Math.max(M,mb)-n+1.2,0,.1,"#0f0")),cc.map((t,e)=>t.style.transform=`rotate(${a/2e3*(e?-1:1)}rad)`),e=Math.max(0,v+y-1),dc.style.transform=`rotate(${e*Math.PI/4}rad)`,n=(e=e/z/eb)%60|0,ec.innerText=(e/60|0)+":"+(9<n?"":"0")+n,fc.innerText="NoteCraft v1.05",S=[],zb=Cb=0}const gc=[[2,0,261.6255653005986,,1,,1,,,,,,.2,,,,.01,.5,.01,.2],[,0,130.8127826502993,,1,,,2,,,.5,,,,,.1,,.4,.05],[1.3,0,65.40639132514966,,.02,,,1.5,,,,,,5,,,,.7,.02],[.5,0,260,,,.04,,,,,,,.1,99,,,,2,.005,.2]];function ba(a=1){const e=[];return(0<w?hc:x).map(t=>{t&&e.push(...Ya(t))}),JSON.stringify([6,E,z,ia,0|H,0|I,a?1e3*B|0:0,r,0,e,t,F])}function ic(t){jc(JSON.parse(t,(t,a)=>null===a?void 0:a))}function jc(a){var e=a[0];let n,o,i;if(6!=e)Zb(),gb();else{for([e,E,z,ia,a,n,o,r,,i,t,F]=a,x=[],e=0;e<i.length;)ib(i[e++],i[e++],i[e++],i[e++]);r||(r=[...gc]),o&&(B=o/1e3,H=a,I=n),N(),Tb()}}function ob(){Fb(),Rb()}function Fb(){localStorage.NoteCraftSave=JSON.stringify([2,X]),localStorage.NoteCraftSaveLevel=ba()}function T(t=0){if(w!=t){0<=w&&(kc.style.transition=".5s");var a=0<w;w=t,lc.map((t,a)=>{const e=t[3],n=a==w;e.style.background=n?t[1]:"#555",e.style.border="4px solid "+(n?"#fff":"#000"),n&&(kc.style.background=0==a?"#888":e.style.background)}),a!=0<w&&(a?x.map(t=>t&&ua(t)):hc=x.map(t=>t&&new Xa(...Ya(t))),x=hc.map(t=>t&&new Xa(...Ya(t))),N())}}const lc=[["⏹️","#f00","Stop"],["▶️","#0f0","Play"],["⏸️","#ff0","Pause"],["⏯️","#0ff","Step"],["⏩","#f0f","Fast Forward"]],mc=[[1,0],[1,1],[1,2],[1,3],[1,4],[7,0],[7,1],[7,2],[7,3],[7,4],[6,1],[3,2],[3,0],[2,0],[2,1],[5,0],[5,1],[5,2],[5,3],[5,4],[0,0],[0,1],[0,2],[0,3],[4,0],[6,0],[3,3],[3,1],[2,2],[2,3]];function Qb(t,a){V.type=t,V.data=a,ta(V),mc.map(e=>{const n=e[0]==t&&e[1]==a;e[2].style.border=n?"4px solid #f00":"2px solid #000",e[2].style.padding=n?2:4,e[2].style.background=n?"#ccc":"#444"})}function Tb(){nc.value=E,oc.value=z=h(0|z,oc.max=360,oc.min=30),pc.value=ia=h(0|ia,pc.max=60,pc.min=0),qc.value=100*X,vc.innerHTML=.7<X?"🔊":.2<X?"🔉":X?"🔈":"🔇",document.title="🎵🔨 NoteCraft - "+(E||"Musical Cellular Automata"),qa&&(qa.gain.value=X),wc()}function Y(t,a,e="",n="",o="",i=""){return(t=a.appendChild(document.createElement(t))).className=e,t.style=n,t.innerHTML=o,t.title=i,t}function wc(){const t=Y("div",xc);mc.map((a,e)=>{const n=a[0],o=a[1];a[2]||(a[2]=Y("div",t,"","display:inline-block"),a[3]=Y("canvas",a[2],"","","",yc(...a)),6==n&&cc.push(a[3])),a=a[3],A=a.getContext("2d"),a.height=a.width=32,Za(new Xa(0,0,n,o)),a.onmousedown=a.onmouseover=(t=>ub||xb||t.buttons&&Qb(n,o)),e==mc.length/2-1&&Y("br",t)}),A=R.getContext("2d")}function yc(t,a){let e=ra[t][0];return 0==t?e=["Push","Horzontial Push","Vertical Push","Solid"][a]+" "+e:1==t?e+=4>a?" Mover":" Stationary":3==t&&a%2?e=(1<a?"Half Attenuate ":"Attenuate ")+e:3==t?e=(a?"Octave Key ":"Semitone Key ")+e:5==t?e+=4>a?" Direction":" All Directions":6==t&&(e+=a?" CW":" CCW"),e}function Hb(){document.activeElement&&document.activeElement.blur(),Tb(),zc.href=URL.createObjectURL(new Blob([ba()])),zc.download=(E||"Song")+".nc",zc.click()}function Ac(t){const a=new FileReader;a.onload=(t=>{T();const a=ba();try{ic(t.target.result)}catch(t){Zb(),ic(a)}hb(),ob(),Bc.value=""}),t&&a.readAsText(t)}function Ib(){Bc.onchange=(t=>Ac(t.target.files[0])),Bc.click()}function Cc(){T();let a=prompt("📐 Level Size?",101);a&&(F=t=a=h(0|a,1e3,25),gb())}function Dc(){Xb&&(Yb.style.display="block",Yb.innerHTML="🗜️ Compressing URL...",Xb=2)}function Ec(){let t=prompt("🥁 Export How many beats?",z);(t=h(t,10*z))&&Fc(t)}function Gc(){Sb.style.display=Sb.style.display?"":"block"}function Zb(){alert("👾 I am Error."),localStorage["OS13kTrophy,👾,NoteCraft,Found Bagu"]="Caused an error"}function Hc(){(fb=fb||Y("canvas",document.body,"","display:none")).height=1024,fb.width=1920,(A=fb.getContext("2d")).scale(2,2);for(let i=0;8>i;++i)for(let c=0;c<ra[i][1];++c)for(let r=0;3>r;++r){const l=2*(c+5*r),b=2*i;var t=0,a=1,e=.5;0==i&&3>c?(a=.2,t=.1,e=.4):0==i?e=a=0:1==i?t=1/6:3==i?(a=2>c?.2:.7,e=r?.9:.7,t=c%2?.05:.55):2==i?(t=c/4,e=r?.7:.3):5==i?(t=5/6,e=r?.6:.3):6==i?(t=.5,e=r?.6:.3):7==i?(t=2/6,e=r?.6:.3):4==i&&(e=r?.5:.2);var n=0==i&&2<c,o=n?"#888":r?"#fff":"#000";if(n=n?.2:r?.1:.05,e=da(t,a,e),0==i||2==i||3==i||7==i)D(l,b,1,1,e,n,o);else if(4==i){for(A.fillStyle=e,A.strokeStyle="#ff0",A.lineWidth=2,A.beginPath(),o=9;o--;)e=2*Math.PI*(o+.5)/8,A.arc(32*(l+.5),32*(b+.5),16,e,e);A.fill(),A.stroke()}else Ic(l+.5,b+.5,e,n,o);if(1==i||5==i||7==i){for(A.strokeStyle="#000",A.fillStyle=1<r?da(0,1,.5):da(t,a,r?.9:.1),A.lineWidth=2,t=3<c,A.beginPath(),a=5+t;a--;)o=(c+3)/4*Math.PI*2+2*Math.PI*(a-1)/(3+t),A.arc(32*(l+.5),32*(b+.5),9.6,o,o);A.fill(),A.stroke()}else 0==i?2==c?D(l+.5-.125,b,.25,1,"#000"):1==c&&D(l,b+.5-.125,1,.25,"#000"):6==i&&(t=da(t,a,r?1:.8),A.save(),A.translate(32*(l+.5),32*(b+.5)),D(-.35,-.125,.7,.25,"#000"),D(-.125,-.35,.25,.7,"#000"),D(-.3,-.075,.6,.15,t),D(-.075,-.3,.15,.6,t),A.restore())}A=R.getContext("2d")}function D(t,a,e,n,o,i=0,c="#fff"){A.save(),A.scale(32,32),o&&(A.fillStyle=o,A.fillRect(t,a,e,n)),i&&(A.lineWidth=i,A.strokeStyle=c,A.strokeRect(t+i/2,a+i/2,e-i,n-i)),A.restore()}function Ic(t,a,e,n=0,o="#fff"){A.save(),A.scale(32,32),A.beginPath(),A.arc(t,a,.5-n/2,0,7),e&&(A.fillStyle=e,A.fill()),n&&(A.lineWidth=n,A.strokeStyle=o,A.stroke()),A.restore()}function Rb(){99<W.length&&W.shift(),W.push([ba(0),O,L,M,lb,mb]),Db=[]}function Eb(t){[t,O,L,M,lb,mb]=t,ic(t)}function Gb(){if(O=0,Db.length){var t=Db.pop();Eb(W[W.push(t)-1]),Fb()}}ondragover=(()=>!1),ondrop=(t=>(Ac(t.dataTransfer.files[0]),!1));let Ca,za,q,ya=0;function Fc(t){T(0),ya=1;let a=[];for(;v<4*t-1;)Ca=[],za=[],0<w?Ub():T(1),Ca.map(t=>{let e=a.find(a=>a[2]==t);e&&(e[0][v]=-1,e[2]=0)}),za.map(t=>{const e=t[0],n=e.data,o=12+t[1];t=t[2]/10;let i=a.find(t=>t[2]==e);i||((i=a.find(t=>!t[2]&&t[1]==n))||(a.push([[],n,e,-1,-1]),i=a[a.length-1]));const c=i[2];i[0][v]=o==i[3]&&e==c?h(t,.999):o+h(t,.999),i[2]=e,i[3]=o,i[4]=t});T(0),ya=0;const e=[];a.map(t=>{const a=t[1];(t=t[0]).unshift(0),t.unshift(a),e.push(t)});const n=e.reduce((t,a)=>Math.max(a.length,t),0);e.map(t=>t.length=n),e.sort((t,a)=>t[0]-a[0]),t=JSON.stringify([r,[e],[0],z]).replace(/null/g,""),zc.href=URL.createObjectURL(new Blob([t])),zc.download=(E||"Song")+".txt",zc.click(),localStorage["OS13kMusic,NoteCraft - "+E]=t,localStorage["OS13kTrophy,🎵🔨,NoteCraft,Exporter"]="Exported to OS13k"}function Jc(...t){Kc(...na(...t))}function oa(...t){q||(q=new(top.AudioContext||webkitAudioContext),(qa=q.createGain()).connect(q.destination),qa.gain.value=X);const a=q.createBuffer(1,t.length,44100),e=q.createBufferSource();return a.getChannelData(0).set(t),e.buffer=a,e}function Kc(...t){(t=oa(...t)).connect(qa),t.start()}const na=(t=1,a=.05,e=220,n=0,o=0,i=.1,c=0,r=1,l=0,b=0,f=0,s=0,u=0,d=0,p=0,y=0,h=0,m=1,v=0,g=0)=>{let x=2*Math.PI;u=44100*u|0;let A=(n=99+44100*n)+(v*=44100)+(o*=44100)+(i=99+44100*i)+(h*=44100)|0,S=l*=500*x/194481e4;a=e*=(1+2*a*Math.random()-a)*x/44100;let w,M=(0<p?1:-1)*x/4,k=0,C=0,T=0,Y=0,B=0,R=0,V=1,D=[];for(;T<A;D[T++]=R)++B%(100*y|0)||(R=(0<(R=c?1<c?2<c?3<c?Math.sin((k%x)**3):Math.max(Math.min(Math.tan(k),1),-1):1-(2*k/x%2+2)%2:1-4*Math.abs(Math.round(k/x)-k/x):Math.sin(k))?1:-1)*Math.abs(R)**r*(u?1-g+g*Math.sin(2*Math.PI*T/u):1)*t*.5*(T<n?T/n:T<n+v?1-(T-n)/v*(1-m):T<n+v+o?m:T<A-h?(A-T-h)/i*m:0),R=h?R/2+(h>T?0:(T<A-h?1:(T-A)/h)*D[T-h|0]/2):R),k+=(w=(e+=l+=500*b*x/44100**3)*Math.sin(C*p*x/44100-M))-w*d*(1-1e9*(Math.sin(T)+1)%2),C+=w-w*d*(1-1e9*(Math.sin(T)**2+1)%2),V&&++V>44100*s&&(e+=f*x/44100,a+=f*x/44100,V=0),!u||++Y%u||(e=a,l=S,V=V||1);return D};let r,x,hc,U,zb,Nb,Cb,Ab,Bb,Aa,xa,ma,R,fb,A,Sb,y,oc,qc,vc,pc,nc,zc,Bc,Jb,Mb,L,M,lb,mb,J,K,vb,O,ub,xb,wb,yb,Lc,xc,Mc,kc,dc,ec,fc,$a,ab,bb,cb,Ra,rb,Yb,Ob,Pb,Ta,Vb,qa,t=57,F=57,z=100,ia=0,eb=4/60,ac=0,v=-1,bc=0,V=new Xa(0,0),sb=0,tb=0,w=-1,db=0,qb=[],S=[],cc=[],E="",H=0,I=0,B=1,W=[],Db=[],$b=0,Xb=0,Ka=0,X=.5;!function(){let t,a=document.body;Lc=Y("div",a,"toolbar"),Mc=Y("div",Lc,"toolbarTop"),xc=Y("div",Lc,"toolbarEditControls"),R=Y("canvas",a),zc=Y("a",a,"","display:none"),(Bc=Y("input",a,"","display:none")).type="file",Bc.accept=".nc",Hc(),wc(),fc=Y("div",a,"watermark"),(nc=Y("input",Mc,"","font-size:30;height:50;width:530")).placeholder="Song Name",nc.onchange=(t=>ob(Tb(E=t.target.value)));var e=Y("div",Mc,"","margin-right:4;margin-left:4;text-align:center");t=Y("span",e,"","","BPM"),(oc=t=Y("input",e,"","")).title="Beats Per Minute - How fast the song is",t.onchange=(t=>ob(Tb(z=t.target.value))),t.type="number",Y("br",e),t=Y("span",e,"","","Key"),(pc=t=Y("input",e,"","")).title="Transpose song key",t.onchange=(t=>ob(Tb(ia=t.target.value))),t.type="number",e=Y("div",Mc,"","margin-right:8");for(let a=0;4>a;++a)(t=Y("div",e,`instrumentButton${a} menuButton`,"width:30",a+1)).title=`Instrument ${a+1} Paremeters`,t.onmousedown=(()=>{Jc(...r[a]);let t=prompt(`🎹 Instrument ${a+1} ZzFX Code`,`zzfx(...${JSON.stringify(r[a]).replace(/null/g,"")})`);t&&((t=t.split("[")[1])?(r[a]=t.split(",").map(t=>t.length?parseFloat(t):void 0),Jc(...r[a]),alert("Instrument Loaded!")):Zb())}),a-1||Y("br",e);const n=Y("div",Mc,"","");[["Save",Hb,"Save to disk (current song is auto saved)"],["Load",Ib,"Load from disk (you can also drag and drop)"],["New",Cc,"Start a new song"],["Share",Dc,"Share a compressed link"],["Export",Ec,"Export to ZzFXM and OS13k"],["Demos",Gc,"Load a demo"]].map((a,e)=>{(t=Y("div",n,"menuButton","",a[0])).onmousedown=a[1],t.title=a[2],e-2||Y("br",n)}),e=Y("div",xc),(kc=Y("div",e,"beatDisplay")).onmousedown=(()=>{T(0==w)}),(dc=Y("div",kc,"beatDisplaySpinner")).title="Toggle Play [Space]",t=Y("div",dc,"beatDisplayMarker"),ec=Y("div",e,"songTimeDisplay"),e=Y("div",xc);const o=Y("div",e);lc.map((a,e)=>{a[3]=t=Y("div",o,"playControl","",a[0],a[2]+` [${e+1}]`),t.onmousedown=(()=>T(e))}),e=Y("div",e,"","display:flex"),vc=Y("div",e,"","width:30"),qc=t=Y("input",e,"","width:230;margin:0"),t.oninput=(t=>{X=h(0|t.target.value,100,0)/100,Tb()}),t.onchange=(t=>ob(t.target.blur())),t.type="range",Yb=Y("div",a,"loadingMessage"),Sb=Y("div",Lc,"menu"),levelData.map((a,e)=>{(t=Y("div",Sb,"level","",a[1])).onmousedown=(()=>{T(),jc(levelData[e]),hb()})}),x=[],Tb(),Qb(2,0),T(),A=R.getContext("2d")}(),R.onmousedown=(t=>{zb=U=t.button+1,Nb=t.buttons}),onmouseup=R.onmouseup=(t=>{U=0,Nb=t.buttons}),onmousemove=(t=>{sb=t.x,tb=t.y}),oncontextmenu=(()=>!1),document.addEventListener("wheel",t=>{t.ctrlKey&&t.preventDefault(),t.target==R&&(Cb=t.deltaY)},{passive:!1}),onkeydown=(t=>{(9==t.keyCode||t.ctrlKey||t.altKey)&&t.preventDefault(),"input"!=t.target.localName&&(t.repeat||(qb[t.keyCode]=S[t.keyCode]=1))}),onkeyup=(t=>qb[t.keyCode]=0);{try{const t=JSON.parse(localStorage.NoteCraftSave);2==t[0]&&(X=t[1])}catch(t){}const t=new URL(window.location.href);try{var Nc;{var Oc=t.searchParams.get("c");const a=(Oc=Oc.substring(0,Oc.length-1)).split("
");let e=a[0];if(1<a.length){let t=a[1];for(let a of t){let t=e.split(a);e=t.join(t.pop())}}Nc=ca(e,0)}ic(Nc),hb()}catch(t){try{ic(localStorage.NoteCraftSaveLevel),hb()}catch(t){T(),jc(levelData[0]),hb()}}t.search="",window.history.pushState(null,null,t.toString())}Wb()
22 | </script>


--------------------------------------------------------------------------------
/levelData.js:
--------------------------------------------------------------------------------
 1 | const levelData = 
 2 | [
 3 | 
 4 | [6,"404 Demo",100,0,517,282,728,0,0,[25,3,6,1,2,4,6,1,4,5,2,1,8,5,3,0,12,5,3,0,13,5,3,0,14,5,3,0,15,5,3,0,16,5,2,1,20,5,2,1,24,5,3,0,4,6,3,0,8,6,3,0,12,6,3,0,16,6,3,0,20,6,3,0,24,6,3,0,4,7,3,0,8,7,3,0,12,7,3,0,16,7,3,0,20,7,3,0,24,7,3,0,4,8,3,0,8,8,3,0,12,8,3,0,16,8,3,0,20,8,3,0,24,8,3,0,4,9,3,0,5,9,3,0,6,9,3,0,7,9,3,0,8,9,3,0,12,9,3,0,16,9,3,0,20,9,3,0,21,9,3,0,22,9,3,0,23,9,3,0,24,9,3,0,8,10,3,0,12,10,3,0,16,10,3,0,24,10,3,0,8,11,3,0,12,11,3,0,16,11,3,0,24,11,3,0,8,12,3,0,12,12,3,0,16,12,3,0,24,12,3,0,8,13,2,1,12,13,2,1,13,13,3,0,14,13,3,0,15,13,3,0,16,13,3,0,24,13,2,1,4,14,1,1,26,14,6,1,3,15,6,1,18,17,6,0,23,17,6,0,19,18,1,1,7,19,1,4,18,19,6,0,20,19,7,2,21,19,7,2,23,19,6,0,6,20,2,3,7,20,7,1,8,20,2,2,17,20,1,4,18,20,6,0,20,20,2,0,21,20,2,0,7,21,6,0,19,21,1,1,20,21,3,0,21,21,0,0,22,21,3,0,23,21,3,0,24,21,3,0,25,21,6,0,7,22,1,4,17,22,1,4,24,22,0,0,25,22,1,4,17,23,6,0,18,23,2,3,19,23,3,0,20,23,3,0,21,23,3,0,22,23,3,0,23,23,3,0,24,23,3,0,20,24,1,4,23,24,1,4,24,24,6,0],29,29],
 5 | 
 6 | [6,"Tetris Loop",120,0,-26,96,809,0,0,[31,5,0,0,28,6,0,0,29,6,0,0,31,6,0,0,17,7,0,0,18,7,0,0,19,7,0,0,21,7,0,0,22,7,0,0,24,7,0,0,25,7,0,0,26,7,0,0,28,7,0,0,31,7,0,0,34,7,0,0,35,7,0,0,18,8,0,0,21,8,0,0,22,8,0,0,25,8,0,0,28,8,0,0,31,8,0,0,33,8,0,0,34,8,0,0,20,10,3,0,21,10,3,0,29,10,3,0,30,10,3,0,20,11,3,0,21,11,3,0,29,11,3,0,30,11,3,0,20,12,3,0,21,12,3,0,29,12,3,0,30,12,3,0,20,13,3,0,21,13,3,0,29,13,3,0,30,13,3,0,15,14,3,0,16,14,3,0,20,14,3,0,21,14,3,0,29,14,3,0,30,14,3,0,40,14,3,0,41,14,3,0,15,15,3,0,16,15,3,0,20,15,3,0,24,15,3,0,25,15,3,0,30,15,3,0,32,15,3,0,33,15,3,0,34,15,3,0,35,15,3,0,36,15,3,0,40,15,3,0,41,15,3,0,15,16,3,0,16,16,3,2,17,16,7,4,20,16,3,0,22,16,3,2,24,16,3,2,25,16,3,0,28,16,3,2,30,16,3,0,32,16,3,0,33,16,3,0,34,16,3,0,35,16,3,0,36,16,3,0,38,16,3,2,40,16,3,0,41,16,3,2,11,17,6,0,16,17,2,0,17,17,7,4,20,17,2,0,22,17,2,0,24,17,2,0,25,17,7,4,26,17,7,4,28,17,2,0,30,17,2,0,32,17,2,0,33,17,7,4,34,17,7,4,36,17,2,0,38,17,2,0,40,17,2,0,41,17,7,4,42,17,7,4,43,17,7,4,10,18,7,4,16,18,1,1,42,18,6,0,43,18,7,4,9,19,7,4,10,19,7,4,12,19,2,2,14,19,2,3,16,19,2,2,18,19,2,3,22,19,2,3,24,19,2,2,26,19,2,3,30,19,2,3,32,19,2,2,34,19,2,3,36,19,2,2,38,19,2,2,40,19,2,3,42,19,7,4,43,19,7,4,9,20,7,4,10,20,6,0,9,21,7,4,10,21,7,4,11,21,7,4,12,21,2,0,14,21,7,4,15,21,7,4,16,21,2,0,18,21,7,4,19,21,7,4,20,21,2,0,22,21,7,4,23,21,7,4,24,21,2,0,26,21,7,4,27,21,7,4,28,21,2,0,30,21,2,0,32,21,7,4,33,21,7,4,34,21,7,4,35,21,7,4,36,21,2,0,38,21,2,0,40,21,2,0,41,21,6,0,12,22,3,0,13,22,3,0,14,22,3,0,15,22,3,0,16,22,3,0,20,22,3,2,23,22,3,2,24,22,3,0,28,22,3,2,30,22,3,2,36,22,3,0,38,22,3,2,40,22,3,2,12,23,3,0,13,23,3,0,14,23,3,0,15,23,3,0,16,23,3,0,24,23,3,0,28,23,3,0,36,23,3,0,40,23,3,0,24,24,3,0,28,24,3,0,36,24,3,0,37,24,3,0,40,24,3,0,24,25,3,0,28,25,3,0,36,25,3,0,37,25,3,0,40,25,3,0,24,26,3,0,36,26,3,0,37,26,3,0,36,27,3,0,37,27,3,0,36,28,3,0,37,28,3,0],57,57],
 7 | 
 8 | [6,"Mario Intro",100,0,392,186,485,0,0,[42,9,3,0,23,10,6,0,24,10,2,2,42,10,3,0,21,11,3,3,22,11,2,3,24,11,1,1,26,11,6,0,37,11,3,0,39,11,3,0,40,11,3,0,42,11,3,0,44,11,3,0,52,11,3,0,22,12,2,3,26,12,2,3,27,12,3,1,32,12,3,0,37,12,3,0,39,12,3,0,40,12,3,0,42,12,3,0,44,12,3,0,48,12,3,0,52,12,3,0,22,13,6,0,26,13,2,3,27,13,3,3,32,13,3,0,37,13,3,0,39,13,3,0,40,13,3,0,42,13,3,0,44,13,3,0,48,13,3,0,52,13,3,0,57,13,3,0,24,14,2,3,25,14,6,0,32,14,3,0,37,14,3,0,40,14,3,0,42,14,3,0,44,14,3,0,46,14,3,0,48,14,3,0,50,14,3,0,52,14,3,0,54,14,3,0,57,14,3,0,58,14,3,0,12,15,3,2,14,15,3,0,15,15,3,0,32,15,3,0,35,15,3,0,37,15,3,0,40,15,3,0,42,15,3,0,44,15,3,0,46,15,3,0,48,15,3,0,50,15,3,0,52,15,3,0,54,15,3,0,57,15,3,0,58,15,3,0,12,16,3,0,14,16,3,0,15,16,3,0,32,16,3,0,35,16,3,0,37,16,3,0,40,16,3,0,42,16,3,0,44,16,3,0,46,16,3,0,48,16,3,0,50,16,3,0,52,16,3,0,54,16,3,0,57,16,3,0,58,16,3,0,12,17,3,0,14,17,3,0,15,17,3,0,17,17,3,0,18,17,3,0,27,17,1,2,32,17,3,0,35,17,3,0,37,17,3,0,40,17,3,0,42,17,3,0,44,17,3,0,46,17,3,0,48,17,3,0,50,17,3,0,52,17,3,0,54,17,3,0,57,17,3,0,58,17,3,0,5,18,3,2,6,18,3,0,10,18,3,2,12,18,3,0,14,18,3,0,15,18,3,0,17,18,3,0,18,18,3,0,19,18,3,0,27,18,0,0,32,18,3,0,35,18,3,0,37,18,3,0,40,18,3,0,42,18,3,0,44,18,3,0,46,18,3,0,48,18,3,0,50,18,3,0,52,18,3,0,54,18,3,0,57,18,3,0,58,18,3,0,5,19,3,0,6,19,3,0,7,19,3,0,8,19,3,0,10,19,3,0,12,19,3,0,14,19,3,2,15,19,2,0,17,19,3,0,18,19,3,0,19,19,3,0,29,19,3,2,32,19,3,0,35,19,3,0,37,19,3,0,40,19,3,0,42,19,3,0,44,19,3,0,46,19,3,2,48,19,3,0,50,19,3,0,52,19,3,2,54,19,3,2,56,19,3,2,58,19,3,0,4,20,7,4,5,20,2,0,6,20,2,0,8,20,2,0,10,20,2,0,11,20,2,0,12,20,3,0,13,20,7,4,14,20,7,4,15,20,7,4,17,20,2,0,18,20,7,4,19,20,7,4,20,20,7,4,27,20,1,1,28,20,0,3,29,20,2,0,30,20,7,4,32,20,2,0,33,20,7,4,35,20,2,0,36,20,7,4,37,20,3,0,38,20,2,0,40,20,2,0,42,20,2,0,43,20,2,0,44,20,3,0,46,20,2,0,47,20,2,0,48,20,3,2,50,20,3,2,51,20,2,0,52,20,2,0,54,20,2,0,56,20,2,0,58,20,2,0,59,20,7,4,4,21,1,1,5,21,5,1,21,21,4,0,26,21,7,4,28,21,5,1,61,21,4,0,20,22,7,4,21,22,7,4,22,22,7,4,23,22,7,4,24,22,7,4,25,22,7,4,26,22,7,4,27,22,0,3,40,22,3,0,41,22,3,0,42,22,3,0,43,22,3,0,44,22,3,0,45,22,2,0,47,22,3,0,48,22,3,0,49,22,2,0,50,22,3,0,51,22,3,0,52,22,3,0,56,22,3,0,57,22,2,0,60,22,7,4,26,23,7,4,47,23,3,0,48,23,3,0,49,23,3,0,50,23,3,0,51,23,3,0,52,23,3,2,55,23,3,0,56,23,3,0,57,23,3,2,60,23,7,4,26,24,7,4,27,24,7,4,28,24,7,4,29,24,7,4,30,24,7,4,31,24,7,4,32,24,7,4,33,24,7,4,34,24,7,4,35,24,7,4,36,24,7,4,37,24,7,4,38,24,7,4,39,24,7,4,40,24,7,4,41,24,7,4,42,24,7,4,43,24,7,4,44,24,7,4,45,24,7,4,46,24,7,4,47,24,7,4,48,24,7,4,49,24,7,4,50,24,7,4,51,24,7,4,52,24,7,4,53,24,7,4,54,24,7,4,55,24,7,4,56,24,7,4,57,24,7,4,58,24,7,4,59,24,7,4,60,24,7,4,26,25,7,4,26,26,7,4,37,26,3,0,38,26,3,0,39,26,3,0,40,26,3,0,46,26,3,2,47,26,7,4,48,26,7,4,49,26,7,4,50,26,7,4,51,26,7,4,52,26,7,4,54,26,3,0,55,26,3,0,56,26,3,0,57,26,3,0,58,26,3,0,59,26,3,0,20,27,7,4,21,27,7,4,22,27,7,4,23,27,7,4,24,27,7,4,25,27,7,4,26,27,7,4,27,27,0,3,36,27,3,0,37,27,3,0,38,27,3,0,39,27,3,0,40,27,2,1,42,27,3,0,43,27,3,0,44,27,3,0,45,27,3,0,46,27,3,0,47,27,2,1,52,27,7,4,54,27,3,0,55,27,3,0,56,27,3,0,57,27,2,1,58,27,3,0,59,27,3,0,60,27,3,0,4,28,1,1,5,28,5,1,21,28,4,0,26,28,7,4,28,28,5,1,61,28,4,0,4,29,7,4,5,29,2,1,6,29,2,1,7,29,3,0,8,29,2,1,10,29,2,1,11,29,2,1,13,29,2,1,14,29,7,4,15,29,7,4,17,29,2,1,18,29,7,4,19,29,7,4,20,29,7,4,27,29,1,1,28,29,0,3,29,29,2,1,30,29,7,4,32,29,2,1,33,29,7,4,35,29,2,1,36,29,7,4,38,29,2,1,41,29,3,0,42,29,2,1,43,29,2,1,45,29,2,1,46,29,2,1,47,29,3,2,49,29,2,1,51,29,2,1,53,29,3,2,54,29,2,1,56,29,2,1,58,29,2,1,59,29,7,4,5,30,3,0,6,30,3,0,7,30,3,2,10,30,3,0,11,30,3,0,13,30,3,0,14,30,3,0,15,30,3,0,17,30,3,0,18,30,3,0,19,30,3,0,29,30,3,0,30,30,3,0,32,30,3,0,38,30,3,0,41,30,3,0,43,30,3,0,45,30,3,0,49,30,3,2,51,30,3,2,56,30,3,0,58,30,3,0,59,30,3,0,10,31,3,0,11,31,3,2,13,31,3,0,14,31,3,0,15,31,3,0,17,31,3,0,18,31,3,0,19,31,3,0,27,31,0,0,29,31,3,0,30,31,3,0,32,31,3,0,38,31,3,0,41,31,3,0,43,31,3,0,45,31,3,0,49,31,3,0,51,31,3,0,56,31,3,0,58,31,3,0,59,31,3,0,14,32,3,0,15,32,3,0,17,32,3,0,18,32,3,0,27,32,1,0,29,32,3,0,30,32,3,0,32,32,3,0,38,32,3,0,41,32,3,0,43,32,3,0,45,32,3,0,49,32,3,0,51,32,3,0,54,32,3,0,55,32,3,0,56,32,3,0,58,32,3,0,59,32,3,0,15,33,3,2,29,33,3,0,30,33,3,0,32,33,3,0,38,33,3,0,41,33,3,0,43,33,3,0,45,33,3,0,48,33,3,0,49,33,3,0,51,33,3,0,54,33,3,0,55,33,3,0,56,33,3,0,58,33,3,0,59,33,3,0,32,34,3,0,38,34,3,0,41,34,3,0,43,34,3,0,45,34,3,0,48,34,3,0,49,34,3,0,55,34,3,0,56,34,3,0,38,35,3,0,41,35,3,0,43,35,3,0],69,69],
 9 | 
10 | [6,"Row your boat into a fire",120,0,382,163,655,0,0,[37,8,3,0,39,8,3,0,41,8,3,0,42,8,3,0,37,9,3,0,39,9,3,0,41,9,3,0,42,9,3,0,37,10,3,0,39,10,3,0,41,10,3,0,42,10,3,0,12,11,7,4,13,11,7,4,14,11,7,4,15,11,7,4,16,11,7,4,17,11,7,4,18,11,7,4,19,11,7,4,20,11,7,4,21,11,7,4,22,11,7,4,23,11,7,4,24,11,7,4,25,11,7,4,26,11,7,4,27,11,7,4,28,11,7,4,29,11,7,4,30,11,7,4,31,11,7,4,32,11,7,4,35,11,3,0,37,11,3,0,39,11,3,0,41,11,3,0,11,12,0,0,12,12,5,1,15,12,7,4,27,12,3,0,28,12,3,0,32,12,7,4,35,12,3,0,37,12,3,0,39,12,3,0,41,12,3,0,15,13,7,4,17,13,2,0,18,13,7,4,19,13,7,4,21,13,2,0,22,13,7,4,23,13,7,4,25,13,2,0,26,13,7,4,27,13,3,0,28,13,2,0,32,13,7,4,35,13,3,0,36,13,2,0,37,13,2,0,39,13,3,0,40,13,2,0,41,13,2,0,42,13,7,4,43,13,7,4,15,14,1,1,16,14,5,1,42,14,6,0,43,14,7,4,27,15,3,0,28,15,3,0,29,15,7,4,30,15,7,4,33,15,7,4,34,15,7,4,42,15,7,4,43,15,7,4,17,16,0,3,27,16,3,0,28,16,3,0,29,16,3,0,30,16,2,0,31,16,7,4,32,16,7,4,33,16,7,4,42,16,7,4,43,16,7,4,25,17,6,1,29,17,6,1,31,17,6,1,42,17,7,4,23,18,3,3,24,18,2,2,26,18,1,3,30,18,1,1,32,18,2,3,42,18,7,4,25,19,6,1,29,19,6,1,31,19,6,1,42,19,7,4,42,20,7,4,6,21,5,4,7,21,5,4,26,21,2,0,28,21,7,4,29,21,2,0,42,21,7,4,6,22,5,4,7,22,5,4,42,22,6,0,14,23,7,4,15,23,7,4,16,23,7,4,17,23,2,0,18,23,2,0,19,23,3,0,20,23,7,4,21,23,2,0,22,23,2,0,23,23,3,0,24,23,7,4,25,23,2,0,26,23,3,0,27,23,3,0,30,23,2,0,31,23,3,0,32,23,7,4,33,23,2,0,34,23,2,0,35,23,3,0,36,23,7,4,37,23,2,0,38,23,2,0,39,23,3,2,40,23,7,4,41,23,2,0,18,24,3,0,19,24,3,0,21,24,3,0,23,24,3,0,25,24,3,0,26,24,3,0,27,24,3,0,30,24,3,0,31,24,3,0,32,24,3,0,33,24,3,0,35,24,3,0,36,24,3,0,37,24,3,0,41,24,3,2,21,25,3,0,23,25,3,0,25,25,3,0,26,25,3,0,27,25,3,0,35,25,3,0,36,25,3,0,21,26,3,0,23,26,3,0,35,26,3,0,36,26,3,0,21,27,3,0,23,27,3,0,21,28,3,0,23,28,3,0],57,57],
11 | 
12 | [6,"Automata Bomb 1",100,0,440,5,477,0,0,[33,31,5,4,34,31,5,4,33,32,5,4,34,32,5,4,33,33,1,4,34,33,1,4],68,68],
13 | 
14 | [6,"Automata Bomb 2",100,0,310,-143,477,0,0,[31,30,1,4,32,30,1,4,33,30,1,4,34,30,1,4,35,30,1,4,36,30,1,4,31,31,1,4,32,31,5,4,33,31,5,4,34,31,5,4,35,31,5,4,36,31,1,4,31,32,1,4,32,32,5,4,33,32,1,4,34,32,1,4,35,32,5,4,36,32,1,4,31,33,1,4,32,33,5,4,33,33,1,4,34,33,1,4,35,33,5,4,36,33,1,4,31,34,1,4,32,34,5,4,33,34,5,4,34,34,5,4,35,34,5,4,36,34,1,4,31,35,1,4,32,35,1,4,33,35,1,4,34,35,1,4,35,35,1,4,36,35,1,4],68,68]
15 | 
16 | ];


--------------------------------------------------------------------------------
/screenshotSmall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KilledByAPixel/NoteCraft/a967ed39023f3b6738a81b7b888f8da0c6338ad8/screenshotSmall.png


--------------------------------------------------------------------------------