Differences

This shows you the differences between two versions of the page.

Link to this comparison view

en:guide:five-min [2017/08/03 12:33] (current)
Alexander Yakovlev created
Line 1: Line 1:
 +====== Ultra-short version ======
 +
 +You take this code and put it in a ''​index.html''​ file:
 +
 +<​code>​
 +<​!DOCTYPE html>
 +<html lang="​en">​
 +<​head>​
 +<meta charset="​UTF-8">​
 +<​title>​Salet playground</​title>​
 +<link rel="​stylesheet"​ href="​https://​maxcdn.bootstrapcdn.com/​bootstrap/​4.0.0-alpha.6/​css/​bootstrap.min.css">​
 +<​style>​
 +#​tools_wrapper .ways {
 + padding: 0.5em;
 +}
 +.content {
 + padding: 1em;
 +}
 +.content ul {
 + margin: 0;
 + padding: 0 0 0 1em;
 +}
 +.content ul.options {
 + padding: 0;
 + text-align:​ center;
 + margin-top:​ 0.5em;
 + margin-bottom:​ 0.7em;
 + list-style-type:​ none;
 + border-radius:​ 4px;
 + border: 1px solid #876;
 +}
 +.content ul.options li {
 + padding: 0.5em;
 + border-bottom:​ 1px solid #876;
 +}
 +.content ul.options li:hover {
 + cursor: pointer;
 + background-color:​ rgba(153, 136, 119, 0.2);
 +}
 +.content ul.options li:​last-child {
 + border-bottom:​ none;
 +}
 +.content section {
 + border-top:​ 1px dashed #bbb;
 +}
 +.content .room-start {
 + border-top:​ none;
 +}
 +.content h3 {
 + text-align:​ center;
 +}
 +.way {
 + color: blue;
 + margin-right:​ 1em;
 +}
 +.cycle {
 + color: darkgreen;
 + border-bottom:​ darkgreen dashed 1px;
 +}
 +</​style>​
 +<​body>​
 +<div id="​page">​
 +  <div class="​container">​
 +    <div id="​tools_wrapper"​ class="​row">​
 +      <div class='​ways col-md-6'>​
 +        <ul class="​nav nav-pills"​ id="​ways">​
 +        </ul>
 +      </​div>​
 +    </​div> ​
 +  </​div>​
 +  <div class="​container">​
 +    <div id="​content_wrapper"​ class="​row">​
 +      <div id="​content"​ class="​content col-md-10 offset-md-1 col-xs-12"></​div>​
 +      <a name="​end_of_content"></​a>​
 +    </​div>​
 +  </​div>​
 +</​div>​
 +
 +<script defer type="​text/​coffeescript">​
 +salet.game_id = "​your-game-id-here"​
 +salet.game_version = "​1.0"​
 +salet.autosave = false
 +
 +room "​start",​
 +  dsc: """​
 +    ## Hello, [world!](end)
 +  """,​
 +  choices: "#​start"​
 +
 +room "​end",​
 +  dsc: """​
 +    #### Goodbye, world!
 +  """​
 +  tags: ["​start"​]
 +  optionText: "Or not?"
 +
 +$(document).ready(() ->
 +  salet.beginGame()
 +)
 +</​script> ​   ​
 +<script src="​https://​code.jquery.com/​jquery-3.2.1.min.js"></​script>​
 +<script src="​https://​salet.su/​try/​js/​coffee-script.js"></​script>​
 +<script src="​https://​cdnjs.cloudflare.com/​ajax/​libs/​marked/​0.3.6/​marked.min.js"></​script>​
 +<script src="​https://​cdn.jsdelivr.net/​npm/​salet@1.8.4/​lib/​index.min.js"></​script>​
 +</​body>​
 +</​html>​
 +</​code>​
 +
 +Your game is what's between ''<​script defer type="​text/​coffeescript">''​ and ''<​script>''​ tags. The rest is scaffolding and markup dictating how it should look. You can edit the file and play now. (Autosave is off.)
 +
 +And if you want to know how to edit this, what can be added and how to turn on autosaves (and manual saves, for that matter), read [[en:​guide|the rest of the guide.]]