Kasri - Asri for Kaboom

Start a Kasri
https://replit.com/new?template=2c0325cd-46eb-4c9e-b564-b0a114ffa57d

I’ve decided to implement a version of Asri specifically for Kaboom.

Asri allows for single HTML file pages, using entry files to preserve imports incase.

It uses the Asri Import paradigm, and imports the app/{ PAGE PATH }/kaentry.js file for importing entry pages.

This allows for simple class oriented game structures and dynamic imports

Since it follows the Asri framework, you can dynamically use imports an await them without restrictions of the basic DOM.


Main

import kbg from '../.types'
import { chaosWindow } from './chaosWindow'

const kaboom = chaosWindow.kaboom = kbg.default;

// initialize context
kaboom()

// load assets
loadSprite("bean", "sprites/bean.png")

import('./entry')

Entry

import kbg from '../.types'
import { chaosWindow } from './chaosWindow'

class Kasri {

  static ss = new URLSearchParams(window.location.search)
  static debug = this.ss.get("debug") == "true"

  static homeUrl = new URL(location.origin)

  static appDir = new URL("./app", this.homeUrl)
  static soundDir = new URL("./sounds", this.homeUrl)
  static spriteDir = new URL("./sprites", this.homeUrl)
  static codeDir = new URL("./code", this.homeUrl)

  // ---

  static async getFile(filepath: string, url: URL) {
    let request = new URL(filepath, url)
    return await fetch(request)
  }

  static async getHomeFile(filepath: string) {
    return await this.getFile(filepath, this.homeUrl)
  }

  static async getAppFile(filepath: string) {
    return await this.getFile(filepath, this.appDir)
  }

  static async getSoundFile(filepath: string) {
    return await this.getFile(filepath, this.soundDir)
  }

  static async getSpriteFile(filepath: string) {
    return await this.getFile(filepath, this.spriteDir)
  }

  // ---

  static genAppEntry(filepath: string, ext = 'js') {
    let pathUrl = new URL(filepath, this.appDir)
    pathUrl.pathname += `${filepath}kaentry.${ext}`
    return pathUrl
  }

  static importEntry(filepath: string) {
    let url_ = this.genAppEntry(filepath)
    return import(url_.toString())
  }

  // ---

  _ = Kasri

  // ---

  constructor() {

    addEventListener("DOMContentLoaded", _ => {
      this.init()
    })

  }

  // ---

  async init() {

    let pathname = (
      this._.ss.get("pathname")
      || location.pathname
    ).slice(1)

    try {
      var entry = await this._.importEntry(pathname)
    }

    catch (e) {
      console.warn(e)
      return
    }

    // --- 

    // Find a window var that exists for `KaMain`
    let windowVarArr = [
      'KaMain',
      'kaMain',
      'ksMain',
      'KSMain',
      'KSmain',
    ]

    let entrypKey = windowVarArr.find(key => {
      return window[key] ?? false
    })

    if (!entrypKey) {
      throw new Error(`[KAU] No window var found for ${pathname}`)
    }

    // ---

    let entryp_ = chaosWindow[entrypKey]
    
    // for (let [key, value] of Object.entries(entryp_.prototype)) {
    //   entryp_[key] = value
    // }

    Object.assign(entryp_, {
      ...entry,
      ...entryp_.prototype,
      
      Kasri,
      liveKasriInstance: this,
    })

    // ---

    let preload = entryp_.preload;
    let preloadData: any;

    if (preload) {
      preloadData = await preload()
    }

    // ---

    loadRoot(Kasri.homeUrl.href)
    let kaMain = new entryp_(pathname, preloadData)

    // ---

    if (kaMain.afterKA) {
      await kaMain.afterKA()
    }
  }

}

chaosWindow.__ka = Kasri
chaosWindow.__ka_i = new Kasri()

chaosWindow

export const chaosWindow = (window as any);
4 Likes

I have now added a quick shortcut for making Kasri’s!!

2 Likes