Skip to content

Commit

Permalink
Feat: upgrade mixer remove mochi (axieinfinity#3)
Browse files Browse the repository at this point in the history 
* remove mochi

* feat/updateMixerRemoveMochi
  • Loading branch information
@yumemily
yumemily authored Aug 9, 2022
1 parent dfe85f5 commit 8a31553
Show file tree
Hide file tree
Showing 12 changed files with 382 additions and 1,886 deletions.
188 changes: 94 additions & 94 deletions components/axie-figure/AxieFigure.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
import * as PIXI from "pixi.js";
import "pixi-spine";
import React, { useEffect, useRef, useState } from "react";
import { getSpineFromAdultCombo } from "@axieinfinity/mixer";

import { PuffLoading } from "../puff-loading/PuffLoading";
import key from "./key.json";
import s from "./styles.module.css";
import { colorsArray, animationList } from "./constants";
import { Part, Color } from "./types";
import { PlaygroundGame } from "./PlaygroundGame";
import { PartsDropdown } from "./parts-dropdown/PartsDropdown";
import { ColorDropdown } from "./color-dropdown/ColorDropdown";
import { BodyOrAnimationDropdown } from "./body-or-animation-dropdown/BodyOrAnimationDropdown";
import * as PIXI from 'pixi.js'
import 'pixi-spine'
import React, { useEffect, useRef, useState } from 'react'
import { getSpineFromAdultCombo } from '@axieinfinity/mixer'

import { PuffLoading } from '../puff-loading/PuffLoading'
import key from './key.json'
import s from './styles.module.css'
import { colorsArray, animationList } from './constants'
import { Part, Color } from './types'
import { PlaygroundGame } from './PlaygroundGame'
import { PartsDropdown } from './parts-dropdown/PartsDropdown'
import { ColorDropdown } from './color-dropdown/ColorDropdown'
import { BodyOrAnimationDropdown } from './body-or-animation-dropdown/BodyOrAnimationDropdown'

interface AxieParts {
ears: Part;
eyes: Part;
mouth: Part;
horn: Part;
back: Part;
tail: Part;
ears: Part
eyes: Part
mouth: Part
horn: Part
back: Part
tail: Part
}

const initialPartValue = {
key: "",
name: "",
type: "",
sample: "",
};
key: '',
name: '',
type: '',
sample: '',
}

PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH;
PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH

export const AxieFigure = () => {
const [loading, setLoading] = useState<boolean>();
const [loading, setLoading] = useState<boolean>()
// const [axieCombo, setAxieCombo] = useState<Map<string, string>>();
// const [axieIdInput, setAxieIdInput] = useState<string>("");
const [axieParts, setAxieParts] = useState<AxieParts>({
Expand All @@ -42,14 +42,14 @@ export const AxieFigure = () => {
horn: initialPartValue,
back: initialPartValue,
tail: initialPartValue,
});
const [body, setBody] = useState<string>("");
const [animation, setAnimation] = useState<string>("Animation");
})
const [body, setBody] = useState<string>('')
const [animation, setAnimation] = useState<string>('Animation')
const [color, setColor] = useState<Color>({
key: "beast-02",
primary1: "ffd500",
primary2: "fffeda",
});
key: 'beast-02',
primary1: 'ffd500',
primary2: 'fffeda',
})
const [showHelperTextStatus, setShowHelperTextStatus] = useState({
ears: false,
eyes: false,
Expand All @@ -59,60 +59,60 @@ export const AxieFigure = () => {
tail: false,
body: false,
color: false,
});
})

const filterByBodyPart = (part: string) => {
return key.items.parts.filter((item) => item.type === part);
};
return key.items.parts.filter((item) => item.type === part)
}

const onAxiePartChange = (value: Part) => {
setAxieParts({ ...axieParts, [value.type]: value });
};
setAxieParts({ ...axieParts, [value.type]: value })
}

const createAxieCombo = () => {
const axieCombo = new Map<string, string>();
axieCombo.set("body-id", "");
axieCombo.set("body", body);
axieCombo.set("back", axieParts.back.sample);
axieCombo.set("ears", axieParts.ears.sample);
axieCombo.set("ear", axieParts.ears.sample);
axieCombo.set("eyes", axieParts.eyes.sample);
axieCombo.set("horn", axieParts.horn.sample);
axieCombo.set("mouth", axieParts.mouth.sample);
axieCombo.set("tail", axieParts.tail.sample);
return axieCombo;
};
const axieCombo = new Map<string, string>()
axieCombo.set('body-id', '')
axieCombo.set('body', body)
axieCombo.set('back', axieParts.back.sample)
axieCombo.set('ears', axieParts.ears.sample)
axieCombo.set('ear', axieParts.ears.sample)
axieCombo.set('eyes', axieParts.eyes.sample)
axieCombo.set('horn', axieParts.horn.sample)
axieCombo.set('mouth', axieParts.mouth.sample)
axieCombo.set('tail', axieParts.tail.sample)
return axieCombo
}

