raylib-wasm/docs/raylib/raylib-python.js

Make raylib games in JS for the web

/* global MutationObserver HTMLElement */

import { raylib_run } from './raylib.js'

export default class RaylibPythonComponent extends HTMLElement {
  constructor () {
    super()
    // hide things while setting up
    this.style.display = 'none'
    this.shadow = this.attachShadow({ mode: 'open' })
    this.canvas = document.createElement('canvas')

    window.addEventListener('resize', this.onResize.bind(this))

    this.shadow.innerHTML = `
<style>
canvas.landscape {
  height: 100vh;
  max-width: 100vw;
}
canvas.portrait {
  width: 100vw;
  max-height: 100vh;
}
canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}
</style>
`
    this.shadow.appendChild(this.canvas)

    // this makes right-click work better in raylib
    this.canvas.addEventListener('contextmenu', e => e.preventDefault())

    this.start(this.src)
  }

  onResize () {
    // fill seems busted, for some reason it's modifying canvas height/width attributes instead of just the class
    // if (this.fill) {
    //   this.canvas.className = (this.parentElement.clientWidth > this.parentElement.clientHeight) ? 'landscape' : 'portrait'
    // } else {
    //   this.canvas.className = ''
    // }
  }

  static get observedAttributes () {
    return ['src', 'fill']
  }

  attributeChangedCallback (name, oldValue, newValue) {
    if (name === 'fill') {
      this.fill = typeof newValue !== 'undefined'
      this.onResize()
    }
    if (name === 'src') {
      this.src = newValue
      this.start(this.src)
    }
  }

  async start (src) {
    let userCode = this.textContent
    if (src) {
      userCode = await fetch(src).then(r => r.text())
    }

    const pyodide = await window.loadPyodide()

    const userInit = raylib => {
      for (const r of Object.keys(raylib)) {
        pyodide.globals.set(r, raylib[r])
      }
      pyodide.runPython(`${userCode}\ninit()`)
    }
    const userUpdate = () => {
      pyodide.runPython(`update()`)
    }

    raylib_run(this.canvas, userInit, userUpdate)

    // game is loaded so show myself
    this.style.display = 'block'
  }
}

document.addEventListener('DOMContentLoaded', () => {
  window.customElements.define('raylib-python', RaylibPythonComponent)
})