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

Expand handpainted maps to battles four and five

Browse Source
This commit is contained in:
Wickedness
2026-07-04 11:18:24 +09:00
parent fe7d1167a7
commit 6281776c94
17 changed files with 29 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/assets/images/battle/fifth-battle-map.svg
View File

@@ -1,87 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 2000" width="2400" height="2000">
<defs>
<filter id="grain">
<feTurbulence type="fractalNoise" baseFrequency="0.017" numOctaves="4" seed="85" />
<feColorMatrix type="saturate" values="0.55" />
<feBlend mode="multiply" in2="SourceGraphic" />
</filter>
<pattern id="grass" width="72" height="72" patternUnits="userSpaceOnUse">
<rect width="72" height="72" fill="#61784c" />
<path d="M10 20h20M41 48h18M20 62l14-10M52 17l12 9" stroke="#a3b46b" stroke-width="3" opacity="0.26" />
<path d="M8 52l11-18M35 24l10-14M58 66l7-20" stroke="#334e30" stroke-width="2" opacity="0.34" />
</pattern>
<pattern id="earth" width="82" height="82" patternUnits="userSpaceOnUse">
<rect width="82" height="82" fill="#94704a" />
<path d="M4 18c28-14 50 9 76-5M0 55c30-16 56 12 80-4" stroke="#c69a5f" stroke-width="6" opacity="0.25" />
<path d="M18 70l13-18M48 34l18-13M64 68l10-7" stroke="#57452f" stroke-width="3" opacity="0.32" />
</pattern>
<pattern id="forest" width="104" height="92" patternUnits="userSpaceOnUse">
<rect width="104" height="92" fill="#30472d" />
<circle cx="20" cy="32" r="25" fill="#223923" />
<circle cx="50" cy="24" r="29" fill="#526f3e" />
<circle cx="78" cy="40" r="26" fill="#2b4329" />
<circle cx="44" cy="68" r="23" fill="#668548" />
<path d="M12 50c24 15 58 14 84-5M32 22c18 16 44 14 60-5" stroke="#142516" stroke-width="5" opacity="0.36" />
</pattern>
<linearGradient id="river" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#467f9a" />
<stop offset="0.54" stop-color="#23536f" />
<stop offset="1" stop-color="#193b52" />
</linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#80705a" />
<stop offset="1" stop-color="#44372a" />
</linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#c88b38" />
<stop offset="1" stop-color="#7a4f1f" />
</linearGradient>
</defs>
<rect width="2400" height="2000" fill="url(#grass)" />
<g filter="url(#grain)">
<path d="M-120 1710C230 1438 416 1288 640 1072C826 892 990 760 1164 646C1374 508 1568 380 1870 300C2060 250 2246 150 2520-30" fill="none" stroke="#a98555" stroke-width="250" stroke-linecap="round" opacity="0.98" />
<path d="M-120 1710C230 1438 416 1288 640 1072C826 892 990 760 1164 646C1374 508 1568 380 1870 300C2060 250 2246 150 2520-30" fill="none" stroke="url(#earth)" stroke-width="170" stroke-linecap="round" opacity="0.92" />
<path d="M-70 1040C212 945 444 920 666 782C880 650 1036 506 1280 454C1508 405 1668 312 1788 128" fill="none" stroke="#a17a4c" stroke-width="184" stroke-linecap="round" opacity="0.9" />
<path d="M-70 1040C212 945 444 920 666 782C880 650 1036 506 1280 454C1508 405 1668 312 1788 128" fill="none" stroke="url(#earth)" stroke-width="116" stroke-linecap="round" opacity="0.86" />
<path d="M1286 430c-62 224 24 368 168 514c146 146 192 292 136 486c-44 152-18 302 112 458" fill="none" stroke="#173b52" stroke-width="252" stroke-linecap="round" opacity="0.96" />
<path d="M1286 430c-62 224 24 368 168 514c146 146 192 292 136 486c-44 152-18 302 112 458" fill="none" stroke="url(#river)" stroke-width="170" stroke-linecap="round" opacity="0.98" />
<path d="M1325 546c62 86 70 176 26 272M1480 1048c88 100 105 220 52 360M1642 1630c48 84 64 166 46 250" fill="none" stroke="#a9dbe4" stroke-width="13" opacity="0.34" />
<path d="M-40 70c228-80 454-52 674 80c42 142-24 266-198 372c-192-16-356-80-492-194Z" fill="url(#forest)" opacity="0.9" />
<path d="M562 238c238-104 466-78 684 84c16 142-72 248-264 316c-232-18-372-132-420-400Z" fill="url(#forest)" opacity="0.82" />
<path d="M40 618c300-118 568-70 806 146c-80 222-324 342-730 360C-10 980-34 812 40 618Z" fill="url(#forest)" opacity="0.86" />
<path d="M1762 470c252-92 454-60 650 94v392c-240 78-468 20-684-172c-36-122-24-226 34-314Z" fill="url(#forest)" opacity="0.84" />
<path d="M640 1538c320-126 602-82 846 118c-54 220-284 336-690 344c-158-106-210-250-156-462Z" fill="url(#forest)" opacity="0.84" />
<g transform="translate(1338 58)">
<rect x="-34" y="-12" width="560" height="324" rx="18" fill="#2f281e" opacity="0.6" />
<rect x="0" y="0" width="492" height="278" rx="16" fill="url(#wall)" />
<rect x="40" y="50" width="412" height="184" fill="#756044" stroke="#251d15" stroke-width="12" />
<path d="M40 50h412M40 234h412M40 50v184M452 50v184" stroke="#35291e" stroke-width="10" />
<rect x="76" y="100" width="82" height="96" fill="#98724a" />
<rect x="204" y="72" width="100" height="124" fill="#9d7650" />
<rect x="346" y="98" width="68" height="98" fill="#8c6946" />
<path d="M58 100l60-48l62 48M190 72l64-52l76 52M330 98l50-42l58 42" fill="url(#roof)" stroke="#302316" stroke-width="9" />
<path d="M229 196v-66h50v66" fill="#1f1712" />
<path d="M18 278h456" stroke="#c0a369" stroke-width="8" opacity="0.42" />
</g>
<g transform="translate(1760 520)">
<rect x="0" y="0" width="220" height="158" rx="12" fill="#5f4b36" />
<rect x="34" y="46" width="66" height="82" fill="#98714d" />
<rect x="124" y="36" width="70" height="92" fill="#96704a" />
<path d="M18 46l50-40l54 40M112 36l48-38l58 38" fill="url(#roof)" stroke="#322317" stroke-width="9" />
</g>
<g transform="translate(80 1418)">
<path d="M0 88c84-70 182-92 294-66c80 74 92 162 36 264c-116 24-222 0-318-74c-34-48-38-90-12-124Z" fill="#4d5d5f" opacity="0.48" />
<rect x="74" y="104" width="178" height="136" rx="10" fill="#604b36" />
<rect x="112" y="148" width="52" height="70" fill="#98724a" />
<rect x="184" y="136" width="44" height="82" fill="#96704a" />
<path d="M92 148l46-36l48 36M174 136l34-28l42 28" fill="url(#roof)" stroke="#2f2218" stroke-width="8" />
</g>
</g>
<rect width="2400" height="2000" fill="#0b0d12" opacity="0.07" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 634 KiB

