mirror of
https://gitlab.com/Oreolek/salet-playground.git
synced 2024-04-26 22:29:42 +03:00
165 lines
6.7 KiB
HTML
165 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Salet playground</title>
|
|
|
|
<!-- Bootstrap Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
|
<!-- Bootstrap Optional theme -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
|
|
<!-- JSTinker Style -->
|
|
<link rel="stylesheet" href="css/jstinker.css" type="text/css">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-default">
|
|
<!-- 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>
|
|
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Salet playground</a>
|
|
</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>
|
|
<li id="btnTogether"><a href=""><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> Collaborate</a></li>
|
|
</ul>
|
|
</div><!-- /.navbar-collapse -->
|
|
</nav>
|
|
|
|
<!-- Sidebar -->
|
|
<div id="sidebar">
|
|
<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>
|
|
<p><a href="https://twitter.com/oreolek">@oreolek on Twitter</a></p>
|
|
<p><a href="https://en.oreolek.ru">oreolek's blog</a></p>
|
|
</div><!-- /sidebar -->
|
|
|
|
<div class="editors">
|
|
<div class="top">
|
|
<!-- HTML Editor -->
|
|
<div class="editorContainer">
|
|
<div class="editor" id="html-editor"><div id="page">
|
|
<div class="container">
|
|
<div id="tools_wrapper">
|
|
<div class='ways'>
|
|
<ul class="nav nav-pills" id="ways">
|
|
</ul>
|
|
</div>
|
|
</div> <!-- End of div.tools_wrapper -->
|
|
</div>
|
|
<div class="container">
|
|
<div id="content_wrapper">
|
|
<div id="content" class="content"></div>
|
|
<a name="end_of_content"></a>
|
|
</div>
|
|
</div>
|
|
</div> <!-- End of div.page --></div>
|
|
</div>
|
|
<!-- CSS EDitor -->
|
|
<div class="editorContainer">
|
|
<div class="editor" id="css-editor">
|
|
/* Your CSS here */
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<!-- JS Editor -->
|
|
<div class="editorContainer">
|
|
<div class="editor" id="js-editor">
|
|
salet.game_id = "your-game-id-here"
|
|
salet.game_version = "1.0"
|
|
salet.autosave = false
|
|
$(document).ready(() ->
|
|
salet.beginGame()
|
|
)
|
|
|
|
# The first room of the game.
|
|
room "start",
|
|
dsc: """
|
|
## Hello [world!](end)
|
|
""",
|
|
ways: [] # available exits, implies clear: true
|
|
choices: "#start"
|
|
|
|
room "end",
|
|
title: "End"
|
|
dsc: """
|
|
#### Goodbye world!
|
|
"""
|
|
clear: false # don't clear the screen, default for rooms is true
|
|
tags: ["start"]
|
|
optionText: "Or not?"
|
|
</div>
|
|
</div>
|
|
<!-- Preview -->
|
|
<div class="editorContainer">
|
|
<iframe class="editor" id="preview" name="result" sandbox="allow-same-origin allow-scripts" frameborder="0">
|
|
#document
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Latest jQuery from Google CDN -->
|
|
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
|
|
<!-- SASS and CoffeeScript -->
|
|
<script src='js/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>
|
|
<!-- Ace Editor -->
|
|
<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/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>
|
|
<!-- Together -->
|
|
<script src="https://togetherjs.com/togetherjs-min.js"></script>
|
|
<!-- JSTinker Scripts -->
|
|
<script src="js/jstinker.js"></script>
|
|
<!-- Set Editor Modes -->
|
|
<script>
|
|
ace.require("ace/ext/language_tools");
|
|
|
|
var htmlEditor = ace.edit("html-editor");
|
|
htmlEditor.setTheme("ace/theme/crimson_editor");
|
|
htmlEditor.getSession().setMode("ace/mode/html");
|
|
htmlEditor.setOptions({
|
|
enableBasicAutocompletion: true
|
|
});
|
|
|
|
var cssEditor = ace.edit("css-editor");
|
|
cssEditor.setTheme("ace/theme/crimson_editor");
|
|
cssEditor.getSession().setMode("ace/mode/scss");
|
|
cssEditor.setOptions({
|
|
enableBasicAutocompletion: true
|
|
});
|
|
|
|
var jsEditor = ace.edit("js-editor");
|
|
jsEditor.setTheme("ace/theme/crimson_editor");
|
|
jsEditor.getSession().setMode("ace/mode/coffee");
|
|
jsEditor.setOptions({
|
|
enableBasicAutocompletion: true
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|