Skip to content

Commit 611ce8a

Browse files
amirrajanamirrajan
committed
Sample tutorial created.
1 parent a6d632a commit 611ce8a

8 files changed

+493
-155
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎firacode.ttf

161 KB
Binary file not shown.

‎game.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
border: 0;
5+
}
26
canvas {
37
background-color: rgb(40, 44, 52);
48
}

‎index.html

+46-66
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8">
55
<link rel="stylesheet" href="style.css" />
66
<title>DragonRuby Game Toolkit Tutorial</title>
7+
<script src="//cdnjs.cloudflare.com/ajax/libs/reqwest/2.0.5/reqwest.js"></script>
78
</head>
89
<body id='toplevel'>
910
<script>
@@ -16,17 +17,15 @@
1617

1718
<a id="tutorial-prev" href="#" onclick="tutorial_prev()">prev<br/>step</a>
1819
<a id="tutorial-next" href="#" onclick="tutorial_next()">next<br/>step</a>
20+
<span id="tutorial-link-pointer">Use these links to<br/> navigate the tutorial →</span>
1921

20-
<div id="tutorial" style="width: 960px; height: 270px;">
21-
</div>
22+
<div id="editor"></div>
2223

23-
<!-- <div id="reference-code" style="width: 480px; height: 270px;">
24-
</div>
25-
-->
26-
<div id="editor" style="width: 480px; height: 270px;">
24+
<div id="tutorial">
2725
</div>
2826

29-
<iframe src="game.html" width="480" height="270"></iframe>
27+
28+
<iframe src="game.html"></iframe>
3029

