Skip to content

Commit

Permalink
chore: Update playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@Korilakkuma
Korilakkuma committed Nov 26, 2023
1 parent 3dc9425 commit ebc2634
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 107 deletions.
115 changes: 55 additions & 60 deletions playground/assets/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,11 @@ header a img {
}

main {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-start;
justify-content: flex-start;

align-items: flex-start;
gap: 24px;
margin: 48px auto;
max-width: 1280px;
width: 90%;
}

main a {
Expand All @@ -63,6 +58,12 @@ main a {
transition: background-color 0.4s ease;
}

footer a {
color: #c0c;
text-decoration: none;
transition: color ease 0.6s;
}

main a:hover {
background-color: #800080;
}
Expand All @@ -71,8 +72,14 @@ main a:focus {
outline: 1px dotted #800080;
}

.buttons {
display: flex;
align-items: stretch;
gap: 12px;
}

.CodeMirror {
width: 932px;
width: 885px;
height: auto;
font-family: "Source Code Pro", monospace;
font-size: 14px;
Expand Down Expand Up @@ -102,12 +109,6 @@ main a:focus {
overflow-x: auto !important; /* overwrite styles by abcjs */
}

#melody-note > svg,
#bass-note > svg {
color: #333;
background-color: #fff;
}

h2 {
font-family: "Lucida Grande", Calibri, Helvetica, Arial, sans-serif;
font-size: 24px;
Expand All @@ -116,32 +117,37 @@ h2 {
}

fieldset {
margin-left: 24px;
display: grid;
grid-template-rows: repeat(7, auto);
grid-template-columns: repeat(3, auto);
gap: 12px;
border: none;
}

legend {
grid-area: 1 / 1 / 2 / 4;
font-size: 24px;
text-transform: uppercase;
}

fieldset > div {
margin-top: 12px;
#button-start {
grid-area: 1 / 1 / 2 / 2;
}

fieldset > div:last-child {
overflow-x: scroll;
width: 368px;
#button-stop {
grid-area: 1 / 2 / 2 / 3;
}

.buttons {
display: flex;
align-items: stretch;
#button-uploader {
grid-area: 1 / 3 / 2 / 4;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

button {
cursor: pointer;
margin-right: 12px;
border: none;
min-height: 48px;
padding: 0 32px;
Expand All @@ -151,14 +157,6 @@ button {
transition: background-color 0.4s ease;
}

#button-uploader {
margin-right: 0;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

button:hover {
background-color: #800080;
}
Expand All @@ -167,22 +165,13 @@ button:focus {
outline: 1px dotted #800080;
}

#module-parameters-controller {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-end;
align-items: flex-end;
}

#module-parameters-controller > label {
fieldset label {
display: block;
width: 100%;
}

select {
-webkit-appearance: none;
grid-area: 3 / 1 / 4 / 4;
cursor: pointer;
border: 2px solid #eee;
padding: 12px 16px;
Expand All @@ -200,7 +189,6 @@ select:focus {
}

#select-code {
margin-right: 12px;
padding: 12px 72px;
width: auto;
color: #666;
Expand All @@ -223,34 +211,47 @@ textarea {
transition: background-color 0.4s ease;
}

input[type="text"]:focus,
textarea:focus {
outline: 1px dotted #999;
background-color: #eee;
}

textarea {
grid-area: 4 / 1 / 5 / 4;
display: block;
box-sizing: border-box;
margin-top: 4px;
width: 100%;
height: 10rem;
font-family: "Source Code Pro", monospace;
font-size: 14px;
color: #666;
}

input[type="text"]:focus,
textarea:focus {
outline: 1px dotted #999;
background-color: #eee;
}

#button-set-parameters {
margin: 4px 0 0;
grid-area: 5 / 1 / 6 / 4;
}

.visualizer-container {
max-width: 375px;
overflow-x: auto;
}

.visualizer-container:nth-of-type(1) {
grid-area: 6 / 1 / 7 / 4;
}

.visualizer-container:nth-of-type(2) {
grid-area: 7 / 1 / 8 / 4;
}

canvas {
width: 1200px;
height: 150px;
background-color: #000;
}

canvas,
svg {
.visualizer-container > svg {
background-color: #000;
}

Expand All @@ -265,12 +266,6 @@ footer > p {
color: #fafafa;
}

footer a {
color: #c0c;
text-decoration: none;
transition: color ease 0.6s;
}

footer a:hover {
color: #800080;
text-decoration: underline;
Expand Down
90 changes: 43 additions & 47 deletions playground/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,56 +87,52 @@ <h1>XSound Playground</h1>
</div>
<fieldset id="ui" hidden>
<legend>Input Forms</legend>
<div class="buttons">
<button type="button" id="button-start">Start</button>
<button type="button" id="button-stop">Stop</button>
<button type="button" id="button-uploader">Upload</button>
<input type="file" accept="audio/*" hidden />
</div>
<div id="module-parameters-controller">
<label>
<select id="select-module">
<option value="default">Select Module</option>
<option value="analyser">Analyser</option>
<optgroup label="Visualizer">
<option value="timeoverview">Time Overview</option>
<option value="time">Time</option>
<option value="fft">FFT</option>
</optgroup>
<option value="autopanner">Autopanner</option>
<option value="bitcrusher">BitCrusher</option>
<option value="chorus">Chorus</option>
<option value="compressor">Compressor</option>
<option value="delay">Delay</option>
<option value="envelopegenerator">Envelope Generator</option>
<option value="equalizer">Equalizer</option>
<option value="filter">Filter</option>
<option value="flanger">Flanger</option>
<option value="fuzz">Fuzz</option>
<option value="listener">Listener</option>
<option value="noisegate">Noise Gate</option>
<option value="noisesuppressor">Noise Suppressor</option>
<option value="overdrive">OverDrive</option>
<option value="panner">Panner</option>
<option value="phaser">Phaser</option>
<option value="pitchshifter">Pitch Shifter</option>
<option value="preamp">Preamp</option>
<option value="reverb">Reverb</option>
<option value="ringmodulator">Ring Modulator</option>
<option value="stereo">Stereo</option>
<option value="tremolo">Tremolo</option>
<option value="vocalcanceler">Vocal Canceler</option>
<option value="wah">Wah</option>
<option value="glide">Glide</option>
</select>
</label>
<textarea id="textarea-param-json">{
<button type="button" id="button-start">Start</button>
<button type="button" id="button-stop">Stop</button>
<button type="button" id="button-uploader">Upload</button>
<input type="file" accept="audio/*" hidden />
<select id="select-module">
<option value="default">Select Module</option>
<option value="analyser">Analyser</option>
<optgroup label="Visualizer">
<option value="timeoverview">Time Overview</option>
<option value="time">Time</option>
<option value="fft">FFT</option>
</optgroup>
<option value="autopanner">Autopanner</option>
<option value="bitcrusher">BitCrusher</option>
<option value="chorus">Chorus</option>
<option value="compressor">Compressor</option>
<option value="delay">Delay</option>
<option value="envelopegenerator">Envelope Generator</option>
<option value="equalizer">Equalizer</option>
<option value="filter">Filter</option>
<option value="flanger">Flanger</option>
<option value="fuzz">Fuzz</option>
<option value="listener">Listener</option>
<option value="noisegate">Noise Gate</option>
<option value="noisesuppressor">Noise Suppressor</option>
<option value="overdrive">OverDrive</option>
<option value="panner">Panner</option>
<option value="phaser">Phaser</option>
<option value="pitchshifter">Pitch Shifter</option>
<option value="preamp">Preamp</option>
<option value="reverb">Reverb</option>
<option value="ringmodulator">Ring Modulator</option>
<option value="stereo">Stereo</option>
<option value="tremolo">Tremolo</option>
<option value="vocalcanceler">Vocal Canceler</option>
<option value="wah">Wah</option>
<option value="glide">Glide</option>
</select>
<textarea id="textarea-param-json">{
&quot;mastervolume&quot;: 1
}</textarea>
<button id="button-set-parameters">Set</button>
</div>
<div>
<button id="button-set-parameters">Set</button>
<div class="visualizer-container">
<canvas width="4800" height="600"></canvas>
</div>
<div class="visualizer-container">
<svg width="1200" height="150"></svg>
</div>
</fieldset>
Expand Down

0 comments on commit ebc2634

Please sign in to comment.