From 4093f64e12994705b4417efa7783cd2db2573687 Mon Sep 17 00:00:00 2001 From: SthephanShi Date: Sat, 7 May 2022 01:56:28 +0300 Subject: [PATCH] Make semantic elements to navigate with keyboard (#24,#26,#44) --- .eslintrc.json | 1 + bytebeat.css | 89 +++++++++------- index.html | 122 +++++++++++----------- library/{js-big-code.json => big-js.json} | 0 library/classic.json | 4 +- library/{js-code.json => compact-js.json} | 5 +- library/sthephanshi.json | 6 +- scripts/bytebeat.mjs | 73 +++++++------ 8 files changed, 162 insertions(+), 138 deletions(-) rename library/{js-big-code.json => big-js.json} (100%) rename library/{js-code.json => compact-js.json} (99%) diff --git a/.eslintrc.json b/.eslintrc.json index 4ac3b133..2de58e07 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -59,6 +59,7 @@ "one-var": ["error", { "initialized": "never", "uninitialized": "consecutive" }], "prefer-arrow-callback": "error", "prefer-destructuring": ["error", { "object": true }], + "quotes": ["error", "single"], "quote-props": ["error", "as-needed"], "require-jsdoc": "off", "template-curly-spacing": ["error", "always"] diff --git a/bytebeat.css b/bytebeat.css index 4d8e6720..33483405 100644 --- a/bytebeat.css +++ b/bytebeat.css @@ -4,7 +4,7 @@ html { background-color: #000; color: #c5c8c6; font-size: 15px; - font-family: Courier, Sans, sans-serif; + font-family: sans-serif; } body { @@ -15,12 +15,16 @@ a, a:visited { color: #89c2ff; } -a:hover, code:hover { +a:hover { color: #ed88fb !important; } +:focus-visible { + outline: 2px solid #614fdb; +} + .disabled { - display: none; + display: none !important; } /* ==[ Containers ] ======================================================================================= */ @@ -60,10 +64,10 @@ a:hover, code:hover { display: flex; flex-shrink: 0; position: relative; - cursor: pointer; box-sizing: border-box; border: 2px solid #fda757; overflow: hidden; + cursor: pointer; } #canvas-main { @@ -102,8 +106,8 @@ a:hover, code:hover { top: 50%; left: 50%; padding: 1px 8px; - color: #c5c8c6; border-radius: 16px; + color: #c5c8c6; line-height: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); @@ -140,8 +144,8 @@ button[name="close"] { padding: 3px 3px 3px 5px; border: none; box-sizing: border-box; - color: #fff; background-color: #000; + color: #fff; font: 13px/13px Monospace; word-break: break-all; outline: none; @@ -200,44 +204,52 @@ button[name="close"] { /* ==[ Library ] ========================================================================================== */ -code { - display: inline; - margin: 0px; +.code-text { + display: inline-block; + margin: 0; + padding: 0; + border: none; color: #ffcc53; + background: none; + font: 12px monospace; + text-align: left; + text-decoration: none; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; cursor: pointer; } +.code-text:hover { + color: #ed88fb !important; +} .code-date, .code-length, .code-samplerate { color: gray; - letter-spacing: -1px; cursor: default; } .code-button { display: inline-block; - margin: 1px 0 1px 6px; - padding: 1px 4px; + margin: 1px 0 0 6px; + padding: 2px 4px; + border: none; border-radius: 3px; - color: #ced5e1; background-image: linear-gradient(to bottom, #424242, #171b22); + color: #ced5e1; + font-family: inherit; + font-size: 12px; + line-height: 12px; white-space: nowrap; - letter-spacing: -1px; cursor: pointer; } .code-button:hover { + background-image: linear-gradient(to bottom, #3c508a, #1f2331); color: #c2dfff; - background-image: linear-gradient(to bottom, #364779, #1f2331); } -.code-button[disabled] { - opacity: 0.7; - color: #ced5e1 !important; - background-image: linear-gradient(to bottom, #424242, #171b22) !important; - cursor: default; +.code-toggle { + width: 18px; } .entry { @@ -245,7 +257,7 @@ code { } .entry-children > .entry:not(:last-child) { - margin-bottom: 3px; + margin-bottom: 4px; } .entry-children > .entry::before { @@ -264,19 +276,19 @@ code { .entry.star-white::before { content: "\2605"; position: absolute; - top: -2px; + top: 0; left: -12px; color: white; - font-size: 11px; + font-size: 12px; } .entry.star-yellow::before { content: "\2605"; position: absolute; - top: -2px; + top: 0; left: -12px; color: yellow; - font-size: 11px; + font-size: 12px; } .entry-top { @@ -293,6 +305,7 @@ code { border-bottom: 1px solid #444; border-left: 1px solid #444; border-radius: 3px; + background: #0a0a0a; font-size: 12px; } @@ -301,15 +314,19 @@ code { padding: 4px 5px; border-radius: 3px; background-image: linear-gradient(to bottom, #202c46, #0b0d17); - font-weight: bold; cursor: pointer; } -.library-header:hover { +.library-header:hover, .library-header:focus-visible { background-image: linear-gradient(to bottom, #32426c, #151b2b); color: #94c7ff; } +.library-header > h1 { + margin: inherit; + font-size: inherit; +} + .loading-error { text-align: center; color: #f92672; @@ -336,15 +353,17 @@ code { .control-button, .control-select { height: 32px; margin: 1px 2px; + padding: 0; + border: none; border-radius: 6px; - color: #e3e3e3; background-image: linear-gradient(to bottom, #959595, #242a37); + color: #e3e3e3; cursor: pointer; } .control-button:not([disabled]):hover, .control-select:hover { + background-image: linear-gradient(to bottom, #738cc1, #28314a); color: #c2dfff; - background-image: linear-gradient(to bottom, #738cc1, #28314a) } .control-button:not([disabled]):active, .control-select:active { @@ -362,22 +381,21 @@ code { height: 32px; margin: 1px 2px 1px 0; padding: 0 8px; - color: #e3e3e3; background: linear-gradient(to top, #3a445e, #181c26); + color: #e3e3e3; border: none; border-radius: 0 4px 4px 0; font-weight: bold; - outline: none; - box-shadow: inset 0px 0px 12px rgba(202, 202, 202, 0.5); + box-shadow: inset 0 0 12px rgba(202, 202, 202, 0.5); } #control-counter-units { margin-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; text-align: center; font: bold 13px tahoma; line-height: 30px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; user-select: none; } @@ -398,7 +416,6 @@ code { padding-left: 4px; border: none; font-weight: bold; - outline: none; } .control-select > option { @@ -407,11 +424,11 @@ code { #control-volume { appearance: none; - background-color: #2e3239; width: 150px; height: 14px; margin: 10px 0 10px 4px; border-radius: 15px; + background-color: #2e3239; align-self: center; } diff --git a/index.html b/index.html index 0e5b6896..27814dce 100644 --- a/index.html +++ b/index.html @@ -8,37 +8,37 @@ Bytebeat composer - - + + -
-
+
+
-
t
+ -
+
-
+ +
-
+ +
-
+ +
-
+ +
-
+ +
+ -
+
+
@@ -70,11 +70,11 @@
- -
-
-
[Info] — about bytebeat
-
+ +
+
+

[ Info ] — about bytebeat

 +
Bytebeat music (or one-liner music) was invented in September 2011. They're generally a piece of rhythmic and somewhat melodic music with no score, no instruments, and no real oscillators. It's simply a single-line formula that defines a waveform as a function of time, processed (usually) 8000 times per second, resulting in an audible waveform with a 256-step resolution from silence (0) to full amplitude (256). @@ -94,47 +94,49 @@
This website is the fork of 8-bit Generative Composer by @paul_hayes.
Forked by SthephanShi aka Viraya. -
-
-
-
- [Classic] — C compatible code with one variable (t) + + +
+ +

[ Classic ] — C compatible code with one variable (t)

-
-
-
-
-
- [JS code] — compact JavaScript code + +
+ +
+ +

[ Compact JS ] — compact JavaScript code

-
-
-
-
-
- [JS big code] — big JavaScript code + +
+ +
+ +

[ Big JS ] — big JavaScript code

-
-
-
-
-
- [Floatbeat] — assumes output is -1.0 to 1.0 + +
+ +
+ +

[ Floatbeat ] — assumes output is -1.0 to 1.0

-

-
-
-
-
- [SthephanShi] — code SthephanShi created + +
+ +
+ +

[ SthephanShi ] — code SthephanShi created

-
-
-
- >> Discussion threads
- >> Github -
- + +
+ + + +
diff --git a/library/js-big-code.json b/library/big-js.json similarity index 100% rename from library/js-big-code.json rename to library/big-js.json diff --git a/library/classic.json b/library/classic.json index 599d5810..a9ff598b 100644 --- a/library/classic.json +++ b/library/classic.json @@ -256,8 +256,8 @@ "url": "http://www.pouet.net/topic.php?which=8357&page=8#c388898", "date": "2011-10-04", "sampleRate": 44100, - "codeMinified": "(((t>>1)*(15&(0x234568a0>>((t>>8)&28))))|((t>>1)>>(t>>11))^(t>>12))+((t>>4)&(t&24))", - "codeOriginal": "((t>>1)*(15&0x234568a0>>(t>>8&28))|t>>1>>(t>>11)^t>>12)+(t>>4&t&24)", + "codeOriginal": "(((t>>1)*(15&(0x234568a0>>((t>>8)&28))))|((t>>1)>>(t>>11))^(t>>12))+((t>>4)&(t&24))", + "codeMinified": "((t>>1)*(15&0x234568a0>>(t>>8&28))|t>>1>>(t>>11)^t>>12)+(t>>4&t&24)", "starred": 1 }, { "description": "CA98", diff --git a/library/js-code.json b/library/compact-js.json similarity index 99% rename from library/js-code.json rename to library/compact-js.json index 55cc9571..d198ad49 100644 --- a/library/js-code.json +++ b/library/compact-js.json @@ -453,7 +453,7 @@ "codeOriginal": "c='charCodeAt',l=9+!(t&(1<<16)),c[c]((t>>c[c](((t>>9)%l&t>>12)%l))%l)+(t&(1<<12))*.9", "codeMinified": "c='charCodeAt',l=9+!(t&65536),c[c]((t>>c[c](((t>>9)%l&t>>12)%l))%l)+(t&4096)*.9" }, { - "description": "Experiment with \"Running man\" [t*(3+(1^5&t>>10))*(5+(3&t>>14))>>(3&t>>8)] and \"Street Surfer\" [t&4096?(t*(t^t%255)|t>>4)>>1:t>>3|(t&8192?t<<2:t)]", + "description": "Experiment with \"Running man\" and \"Street Surfer\" ", "date": "2021-10-07", "children": [{ "description": "Isolated and edited drums", @@ -1351,6 +1351,3 @@ }] } ] - - - diff --git a/library/sthephanshi.json b/library/sthephanshi.json index bcd15e9c..4922cd50 100644 --- a/library/sthephanshi.json +++ b/library/sthephanshi.json @@ -1,6 +1,6 @@ [ { - "description": "\"Explosive beat\". Formulas family discovered by experimenting with \"Explosions\" [(t>>2)*(t>>5)|t>>5]", + "description": "\"Explosive beat\". Formulas family discovered by experimenting with \"Explosions\" ", "children": [{ "codeOriginal": "(t>>4)*(t>>3)|t>>2" }, { @@ -19,7 +19,7 @@ "codeOriginal": "(t>>5)*(t>>5)|t>>2" }] }, { - "description": "\"Robocop\". Cool beat discovered by experimenting with [(t>>2)*(t&16)|t>>2]", + "description": "\"Robocop\". Cool beat discovered by experimenting with ", "children": [{ "description": "Very cool sound with biting blows", "codeOriginal": "(t>>2)*(t&(t&32768?16:24)|t>>(t>>8&28))|t>>2", @@ -99,7 +99,7 @@ "codeOriginal": "t%((t&-16|t>>11)&42)<<2|t>>4" }] }, { - "description": "\"Game levels\"
Series of formulas discovered by experimenting with \"Running man\" [t*(3+(1^5&t>>10))*(5+(3&t>>14))>>(3&t>>8)]
Allows to get different interesting chiptune sounds!
", + "description": "\"Game levels\"
Series of formulas discovered by experimenting with \"Running man\"
Allows to get different interesting chiptune sounds!
", "children": [{ "description": "Let replace (3+(1^5&t>>10)) with (2-(1&-t>>11))", "codeOriginal": "t*(2-(1&-t>>11))*(5+(3&t>>14))>>(3&t>>8)" diff --git a/scripts/bytebeat.mjs b/scripts/bytebeat.mjs index 3d994fd5..1561feb1 100644 --- a/scripts/bytebeat.mjs +++ b/scripts/bytebeat.mjs @@ -223,48 +223,50 @@ globalThis.bytebeat = new class { entry += ` (${ date })`; } if(sampleRate) { - entry += ` ${ (sampleRate / 1000) | 0 }kHz`; + entry += ` ${ sampleRate }Hz`; } if(mode) { entry += ` ${ mode }`; } const songData = codeOriginal || codeMinified || file ? JSON.stringify({ sampleRate, mode }) : ''; + if(codeMinified) { + if(codeOriginal) { + entry += ` ${ + codeMinified.length }c'; + } + } else if(codeOriginal) { + entry += ` ${ codeOriginal.length }c`; + } if(file) { if(fileFormatted) { - entry += `► formatted`; + }" title="Click to load and play the formatted code">► formatted`; } if(fileOriginal) { - entry += `► original`; + }" title="Click to load and play the original code">► original`; } if(fileMinified) { - entry += `► minified`; + }" title="Click to load and play the minified code">► minified`; } } if(codeOriginal) { if(Array.isArray(codeOriginal)) { codeOriginal = codeOriginal.join('\r\n'); } - const btn = codeMinified ? 'original' : ''; - entry += `
- ${ this.escapeHTML(codeOriginal) } - ${ codeOriginal.length }c${ btn } -
`; + entry += `