3130
<script>
3231
function hotload() {
@@ -40,11 +39,10 @@
4039

4140
window.addEventListener('load', function() {
4241
setTimeout(function() {
43-
editor.setValue(document.getElementById('main.rb').innerHTML.trim());
4442
editor.focus();
4543
editor.gotoLine(0);
4644
editor.clearSelection();
47-
tutorial_start();
45+
tutorial_retrieve();
4846
}, 1000);
4947
});
5048

@@ -109,8 +107,8 @@
109107
var newHeight =
110108
editor.getSession().getScreenLength() * editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth();
111109

112-
$('#editor').height("270px");
113-
$('#editor-section').height("270px");
110+
$('#editor').height("540px");
111+
$('#editor-section').height("540px");
114112

115113
// This call is required for the editor to fix all of
116114
// its inner structure for adapting to a change in size
@@ -132,82 +130,64 @@
132130
*/
133131
</script>
134132

135-
<script id="main.rb" type='text/ruby'>
136-
def tick args
137-
end
138-
</script>
139-
140-
<script class="tutorial-step" type="text/html" data-tutorial-step="1">
141-
<h1>DragonRuby Primer</h1>
142-
<p>
143-
This tutorial is going to give you a crash course of DragonRuby Game Toolkit. Let's get started shall we?
144-
<br/>
145-
<br/>
146-
Click the link in the top right corner that says <b>"next step"</b> to continue.
147-
</p>
148-
</script>
149-
150-
<script class="tutorial-step" type="text/html" data-tutorial-step="2">
151-
<h1>Rendering a Label</h1>
152-
<p>
153-
Do you see the code editor directly <b>below</b> this box? Click in there and type the following:
154-
<br/>
155-
</p>
156-
157-
<pre>def tick args
158-
args.outputs.labels << [30, 30, "hello world"]
159-
end</pre>
160-
161-
<p>
162-
Once you've typed the code above. Press "Ctrl + S" (or "Cmd + S" if you're on a Mac) to run the game. Play around with the numbers and see how the label moves around. Click <b>"next step"</b> whenever you're ready.
163-
</p>
164-
</script>
165-
166133
<script>
134+
var tutorial = { steps: { } };
167135
var current_tutorial_step = 1;
168-
var tutorial = {};
169-
function tutorial_start() {
170-
var tutorial_elements = document.getElementsByClassName("tutorial-step");
171-
for (var i = 0; i < tutorial_elements.length; i++) {
172-
var element = tutorial_elements[i];
173-
var step = element.getAttribute("data-tutorial-step");
174-
if (!tutorial[step]) {
175-
tutorial[step] = {
176-
text: "",
177-
code: ""
178-
}
179-
}
180-
181-
if (element.type == "text/html") {
182-
tutorial[step].text = element.innerHTML;
183-
}
184-
}
185136

137+
function tutorial_start() {
186138
tutorial_load_step(current_tutorial_step);
187139
}
188140

189141
function tutorial_prev() {
142+
document.getElementById("tutorial-link-pointer").style.display = 'none';
190143
var next_step = current_tutorial_step - 1;
191-
if (tutorial[next_step.toString()]) {
144+
if (tutorial.steps[next_step.toString()]) {
192145
current_tutorial_step -= 1;
193146
tutorial_load_step(current_tutorial_step);
194147
}
195148
}
196149

197150
function tutorial_next() {
151+
document.getElementById("tutorial-link-pointer").style.display = 'none';
198152
var next_step = current_tutorial_step + 1;
199-
if (tutorial[next_step.toString()]) {
153+
if (tutorial.steps[next_step.toString()]) {
200154
current_tutorial_step += 1;
201155
tutorial_load_step(current_tutorial_step);
202156
}
203157
}
204158

205159
function tutorial_load_step(number) {
206-
var tutorial_step = tutorial[number.toString()];
207-
document.getElementById("tutorial").innerHTML = tutorial_step.text;
208-
/* reference_code.setValue(tutorial_step.code);
209-
* reference_code.gotoLine(0);
210-
* reference_code.clearSelection(); */
160+
var tutorial_step = tutorial.steps[number.toString()];
161+
document.getElementById("tutorial").innerHTML = tutorial_step.text.outerHTML;
162+
editor.setValue("# Ctrl|Cmd + S for save.\n# Ctrl|Cmd + N for next step in tutorial.\n# Ctrl|Cmd + P for previous step in tutorial.\n\n" + tutorial_step.code);
163+
editor.gotoLine(0);
164+
editor.clearSelection();
165+
}
166+
167+
function tutorial_retrieve() {
168+
reqwest('warpdrive-tutorial.html', function (resp) {
169+
var script = document.createElement("script");
170+
script.id = "retrieved-tutorial";
171+
script.type = "text/tutorial";
172+
script.innerHTML = resp;
173+
document.body.appendChild(script);
174+
var div = document.createElement("div");
175+
div.innerHTML = document.getElementById("retrieved-tutorial").innerHTML;
176+
177+
Array.from(div.querySelectorAll("[itemscope='itemscope'][itemtype='tutorial-step']"))
178+
.sort((a, b) => parseInt(a.dataset.stepNumber) - parseInt(b.dataset.stepNumber))
179+
.forEach(e => {
180+
var stepNumber = parseInt(e.dataset.stepNumber);
181+
var textElement = e.querySelector("[itemscope='itemscope'][itemtype='tutorial-text']");
182+
var codeElement = e.querySelector("[itemscope='itemscope'][itemtype='tutorial-code']");
183+
var leadingWhiteSpace = codeElement.innerText.split('\n').filter(l => l.trim().length != 0)[0].match(/^[ ]*/)[0] || "";
184+
var code = leadingWhiteSpace + codeElement.innerText.trim();
185+
code = code.split('\n').map(l => l.replace(new RegExp('^' + leadingWhiteSpace + ''), '')).join('\n');
186+
tutorial.steps[stepNumber] = { text: textElement, code: code };
187+
});
188+
189+
tutorial_start();
190+
});
211191
}
212192
</script>
213193
</body>

‎style.css

+40-88
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
1-
div {
2-
padding: 0px;
3-
border: 0px;
4-
margin: 0px;
5-
position: absolute;
6-
}
7-
81
body {
9-
border: solid 1px #000000;
102
margin-left: auto;
113
margin-right: auto;
124
min-width: 960px;
@@ -20,120 +12,71 @@ body {
2012
color: #ffffff;
2113
}
2214

23-
#vim-editor {
24-
width: 480px;
25-
height: 540px;
26-
}
27-
28-
#vim-screen {
29-
width: 480px;
30-
height: 540px;
31-
}
32-
33-
#vim-input {
34-
width: 1px;
35-
color: transparent;
36-
background-color: transparent;
37-
padding: 0px;
38-
border: 0px;
39-
outline: none;
40-
vertical-align: middle;
41-
position: absolute;
42-
top: 0px;
43-
left: 0px;
44-
}
45-
4615
iframe {
4716
position: absolute;
4817
width: 480px;
4918
height: 270px;
5019
left: 480px;
5120
top: 270px;
52-
}
53-
54-
#borderdiv {
55-
}
56-
57-
.clear-both {
58-
clear: both;
59-
}
60-
61-
iframe {
62-
margin: 0px;
63-
padding: 0px;
6421
overflow: hidden;
65-
border: solid 1px #000000;
22+
border: solid 1px black;
6623
}
6724

