Skip to content

Commit

Permalink
fix: conflicts resolved
Browse files Browse the repository at this point in the history
  • Loading branch information
@brancoder
brancoder committed Feb 21, 2024
2 parents f35e872 + 4c3af8c commit 8e71f95
Show file tree
Hide file tree
Showing 16 changed files with 417 additions and 296 deletions.
9 changes: 5 additions & 4 deletions api/src/initServices.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,10 +215,11 @@ function initNovaServices(networkConfig: INetwork): void {
};

if (networkConfig.permaNodeEndpoint) {
novaClientParams.nodes = [networkConfig.permaNodeEndpoint];
// Client with permanode needs the ignoreNodeHealth as chronicle is considered "not healthy" by the sdk
// Related: https://github.com/iotaledger/inx-chronicle/issues/1302
novaClientParams.ignoreNodeHealth = true;
const chronicleNode = {
url: networkConfig.permaNodeEndpoint,
permanode: true,
};
novaClientParams.primaryNodes.push(chronicleNode);

const chronicleService = new ChronicleService(networkConfig);
ServiceFactory.register(`chronicle-${networkConfig.network}`, () => chronicleService);
Expand Down
82 changes: 26 additions & 56 deletions client/src/features/visualizer-threejs/Emitter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,31 @@ import React, { RefObject, Dispatch, SetStateAction, useEffect, useRef } from "r
import * as THREE from "three";
import { useConfigStore, useTangleStore } from "./store";
import { useRenderTangle } from "./useRenderTangle";
import { getTangleDistances, getSinusoidalPosition } from "./utils";
import { getTangleDistances, getEmitterPositions } from "./utils";
import { CanvasElement } from "./enums";
import {
EMITTER_SPEED_MULTIPLIER,
EMITTER_DEPTH,
EMITTER_HEIGHT,
EMITTER_WIDTH,
MAX_SINUSOIDAL_AMPLITUDE,
SINUSOIDAL_AMPLITUDE_ACCUMULATOR,
HALF_WAVE_PERIOD_SECONDS,
INITIAL_SINUSOIDAL_AMPLITUDE,
} from "./constants";
import useVisualizerTimer from "~/helpers/nova/hooks/useVisualizerTimer";
import { EMITTER_DEPTH, EMITTER_HEIGHT, EMITTER_WIDTH } from "./constants";

interface EmitterProps {
readonly setRunListeners: Dispatch<SetStateAction<boolean>>;
readonly emitterRef: RefObject<THREE.Mesh>;
}

const { xTangleDistance, yTangleDistance } = getTangleDistances();

const Emitter: React.FC<EmitterProps> = ({ setRunListeners, emitterRef }: EmitterProps) => {
const getVisualizerTimeDiff = useVisualizerTimer();

const setZoom = useTangleStore((s) => s.setZoom);
const get = useThree((state) => state.get);
const currentZoom = useThree((state) => state.camera.zoom);
const groupRef = useRef<THREE.Group>(null);
const camera = get().camera;

const { xTangleDistance, yTangleDistance } = getTangleDistances();
const isPlaying = useConfigStore((state) => state.isPlaying);
const setIsPlaying = useConfigStore((state) => state.setIsPlaying);
const setInitialTime = useConfigStore((state) => state.setInitialTime);

const animationTime = useRef<number>(0);
const currentAmplitude = useRef<number>(INITIAL_SINUSOIDAL_AMPLITUDE);

const previousRealTime = useRef<number>(0);
const previousPeakTime = useRef<number>(0);
const tangleWrapperRef = useRef<THREE.Mesh | null>(null);

useEffect(() => {
setZoom(currentZoom);
Expand All @@ -47,6 +38,7 @@ const Emitter: React.FC<EmitterProps> = ({ setRunListeners, emitterRef }: Emitte
if (emitterRef?.current) {
setIsPlaying(true);
setRunListeners(true);
setInitialTime(Date.now());
}

return () => {
Expand All @@ -55,68 +47,46 @@ const Emitter: React.FC<EmitterProps> = ({ setRunListeners, emitterRef }: Emitte
};
}, [emitterRef?.current]);

useFrame(() => {
if (camera && groupRef.current) {
camera.position.x = groupRef.current.position.x;
}
});

function updateAnimationTime(realTimeDelta: number): void {
animationTime.current += realTimeDelta;
}

function checkAndHandleNewPeak(): void {
const currentHalfWaveCount = Math.floor(animationTime.current / HALF_WAVE_PERIOD_SECONDS);
const lastPeakHalfWaveCount = Math.floor(previousPeakTime.current / HALF_WAVE_PERIOD_SECONDS);

if (currentHalfWaveCount > lastPeakHalfWaveCount) {
currentAmplitude.current = Math.min(currentAmplitude.current + SINUSOIDAL_AMPLITUDE_ACCUMULATOR, MAX_SINUSOIDAL_AMPLITUDE);
previousPeakTime.current = animationTime.current;
}
}

/**
* Emitter shift
*/
useFrame(({ clock }, delta) => {
const currentRealTime = clock.getElapsedTime();
const realTimeDelta = currentRealTime - previousRealTime.current;
previousRealTime.current = currentRealTime;
useFrame(() => {
const currentAnimationTime = getVisualizerTimeDiff();
const { x, y } = getEmitterPositions(currentAnimationTime);

if (isPlaying) {
updateAnimationTime(realTimeDelta);
checkAndHandleNewPeak();

if (groupRef.current) {
const { x } = groupRef.current.position;
const newXPos = x + delta * EMITTER_SPEED_MULTIPLIER;
groupRef.current.position.x = newXPos;
if (emitterRef.current) {
emitterRef.current.position.x = x;
emitterRef.current.position.y = y;
}

if (emitterRef.current) {
const newYPos = getSinusoidalPosition(animationTime.current, currentAmplitude.current);
emitterRef.current.position.y = newYPos;
if (tangleWrapperRef.current) {
tangleWrapperRef.current.position.x = x - xTangleDistance / 2;
}
}

if (tangleWrapperRef.current && camera) {
camera.position.x = tangleWrapperRef.current.position.x + xTangleDistance / 2;
}
});

// The Tangle rendering hook
useRenderTangle();

return (
<group ref={groupRef}>
<>
{/* TangleWrapper Mesh */}
<mesh name={CanvasElement.TangleWrapperMesh} position={[-(xTangleDistance / 2), 0, 0]}>
<mesh ref={tangleWrapperRef} name={CanvasElement.TangleWrapperMesh} position={[-(xTangleDistance / 2), 0, 0]}>
<boxGeometry args={[xTangleDistance, yTangleDistance, 0]} attach="geometry" />
<meshPhongMaterial transparent opacity={0} wireframe={true} attach="material" />
<meshPhongMaterial transparent opacity={0} attach="material" />
</mesh>

{/* Emitter Mesh */}
<mesh ref={emitterRef} name={CanvasElement.EmitterMesh} position={[0, 0, 0]}>
<boxGeometry args={[EMITTER_WIDTH, EMITTER_HEIGHT, EMITTER_DEPTH]} />
<meshPhongMaterial transparent opacity={0} />
</mesh>
</group>
</>
);
};
export default Emitter;
68 changes: 0 additions & 68 deletions client/src/features/visualizer-threejs/Visualizer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,74 +83,6 @@
}
}

.stats-panel-container {
display: flex;
position: absolute;
z-index: 1;
top: 90px !important;
left: 20px !important;
bottom: auto !important;
justify-content: left !important;
align-items: center;
pointer-events: none;

.stats-panel {
background: var(--body-background);

.card--value,
.card--label {
text-align: left;
}
.card--label {
justify-content: flex-start;
}
.card--content {
padding: 0;
}
.stats-panel__info {
padding: 0 10px;
display: inline-block;
}
}

@include tablet-down {
top: 60px;
left: 20px;
bottom: auto;
justify-content: left;

.stats-panel {
.card--value,
.card--label {
text-align: left;
}
.card--label {
justify-content: flex-start;
}
.card--content {
padding: 0;
}
.stats-panel__info {
padding: 0 10px;
display: inline-block;
}
}
}

@include phone-down {
left: 10px;
.stats-panel {
.card--value,
.card--label {
font-size: 12px;
}
.stats-panel__info:last-of-type {
display: block;
}
}
}
}

.info-panel {
background: var(--body-background);
display: flex;
Expand Down
37 changes: 14 additions & 23 deletions client/src/features/visualizer-threejs/VisualizerInstance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,16 @@ import { Perf } from "r3f-perf";
import React, { useEffect, useRef } from "react";
import { RouteComponentProps } from "react-router-dom";
import * as THREE from "three";
import { Box3 } from "three";
import {
FAR_PLANE,
NEAR_PLANE,
DIRECTIONAL_LIGHT_INTENSITY,
PENDING_BLOCK_COLOR,
VISUALIZER_BACKGROUND,
EMITTER_X_POSITION_MULTIPLIER,
BLOCK_STATE_TO_COLOR,
} from "./constants";
import Emitter from "./Emitter";
import { useTangleStore, useConfigStore } from "./store";
import { getGenerateDynamicYZPosition, randomIntFromInterval } from "./utils";
import { BPSCounter } from "./BPSCounter";
import { VisualizerRouteProps } from "../../app/routes/VisualizerRouteProps";
import { ServiceFactory } from "../../factories/serviceFactory";
Expand All @@ -32,9 +29,11 @@ import { BasicBlockBody, Utils, type IBlockMetadata, type BlockState, type SlotI
import { IFeedBlockData } from "~/models/api/nova/feed/IFeedBlockData";
import CameraControls from "./CameraControls";
import "./Visualizer.scss";
import useVisualizerTimer from "~/helpers/nova/hooks/useVisualizerTimer";
import { getBlockInitPosition, getBlockTargetPosition } from "./blockPositions";

const features = {
statsEnabled: true,
statsEnabled: false,
cameraControls: true,
};

Expand All @@ -44,7 +43,6 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
},
}) => {
const [networkConfig] = useNetworkConfig(network);
const generateYZPositions = getGenerateDynamicYZPosition();
const themeMode = useGetThemeMode();

const [runListeners, setRunListeners] = React.useState<boolean>(false);
Expand Down Expand Up @@ -80,6 +78,8 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
const emitterRef = useRef<THREE.Mesh>(null);
const [feedService, setFeedService] = React.useState<NovaFeedClient | null>(ServiceFactory.get<NovaFeedClient>(`feed-${network}`));

const getCurrentAnimationTime = useVisualizerTimer();

/**
* Pause on tab or window change
*/
Expand Down Expand Up @@ -166,6 +166,7 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
if (!runListeners) {
return;
}

setIsPlaying(true);

return () => {
Expand Down Expand Up @@ -195,21 +196,14 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
* @param blockData The new block data
*/
const onNewBlock = (blockData: IFeedBlockData) => {
const emitterObj = emitterRef.current;
if (emitterObj && blockData && isPlaying) {
const emitterBox = new Box3().setFromObject(emitterObj);

const emitterCenter = new THREE.Vector3();
emitterBox.getCenter(emitterCenter);

const { y, z } = generateYZPositions(bpsCounter.getBPS(), emitterCenter);
const minX = emitterBox.min.x - (emitterBox.max.x - emitterBox.min.x) * EMITTER_X_POSITION_MULTIPLIER;
const maxX = emitterBox.max.x + (emitterBox.max.x - emitterBox.min.x) * EMITTER_X_POSITION_MULTIPLIER;

const x = randomIntFromInterval(minX, maxX);
const targetPosition = { x, y, z };
if (blockData) {
const currentAnimationTime = getCurrentAnimationTime();
const bps = bpsCounter.getBPS();
const initPosition = getBlockInitPosition(currentAnimationTime);
const targetPosition = getBlockTargetPosition(initPosition, bps);

bpsCounter.addBlock();

if (!bpsCounter.getBPS()) {
bpsCounter.start();
}
Expand All @@ -229,12 +223,9 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
addBlock({
id: blockData.blockId,
color: PENDING_BLOCK_COLOR,
blockAddedTimestamp: getCurrentAnimationTime(),
targetPosition,
initPosition: {
x: emitterCenter.x,
y: emitterCenter.y,
z: emitterCenter.z,
},
initPosition,
});
}
};
Expand Down
31 changes: 31 additions & 0 deletions client/src/features/visualizer-threejs/blockPositions.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { EMITTER_WIDTH, EMITTER_X_POSITION_MULTIPLIER } from "./constants";
import { getEmitterPositions, getGenerateDynamicYZPosition, getTangleDistances, randomIntFromInterval } from "./utils";

const generateYZPositions = getGenerateDynamicYZPosition();

interface IPos {
x: number;
y: number;
z: number;
}
export function getBlockTargetPosition(initPosition: IPos, bps: number): IPos {
const { y, z } = generateYZPositions(bps, initPosition);

const emitterMinX = initPosition.x - EMITTER_WIDTH / 2;
const emitterMaxX = initPosition.x + EMITTER_WIDTH / 2;

const minX = emitterMinX - (emitterMaxX - emitterMinX) * EMITTER_X_POSITION_MULTIPLIER;
const maxX = emitterMaxX + (emitterMaxX - emitterMinX) * EMITTER_X_POSITION_MULTIPLIER;

const x = randomIntFromInterval(minX, maxX);

return { x, y, z };
}

export function getBlockInitPosition(currentAnimationTime: number): IPos {
const { xTangleDistance } = getTangleDistances();
const { x: xEmitterPos, y, z } = getEmitterPositions(currentAnimationTime);
const x = xEmitterPos + xTangleDistance / 2;

return { x, y, z };
}
6 changes: 6 additions & 0 deletions client/src/features/visualizer-threejs/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,9 @@ export interface ICameraAngles {
maxPolarAngle: number;
maxAzimuthAngle: number;
}

export interface IThreeDimensionalPosition {
x: number;
y: number;
z: number;
}
Loading

0 comments on commit 8e71f95

Please sign in to comment.