Skip to content

Commit

Permalink
Merge pull request #26 from bananu7/v0.4-fixes
Browse files Browse the repository at this point in the history 
V0.4 fixes
  • Loading branch information
@bananu7
bananu7 authored Oct 9, 2022
2 parents 50bb1a1 + d2f5ad0 commit 2426208
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 14 deletions.
3 changes: 1 addition & 2 deletions packages/client/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@
border-radius: 10px 0 0 0;
box-shadow: 0px 0px 37px 0px rgba(0,0,0,0.5);

overflow: hidden;
}

.CommandPaletteHint {
Expand Down Expand Up @@ -117,7 +116,7 @@
position: absolute;
z-index: 1;
left: 50%;
bottom: 110%;
bottom: 105%;
margin-left: -48%;
}

Expand Down
5 changes: 5 additions & 0 deletions packages/client/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ function App() {
onUpdatePacket: (p:UpdatePacket) => {
setLastUpdatePacket(p);
setSelectedUnits(su => new Set(p.units.map(u => u.id).filter(id => su.has(id))));

// TODO verify if currently selected units can still perform the action
// such as building
},
onMatchConnected: (matchId: string) => {
console.log(`[App] Connected to a match ${matchId}`);
Expand Down Expand Up @@ -146,6 +149,8 @@ function App() {
multiplayer.followCommand(Array.from(selectedUnits), targetId, shift);
} else if (selectedAction.action === 'Attack') {
multiplayer.attackCommand(Array.from(selectedUnits), targetId, shift);
} else if (selectedAction.action === 'Harvest') {
multiplayer.harvestCommand(Array.from(selectedUnits), targetId, shift);
}
break;
case 2:
Expand Down
22 changes: 14 additions & 8 deletions packages/client/src/components/CommandPalette.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ export function CommandPalette(props: Props) {

const productionButtons = productionUnits.map(up => {
const cost = up.productionCost;
const time = Math.floor(up.productionTime/1000);
const canAfford = props.resources >= cost;
const click = canAfford ?
() => produce(up.unitType) :
Expand All @@ -116,6 +117,7 @@ export function CommandPalette(props: Props) {
<span className="tooltip">
<strong>{up.unitType}</strong>
<span style={{float:"right", color: canAfford?"white":"red"}}>{cost}💰</span>
<span style={{float:"right"}}>{time}🕑</span>
<br /><br/>
This excellent unit will serve you well, and I
would tell you how but the tooltip data isn't
Expand Down Expand Up @@ -147,6 +149,7 @@ export function CommandPalette(props: Props) {
const buildButtons = availableBuildings.map(bp => {
const b = bp.buildingType;
const cost = bp.buildCost;
const time = Math.floor(bp.buildTime / 1000);

const active =
props.selectedAction &&
Expand All @@ -170,6 +173,7 @@ export function CommandPalette(props: Props) {
<span className="tooltip">
<strong>{b}</strong>
<span style={{float:"right", color: canAfford?"white":"red"}}>{cost}💰</span>
<span style={{float:"right"}}>{time}🕑</span>
<br /><br/>
This building probably does something, but that
information would need to be stored in a dictionary
Expand All @@ -181,23 +185,25 @@ export function CommandPalette(props: Props) {
})

let hint = "";
/* TODO - contextual hints disabled for now
maybe a tutorial mode would help?
if (props.selectedAction) {
switch (props.selectedAction.action) {
case 'Build':
hint = `Right-click on the map to build a ${props.selectedAction.building}.`;
hint = `Left-click on the map to build a ${props.selectedAction.building}.`;
break;
case 'Move':
hint = "Right-click on the map to move, or on a unit to follow it.";
hint = "Left-click on the map to move, or on a unit to follow it.";
break;
case 'Attack':
hint = "Right-click on an enemy unit to attack it, or on the map to move-attack there.";
hint = "Left-click on an enemy unit to attack it, or on the map to move-attack there.";
break;
case 'Harvest':
hint = "Right-click on a resource node to start harvesting it automatically.";
hint = "Left-click on a resource node to start harvesting it automatically.";
break;
}
}

*/

return (
<div className="CommandPalette">
Expand All @@ -210,7 +216,7 @@ export function CommandPalette(props: Props) {
active={props.selectedAction && props.selectedAction.action === 'Move' || false}
onClick={() => props.setSelectedAction({ action: 'Move'})}
>
<span style={{fontSize: "2em"}}>➜</span>
<span style={{fontSize: "2.3em"}}>➜</span>
<span className="tooltip">Move a unit to a specific location or order it to follow a unit.</span>
</Button>
}
Expand All @@ -235,7 +241,7 @@ export function CommandPalette(props: Props) {
active={false}
onClick={stop}
>
<span style={{fontSize: "2em"}}>✖</span>
<span style={{fontSize: "2.3em"}}>✖</span>
<span className="tooltip">Stop the current action and all the queued ones.</span>
</Button>

Expand All @@ -247,7 +253,7 @@ export function CommandPalette(props: Props) {
active={props.selectedAction && props.selectedAction.action === 'Attack' || false}
onClick={() => props.setSelectedAction({ action: 'Attack'})}
>
<span style={{fontSize: "2em"}}>🪓</span>
<span style={{fontSize: "2.3em"}}>⚔️</span>
<span className="tooltip">Attack an enemy unit or move towards a point and attack any enemy units on the way</span>
</Button>
}
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/gfx/Map3D.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function Map3D(props: Map3DProps) {
}
setDrag(undefined);
setPointer(undefined);
}, [drag]);
}, [drag, props.selectInBox]);

const selectionBoxSize = (drag && pointer) ? {
x: Math.abs(drag.x - pointer.x),
Expand Down
17 changes: 14 additions & 3 deletions packages/client/src/gfx/Unit3D.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@ export function Unit3D(props: Unit3DProps) {

// TODO proper unit catalog
const isBuilding = props.unit.kind === 'Base' || props.unit.kind === 'Barracks';
const unitSize = isBuilding ? 5 : 1;
const unitSize = isBuilding ? 4 : 1;
const selectorSize = isBuilding ? 3 : 1;

/* TODO - debug path view
const path = props.unit.actionQueue.map(a => {
Expand All @@ -93,6 +94,16 @@ export function Unit3D(props: Unit3DProps) {
y: props.unit.velocity.y + softSnapVelocity.y * SMOOTHING_SCALE
}

// Bring the unit to the proper position before first paint
useLayoutEffect(() => {
if(!unitGroupRef.current)
return;

unitGroupRef.current.position.x = props.unit.position.x;
unitGroupRef.current.position.z = props.unit.position.y;
}, []);

// Softly interpolate the unit position when it's moving.
useFrame((s, dt) => {
if(!unitGroupRef.current)
return;
Expand Down Expand Up @@ -123,15 +134,15 @@ export function Unit3D(props: Unit3DProps) {
onContextMenu={ onClick }
onClick={ onClick }
>
<cylinderGeometry args={[unitSize, unitSize, 2, 12]} />
<cylinderGeometry args={[selectorSize, selectorSize, 2, 12]} />
<meshBasicMaterial
colorWrite={false}
depthWrite={false}
/>
</mesh>

{ props.selected &&
<SelectionCircle size={unitSize} enemy={props.enemy} />
<SelectionCircle size={selectorSize} enemy={props.enemy} />
}

<mesh
Expand Down

0 comments on commit 2426208

Please sign in to comment.