import * as PIXI from "pixi.js";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Stage } from "@inlet/react-pixi";
import { configureStore } from "@reduxjs/toolkit";
import UI from "~ui/UI";
import reducer from "~store/reducer";
import Game from "~game/scenes/Game";

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

const mounted = (app: PIXI.Application) => {
  window.addEventListener("resize", () => {
    app.queueResize();
  });
  app.queueResize();
};

const store = configureStore({ reducer });

ReactDOM.render(
  <React.Fragment>
    <Stage options={{ resolution: 1, resizeTo: window }} onMount={mounted}>
      <Provider store={store}>
        <Game />
      </Provider>
    </Stage>
    <Provider store={store}>
      <UI />
    </Provider>
  </React.Fragment>,
  document.getElementById("app")
);