rogue-loop-1/Assets/Components/Main/Game.re.js

import AsyncLoader from 'Assets/Library/AsyncLoader';
import * as RE from 'rogue-engine';
import * as THREE from 'three'
import CannonBody from '../../rogue_packages/rogue-cannon/Components/CannonBody.re'

export default class Game extends RE.Component {
  loader = new AsyncLoader()

  @RE.Prop("Prefab") asteroid
  // @RE.Prop("Prefab") player


  start() {
    console.log("calling start", new Date().getTime())
    const expectedComponents = [
      "top-left", "top-middle", "top-right", "left-side", "right-side", "bottom-left", "bottom-middle", "bottom-right",
    ]
    this.loader.loadStaticText("space_hud.html").then(html => {
      // RE.Runtime.uiContainer.innerHTML = html
      expectedComponents.forEach(componentId => {
        let component = document.getElementById(componentId)
        let setupFunctionName = this.formatComponentName(componentId)
        if(this[setupFunctionName]) {
          //this[setupFunctionName](component)
        }
      })
    }, error =>  RE.Debug.logError(error))

    RE.Runtime.rogueDOMContainer.addEventListener('contextmenu', event => { event.preventDefault() })
    window.addEventListener('resize', this.onResize.bind(this))

    let field = RE.App.currentScene.getObjectByName("asteroidField")
    this.loader.loadStaticText("Data/level1.json").then(levelstring => {
      this.asteroids = []
      let objectData = JSON.parse(levelstring)
      for(let i = 0; i < objectData.length; i++) {
        let obj = objectData[i]
        if(obj[0] == "asteroid") {
          let asteroid = this.asteroid.instantiate(field)
          asteroid.position.copy(new THREE.Vector3(obj[1] ,1, obj[2]))
          asteroid.rotation.set(Math.PI * Math.random(), Math.PI * Math.random(), Math.PI * Math.random())
          // let size = (obj[1] % 3) + 1
          // asteroid.scale.set(size, size, size)
          // let body = RE.getComponent(CannonBody, asteroid).body
          // console.log(body)
          // setTimeout(() => {
          //   body.shapes[0].radius = size / 2
          //   body.mass = size
          //   body.shapes[0].computeBoundingSphereRadius();
          //   body.computeAABB();
          //   body.updateMassProperties();
          // },0)
          // setTimeout(() => {
          //   body.mass = size  10
          //   let bodyShape = body.shapes[0]
          //   body.removeShape(bodyShape)
          //   bodyShape.updateBoundingSphereRadius(size / 2)
          //   body.addShape(bodyShape)
          //   bodyShape.updateConvexPolyhedronRepresentation();
          //   bodyShape.computeBoundingSphereRadius();
          //   body.computeAABB();
          //   body.updateMassProperties();
          // }, 0)
          // body.body.shapes[0].boundingSphereRadius = size / 2
          // body.body.mass = size

        }
      }
    }, error =>  RE.Debug.logError(error))

    //random asteroids
    // let field = RE.App.currentScene.getObjectByName("asteroidField")
    // this.asteroids = []
    // for(let i = 0; i < 300; i++) {
    //   let asteroid = this.asteroid.instantiate(field)
    //   asteroid.position.copy(new THREE.Vector3(Math.floor(500 * Math.random() - 250) ,1 , Math.floor(500 * Math.random() - 250)))
    // }

    // let field = RE.App.currentScene.getObjectByName("asteroidField")
    // let objectData = levelData
    // for(let i = 0; i < objectData.length; i++) {
    //   let obj = objectData[i]
    //   if(obj[0] == "asteroid") {
    //     let asteroid = this.asteroid.instantiate(field)
    //     asteroid.position.copy(new THREE.Vector3(obj[1] ,1 , obj[2]))
    //   }
    // }

    // this.player.instantiate()
  }

  onResize(event) {

  }

  formatComponentName(componentId) {
    return `setup` + componentId.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('')
  }
  
  setupTopMiddle(element) {
    this.armorInfo = document.createElement('div')
    this.armorInfo.className = "header-info"
    this.armorInfo.innerHTML = "Armor: 50"
    element.appendChild(this.armorInfo)

    this.shieldsInfo = document.createElement('div')
    this.shieldsInfo.className = "header-info"
    this.shieldsInfo.innerHTML = "Shields: 100"
    element.appendChild(this.shieldsInfo)

    this.moneyInfo = document.createElement('div')
    this.moneyInfo.className = "header-info"
    this.moneyInfo.innerHTML = "₩: 140,000"
    element.appendChild(this.moneyInfo)
  }

  setupBottomLeft(element) {
    let info = document.createElement('div')
    info.innerHTML = "Mission: Retrieve the lost crystal alloy from the nearby asteroid field"
    element.appendChild(info)
  }

  setupBottomRight(element) {
    let minimap = document.createElement('canvas')
    minimap.width = Math.max(element.offsetWidth, 160)
    minimap.height = Math.max(element.offsetHeight, 160)
    let ctx = minimap.getContext('2d')
    ctx.strokeStyle = `rgba(40, 240, 40, 0.8)`
    ctx.beginPath()
    ctx.arc(minimap.width / 2, minimap.height / 2, Math.min(minimap.width / 2, minimap.height / 2), 0, 2 * Math.PI)
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(minimap.width / 2, minimap.height / 2, Math.min(3 *minimap.width / 8, 3 * minimap.height / 8), 0, 2 * Math.PI)
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(minimap.width / 2, minimap.height / 2, Math.min(1 *minimap.width / 4, 1 * minimap.height / 4), 0, 2 * Math.PI)
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(minimap.width / 2, minimap.height / 2, Math.min(1 * minimap.width / 8, 1 * minimap.height / 8), 0, 2 * Math.PI)
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(minimap.width / 2, minimap.height / 2)
    ctx.lineTo(2 * Math.min(minimap.width / 2, minimap.height / 2), minimap.height / 2)
    ctx.stroke()
    element.appendChild(minimap)
  }
}

RE.registerComponent(Game);