Input, Time, and State #

// Budo calls this function when it is time to render a frame.
function frame(timestamp) {
  // Advance app state before drawing it.
  update(timestamp);
  // Draw the current state to the canvas.
  draw();
  // Request another frame so animation continues.
  sys.animation.requestFrame(frame);
}

// Start the frame loop once the entrypoint has loaded.
sys.animation.requestFrame(frame);

// Store the previous timestamp so each frame can compute elapsed time.
let previous = 0;

// Convert Budo's millisecond timestamp into a seconds-based delta.
function frame(timestamp) {
  // The first frame has no previous timestamp, so use a zero delta.
  const dt = previous === 0 ? 0 : (timestamp - previous) / 1000;
  // Save this timestamp for the next frame.
  previous = timestamp;
  // Update simulation state with frame-rate-independent time.
  update(dt);
  // Render the updated state.
  draw();
  // Keep the loop alive.
  sys.animation.requestFrame(frame);
}

// Run this callback once after roughly one second of frame time.
sys.timer.once(1000, () => {
  // Timers are useful for UI events and lightweight scheduling.
  console.log('One second later');
});

// Toggle a state field every quarter second.
const pulse = sys.timer.every(250, () => {
  // Timer callbacks run between frames, so state changes are visible next draw.
  state.blink = !state.blink;
});

// Cancel the repeating timer when the app no longer needs it.
sys.timer.clear(pulse);

// Read input once near the start of the frame.
const input = sys.input.get();

// Capture a drag origin when the primary pointer is newly pressed.
if (input.pointer.pressed) {
  // Store the pointer's x coordinate in app state.
  state.anchorX = input.pointer.x;
  // Store the pointer's y coordinate in app state.
  state.anchorY = input.pointer.y;
}

// Continue updating drag position while the primary pointer is held.
if (input.pointer.down) {
  // Track the latest pointer x coordinate.
  state.dragX = input.pointer.x;
  // Track the latest pointer y coordinate.
  state.dragY = input.pointer.y;
}

// Draw feedback for every active touch contact.
for (const pointer of input.pointers) {
  // Each pointer contains x and y coordinates in canvas space.
  sys.canvas.drawCircle(pointer.x, pointer.y, 18);
}

sys.input.startTextInput({
  text: editorValue,
  selectionStart: caret,
  selectionEnd: caret,
  multiline: false,
});

function frame() {
  const input = sys.input.get();
  // Apply the platform's authoritative edit before synchronizing this frame.
  if (input.textEdit) {
    editorValue = input.textEdit.text;
    caret = input.textEdit.selectionEnd;
  }
  // input.composition persists while preedit is active. Draw its text at the
  // caret, commonly underlined, and use selectionEnd for the preedit caret.
  sys.input.updateTextInput({
    text: editorValue,
    selectionStart: caret,
    selectionEnd: caret,
    caret: { x: caretX, y: caretY, width: 1, height: lineHeight },
  });
  sys.animation.requestFrame(frame);
}

const input = sys.input.get();
if (input.text) editorValue += input.text;
if (sys.input.isKeyPressed(42)) editorValue = editorValue.slice(0, -1); // Backspace

// SDL scancode for the Space key.
const SDL_SCANCODE_SPACE = 44;
// SDL scancode for the Left Arrow key.
const SDL_SCANCODE_LEFT = 80;
// SDL scancode for the Right Arrow key.
const SDL_SCANCODE_RIGHT = 79;

// Toggle pause only on the frame where Space is pressed.
if (sys.input.isKeyPressed(SDL_SCANCODE_SPACE)) {
  // Store pause state in your app model.
  state.paused = !state.paused;
}

// Move left while the Left Arrow key remains held.
if (sys.input.isKeyDown(SDL_SCANCODE_LEFT)) {
  // Multiply by dt so movement speed is frame-rate independent.
  state.x -= 240 * dt;
}

// Move right while the Right Arrow key remains held.
if (sys.input.isKeyDown(SDL_SCANCODE_RIGHT)) {
  // Use the same speed as the left movement path.
  state.x += 240 * dt;
}

// Read focus from the same snapshot as pointer and timing state.
const input = sys.input.get();

// Stop interactive updates while the app is not focused.
if (!input.focused) {
  // Draw a calm paused state instead of advancing the simulation.
  drawPausedOverlay();
  // Keep rendering so the overlay remains responsive when focus returns.
  sys.animation.requestFrame(frame);
  // Leave the current frame early.
  return;
}

// Keep app state in one plain object while the project is small.
const state = {
  // Use a string mode for high-level interaction state.
  mode: 'idle',
  // Store the current x position of the active object.
  x: 120,
  // Store the current y position of the active object.
  y: 120,
  // Store horizontal velocity in pixels per second.
  velocityX: 0,
  // Store vertical velocity in pixels per second.
  velocityY: 0,
  // Use -1 when nothing is selected.
  selectedId: -1
};

// Import the shared state object.
import { state } from './state.js';
// Import the input-to-state translation layer.
import { updateFromInput } from './input.js';
// Import the drawing layer.
import { drawScene } from './draw.js';

// Keep the frame function short enough to show the app flow.
function frame(timestamp) {
  // Read input once and pass the snapshot down.
  const input = sys.input.get();
  // Mutate state from input and time.
  updateFromInput(state, input, timestamp);
  // Draw the state after it has been updated.
  drawScene(state);
  // Continue rendering.
  sys.animation.requestFrame(frame);
}