Skip to content

Commit

Permalink
added interactive mode
Browse files Browse the repository at this point in the history 
Interactive mode utilizes SharedArrayBuffers for I/O passing between
main thread and worker thread.  Only works in Firefox right now.
Chrome's implementation of Atomic wait/wake seems to be bugged,
  • Loading branch information
@btzy
btzy committed Apr 7, 2017
1 parent 3bf95de commit bd92203
Show file tree
Hide file tree
Showing 8 changed files with 581 additions and 26 deletions.
204 changes: 198 additions & 6 deletions bf.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ blue (50%): rgb(0,102,255)
blue (75%): rgb(128,179,255)
blue (90%): rgb(204,224,255)
blue (95%): rgb(230,240,255)
red (30%): rgb(153,0,0)
grey (25%): rgb(64,64,64)
*/

html, body{
Expand Down Expand Up @@ -75,7 +79,20 @@ body>.wrapper>*{
font-family:"Chewy","Signika",sans-serif;
font-size:32px;
color:rgb(153,0,0);
text-shadow:0 0 10px white;
position:relative;
}

#header .title::before{
position:absolute;
display:block;
content:"Jelly";
padding:0px 20px;
left:0;
top:0;
font-family:"Chewy","Signika",sans-serif;
font-size:32px;
color:white;
filter:blur(4px);
}

#header .headerbutton{
Expand Down Expand Up @@ -166,9 +183,10 @@ body>.wrapper>*{
}

#compilationinfo{
flex:0 0 26px;
background-color:rgb(204,224,255);
line-height:26px;
flex:0 0 20px;
background-color:rgb(230,240,255);
line-height:20px;
font-size:14px;
}

#compilationinfo .compilationinfospan{
Expand All @@ -183,9 +201,135 @@ body>.wrapper>*{
color:green;
}

#iooptions{
flex:0 0 0px;
#options{
flex:0 0 48px;
background-color:rgb(204,224,255);
font-size:14px;
}

#options>.wrapper{
height:100%;
width:100%;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
}

#options>.wrapper>*{
display:block;
overflow:hidden;
height:48px;
box-sizing:border-box;
flex:0 0 auto;
}

#options>.wrapper>.executionoptions, #options>.wrapper>.compilationoptions{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
}



#options>.wrapper>.vertical-bar{
flex:0 0 18px;
width:18px;
overflow:visible;
}

#options>.wrapper>.vertical-bar::before{
display:block;
content:"";
margin:0 auto;
width:2px;
height:100%;
background-color:white;
filter:blur(2px);
}

#options .optiongroup{
flex:0 0 auto;
padding:4px 12px;
border:none;
outline:none;
margin:0;
}

#options .optiongroup .radiooption{
height:20px;
}

#options .optiongroup .radiooption input[type="radio"]{
position:absolute;
visibility:hidden;
}

#options .optiongroup .radiooption label{
line-height:20px;
width:100%;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:flex-start;
align-items:center;
cursor:pointer;
}

#options .optiongroup .radiooption label>span{
display:block;
flex:0 0 auto;
}

#options .optiongroup .radiooption label>span.fakeradiobutton{
width:16px;
height:16px;
box-sizing:border-box;
border:2px solid rgb(64,64,64);
border-radius:100%;
transition:border-color 0.5s;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:center;
}

#options .optiongroup .radiooption label>span.fakeradiobutton::before{
content:"";
display:block;
background-color:blue;
border-radius:100%;
flex:0 0 auto;
width:0;
height:0;
transition:width 0.5s,height 0.5s;
}

#options .optiongroup .radiooption label>span.radiotext{
padding-left:4px;
color:rgb(64,64,64);
transition:color 0.5s;
}

#options .optiongroup .radiooption input[type="radio"]:checked ~ label>span.radiotext{
color:blue;
}

#options .optiongroup .radiooption input[type="radio"]:checked ~ label>span.fakeradiobutton{
border-color:blue;
}

#options .optiongroup .radiooption input[type="radio"]:checked ~ label>span.fakeradiobutton::before{
width:8px;
height:8px;
}

#options>.wrapper>.extraspace{
flex:1 1 auto;
}

#ioblock{
Expand All @@ -203,6 +347,10 @@ body>.wrapper>*{
position:relative;
}

#ioblock .separate:not(.selected){
display:none;
}