68-
textarea {
69-
border: none;
70-
resize: none;
71-
margin: 0px;
72-
padding: 0px;
73-
padding-left: 10px;
25+
#editor {
7426
position: absolute;
7527
left: 0px;
7628
top: 0px;
7729
width: 480px;
78-
height: 270px;
79-
font-family: monospace;
80-
font-size: 16px;
81-
color: white;
82-
wrap: soft;
30+
height: 540px;
8331
background-color: rgb(40, 44, 52);
84-
outline:0px !important;
85-
-webkit-appearance:none;
86-
box-shadow: none !important;
32+
border: solid 1px black;
8733
}
8834

89-
#editor {
90-
top: 270px;
91-
border: solid 1px #000000;
92-
height: 270px;
93-
}
35+
/* .ace_editor { */
36+
/* background: rgb(40, 44, 52) !important; */
37+
/* } */
9438

95-
#reference-code {
96-
position: absolute;
97-
left: 480px;
98-
border: solid 1px #000000;
99-
}
100-
101-
.ace_editor {
102-
height: 100%;
103-
background: rgb(40, 44, 52) !important;
104-
}
105-
106-
.ace_content {
107-
background: rgb(40, 44, 52) !important;
108-
}
39+
/* .ace_content { */
40+
/* background: rgb(40, 44, 52) !important; */
41+
/* } */
10942

11043
.ace_gutter {
11144
background: rgb(40, 44, 52) !important;
11245
}
11346

11447
#tutorial {
115-
border: solid 1px #000000;
48+
left: 480px;
49+
width: 480px;
11650
font-size: 18px;
51+
position: absolute;
52+
border: solid 1px black;
53+
height: 270px;
11754
}
11855

11956
#tutorial h1 {
120-
margin: 10px;
121-
border-bottom: 1px solid silver;
57+
padding: 0;
58+
margin: 0;
59+
margin-bottom: 5px;
60+
font-size: 25px;
61+
border-bottom: solid 1px silver;
12262
}
12363

124-
#tutorial p {
125-
margin: 10px;
64+
#tutorial div {
65+
font-size: 20px;
66+
padding: 10px;
12667
}
12768

128-
#tutorial pre {
129-
margin: 10px;
130-
padding: 5px;
131-
background: rgb(50, 54, 62) !important;
69+
#tutorial code {
70+
background-color: rgb(70, 74, 82) !important;
71+
padding: 1px;
72+
padding-left: 5px;
73+
padding-right: 5px;
74+
border-radius: 5px;
13275
}
13376

13477
#tutorial-next {
13578
left: 903px;
136-
top: 11px;
79+
top: 230px;
13780
color: #FFFFFF;
13881
z-index: 100;
13982
position: absolute;
@@ -144,11 +87,20 @@ textarea {
14487

14588
#tutorial-prev {
14689
left: 833px;
147-
top: 11px;
90+
top: 230px;
14891
color: #FFFFFF;
14992
z-index: 100;
15093
position: absolute;
15194
font-weight: 900;
15295
font-size: 20px;
15396
line-height: 0.8em;
15497
}
98+
99+
#tutorial-link-pointer {
100+
left: 610px;
101+
top: 225px;
102+
color: #555555;
103+
z-index: 100;
104+
position: absolute;
105+
font-size: 15px;
106+
}

0 commit comments

Comments
 (0)