oreolek/salet-playground
1
0
Fork 0
mirror of https://gitlab.com/Oreolek/salet-playground.git synced 2024-05-19 17:38:37 +03:00
Code Issues Releases Wiki Activity

Working example

Browse source
This commit is contained in:
Alexander Yakovlev 2017-02-22 20:06:20 +07:00
parent f63b1e8831
commit 04c2213a9b
2 changed files with 22 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
index.html
View file

@ -54,20 +54,17 @@
<!-- HTML Editor -->
<div class="editorContainer">
<div class="editor" id="html-editor">&lt;div id="page"&gt;
&lt;div class="fixed container"&gt;
&lt;div class="container"&gt;
&lt;div id="tools_wrapper" class="row"&gt;
&lt;div class='ways'&gt;
&lt;div class='ways col-md-6'&gt;
&lt;ul class="nav nav-pills" id="ways"&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="buttons"&gt;
&lt;button id="erase" class="btn btn-outline-danger">Restart&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;!-- End of div.tools_wrapper --&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
&lt;div id="content_wrapper" class="row"&gt;
&lt;div id="content" class="content"&gt;&lt;/div&gt;
&lt;div id="content" class="content col-md-10 offset-md-1 col-xs-12"&gt;&lt;/div&gt;
&lt;a name="end_of_content"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
@ -76,53 +73,14 @@
<!-- CSS EDitor -->
<div class="editorContainer">
<div class="editor" id="css-editor">
$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;
}
$waycolor: blue;
#tools_wrapper .ways {
padding: 0.5em;
}
#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;
@ -155,22 +113,6 @@ $animation_duration: 2s;
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;
@ -191,17 +133,7 @@ ul.options {
}
hr {
width: 50%;
border-color: $body-color;
}
.center {
text-align: center;
}
.btn-outline-primary,
.btn-outline-danger {
border: none;
border-color: transparent;
border-color: #000;
}
</div>
</div>
@ -212,6 +144,7 @@ hr {
<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()
)
@ -221,12 +154,15 @@ 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>

30
js/jstinker.js
View file

@ -9,19 +9,21 @@ $("document").ready(function() {
var script = ace.edit("js-editor").getSession().getValue();
var html = ace.edit("html-editor").getSession().getValue();
var scss = ""
Sass.compile(scss, function(result) {
scss = result
Sass.compile(css, function(result) {
var previewDoc = window.frames[0].document;
previewDoc.write("<style type='text/css'>" + result.text + "</style>");
});
previewDoc.write("<!DOCTYPE html>");
previewDoc.write("<html lang='en'>");
previewDoc.write("<head>");
previewDoc.write('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">');
previewDoc.write("<style type='text/css'>" + scss + "</style>");
previewDoc.write("</head><body>");
previewDoc.write(html);
previewDoc.write("<script src='https://code.jquery.com/jquery-3.1.1.min.js' type='text/javascript'></script>");
previewDoc.write("<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js' type='text/javascript'></script>");
previewDoc.write("<script src='https://salet.su/salet.min.js' type='text/javascript'></script>");
previewDoc.write("<script type='text/javascript'>window.onload = function() {" + CoffeeScript.compile(script) + "}</script>");
previewDoc.write("<script type='text/javascript'>" + CoffeeScript.compile(script) + "</script>");
previewDoc.write("</body>");
previewDoc.write("</html>");
previewDoc.close();
@ -33,21 +35,11 @@ $("document").ready(function() {
// TIDYUP Button
$("#btnTidyUp").click(function(event) {
event.preventDefault();
var html = ace.edit("html-editor").getSession().getValue();
var html2 = style_html(html);
ace.edit("html-editor").getSession().setValue(html2);
var css = ace.edit("css-editor").getSession().getValue();
var css2 = css_beautify(css);
ace.edit("css-editor").getSession().setValue(css2);
var js = ace.edit("js-editor").getSession().getValue();
var js2 = js_beautify(js);
ace.edit("js-editor").getSession().setValue(js2);
var beautify = ace.require("ace/ext/beautify");
beautify.beautify(ace.edit("html-editor").getSession());
beautify.beautify(ace.edit("css-editor").getSession());
beautify.beautify(ace.edit("js-editor").getSession());
});
// Together Button