#ioblock .separate>*{
display:block;
overflow:hidden;
Expand Down Expand Up @@ -231,6 +379,7 @@ body>.wrapper>*{
padding:0 6px;
background-color:rgb(230,240,255);
font-size:14px;
color:rgb(64,64,64);
}

#ioblock .separate .ioseparateindividualblock>.iocontent{
Expand Down Expand Up @@ -260,6 +409,49 @@ body>.wrapper>*{
width:100%;
}

#ioblock .combined{
height:100%;
width:100%;
display:flex;
flex-direction:column;
flex-wrap:nowrap;
justify-content:center;
align-items:stretch;
}

#ioblock .combined:not(.selected){
display:none;
}

#ioblock .combined>.iotitle{
flex:0 0 20px;
height:20px;
line-height:20px;
padding:0 6px;
background-color:rgb(230,240,255);
font-size:14px;
color:rgb(64,64,64);
}

#ioblock .combined>.iocontent{
flex:1 1 0px;
height:100%;
width:100%;
}

#ioblock .combined>.iocontent .terminal{
height:100%;
width:100%;
-webkit-touch-callout: initial;
-webkit-user-select: initial;
-khtml-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial;
font:16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
padding:0 4px;
}

body>.wrapper>.horizontal-spacer{
flex:0 0 0px;
height:0px;
Expand Down
53 changes: 51 additions & 2 deletions bf.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="bf.css" />
<script src="ace/ace.js" type="text/javascript"></script>
<script src="interactive-console.js" type="text/javascript"></script>
<script src="flex-splitter.js" type="text/javascript"></script>
<script src="jelly-bf-processhandler.js" type="text/javascript"></script>
<script src="bf.js" type="text/javascript"></script>
Expand All @@ -33,12 +34,54 @@
<div class="actual-spacer"></div>
</div>
<div id="compilationinfo"><span class="compilationinfospan" id="compilationspan"></span><span class="compilationinfospan" id="executionspan"></span></div>
<div id="iooptions"></div>
<div class="horizontal-spacer">
<div class="actual-spacer"></div>
</div>
<div id="options">
<div class="wrapper">
<div class="compilationoptions">
<fieldset class="optiongroup">
<div class="radiooption">
<input type="radio" name="compilemode" id="radio-compilemode-debug" />
<label for="radio-compilemode-debug"><span class="fakeradiobutton"></span><span class="radiotext">Debug (Interpreted)</span></label>
</div>
<div class="radiooption">
<input type="radio" name="compilemode" id="radio-compilemode-release" />
<label for="radio-compilemode-release"><span class="fakeradiobutton"></span><span class="radiotext">Release (Compiled &amp; Optimized)</span></label>
</div>
</fieldset>
</div>
<div class="vertical-bar"></div>
<div class="executionoptions">
<fieldset class="optiongroup">
<div class="radiooption">
<input type="radio" name="interactive" id="radio-interactive-yes" />
<label for="radio-interactive-yes"><span class="fakeradiobutton"></span><span class="radiotext">Interactive</span></label>
</div>
<div class="radiooption">
<input type="radio" name="interactive" id="radio-interactive-no" />
<label for="radio-interactive-no"><span class="fakeradiobutton"></span><span class="radiotext">Non-interactive</span></label>
</div>
</fieldset>
<!--<fieldset class="optiongroup">
<div class="radiooption">
<input type="radio" name="interweave" id="radio-interweave-yes" />
<label for="radio-interweave-yes"><span class="fakeradiobutton"></span><span class="radiotext">Interweave I/O</span></label>
</div>
<div class="radiooption">
<input type="radio" name="interweave" id="radio-interweave-no" />
<label for="radio-interweave-no"><span class="fakeradiobutton"></span><span class="radiotext">Separate I/O</span></label>
</div>
</fieldset>-->
</div>
<div class="extraspace"></div>
</div>
</div>
<div class="horizontal-spacer">
<div class="actual-spacer"></div>
</div>
<div id="ioblock">
<div class="separate">
<div class="separate selected">
<div class="ioseparateindividualblock" id="inputblock">
<div class="iotitle">Input</div>
<div class="iocontent">
Expand All @@ -55,6 +98,12 @@
</div>
</div>
</div>
<div class="combined">
<div class="iotitle">Console</div>
<div class="iocontent">
<div class="terminal"></div>
</div>
</div>
</div>
</div>

Expand Down
Loading

0 comments on commit bd92203

Please sign in to comment.