const updateHelperText = (axieCombo) => {
const copyShowHelperText = { ...showHelperTextStatus };
const copyShowHelperText = { ...showHelperTextStatus }
for (let [key, value] of axieCombo.entries()) {
if (value === "") {
copyShowHelperText[key] = true;
} else copyShowHelperText[key] = false;
setShowHelperTextStatus(copyShowHelperText);
if (value === '') {
copyShowHelperText[key] = true
} else copyShowHelperText[key] = false
setShowHelperTextStatus(copyShowHelperText)
}
};
}

const onCreateSpineFromCombo = async () => {
try {
const axieCombo = createAxieCombo();
updateHelperText(axieCombo);
const axieCombo = createAxieCombo()
updateHelperText(axieCombo)
for (let [key, value] of axieCombo.entries()) {
if (key !== "body-id" && !value) {
throw new Error("Axie part selection incomplete");
if (key !== 'body-id' && !value) {
throw new Error('Axie part selection incomplete')
}
}
const spine = getSpineFromAdultCombo(axieCombo);
if (!spine) throw new Error("Spine undefined");
const mixer = { spine: spine, variant: color.key };
await gameRef.current.changeSpineFromMixer(mixer);
const spine = getSpineFromAdultCombo(axieCombo)
if (!spine) throw new Error('Spine undefined')
const mixer = { spine: spine, variant: color.key }
await gameRef.current.changeSpineFromMixer(mixer)
} catch (e) {
console.log(e);
console.error(e)
}
};
}

const container = useRef<HTMLDivElement>(null);
const gameRef = useRef<PlaygroundGame>(null);
const container = useRef<HTMLDivElement>(null)
const gameRef = useRef<PlaygroundGame>(null)

// const onChangeAxieGenes = async () => {
// await gameRef.current.changeSpine(axieIdInput);
Expand All @@ -124,64 +124,64 @@ export const AxieFigure = () => {
// };

const onChangeAnimation = (animation: string) => {
setAnimation(animation);
gameRef.current.currentFigure.changeCurrentAnimation(animation, true);
};
setAnimation(animation)
gameRef.current.currentFigure.changeCurrentAnimation(animation, true)
}

useEffect(() => {
if (!container) return;
if (!container.current) return;
const canvasContainer = container.current;
if (!container) return
if (!container.current) return
const canvasContainer = container.current
if (canvasContainer.childElementCount > 0) {
canvasContainer.lastChild?.remove();
canvasContainer.lastChild?.remove()
}
setLoading(true);
setLoading(true)

const { offsetWidth, offsetHeight } = canvasContainer;
const { offsetWidth, offsetHeight } = canvasContainer
const game = new PlaygroundGame({
transparent: false,
resolution: window.devicePixelRatio,
autoStart: true,
width: offsetWidth,
height: offsetHeight,
backgroundColor: 0x282b39,
});
})

gameRef.current = game;
gameRef.current.startGame();
canvasContainer.appendChild(game.view);
gameRef.current = game
gameRef.current.startGame()
canvasContainer.appendChild(game.view)

setLoading(false);
setLoading(false)

return () => {
// gameRef.current.cleanUpKeyListeners();
if (game) {
game.destroy();
game.destroy()
}
};
}, []);
}
}, [])

return (
<div className={s.container}>
<div className={s.overlay}>
<div className={s.column1}>
<div className={s.partsColumn}>
<PartsDropdown
options={filterByBodyPart("eyes")}
options={filterByBodyPart('eyes')}
setValue={onAxiePartChange}
value={axieParts.eyes}
title="Eyes"
show={showHelperTextStatus.eyes}
/>
<PartsDropdown
options={filterByBodyPart("ears")}
options={filterByBodyPart('ears')}
setValue={onAxiePartChange}
value={axieParts.ears}
title="Ears"
show={showHelperTextStatus.ears}
/>
<PartsDropdown
options={filterByBodyPart("mouth")}
options={filterByBodyPart('mouth')}
setValue={onAxiePartChange}
value={axieParts.mouth}
title="Mouth"
Expand All @@ -205,21 +205,21 @@ export const AxieFigure = () => {
<div className={s.column3}>
<div className={s.partsColumn}>
<PartsDropdown
options={filterByBodyPart("horn")}
options={filterByBodyPart('horn')}
setValue={onAxiePartChange}
value={axieParts.horn}
title="Horn"
show={showHelperTextStatus.horn}
/>
<PartsDropdown
options={filterByBodyPart("back")}
options={filterByBodyPart('back')}
setValue={onAxiePartChange}
value={axieParts.back}
title="Back"
show={showHelperTextStatus.back}
/>
<PartsDropdown
options={filterByBodyPart("tail")}
options={filterByBodyPart('tail')}
setValue={onAxiePartChange}
value={axieParts.tail}
title="Tail"
Expand Down Expand Up @@ -247,5 +247,5 @@ export const AxieFigure = () => {
{loading && <PuffLoading size={200} />}
</div>
</div>
);
};
)
}
Loading

0 comments on commit 8a31553

Please sign in to comment.