2015-01-28 07:35:57 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2017-02-22 08:30:25 +02:00
|
|
|
<title>Salet playground</title>
|
2015-02-01 00:24:56 +02:00
|
|
|
|
|
|
|
|
<!-- Bootstrap Latest compiled and minified CSS -->
|
2015-01-28 07:35:57 +02:00
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
2015-02-01 00:24:56 +02:00
|
|
|
<!-- Bootstrap Optional theme -->
|
2015-01-28 07:35:57 +02:00
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
|
2015-02-06 08:14:46 +02:00
|
|
|
<!-- JSTinker Style -->
|
|
|
|
|
<link rel="stylesheet" href="css/jstinker.css" type="text/css">
|
2015-01-28 07:35:57 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<nav class="navbar navbar-default">
|
2015-02-06 08:14:46 +02:00
|
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
|
|
|
<div class="navbar-header">
|
|
|
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar">
|
|
|
|
|
<span class="sr-only">Toggle toolbar</span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
</button>
|
2017-02-22 08:30:25 +02:00
|
|
|
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Salet playground</a>
|
2015-02-06 08:14:46 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
|
|
|
<div class="collapse navbar-collapse" id="toolbar">
|
|
|
|
|
<ul class="nav navbar-nav">
|
|
|
|
|
<li id="btnRun"><a href=""><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Run</a></li>
|
|
|
|
|
<li id="btnTidyUp"><a href=""><span class="glyphicon glyphicon-flash" aria-hidden="true"></span> TidyUp</a></li>
|
2015-02-12 05:39:13 +02:00
|
|
|
<li id="btnTogether"><a href=""><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> Collaborate</button></li>
|
2015-02-06 08:14:46 +02:00
|
|
|
</ul>
|
|
|
|
|
</div><!-- /.navbar-collapse -->
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<!-- Sidebar -->
|
|
|
|
|
<div id="sidebar">
|
2017-02-22 08:30:25 +02:00
|
|
|
<div class="panel-body">
|
|
|
|
|
<p>You write in HTML, SCSS and CoffeeScript. Press Run to play your game.</p>
|
|
|
|
|
<h4>Legal and Credits</h4>
|
|
|
|
|
<p>Original JSTinker by <a title="John's homepage" href="http://johncipponeri.github.io/">John Cipponeri</a>.</p>
|
|
|
|
|
<p>CSS Design by <a title="Gianni's Twitter" href="https://twitter.com/Hazulu">@Hazulu</a></p>
|
|
|
|
|
<p>Salet is MIT license.</p>
|
|
|
|
|
<p>You own what you write. The code that runs here belongs to you only.</p>
|
|
|
|
|
<p>The code is not saved anywhere. We are not responsible for any loss.</p>
|
|
|
|
|
<h4>Links</h4>
|
|
|
|
|
<p><a href="https://salet.su">Salet website</a></p>
|
|
|
|
|
</div>
|
2015-02-06 08:14:46 +02:00
|
|
|
</div><!-- /sidebar -->
|
|
|
|
|
|
|
|
|
|
<div class="editors">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<!-- HTML Editor -->
|
|
|
|
|
<div class="editorContainer">
|
2017-02-22 08:30:25 +02:00
|
|
|
<div class="editor" id="html-editor"><div id="page">
|
|
|
|
|
<div class="fixed container">
|
|
|
|
|
<div id="tools_wrapper" class="row">
|
|
|
|
|
<div class='ways'>
|
|
|
|
|
<ul class="nav nav-pills" id="ways">
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<button id="erase" class="btn btn-outline-danger">Restart</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div> <!-- End of div.tools_wrapper -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div id="content_wrapper" class="row">
|
|
|
|
|
<div id="content" class="content"></div>
|
|
|
|
|
<a name="end_of_content"></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> <!-- End of div.page --></div>
|
2015-02-06 08:14:46 +02:00
|
|
|
</div>
|
|
|
|
|
<!-- CSS EDitor -->
|
|
|
|
|
<div class="editorContainer">
|
2017-02-22 08:30:25 +02:00
|
|
|
<div class="editor" id="css-editor">
|
2017-02-22 12:38:05 +02:00
|
|
|
$font-family-sans-serif: 'PT Sans','Open Sans',"Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
|
|
$headings-font-family: "PT Sans Caption",$font-family-sans-serif;
|
|
|
|
|
$font-family-base: $font-family-sans-serif;
|
|
|
|
|
|
|
|
|
|
$body-bg: #fff;
|
|
|
|
|
$body-color: #000;
|
|
|
|
|
$link-color: blue;
|
|
|
|
|
$btn-bg: grey;
|
|
|
|
|
$btn-color: lighten($btn-bg, 50%);
|
|
|
|
|
$secondary-bg: #F1EED9;
|
|
|
|
|
|
|
|
|
|
$brand-primary: lighten($body-color, 20%);
|
|
|
|
|
$brand-danger: darken($body-bg, 30%);
|
|
|
|
|
|
|
|
|
|
$waycolor: $link-color;
|
|
|
|
|
$text_background: $body-bg; // can be btn-bg
|
|
|
|
|
$animation_duration: 2s;
|
|
|
|
|
.fixed {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
#tools_wrapper {
|
|
|
|
|
background: $body-bg;
|
|
|
|
|
.ways {
|
|
|
|
|
padding: 0.5em;
|
|
|
|
|
@extend .col-md-6;
|
|
|
|
|
}
|
|
|
|
|
.buttons {
|
|
|
|
|
@extend .col-md-6;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
button {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
#content_wrapper {
|
|
|
|
|
background: $text_background;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.content {
|
|
|
|
|
@extend .col-md-10;
|
|
|
|
|
@extend .offset-md-1;
|
|
|
|
|
@extend .col-xs-12;
|
|
|
|
|
padding: 1em;
|
|
|
|
|
ul {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0 0 0 1em;
|
|
|
|
|
}
|
|
|
|
|
ul.options {
|
|
|
|
|
padding: 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 0.5em;
|
|
|
|
|
margin-bottom: 0.7em;
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
li {
|
|
|
|
|
padding: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
li:hover {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
li:last-child {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
section {
|
|
|
|
|
border-top: 1px dashed #bbb;
|
|
|
|
|
}
|
|
|
|
|
.room-start {
|
|
|
|
|
border-top: none;
|
|
|
|
|
}
|
|
|
|
|
h3 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
#legal {
|
|
|
|
|
margin-top: 1em;
|
|
|
|
|
color: darken($body-color, 10%);
|
|
|
|
|
font-size: smaller;
|
|
|
|
|
#footleft {
|
|
|
|
|
@extend .col-md-5;
|
|
|
|
|
@extend .offset-md-2;
|
|
|
|
|
@extend .col-xs-12;
|
|
|
|
|
}
|
|
|
|
|
#footright {
|
|
|
|
|
text-align: right;
|
|
|
|
|
@extend .col-md-2;
|
|
|
|
|
@extend .offset-md-2;
|
|
|
|
|
@extend .col-xs-12;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.way {
|
|
|
|
|
color: $waycolor;
|
|
|
|
|
margin-right: 1em;
|
|
|
|
|
}
|
|
|
|
|
.cycle {
|
|
|
|
|
color: darkgreen;
|
|
|
|
|
border-bottom: darkgreen dashed 1px;
|
|
|
|
|
}
|
|
|
|
|
ul.options {
|
|
|
|
|
border: 1px solid #876;
|
|
|
|
|
li {
|
|
|
|
|
border-bottom: 1px solid #876;
|
|
|
|
|
}
|
|
|
|
|
li:hover {
|
|
|
|
|
background-color: rgba(153,136,119,0.2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
hr {
|
|
|
|
|
width: 50%;
|
|
|
|
|
border-color: $body-color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.center {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-outline-primary,
|
|
|
|
|
.btn-outline-danger {
|
|
|
|
|
border: none;
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
2017-02-22 08:30:25 +02:00
|
|
|
</div>
|
2015-02-06 08:14:46 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<!-- JS Editor -->
|
|
|
|
|
<div class="editorContainer">
|
2017-02-22 08:30:25 +02:00
|
|
|
<div class="editor" id="js-editor">
|
2017-02-22 12:38:05 +02:00
|
|
|
salet.game_id = "your-game-id-here"
|
|
|
|
|
salet.game_version = "1.0"
|
|
|
|
|
$(document).ready(() ->
|
|
|
|
|
salet.beginGame()
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
# The first room of the game.
|
|
|
|
|
room "start",
|
|
|
|
|
dsc: """
|
|
|
|
|
## Hello [world!](end)
|
|
|
|
|
""",
|
|
|
|
|
choices: "#start"
|
|
|
|
|
|
|
|
|
|
room "end",
|
|
|
|
|
dsc: """
|
|
|
|
|
#### Goodbye world!
|
|
|
|
|
"""
|
|
|
|
|
tags: ["start"]
|
|
|
|
|
optionText: "Or not?"
|
2017-02-22 08:30:25 +02:00
|
|
|
</div>
|
2015-02-06 08:14:46 +02:00
|
|
|
</div>
|
|
|
|
|
<!-- Preview -->
|
|
|
|
|
<div class="editorContainer">
|
2017-02-22 08:30:25 +02:00
|
|
|
<iframe class="editor" id="preview" name="result" frameborder="0">
|
2015-02-06 08:14:46 +02:00
|
|
|
#document
|
|
|
|
|
</iframe>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2017-02-22 08:30:25 +02:00
|
|
|
|
|
|
|
|
<!-- Latest jQuery from Google CDN -->
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
2017-02-22 12:38:05 +02:00
|
|
|
<!-- SASS and CoffeeScript -->
|
|
|
|
|
<script src='http://coffeescript.org/v1/browser-compiler/coffee-script.js' type='text/javascript'></script>
|
|
|
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.3/sass.sync.min.js' type='text/javascript'></script>
|
2017-02-22 08:30:25 +02:00
|
|
|
<!-- Ace Editor -->
|
2017-02-22 12:38:05 +02:00
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/theme-crimson_editor.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-beautify.js"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/worker-html.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/mode-coffee.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/mode-html.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/mode-sass.js" type="text/javascript" charset="utf-8"></script>
|
2017-02-22 08:30:25 +02:00
|
|
|
<!-- Together -->
|
|
|
|
|
<script src="https://togetherjs.com/togetherjs-min.js"></script>
|
|
|
|
|
<!-- JSTinker Scripts -->
|
|
|
|
|
<script src="js/jstinker.js"></script>
|
2015-02-01 00:24:56 +02:00
|
|
|
<!-- Set Editor Modes -->
|
2015-01-28 07:35:57 +02:00
|
|
|
<script>
|
2015-02-04 06:12:49 +02:00
|
|
|
ace.require("ace/ext/language_tools");
|
|
|
|
|
|
2015-01-28 07:35:57 +02:00
|
|
|
var htmlEditor = ace.edit("html-editor");
|
2017-02-22 12:38:05 +02:00
|
|
|
htmlEditor.setTheme("ace/theme/crimson_editor");
|
2015-01-28 07:35:57 +02:00
|
|
|
htmlEditor.getSession().setMode("ace/mode/html");
|
2015-02-04 06:12:49 +02:00
|
|
|
htmlEditor.setOptions({
|
|
|
|
|
enableBasicAutocompletion: true
|
|
|
|
|
});
|
2015-01-28 07:35:57 +02:00
|
|
|
|
|
|
|
|
var cssEditor = ace.edit("css-editor");
|
2017-02-22 12:38:05 +02:00
|
|
|
cssEditor.setTheme("ace/theme/crimson_editor");
|
|
|
|
|
cssEditor.getSession().setMode("ace/mode/scss");
|
2015-02-04 06:12:49 +02:00
|
|
|
cssEditor.setOptions({
|
|
|
|
|
enableBasicAutocompletion: true
|
|
|
|
|
});
|
2015-01-28 07:35:57 +02:00
|
|
|
|
|
|
|
|
var jsEditor = ace.edit("js-editor");
|
2017-02-22 12:38:05 +02:00
|
|
|
jsEditor.setTheme("ace/theme/crimson_editor");
|
|
|
|
|
jsEditor.getSession().setMode("ace/mode/coffee");
|
2015-02-04 06:12:49 +02:00
|
|
|
jsEditor.setOptions({
|
|
|
|
|
enableBasicAutocompletion: true
|
|
|
|
|
});
|
2015-01-28 07:35:57 +02:00
|
|
|
</script>
|
2015-02-06 08:14:46 +02:00
|
|
|
|
2015-01-28 07:35:57 +02:00
|
|
|
</body>
|
2015-02-12 05:39:13 +02:00
|
|
|
</html>
|
