diff --git a/TODO.txt b/TODO.txt index 3899bc54e..a14938c1e 100644 --- a/TODO.txt +++ b/TODO.txt @@ -142,8 +142,11 @@ * add send boat radial button DONE 9/28/2024 * attack radial center button only on enemy DONE 9/28/2024 * radial center button "spawn" during spawn phase DONE 9/28/2024 +* better color scheme radial menu DONE 9/28/2024 * Make buttons icons -* better color scheme radial menu +* Spawn or attack button icon +* BUG: change username after selecting map +* make fake humans more difficult * test on mobile * make event box work on mobile * add request attack diff --git a/resources/images/AllianceIconBlack.png b/resources/images/AllianceIconBlack.png new file mode 100644 index 000000000..3191833e9 Binary files /dev/null and b/resources/images/AllianceIconBlack.png differ diff --git a/resources/images/AllianceIconWhite.png b/resources/images/AllianceIconWhite.png new file mode 100644 index 000000000..092acac38 Binary files /dev/null and b/resources/images/AllianceIconWhite.png differ diff --git a/resources/images/BoatIcon.png b/resources/images/BoatIcon.png new file mode 100644 index 000000000..3355aca8b Binary files /dev/null and b/resources/images/BoatIcon.png differ diff --git a/resources/images/BoatIconWhite.png b/resources/images/BoatIconWhite.png new file mode 100644 index 000000000..c0afcd9e8 Binary files /dev/null and b/resources/images/BoatIconWhite.png differ diff --git a/resources/images/SwordIcon.png b/resources/images/SwordIcon.png new file mode 100644 index 000000000..e4c9da10f Binary files /dev/null and b/resources/images/SwordIcon.png differ diff --git a/resources/images/SwordIconWhite.png b/resources/images/SwordIconWhite.png new file mode 100644 index 000000000..0f037c643 Binary files /dev/null and b/resources/images/SwordIconWhite.png differ diff --git a/resources/images/TraitorIconBlack.png b/resources/images/TraitorIconBlack.png new file mode 100644 index 000000000..b994b956f Binary files /dev/null and b/resources/images/TraitorIconBlack.png differ diff --git a/resources/images/TraitorIconWhite.png b/resources/images/TraitorIconWhite.png new file mode 100644 index 000000000..9f604b03a Binary files /dev/null and b/resources/images/TraitorIconWhite.png differ diff --git a/src/client/graphics/layers/RadialMenu.ts b/src/client/graphics/layers/RadialMenu.ts index e1bd9ea34..586209076 100644 --- a/src/client/graphics/layers/RadialMenu.ts +++ b/src/client/graphics/layers/RadialMenu.ts @@ -8,6 +8,11 @@ import {TransformHandler} from "../TransformHandler"; import {MessageType} from "./EventsDisplay"; import {Layer} from "./Layer"; import * as d3 from 'd3'; +import traitorIcon from '../../../../resources/images/TraitorIconWhite.png'; +import allianceIcon from '../../../../resources/images/AllianceIconWhite.png'; +import boatIcon from '../../../../resources/images/BoatIconWhite.png'; +import swordIcon from '../../../../resources/images/SwordIconWhite.png'; + enum RadialElement { RequestAlliance, @@ -22,12 +27,15 @@ export class RadialMenu implements Layer { private menuElement: d3.Selection; private isVisible: boolean = false; private readonly menuItems = new Map([ - [RadialElement.RequestAlliance, {name: "alliance", color: "#3498db", disabled: true, action: () => { }}], - [RadialElement.BoatAttack, {name: "boat", color: "#3498db", disabled: true, action: () => { }}], - [RadialElement.BreakAlliance, {name: "breakAlliance", color: "#3498db", disabled: true, action: () => { }}], + [RadialElement.RequestAlliance, {name: "alliance", color: "#53ac75", disabled: true, action: () => { }, icon: allianceIcon}], + [RadialElement.BoatAttack, {name: "boat", color: "#5373ac", disabled: true, action: () => { }, icon: boatIcon}], + [RadialElement.BreakAlliance, {name: "break", color: "#ac6753", disabled: true, action: () => { }, icon: traitorIcon}], ]); + private readonly menuSize = 190; private readonly centerButtonSize = 30; + private readonly iconSize = 32; + private readonly centerIconSize = 48; constructor( private eventBus: EventBus, @@ -108,15 +116,14 @@ export class RadialMenu implements Layer { this.hideRadialMenu(); } }); - - arcs.append('text') - .attr('transform', d => `translate(${arc.centroid(d)})`) - .attr('text-anchor', 'middle') - .attr('fill', d => d.data.disabled ? '#999999' : 'white') - .style('font-size', '14px') + arcs.append('image') + .attr('xlink:href', d => d.data.icon) + .attr('width', this.iconSize) + .attr('height', this.iconSize) + .attr('x', d => arc.centroid(d)[0] - this.iconSize / 2) + .attr('y', d => arc.centroid(d)[1] - this.iconSize / 2) .style('pointer-events', 'none') - .attr('data-name', d => d.data.name) - .text(d => d.data.name); + .attr('data-name', d => d.data.name); // Add glow filter const defs = svg.append('defs'); @@ -153,14 +160,15 @@ export class RadialMenu implements Layer { .attr('fill', '#2c3e50') .style('pointer-events', 'none'); - centerButton.append('text') - .attr('class', 'center-button-text') - .attr('text-anchor', 'middle') - .attr('dy', '0.3em') - .attr('fill', 'white') - .style('font-size', '16px') - .style('pointer-events', 'none') - .text('Attack'); + // Replace text with sword icon + centerButton.append('image') + .attr('class', 'center-button-icon') + .attr('xlink:href', swordIcon) + .attr('width', this.centerIconSize) + .attr('height', this.centerIconSize) + .attr('x', -this.centerIconSize / 2) + .attr('y', -this.centerIconSize / 2) + .style('pointer-events', 'none'); } tick() { diff --git a/src/core/configuration/DevConfig.ts b/src/core/configuration/DevConfig.ts index 1e0458b4b..4d1daf00c 100644 --- a/src/core/configuration/DevConfig.ts +++ b/src/core/configuration/DevConfig.ts @@ -7,7 +7,7 @@ export const devConfig = new class extends DefaultConfig { return 95 } numSpawnPhaseTurns(): number { - return 80 + return 40 } gameCreationRate(): number { return 2 * 1000