Added notes below the canvas explaining how to move the paddles in Pong

JohnDog3112 · JohnDog3112 · commit 9b6da4a2102b · 2024-09-26T15:56:50.000-05:00
diff --git a/examples/pong/index.html b/examples/pong/index.html
@@ -12,7 +12,8 @@
         </script>
     </head>
     <body>
-        <canvas id="twr_d2dcanvas" width="900" height="600"></canvas>
+        <canvas id="twr_d2dcanvas" width="900" height="600"></canvas><br>
+        <a id="control_text"></a>
 
         <script type="module">
             import {twrWasmModule, twrWasmModuleAsync} from "twr-wasm";
diff --git a/examples/pong/jsEventsLib.ts b/examples/pong/jsEventsLib.ts
@@ -10,6 +10,8 @@ export default class jsEventsLib extends twrLibrary {
       registerAnimationLoop: {},
       registerMousePressEvent: {},
       registerMouseMoveEvent: {},
+
+      setElementText: {},
    };
 
    // every library should have this line
@@ -89,6 +91,16 @@ export default class jsEventsLib extends twrLibrary {
       }
    }
 
+   setElementText(mod:IWasmModule|IWasmModuleAsync, elementIDPtr: number, textPtr: number) {
+      const elementID = mod.wasmMem.getString(elementIDPtr);
+      const text = mod.wasmMem.getString(textPtr);
+
+      const element = document.getElementById(elementID)!;
+      if (!element) throw new Error(`setElementText was given an invalid ID (${elementID})`);
+
+      element.innerText = text;
+   }
+
 }
 
 
diff --git a/examples/pong/pong-menu.cpp b/examples/pong/pong-menu.cpp
@@ -199,6 +199,10 @@ const colorRGB_t s_pong_background_color = 0xFFFFFF;
 const colorRGB_t s_pong_paddle_color = 0xFF0000;
 const colorRGB_t s_pong_ball_color = 0x00FF00;
 
+extern "C" {
+   __attribute__((import_name("setElementText")))
+   void set_element_text(const char* element_id, const char* text);
+}
 void Menu::tryButtonPress(long x, long y) {
    this->updateButtonSelections(x, y);
    for (LinkedList<MenuButton>* node = this->buttons.root; node; node = node->next) {
@@ -208,16 +212,19 @@ void Menu::tryButtonPress(long x, long y) {
             case 0:
                this->state = MenuState::SinglePlayerPong;
                this->s_pong = Pong(600, 600, s_pong_border_color, s_pong_background_color, s_pong_paddle_color, s_pong_ball_color);
+               set_element_text("control_text", "Move the paddle using a and d or the left and right arrow keys.");
             break;
 
             case 1:
                this->state = MenuState::TwoPlayerPong;
                this->t_pong = TwoPlayerPong(this->width, this->height, true);
+               set_element_text("control_text", "Move the paddle using w and s or the up and down arrow keys.");
             break;
 
             case 2:
                this->state = MenuState::TwoPlayerPong;
                this->t_pong = TwoPlayerPong(this->width, this->height, false);
+               set_element_text("control_text", "Move the left paddle using w and s. Move the right one with the up and down arrow keys.");
             break;
 
             default:
