Wickedness/heros_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace battle maps 41 and 42 with hand-painted assets

Browse Source
This commit is contained in:
Wickedness
2026-07-09 19:54:44 +09:00
parent 03cf3a4f8b
commit 5e5f54c19c
11 changed files with 34 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/assets/images/battle/forty-first-battle-map.svg
View File

@@ -1,110 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8200 6400" width="8200" height="6400">
<defs>
<linearGradient id="plain" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#756f4a"/>
<stop offset="0.48" stop-color="#b69c5a"/>
<stop offset="1" stop-color="#565738"/>
</linearGradient>
<linearGradient id="water" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#142d4f"/>
<stop offset="0.46" stop-color="#609ab0"/>
<stop offset="1" stop-color="#102840"/>
</linearGradient>
<linearGradient id="road" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#59432a"/>
<stop offset="0.5" stop-color="#c3a064"/>
<stop offset="1" stop-color="#6d4e2f"/>
</linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#8b8375"/>
<stop offset="0.48" stop-color="#5f594e"/>
<stop offset="1" stop-color="#39352f"/>
</linearGradient>
<linearGradient id="ridge" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#6b6844"/>
<stop offset="0.5" stop-color="#9a8e56"/>
<stop offset="1" stop-color="#3f3c28"/>
</linearGradient>
<pattern id="grain" width="120" height="120" patternUnits="userSpaceOnUse">
<path d="M14 28h28M58 20h24M96 36h16M24 76h36M80 88h26M18 110h24M66 108h24" stroke="#342f20" stroke-width="8" stroke-linecap="round" opacity="0.18"/>
<circle cx="100" cy="94" r="8" fill="#e0c777" opacity="0.18"/>
<circle cx="34" cy="42" r="6" fill="#5d5738" opacity="0.2"/>
</pattern>
<pattern id="forest" width="180" height="160" patternUnits="userSpaceOnUse">
<circle cx="34" cy="54" r="35" fill="#263b1a"/>
<circle cx="76" cy="38" r="32" fill="#506b30"/>
<circle cx="116" cy="72" r="39" fill="#1f3218"/>
<circle cx="144" cy="48" r="26" fill="#6d8340"/>
<path d="M34 88c34 18 76 16 110-4" stroke="#141c11" stroke-width="10" opacity="0.36"/>
</pattern>
<pattern id="stone" width="140" height="120" patternUnits="userSpaceOnUse">
<rect width="140" height="120" fill="#6f675c"/>
<path d="M0 40h140M0 82h140M30 0v40M94 40v42M48 82v38M118 82v38" stroke="#2f2a24" stroke-width="8" opacity="0.48"/>
<path d="M12 20h28M76 62h34M20 102h24" stroke="#b7a579" stroke-width="8" opacity="0.34"/>
</pattern>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="14" stdDeviation="18" flood-color="#17130b" flood-opacity="0.42"/>
</filter>
</defs>
<rect width="8200" height="6400" fill="url(#plain)"/>
<rect width="8200" height="6400" fill="url(#grain)" opacity="0.82"/>
<path d="M2020 -160 C1740 800 2220 1680 1980 2640 C1780 3440 2160 4400 1980 5680" fill="none" stroke="#112b4d" stroke-width="470" stroke-linecap="round"/>
<path d="M2020 -160 C1740 800 2220 1680 1980 2640 C1780 3440 2160 4400 1980 5680" fill="none" stroke="url(#water)" stroke-width="360" stroke-linecap="round"/>
<path d="M3580 1120 C3400 2100 3740 2960 3560 3900 C3400 4700 3740 5480 3600 6240" fill="none" stroke="#112b4d" stroke-width="360" stroke-linecap="round"/>
<path d="M3580 1120 C3400 2100 3740 2960 3560 3900 C3400 4700 3740 5480 3600 6240" fill="none" stroke="url(#water)" stroke-width="268" stroke-linecap="round"/>
<path d="M5240 480 C5060 1300 5380 2240 5200 3260 C5040 4080 5400 4560 5220 5100" fill="none" stroke="#112b4d" stroke-width="340" stroke-linecap="round"/>
<path d="M5240 480 C5060 1300 5380 2240 5200 3260 C5040 4080 5400 4560 5220 5100" fill="none" stroke="url(#water)" stroke-width="252" stroke-linecap="round"/>
<path d="M2220 3220 C3540 3100 4900 3240 6660 3360" fill="none" stroke="#112b4d" stroke-width="310" stroke-linecap="round"/>
<path d="M2220 3220 C3540 3100 4900 3240 6660 3360" fill="none" stroke="url(#water)" stroke-width="224" stroke-linecap="round"/>
<path d="M7040 1640 C6820 2360 7180 3380 7040 4480" fill="none" stroke="#112b4d" stroke-width="260" stroke-linecap="round"/>
<path d="M7040 1640 C6820 2360 7180 3380 7040 4480" fill="none" stroke="url(#water)" stroke-width="186" stroke-linecap="round"/>
<path d="M-160 0 L1940 0 L1780 2920 L840 2660 L180 1740 Z" fill="url(#ridge)" filter="url(#shadow)" opacity="0.82"/>
<path d="M2920 80 L6780 80 L6500 2140 L4680 1940 L3740 1340 L2820 1720 Z" fill="url(#ridge)" filter="url(#shadow)" opacity="0.78"/>
<path d="M7000 -60 L8260 -60 L8220 1660 L7000 1580 Z" fill="url(#ridge)" filter="url(#shadow)" opacity="0.88"/>
<path d="M3320 5600 L5440 5480 L5520 6460 L3140 6460 Z" fill="url(#ridge)" filter="url(#shadow)" opacity="0.78"/>
<path d="M360 1160 C1140 880 2060 1060 3040 1200 L3000 4620 C1900 4620 960 4300 300 4660 Z" fill="url(#forest)" opacity="0.86"/>
<path d="M3060 2020 C3660 1740 4340 1980 4740 2580 L4660 5060 C3880 5100 3180 4620 2960 4000 Z" fill="url(#forest)" opacity="0.8"/>
<path d="M5280 4860 C6080 4560 6960 4660 8200 4380 L8200 6240 C6920 6240 5840 6360 5200 6120 Z" fill="url(#forest)" opacity="0.88"/>
<path d="M620 6060 C1700 5800 3000 5700 4380 5160 C5520 4720 6500 4180 7380 3480 C7700 3220 7920 2840 8260 2320" fill="none" stroke="#543f26" stroke-width="320" stroke-linecap="round" stroke-linejoin="round" opacity="0.94"/>
<path d="M620 6060 C1700 5800 3000 5700 4380 5160 C5520 4720 6500 4180 7380 3480 C7700 3220 7920 2840 8260 2320" fill="none" stroke="url(#road)" stroke-width="196" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2240 2860 C3540 2760 5020 2880 7560 3040" fill="none" stroke="#543f26" stroke-width="250" stroke-linecap="round" opacity="0.9"/>
<path d="M2240 2860 C3540 2760 5020 2880 7560 3040" fill="none" stroke="url(#road)" stroke-width="142" stroke-linecap="round"/>
<path d="M3740 3840 C4520 3760 5220 3800 5740 3940" fill="none" stroke="#543f26" stroke-width="210" stroke-linecap="round" opacity="0.86"/>
<path d="M3740 3840 C4520 3760 5220 3800 5740 3940" fill="none" stroke="url(#road)" stroke-width="118" stroke-linecap="round"/>
<rect x="5940" y="520" width="2180" height="2020" rx="28" fill="url(#stone)" filter="url(#shadow)"/>
<rect x="5380" y="1160" width="1540" height="1500" rx="26" fill="url(#stone)" opacity="0.84"/>
<rect x="6860" y="2320" width="1320" height="1980" rx="26" fill="url(#stone)" opacity="0.8"/>
<rect x="7480" y="760" width="640" height="1040" fill="url(#wall)" opacity="0.96"/>
<path d="M6080 680 h1820 v320 h-1820zM6120 1180 h1740M6120 1640 h1740M6120 2100 h1740" stroke="#2d2821" stroke-width="36" fill="none" opacity="0.54"/>
<path d="M7020 3540 L7560 3320 L8020 3600 L7940 4420 L7380 4640 L6920 4200 Z" fill="#7b6748" stroke="#2f2a21" stroke-width="38" opacity="0.94"/>
<path d="M5600 2840 C6200 2600 7060 2600 7900 2840" fill="none" stroke="#2d2821" stroke-width="100" stroke-linecap="round" opacity="0.72"/>
<path d="M5600 2840 C6200 2600 7060 2600 7900 2840" fill="none" stroke="#b8a37a" stroke-width="48" stroke-linecap="round" opacity="0.8"/>
<g filter="url(#shadow)">
<rect x="2240" y="5460" width="500" height="380" fill="#92703c" stroke="#2c2219" stroke-width="28"/>
<path d="M2200 5460 L2490 5140 L2780 5460 Z" fill="#bf8734" stroke="#2c2219" stroke-width="28"/>
<rect x="4560" y="4820" width="580" height="420" fill="#887944" stroke="#2c2219" stroke-width="26"/>
<path d="M4520 4820 L4850 4500 L5180 4820 Z" fill="#b98632" stroke="#2c2219" stroke-width="26"/>
<rect x="5880" y="4140" width="510" height="390" fill="#a2763b" stroke="#2c2219" stroke-width="24"/>
<path d="M5840 4140 L6135 3860 L6430 4140 Z" fill="#c08c37" stroke="#2c2219" stroke-width="24"/>
<rect x="7240" y="4560" width="470" height="370" fill="#8d6b36" stroke="#2c2219" stroke-width="24"/>
<path d="M7200 4560 L7475 4280 L7750 4560 Z" fill="#ba8432" stroke="#2c2219" stroke-width="24"/>
<rect x="6780" y="1540" width="220" height="620" fill="#56391f" stroke="#21170e" stroke-width="20"/>
<path d="M6620 1540 L6890 1180 L7160 1540 Z" fill="#d99a34" stroke="#21170e" stroke-width="20"/>
<circle cx="6890" cy="1140" r="92" fill="#e3672a" opacity="0.88"/>
</g>
<g opacity="0.34" stroke="#182e42" stroke-width="18" stroke-linecap="round">
<path d="M2320 3440 c900 160 2040 120 3440 280"/>
<path d="M2040 1360 c520 220 980 180 1500 30"/>
<path d="M5320 1320 c320 220 660 220 1020 80"/>
<path d="M6180 5520 c560-160 1120-100 1640 130"/>
<path d="M6880 2520 c260 130 540 150 820 40"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
src/assets/images/battle/forty-first-battle-map.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 MiB