79
src/assets/images/battle/fourth-battle-map.svg
View File

@@ -1,79 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 2000" width="2400" height="2000">
<defs>
<filter id="grain">
<feTurbulence type="fractalNoise" baseFrequency="0.018" numOctaves="4" seed="64" />
<feColorMatrix type="saturate" values="0.45" />
<feBlend mode="multiply" in2="SourceGraphic" />
</filter>
<pattern id="field" width="66" height="66" patternUnits="userSpaceOnUse">
<rect width="66" height="66" fill="#66784d" />
<path d="M9 20h20M37 44h22M45 14l13 8M17 54l16-11" stroke="#aab36b" stroke-width="3" opacity="0.25" />
<path d="M5 42l13-17M30 13l8-11M53 60l8-19" stroke="#344b31" stroke-width="2" opacity="0.29" />
</pattern>
<pattern id="earth" width="74" height="74" patternUnits="userSpaceOnUse">
<rect width="74" height="74" fill="#967045" />
<path d="M5 18c23-12 44 8 64-3M0 51c25-14 50 12 70-2" stroke="#c89a5a" stroke-width="5" opacity="0.26" />
<path d="M18 64l9-15M43 30l16-10M60 60l8-5" stroke="#5c472e" stroke-width="3" opacity="0.34" />
</pattern>
<pattern id="forest" width="98" height="84" patternUnits="userSpaceOnUse">
<rect width="98" height="84" fill="#31462c" />
<circle cx="23" cy="28" r="23" fill="#263a24" />
<circle cx="50" cy="24" r="26" fill="#4d6a3b" />
<circle cx="74" cy="35" r="23" fill="#2a4027" />
<circle cx="42" cy="59" r="22" fill="#5d7b43" />
<path d="M14 46c22 13 53 12 74-5M30 22c15 14 38 13 53-4" stroke="#142516" stroke-width="5" opacity="0.36" />
</pattern>
<linearGradient id="river" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#397590" />
<stop offset="0.56" stop-color="#24516d" />
<stop offset="1" stop-color="#17394f" />
</linearGradient>
<linearGradient id="fortWall" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#75624c" />
<stop offset="1" stop-color="#433629" />
</linearGradient>
</defs>
<rect width="2400" height="2000" fill="url(#field)" />
<g filter="url(#grain)">
<path d="M-130 1080C210 964 435 982 690 850C910 736 980 580 1190 498C1422 408 1648 456 1880 322C2056 220 2218 72 2520-20" fill="none" stroke="#a27a48" stroke-width="238" stroke-linecap="round" opacity="0.96" />
<path d="M-130 1080C210 964 435 982 690 850C910 736 980 580 1190 498C1422 408 1648 456 1880 322C2056 220 2218 72 2520-20" fill="none" stroke="url(#earth)" stroke-width="168" stroke-linecap="round" opacity="0.93" />
<path d="M-80 1680C160 1470 458 1328 744 1210C1010 1102 1214 1020 1378 820C1526 638 1670 512 2020 460" fill="none" stroke="#997044" stroke-width="196" stroke-linecap="round" opacity="0.92" />
<path d="M-80 1680C160 1470 458 1328 744 1210C1010 1102 1214 1020 1378 820C1526 638 1670 512 2020 460" fill="none" stroke="url(#earth)" stroke-width="132" stroke-linecap="round" opacity="0.9" />
<path d="M1210 430c-68 270 5 450 168 630c155 170 188 346 140 566c-36 166-30 312 40 474" fill="none" stroke="#15384e" stroke-width="260" stroke-linecap="round" opacity="0.94" />
<path d="M1210 430c-68 270 5 450 168 630c155 170 188 346 140 566c-36 166-30 312 40 474" fill="none" stroke="url(#river)" stroke-width="178" stroke-linecap="round" opacity="0.98" />
<path d="M1244 574c78 90 90 198 36 324M1424 1140c90 112 112 236 60 380M1532 1712c32 110 28 200-12 296" fill="none" stroke="#91d1df" stroke-width="14" opacity="0.35" />
<path d="M-30 0h620c96 84 134 198 112 334C470 392 210 350-30 286Z" fill="url(#forest)" opacity="0.92" />
<path d="M740 70c210-76 400-42 570 100c20 142-54 258-225 350c-195-28-318-150-345-450Z" fill="url(#forest)" opacity="0.8" />
<path d="M60 590c310-120 565-74 762 112c-56 212-284 340-672 354C20 928-10 774 60 590Z" fill="url(#forest)" opacity="0.88" />
<path d="M1900 480c226-84 404-56 548 66v390c-220 74-430 30-620-132c-38-128-14-236 72-324Z" fill="url(#forest)" opacity="0.84" />
<path d="M610 1560c300-122 570-84 792 92c-42 210-252 328-620 346c-156-94-214-234-172-438Z" fill="url(#forest)" opacity="0.82" />
<g transform="translate(1390 80)">
<rect x="0" y="0" width="460" height="260" rx="18" fill="url(#fortWall)" />
<rect x="34" y="44" width="392" height="178" fill="#6f5940" stroke="#2a2118" stroke-width="12" />
<path d="M34 44h392M34 222h392M34 44v178M426 44v178" stroke="#33281e" stroke-width="10" />
<rect x="74" y="94" width="84" height="92" fill="#93704a" />
<rect x="192" y="70" width="92" height="116" fill="#98744d" />
<rect x="318" y="96" width="60" height="90" fill="#8d6742" />
<path d="M58 94l58-48l62 48M176 70l62-50l70 50M304 96l44-38l54 38" fill="#c18b38" stroke="#302316" stroke-width="9" />
<path d="M214 186v-62h46v62" fill="#201813" />
</g>
<g transform="translate(810 900)">
<rect x="0" y="0" width="230" height="170" rx="13" fill="#584432" />
<rect x="32" y="48" width="70" height="88" fill="#8a6848" />
<rect x="130" y="52" width="64" height="84" fill="#8a6848" />
<path d="M16 48l52-42l56 42M120 52l42-34l50 34" fill="#be8431" stroke="#302215" stroke-width="9" />
</g>
<g transform="translate(1720 560)">
<rect x="0" y="0" width="230" height="160" rx="12" fill="#604b36" />
<rect x="32" y="46" width="68" height="80" fill="#96704a" />
<rect x="128" y="34" width="72" height="92" fill="#96704a" />
<path d="M16 46l52-40l54 40M118 34l52-38l60 38" fill="#c58b32" stroke="#322317" stroke-width="9" />
</g>
</g>
<rect width="2400" height="2000" fill="#0b0d12" opacity="0.08" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 649 KiB

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

