Update skeletons

src/frontend/files/skeletons/code.cpp

 // import visualization libraries {
 #include "algorithm-visualizer/Array2DTracer.h"
+#include "algorithm-visualizer/Layout.h"
 #include "algorithm-visualizer/LogTracer.h"
+#include "algorithm-visualizer/Tracer.h"
+#include "algorithm-visualizer/VerticalLayout.h"
 // }
 
 #include <vector>
@@ -25,8 +28,9 @@ void highlight(int line) {
     if (line >= messages.size()) return;
     std::string message = messages[line];
     // visualize {
-    logTracer.print(message);
-    array2dTracer.selectRow(line, 0, message.size() - 1).delay();
+    logTracer.println(message);
+    array2dTracer.selectRow(line, 0, message.size() - 1);
+    Tracer::delay();
     array2dTracer.deselectRow(line, 0, message.size() - 1);
     // }
     highlight(line + 1);
@@ -34,7 +38,9 @@ void highlight(int line) {
 
 int main() {
     // visualize {
-    array2dTracer.set(messages).delay();
+    Layout::setRoot(VerticalLayout({array2dTracer, logTracer}));
+    array2dTracer.set(messages);
+    Tracer::delay();
     // }
     highlight(0);
     return 0;

src/frontend/files/skeletons/code.java

@@ -22,8 +22,9 @@ class Main {
         if (line >= messages.length) return;
         String message = messages[line];
         // visualize {
-        logTracer.print(message);
-        array2dTracer.selectRow(line, 0, message.length() - 1).delay();
+        logTracer.println(message);
+        array2dTracer.selectRow(line, 0, message.length() - 1);
+        Tracer.delay();
         array2dTracer.deselectRow(line, 0, message.length() - 1);
         // }
         highlight(line + 1);
@@ -31,7 +32,9 @@ class Main {
 
     Main() {
         // visualize {
-        array2dTracer.set(messages).delay();
+        Layout.setRoot(new VerticalLayout(new Commander[]{array2dTracer, logTracer}));
+        array2dTracer.set(messages);
+        Tracer.delay();
         // }
         highlight(0);
     }

src/frontend/files/skeletons/code.js

 // import visualization libraries {
-const { Array2DTracer, LogTracer } = require('algorithm-visualizer');
+const { Array2DTracer, Layout, LogTracer, Tracer, VerticalLayout } = require('algorithm-visualizer');
 // }
 
 // define tracer variables {
@@ -21,8 +21,9 @@ function highlight(line) {
   if (line >= messages.length) return;
   const message = messages[line];
   // visualize {
-  logTracer.print(message);
-  array2dTracer.selectRow(line, 0, message.length - 1).delay();
+  logTracer.println(message);
+  array2dTracer.selectRow(line, 0, message.length - 1);
+  Tracer.delay();
   array2dTracer.deselectRow(line, 0, message.length - 1);
   // }
   highlight(line + 1);
@@ -30,7 +31,9 @@ function highlight(line) {
 
 (function main() {
   // visualize {
-  array2dTracer.set(messages).delay();
+  Layout.setRoot(new VerticalLayout([array2dTracer, logTracer]));
+  array2dTracer.set(messages);
+  Tracer.delay();
   // }
   highlight(0);
 })();