108
src/assets/images/battle/forty-second-battle-map.svg
View File

@@ -1,108 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8400 6600" width="8400" height="6600">
<defs>
<linearGradient id="plain" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#6f7148"/>
<stop offset="0.5" stop-color="#baa365"/>
<stop offset="1" stop-color="#4d5235"/>
</linearGradient>
<linearGradient id="water" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#122b4a"/>
<stop offset="0.5" stop-color="#6baac0"/>
<stop offset="1" stop-color="#0d2439"/>
</linearGradient>
<linearGradient id="road" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#5a4227"/>
<stop offset="0.52" stop-color="#c5a669"/>
<stop offset="1" stop-color="#6a4b2f"/>
</linearGradient>
<linearGradient id="warehouse" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#a68452"/>
<stop offset="1" stop-color="#5c4630"/>
</linearGradient>
<linearGradient id="ridge" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#686845"/>
<stop offset="0.55" stop-color="#9a8e56"/>
<stop offset="1" stop-color="#3a3c26"/>
</linearGradient>
<pattern id="grain" width="120" height="120" patternUnits="userSpaceOnUse">
<path d="M14 28h28M58 20h24M96 36h16M24 76h36M80 88h26M18 110h24M66 108h24" stroke="#312e1f" stroke-width="8" stroke-linecap="round" opacity="0.18"/>
<circle cx="102" cy="92" r="8" fill="#dbc16f" opacity="0.18"/>
<circle cx="34" cy="42" r="6" fill="#5c5636" opacity="0.2"/>
</pattern>
<pattern id="forest" width="180" height="160" patternUnits="userSpaceOnUse">
<circle cx="34" cy="54" r="35" fill="#233818"/>
<circle cx="76" cy="38" r="32" fill="#516b30"/>
<circle cx="116" cy="72" r="39" fill="#1c3016"/>
<circle cx="144" cy="48" r="26" fill="#6d8440"/>
<path d="M34 88c34 18 76 16 110-4" stroke="#121b10" stroke-width="10" opacity="0.36"/>
</pattern>
<pattern id="stone" width="140" height="120" patternUnits="userSpaceOnUse">
<rect width="140" height="120" fill="#6d6559"/>
<path d="M0 40h140M0 82h140M30 0v40M94 40v42M48 82v38M118 82v38" stroke="#2c2821" stroke-width="8" opacity="0.46"/>
<path d="M12 20h28M76 62h34M20 102h24" stroke="#b6a274" stroke-width="8" opacity="0.34"/>
</pattern>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="14" stdDeviation="18" flood-color="#17130b" flood-opacity="0.42"/>
</filter>
</defs>
<rect width="8400" height="6600" fill="url(#plain)"/>
<rect width="8400" height="6600" fill="url(#grain)" opacity="0.82"/>
<path d="M1920 -120 C1600 840 2180 1800 1880 2780 C1660 3600 2140 4580 1900 5900" fill="none" stroke="#0f2948" stroke-width="520" stroke-linecap="round"/>
<path d="M1920 -120 C1600 840 2180 1800 1880 2780 C1660 3600 2140 4580 1900 5900" fill="none" stroke="url(#water)" stroke-width="392" stroke-linecap="round"/>
<path d="M3760 920 C3500 2120 3960 3180 3700 4180 C3500 5000 3880 5760 3740 6680" fill="none" stroke="#0f2948" stroke-width="410" stroke-linecap="round"/>
<path d="M3760 920 C3500 2120 3960 3180 3700 4180 C3500 5000 3880 5760 3740 6680" fill="none" stroke="url(#water)" stroke-width="300" stroke-linecap="round"/>
<path d="M5600 360 C5360 1260 5740 2360 5540 3560 C5360 4480 5760 5000 5580 5480" fill="none" stroke="#0f2948" stroke-width="360" stroke-linecap="round"/>
<path d="M5600 360 C5360 1260 5740 2360 5540 3560 C5360 4480 5760 5000 5580 5480" fill="none" stroke="url(#water)" stroke-width="260" stroke-linecap="round"/>
<path d="M2240 3620 C3660 3420 5100 3580 7240 3680" fill="none" stroke="#0f2948" stroke-width="330" stroke-linecap="round"/>
<path d="M2240 3620 C3660 3420 5100 3580 7240 3680" fill="none" stroke="url(#water)" stroke-width="238" stroke-linecap="round"/>
<path d="M7200 1900 C6940 2680 7360 3600 7180 4740" fill="none" stroke="#0f2948" stroke-width="290" stroke-linecap="round"/>
<path d="M7200 1900 C6940 2680 7360 3600 7180 4740" fill="none" stroke="url(#water)" stroke-width="198" stroke-linecap="round"/>
<path d="M-160 0 L1760 0 L1640 3100 L720 2820 L120 1820 Z" fill="url(#ridge)" filter="url(#shadow)" opacity="0.82"/>
<path d="M2920 120 L7040 20 L6740 2300 L4840 2060 L3800 1360 L2780 1760 Z" fill="url(#ridge)" filter="url(#shadow)" opacity="0.76"/>
<path d="M7240 -80 L8460 -80 L8420 1500 L7240 1420 Z" fill="url(#ridge)" filter="url(#shadow)" opacity="0.86"/>
<path d="M3300 5900 L5600 5740 L5680 6660 L3120 6660 Z" fill="url(#ridge)" filter="url(#shadow)" opacity="0.78"/>
<path d="M320 1280 C1160 920 2140 1160 3180 1340 L3120 4860 C1900 4860 920 4480 260 4880 Z" fill="url(#forest)" opacity="0.86"/>
<path d="M3080 2160 C3740 1840 4480 2080 4960 2780 L4880 5360 C3980 5380 3220 4860 2940 4180 Z" fill="url(#forest)" opacity="0.82"/>
<path d="M5320 5020 C6200 4700 7180 4840 8400 4540 L8400 6400 C7000 6440 5900 6540 5220 6300 Z" fill="url(#forest)" opacity="0.88"/>
<path d="M720 6160 C1780 5900 3120 5840 4560 5360 C5740 4960 6720 4440 7600 3760 C7940 3480 8120 3060 8480 2540" fill="none" stroke="#523d24" stroke-width="330" stroke-linecap="round" stroke-linejoin="round" opacity="0.94"/>
<path d="M720 6160 C1780 5900 3120 5840 4560 5360 C5740 4960 6720 4440 7600 3760 C7940 3480 8120 3060 8480 2540" fill="none" stroke="url(#road)" stroke-width="198" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2260 3000 C3800 2820 5360 2980 7600 3140" fill="none" stroke="#523d24" stroke-width="250" stroke-linecap="round" opacity="0.9"/>
<path d="M2260 3000 C3800 2820 5360 2980 7600 3140" fill="none" stroke="url(#road)" stroke-width="140" stroke-linecap="round"/>
<rect x="5740" y="4040" width="1220" height="980" rx="30" fill="url(#stone)" filter="url(#shadow)"/>
<rect x="6440" y="2840" width="1360" height="1080" rx="28" fill="url(#stone)" filter="url(#shadow)" opacity="0.88"/>
<rect x="7320" y="1420" width="980" height="1440" rx="26" fill="url(#stone)" filter="url(#shadow)" opacity="0.9"/>
<path d="M5740 5160 h980 v300 h-980zM6040 4040 v1420M6440 2840 v1120M7320 1420 v1500" stroke="#2c2720" stroke-width="34" fill="none" opacity="0.46"/>
<g filter="url(#shadow)">
<rect x="2120" y="5660" width="520" height="400" fill="#91703e" stroke="#2c2219" stroke-width="28"/>
<path d="M2080 5660 L2380 5320 L2680 5660 Z" fill="#c08a35" stroke="#2c2219" stroke-width="28"/>
<rect x="4420" y="5020" width="620" height="440" fill="url(#warehouse)" stroke="#2c2219" stroke-width="26"/>
<path d="M4380 5020 L4730 4680 L5080 5020 Z" fill="#b78232" stroke="#2c2219" stroke-width="26"/>
<rect x="5860" y="4340" width="560" height="420" fill="url(#warehouse)" stroke="#2c2219" stroke-width="24"/>
<path d="M5820 4340 L6140 4040 L6460 4340 Z" fill="#c18c36" stroke="#2c2219" stroke-width="24"/>
<rect x="7220" y="3600" width="510" height="390" fill="#8d6b36" stroke="#2c2219" stroke-width="24"/>
<path d="M7180 3600 L7475 3300 L7770 3600 Z" fill="#ba8432" stroke="#2c2219" stroke-width="24"/>
</g>
<g opacity="0.9" filter="url(#shadow)">
<path d="M2840 5520 h520 l180 170 -180 170 h-520 l-180-170z" fill="#5f6b6d" stroke="#1f2528" stroke-width="26"/>
<path d="M3380 5550 l360-160 80 60 -300 240z" fill="#c6d2d6" stroke="#1f2528" stroke-width="18"/>
<path d="M5100 4740 h460 l160 150 -160 150 h-460 l-160-150z" fill="#526266" stroke="#1f2528" stroke-width="24"/>
<path d="M5570 4770 l310-140 72 54 -260 210z" fill="#c6d2d6" stroke="#1f2528" stroke-width="16"/>
<path d="M6900 3160 h430 l150 140 -150 140 h-430 l-150-140z" fill="#56676a" stroke="#1f2528" stroke-width="24"/>
</g>
<g opacity="0.34" stroke="#182e42" stroke-width="18" stroke-linecap="round">
<path d="M2340 3820 c960 150 2100 100 3700 280"/>
<path d="M2020 1460 c540 220 1040 180 1580 30"/>
<path d="M5580 1320 c340 220 700 220 1100 80"/>
<path d="M6120 5680 c600-160 1220-100 1800 140"/>
<path d="M7060 2480 c280 120 600 120 920 20"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 7.9 KiB

BIN
src/assets/images/battle/forty-second-battle-map.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

4
src/game/data/battleMapAssets.ts
View File

@@ -24,10 +24,10 @@ import firstBattleMapUrl from '../../assets/images/battle/first-battle-map.webp'
import fortiethBattleMapUrl from '../../assets/images/battle/fortieth-battle-map.webp';
import fortyEighthBattleMapUrl from '../../assets/images/battle/forty-eighth-battle-map.svg';
import fortyFifthBattleMapUrl from '../../assets/images/battle/forty-fifth-battle-map.svg';
import fortyFirstBattleMapUrl from '../../assets/images/battle/forty-first-battle-map.svg';
import fortyFirstBattleMapUrl from '../../assets/images/battle/forty-first-battle-map.webp';
import fortyFourthBattleMapUrl from '../../assets/images/battle/forty-fourth-battle-map.svg';
import fortyNinthBattleMapUrl from '../../assets/images/battle/forty-ninth-battle-map.svg';
import fortySecondBattleMapUrl from '../../assets/images/battle/forty-second-battle-map.svg';
import fortySecondBattleMapUrl from '../../assets/images/battle/forty-second-battle-map.webp';
import fortySeventhBattleMapUrl from '../../assets/images/battle/forty-seventh-battle-map.svg';
import fortySixthBattleMapUrl from '../../assets/images/battle/forty-sixth-battle-map.svg';
import fortyThirdBattleMapUrl from '../../assets/images/battle/forty-third-battle-map.svg';