@@ -18,7 +18,7 @@ import sixtyFifthBattleMapUrl from '../../assets/images/battle/sixty-fifth-battl
import sixtySixthBattleMapUrl from '../../assets/images/battle/sixty-sixth-battle-map.svg';
import fiftySeventhBattleMapUrl from '../../assets/images/battle/fifty-seventh-battle-map.svg';
import fiftySixthBattleMapUrl from '../../assets/images/battle/fifty-sixth-battle-map.svg';
import fifthBattleMapUrl from '../../assets/images/battle/fifth-battle-map.svg';
import fifthBattleMapUrl from '../../assets/images/battle/fifth-battle-map.webp';
import fifteenthBattleMapUrl from '../../assets/images/battle/fifteenth-battle-map.svg';
import firstBattleMapUrl from '../../assets/images/battle/first-battle-map.webp';
import fortiethBattleMapUrl from '../../assets/images/battle/fortieth-battle-map.svg';
@@ -32,7 +32,7 @@ import fortySeventhBattleMapUrl from '../../assets/images/battle/forty-seventh-b
import fortySixthBattleMapUrl from '../../assets/images/battle/forty-sixth-battle-map.svg';
import fortyThirdBattleMapUrl from '../../assets/images/battle/forty-third-battle-map.svg';
import fourteenthBattleMapUrl from '../../assets/images/battle/fourteenth-battle-map.svg';
import fourthBattleMapUrl from '../../assets/images/battle/fourth-battle-map.svg';
import fourthBattleMapUrl from '../../assets/images/battle/fourth-battle-map.webp';
import nineteenthBattleMapUrl from '../../assets/images/battle/nineteenth-battle-map.svg';
import ninthBattleMapUrl from '../../assets/images/battle/ninth-battle-map.svg';
import secondBattleMapUrl from '../../assets/images/battle/second-battle-map.webp';