Differences

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

--- javascript_terminal [2023/11/20 12:15] – appledog
+++ javascript_terminal [2023/11/24 01:34] (current) – appledog
@@ Line 1: / Line 1: @@
 = JavaScript Terminal
+* Also see: [[JavaScript Terminal v2|Version 2]] which is a more advanced version of this codebase.
 This section will outline the basic JavaScript terminal code. This code was not used much when I taught JavaScript to Roger and Neo, but it serves the same basic purpose as the [[PyGame Terminal]].
-The level of this code will be towards the end of JavaScript Season 1, or at the beginning of JavaScript Season 2. I think, that we will use console for Season 1, and start with this in Season 2 -- maybe. It's advanced because it has several classes and data structures, so it feels more like a Season 2 item. Anyways,
+The level of this code is the beginning of Season 2, for many reasons. If we took out the resize code, it might be late season 1 material, but with the resize code in I would say it is good for Season 2. Maybe a stripped down version could be produced later; but the idea here is that it will display on a cellphone or a tablet as well as on a desktop.
-You can view a technical demo of this directly at: [[https://helloneo.ca/jnw/archive/jttd1/index.html|JavaScript Terminal Technical Demo 1]].
+You can view a technical demo of this program at: [[https://helloneo.ca/jnw/archive/jttd1/index.html|JavaScript Terminal Technical Demo 1]].
 == The Font
@@ Line 15: / Line 17: @@
 <html>
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Basic Javascript Terminal</title>
@@ Line 42: / Line 45: @@
 </Code>
-There is not much to see here. In the original we used normalizer, modernizer and a few other things, but I have stripped those off to show the basic idea.
+There is not much to see here. The most interesting line is probably the meta tag. We must set initial_scale to 1 or the text will look too small on higher resolution screens.
-There are four main parts: Color.js, which is a color map, Character.js which discusses what needs to be known to represent a character, Terminal, which holds the information about characters on the screen and how to draw them, and main.js which sets up everything and starts the game loop.
+Otherwise our main goal is to load and run the JavaScript files. There are four main parts: Color.js, which is a color map, Character.js which discusses what needs to be known to represent a character, Terminal, which holds the information about characters on the screen and how to draw them, and main.js which sets up everything and starts the game loop.
 Actually, you could probably refactor some things in main into a class (such as a Game.js class) and then just instantiate and run the class, like we do in Python for PyGame. Perhaps this will be done in a part two sequel article to this one. For now, it's left as an exercise to the reader.
@@ Line 67: / Line 70: @@
     static yellow = '#FFFF55';
     static white = '#FFFFFF';
-    static colorMap = [ this.black, this.blue, this.green, this.cyan,
+    static colorMap = [this.black, this.blue, this.green, this.cyan,
         this.red, this.magenta, this.brown, this.lightgray,
         this.darkgray, this.lightblue, this.lightgreen, this.lightcyan,
-        this.lightred, this.lightmagenta, this.yellow, this.white ]
+        this.lightred, this.lightmagenta, this.yellow, this.white]
     static getColor(index) {
@@ Line 112: / Line 116: @@
 <Code:JavaScript>
 class Character {
-  constructor(ch = ' ', color = 'LightGray', background = 'black') {
+    constructor(ch = ' ', color = 'LightGray', background = 'black') {
-    this.ch = ch;
+        this.ch = ch;
-    this.color = color;
+        this.color = color;
-    this.background = background;
+        this.background = background;
-  }
+    }
 }
+</Code>
 Simple! We will store the character (or it's ASCII code for printing), it's color, and it's background. This is all the data we need to represent a character on the screen.
@@ Line 246: / Line 251: @@
 // load font
 const font = new FontFace('myvga', 'url(PxPlus_IBM_VGA_8x16.ttf)');
 font.load().then(() => {
@@ Line 274: / Line 278: @@
     terminal.copyContentTo(t);
     terminal = t;
+    ctx.font = '32px myvga'; // This seems to be needed here.
 }
@@ Line 291: / Line 297: @@
         background = Color.black
         terminal.setch(x, y, ch, color, background)
-        console.log("[" + ch + "], " + x + "," + y + " " + color);
+        //console.log("[" + ch + "], " + x + "," + y + " " + color);
     }
 }
@@ Line 333: / Line 339: @@
 == Analysis
 Most of this should already be familiar since all of it would have been covered in JavaScript Season 1.
+However, one interesting quirk which arose is that the ctx.font has to be set upon terminal resize. I am not sure where the best place is to set it, but it seems to work great setting it on a resize. It would also work if you set it every time you drew a character, but if we assume that we are only using one font and are essentially the main application (a one-canvas app) then setting it on every character draw is probably unnecessary.
+== Also See
+* Also see: [[JavaScript Terminal v2|Version 2]] which is a more advanced version of this codebase.