<h1>Source</h1>

<p>
Crystal Playground is developed together with Crystal Compiler.
</p>

<p>
You can find the source code at <a href="https://github.com/crystal-lang/crystal/tree/master/src/compiler/crystal/tools/playground">https://github.com/crystal-lang/crystal/tree/master/src/compiler/crystal/tools/playground</a>.
</p>

<p>
Currently you are using <code class="crystal-version"></code>.
</p>

<h1>Usage</h1>

<p>
Start typing code in the editor. When you stop typing or click the green button the code will be compiled and executed. Go ahead, try it!
</p>

<pre class="playground">
a = 1
b = 3</pre>

<p>
As you can see, some values appeared on the side. These are the values that each line generates.
</p>

<p>
When a program prints, like when using <code>puts</code>, the output is visible in the bottom panel.
</p>

<pre class="playground">
s = "Lorem ipsum"
puts s</pre>

<p>
In the main playground this is hidden by default and will appear when <span class="octicon octicon-terminal teal-text"></span> is pressed. Since the sidebar will likely show all the needed information you won't need this output all the time. Also, <code>puts</code> returns <code>nil</code>, but the sidebar will show the argument instead of the returned value. The same applies for <code>print</code> and <code>raises</code>.
</p>

<p>
Loops, functions, classes, sleeps and the whole language is available. When a line is executed multiple times, all produced values are collected and can be inspected in a table.
</p>

<pre class="playground">
def sample(n)
  res = [] of Float64
  n.times do
    res << rand
  end
  res
end

sample 5</pre>

<p>
And you can use the whole standard library. Seriously. Run the next sample and <a href="http://0.0.0.0:5678" target="_blank">click here <span class="octicon octicon-link-external"></span></a>. Once you finish you can stop the long running process with the stop button. That will kill the process, hence display an exit status and a <span class="octicon octicon-terminal red-text"></span>.
</p>

<pre class="playground">
require "http/server"

server = HTTP::Server.new "0.0.0.0", 5678 do |context|
  context.request.path
  context.response.headers["Content-Type"] = "text/plain"
  context.response.print("Hello world!")
end

puts "Listening on http://0.0.0.0:5678"
server.listen</pre>

<p>
When <code>crystal play</code> is run from your awesome Crystal app or shard you are able to use <code>require</code> as you would normaly do: require relative files and even dependencies declared in your <code>shards.yml</code>.
</p>

<p>
In loops it is sometimes useful to inspect the values of multiple variables. Tuple literals are handy for this since each element of the tuple will appear in a different column in the table.
</p>

<pre class="playground">
(1..100).each do |i|
  r = case {i % 3 == 0, i % 5 == 0}
  when {true, true}
    "FizzBuzz"
  when {true, _}
    "Fizz"
  when {_, true}
    "Buzz"
  else
    i
  end

  {i, r, i % 3, i % 5}
end
</pre>

<p>
And regarding errors, try to fix the following code one step at a time. You can see the full trace when clicking the inline errors.
</p>

<pre class="playground autorun">
def bar
  "Hurray " + 42
end

baz
</pre>

        <h1>Load, Store and Share</h1>

<div class="row">
  <div class="col s8">
    <p>
    In the playground your code is persisted in every stroke and before you close or refresh the window. It is persisted in both <code>SessionStore</code> and <code>LocalStore</code> if available. This means that next time you open the playground the code will still be there!
    </p>

    <p>
    You are able to save the current code as a file and even share it as a gist from the action buttons in the bottom right corner.
    </p>

    <p>
    For loading a Crystal <code>.cr</code> file, just drag and drop it anywhere in the playground. Or start the server with <code>$ crystal play ./path/to/file.cr</code>.
    </p>
  </div>
  <div class="col s4 center-align">
    <div>
      <div>
        <ul class="unstyled">
          <li style="padding-bottom: 14px;">
            <a class="btn-floating btn grey darken-1" href="javascript:">
              <span class="octicon octicon-mark-github"></span>
            </a>
          </li>
          <li>
            <a class="btn-floating btn red darken-1" href="javascript:">
              <span class="octicon octicon-desktop-download"></span>
            </a>
          </li>
        </ul>
        <a class="run-button btn-floating btn-large waves-effect waves-light" href="javascript:">
          <span class="mega-octicon octicon-triangle-right"></span>
        </a>
      </div>
    </div>
  </div>
</div>

<h1>Workbook</h1>

<p>In the <a href="/workbook">workbook</a> you will find a listing of all the files in the <code>./playground</code> folder of your current location.<p>

<p>
These files can be <code>.md</code>, <code>.html</code> and even <code>.cr</code>. And will be displayed with playground editor.
</p>

<h1>Credits</h1>

<p>
The following libraries are used in Crystal Playground.
</p>

<ul>
  <li><a href="//materializecss.com" target="_blank">Materialize</a></li>
  <li><a href="//codemirror.net" target="_blank">CodeMirror</a></li>
  <li><a href="//octicons.github.com" target="_blank">GitHub Octicons</a></li>
  <li><a href="//github.com/drudru/ansi_up" target="_blank">ansi_up.js</a></li>
</ul>

<p>
Thanks for all the hard work!
</p>
