en:guide:five-min

Ultra-short version

You take this code and put it in a index.html file:

<!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>

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 the rest of the guide.

  • en/guide/five-min.txt
  • Last modified: 2021/01/24 10:42
  • by 127.0.0.1