Rewrite skeleton codes

src/frontend/files/skeletons/code.cpp

@@ -1,9 +1,39 @@
+// import visualization libraries
+#include "algorithm-visualizer/Array2DTracer.h"
 #include "algorithm-visualizer/LogTracer.h"
 
+#include <vector>
+#include <string>
+
+// define tracer variables
+Array2DTracer array2dTracer = Array2DTracer("Grid");
+LogTracer logTracer = LogTracer("Console");
+
+// define input variables
+std::vector<std::string> messages{
+        "Visualize",
+        "your",
+        "own",
+        "code",
+        "here!",
+};
+
+// highlight each line of messages recursively
+void highlight(int line) {
+    if (line >= messages.size()) return;
+    std::string message = messages[line];
+    {
+        logTracer.print(message);
+        array2dTracer.selectRow(line, 0, message.size() - 1).delay();
+        array2dTracer.deselectRow(line, 0, message.size() - 1);
+    }
+    highlight(line + 1);
+}
+
 int main() {
-    LogTracer logTracer = LogTracer("Scratch Paper");
-
-    logTracer.print("Visualize your own algorithm here!");
-
+    {
+        array2dTracer.set(messages).delay();
+    }
+    highlight(0);
     return 0;
 }

src/frontend/files/skeletons/code.java

@@ -1,9 +1,40 @@
+// import visualization libraries
 import org.algorithm_visualizer.*;
 
 class Main {
-    public static void main(String[] args) {
-        LogTracer logTracer = new LogTracer("Scratch Paper");
+    // define tracer variables
+    Array2DTracer array2dTracer = new Array2DTracer("Grid");
+    LogTracer logTracer = new LogTracer("Console");
 
-        logTracer.print("Visualize your own algorithm here!");
+    // define input variables
+    String[] messages = {
+            "Visualize",
+            "your",
+            "own",
+            "code",
+            "here!",
+    };
+
+    // highlight each line of messages recursively
+    void highlight(int line) {
+        if (line >= messages.length) return;
+        String message = messages[line];
+        {
+            logTracer.print(message);
+            array2dTracer.selectRow(line, 0, message.length() - 1).delay();
+            array2dTracer.deselectRow(line, 0, message.length() - 1);
+        }
+        highlight(line + 1);
+    }
+
+    Main() {
+        {
+            array2dTracer.set(messages).delay();
+        }
+        highlight(0);
+    }
+
+    public static void main(String[] args) {
+        new Main();
     }
 }

src/frontend/files/skeletons/code.js

@@ -1,5 +1,34 @@
-import { LogTracer } from 'algorithm-visualizer';
+// import visualization libraries
+import { Array2DTracer, LogTracer } from 'algorithm-visualizer';
 
-const logTracer = new LogTracer('Scratch Paper');
+// define tracer variables
+const array2dTracer = new Array2DTracer('Grid');
+const logTracer = new LogTracer('Console');
 
-logTracer.print('Visualize your own algorithm here!');
+// define input variables
+const messages = [
+  'Visualize',
+  'your',
+  'own',
+  'code',
+  'here!',
+];
+
+// highlight each line of messages recursively
+function highlight(line) {
+  if (line >= messages.length) return;
+  const message = messages[line];
+  {
+    logTracer.print(message);
+    array2dTracer.selectRow(line, 0, message.length - 1).delay();
+    array2dTracer.deselectRow(line, 0, message.length - 1);
+  }
+  highlight(line + 1);
+}
+
+(function main() {
+  {
+    array2dTracer.set(messages).delay();
+  }
+  highlight(0);
+})();