Init project

Author: phuong-axie

.eslintrc.js

@@ -0,0 +1,43 @@
+module.exports = {
+  extends: [
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+    'plugin:import/typescript',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: { jsx: true },
+    sourceType: 'module',
+  },
+  plugins: ['react-hooks', 'simple-import-sort'],
+  ignorePatterns: ['dist/', '.next', 'node_modules/'],
+  rules: {
+    '@next/next/no-html-link-for-pages': 'off',
+    'react/jsx-key': 'off',
+    'simple-import-sort/sort': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    '@typescript-eslint/no-unused-vars': 'error',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'react/prop-types': [0],
+    'react/react-in-jsx-scope': 'off',
+    'prettier/prettier': ['error'],
+    'no-console': ['warn'],
+    curly: 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: 'lodash',
+            message: "Please use `import [package] from 'lodash/[package]'` instead.",
+          },
+        ],
+        patterns: ['!lodash/*'],
+      },
+    ],
+  },
+};

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.idea
+.npmrc
+.vscode
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "arrowParens": "avoid",
+  "jsxBracketSameLine": false
+}

README.md

@@ -0,0 +1,48 @@
+# axie-game-js-test-01
+
+With typescript source code  given, let implement write a pathfinding algorithm to help axie out of the maze.
+
+![Sample map](images/01.png?raw=true "Axie Labyrinth")
+
+Gameplay:
+
+- Axie only can do move action
+- Have 2 kind object are key and door. Door only unlock if it same type with key
+- Objective is move axie to gray goal
+
+Requirement:
+
+- Only call move function
+    - this.onMoveAxie(-1, 0);
+    - this.onMoveAxie(1, 0);
+    - this.onMoveAxie(0, -1);
+    - this.onMoveAxie(0, 1);
+- Code can solve other map
+- DO NOT change the game logic code. Can create new file, and interact with axie at here:
+    
+    ```tsx
+    //***************YOUR CODE HERE**************************/
+      onSimulateTurn(){
+        //Do you check and give the action to reach the goal
+        const floorMap = this.mazeState.floors[this.mazeState.currentFloorIdx];
+        if(this.mazeState.axie.mapX > 3){
+          this.onMoveAxie(-1, 0);
+        } else {
+          this.onMoveAxie(1, 0);
+        }
+      }
+    ```
+    
+
+## Resources
+
+- Base project are at this repository :
+    - [https://github.com/axieinfinity/game-js-test-01](https://github.com/axieinfinity/game-js-test-01)
+
+## Submission
+
+- Create your own git repository so we can see your work process.
+
+## Deadline
+
+This test is designed for 2 - 5 hours of coding. We know you might be busy with your current work, the maximum deadline is **7 days** after you received this test.

images/01.png

@@ -0,0 +1,7 @@
+.AxieLabyrinth {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+}

modules/axie-labyrinth/AxieLabyrinth.module.scss

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+
+import { AxieMaze } from './axie-maze/AxieMazeNoSsr';
+import Classes from './AxieLabyrinth.module.scss';
+
+const AxieLabyrinth: FC = () => {
+  return (
+    <div className={Classes.AxieLabyrinth}>
+      <AxieMaze />
+    </div>
+  );
+};
+
+export default AxieLabyrinth;

modules/axie-labyrinth/AxieLabyrinth.tsx

@@ -0,0 +1,32 @@
+import "pixi-spine"
+
+import { Mixer } from "./types"
+
+export class Figure extends PIXI.spine.Spine {
+  static readonly resourcePath =
+    "https://axiecdn.axieinfinity.com/mixer-stuffs/v2/"
+  mixer: Mixer
+
+  constructor(mixer: Mixer, atlasKeyMap: Map<string, string>, loader: PIXI.loaders.Loader) {
+  const allTextures: { [key: string]: PIXI.Texture } = {}
+
+  atlasKeyMap.forEach((atlasName, atlasKey) => {
+    allTextures[atlasName] = loader.resources[atlasKey].texture;
+  })
+
+  const spineAtlas = new PIXI.spine.core.TextureAtlas()
+  spineAtlas.addTextureHash(allTextures, false)
+
+  const spineAtlasLoader = new PIXI.spine.core.AtlasAttachmentLoader(
+    spineAtlas
+  )
+
+  const spineJsonParser = new PIXI.spine.core.SkeletonJson(spineAtlasLoader)
+  const spineData = spineJsonParser.readSkeletonData(mixer.spine)
+  super(spineData)
+
+  this.mixer = mixer
+  this.scale.set(0.18)
+  }
+}
+

modules/axie-labyrinth/axie-figure/Figure.ts

@@ -0,0 +1,15 @@
+.container {
+  /*display: flex;*/
+  /*flex-direction: column;*/
+  /*align-items: center;*/
+  /*justify-content: center;*/
+  /*height: 383px;*/
+  /*position: relative;*/
+}
+
+.canvas {
+  overflow: hidden;
+  border-radius: 4px;
+  width: 960px;
+  height: 640px;
+}

modules/axie-labyrinth/axie-figure/styles.module.css

@@ -0,0 +1,53 @@
+import * as PIXI from 'pixi.js';
+import React, { useEffect, useRef } from 'react';
+
+import s from '../axie-figure/styles.module.css';
+import { AxieMazeGame } from './AxieMazeGame';
+
+PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH;
+
+export const AxieMaze = () => {
+  const container = useRef<HTMLDivElement>(null);
+  const gameRef = useRef<AxieMazeGame>(null);
+
+  useEffect(() => {
+    if (!container) return;
+    if (!container.current) return;
+    const canvasContainer = container.current;
+    if (canvasContainer.childElementCount > 0) {
+      canvasContainer.lastChild?.remove();
+    }
+
+    const { offsetWidth, offsetHeight } = canvasContainer;
+    const game = new AxieMazeGame({
+      transparent: false,
+      resolution: window.devicePixelRatio,
+      autoStart: true,
+      width: offsetWidth,
+      height: offsetHeight,
+      backgroundColor: 0x70C8F7,
+      // preserveDrawingBuffer: true
+    });
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    gameRef.current = game;
+
+    const roninAddress = '';
+    gameRef.current.initGame();
+    canvasContainer.appendChild(game.view);
+
+    return () => {
+      // gameRef.current.cleanUpKeyListeners();
+      if (game) {
+        game.destroy();
+      }
+    };
+  }, []);
+
+  return (
+    <div className={s.container}>
+      <div ref={container} className={s.canvas}></div>
+    </div>
+  );
+};