nico/Wackelpeter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add aura, boomerang, trap and gas cloud skills with hotbar and ESC pause

Browse Source
This commit is contained in:
nico
2026-08-19 09:46:22 +02:00
parent fd57ca9740
commit 64d473de6d
10 changed files with 843 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/SkillIcons.ts
+88
View File
@@ -203,6 +203,94 @@ const ICONS: Record<string, string> = {
<rect x="20.5" y="5" width="16" height="6.5" rx="2.5" fill="#ffcf5e" stroke="#6e4a12" stroke-width="2"/>
<path d="M27 48 h24" stroke="#6e4a12" stroke-width="2" opacity="0.6"/>
</svg>`,
aura: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<linearGradient id="auRing" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#7fe3ff"/>
<stop offset="100%" stop-color="#3a7bd6"/>
</linearGradient>
<radialGradient id="auGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#7fe3ff" stop-opacity="0.35"/>
<stop offset="70%" stop-color="#3a7bd6" stop-opacity="0.12"/>
<stop offset="100%" stop-color="#3a7bd6" stop-opacity="0"/>
</radialGradient>
</defs>
<circle cx="32" cy="32" r="28" fill="url(#auGlow)"/>
<circle cx="32" cy="32" r="24" fill="none" stroke="url(#auRing)" stroke-width="3.5"/>
<circle cx="32" cy="32" r="16" fill="none" stroke="#7fe3ff" stroke-width="1.8" stroke-dasharray="5 6" opacity="0.8"/>
<circle cx="32" cy="32" r="8" fill="none" stroke="#a8ecff" stroke-width="1.5" opacity="0.7"/>
<path d="M54 12 l1.8 3.4 3.4 1.8 -3.4 1.8 -1.8 3.4 -1.8 -3.4 -3.4 -1.8 3.4 -1.8 Z" fill="#a8ecff"/>
<path d="M10 46 l1.4 2.6 2.6 1.4 -2.6 1.4 -1.4 2.6 -1.4 -2.6 -2.6 -1.4 2.6 -1.4 Z" fill="#7fe3ff" opacity="0.9"/>
</svg>`,
boomerang: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<linearGradient id="bmWood" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e8a94e"/>
<stop offset="55%" stop-color="#b26b25"/>
<stop offset="100%" stop-color="#7c4715"/>
</linearGradient>
</defs>
<circle cx="32" cy="32" r="26" fill="#e8a94e" opacity="0.1"/>
<circle cx="32" cy="32" r="24" fill="none" stroke="#e8a94e" stroke-width="1.5" stroke-dasharray="2 6" stroke-linecap="round" opacity="0.6"/>
<path d="M44 13 C51 21 51 30 45 36 C39.5 41.5 31 40 27 34 L25 36.5 C28.5 45 40 47.5 47 42.5 C55 37 56 23.5 50 15.5 L44 13 Z"
fill="url(#bmWood)" stroke="#4a2a0c" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M45 16 C50 22.5 50 29 45 34 C41 38 34.5 37 31 32.5" fill="none" stroke="#ffd98a" stroke-width="1.6" opacity="0.75"/>
<path d="M20 44 l1.8 3.2 3.2 1.8 -3.2 1.8 -1.8 3.2 -1.8 -3.2 -3.2 -1.8 3.2 -1.8 Z" fill="#ffd98a"/>
</svg>`,
trap: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<linearGradient id="trJaw" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#c9d4e0"/>
<stop offset="60%" stop-color="#7e93a8"/>
<stop offset="100%" stop-color="#4a5a6c"/>
</linearGradient>
</defs>
<circle cx="32" cy="34" r="25" fill="#7e93a8" opacity="0.1"/>
<path d="M10 24 A22 22 0 0 1 54 24 L54 30 L10 30 Z" fill="url(#trJaw)" stroke="#2a3440" stroke-width="2" stroke-linejoin="round"/>
<path d="M10 26 A22 22 0 0 1 54 26 L54 24 L10 24 Z" fill="#eef4fa" opacity="0.6"/>
<g fill="#eef4fa" stroke="#2a3440" stroke-width="1.4">
<path d="M13 30 l2.4 7 -4.8 0 Z"/>
<path d="M23 30 l2.4 8 -4.8 0 Z"/>
<path d="M33 30 l2.4 8 -4.8 0 Z"/>
<path d="M43 30 l2.4 8 -4.8 0 Z"/>
<path d="M53 30 l2.4 7 -4.8 0 Z"/>
</g>
<path d="M20 40 h24" stroke="#2a3440" stroke-width="2" opacity="0.7"/>
<path d="M15 12 l1.6 3 3 1.6 -3 1.6 -1.6 3 -1.6 -3 -3 -1.6 3 -1.6 Z" fill="#ffcc00"/>
<circle cx="50" cy="13" r="1.6" fill="#eef4fa"/>
</svg>`,
gascloud: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<radialGradient id="gcPuff" cx="40%" cy="35%" r="75%">
<stop offset="0%" stop-color="#b8f28a"/>
<stop offset="55%" stop-color="#5cae3a"/>
<stop offset="100%" stop-color="#2f6b1c"/>
</radialGradient>
</defs>
<circle cx="32" cy="38" r="25" fill="#5cae3a" opacity="0.12"/>
<g fill="url(#gcPuff)" stroke="#1c3d10" stroke-width="2" stroke-linejoin="round">
<circle cx="24" cy="40" r="11"/>
<circle cx="40" cy="36" r="13"/>
<circle cx="32" cy="28" r="10"/>
<circle cx="44" cy="47" r="7"/>
<circle cx="18" cy="46" r="6"/>
</g>
<g fill="#c9f7a0" opacity="0.55">
<circle cx="21" cy="37" r="3.4"/>
<circle cx="37" cy="33" r="3.8"/>
<circle cx="30" cy="25" r="3"/>
</g>
<circle cx="50" cy="14" r="1.6" fill="#c9f7a0"/>
<circle cx="12" cy="20" r="1.4" fill="#b8f28a"/>
</svg>`,
};
export function skillIcon(id: string): string {