RTS game by GPT-6 Astra

A developer has released Wilderland — The Green Reach, a real-time strategy game generated by GPT-6 Astra, according to the project's page. The browser-based title presents a full RTS interface with resource management for wood and population, seasonal indicators, and an in-game objectives panel. The page describes the game as set in a region called The Green Reach and rendered on an HTML canvas battlefield.

| | < doctype html | | | <html lang="en" | | | <head | | | <meta charset="utf-8" | | | <meta name="viewport" content="width=device-width, initial-scale=1" | | | <meta name="theme-color" content=" 151d1b" | | | <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='8' fill='%23202b22'/%3E%3Cpath d='M20 5 35 31H5ZM20 12v23M12 25h16' fill='none' stroke='%23d9ba77' stroke-width='2'/%3E%3C/svg%3E" | | | <title Wilderland — The Green Reach</title | | | <style | | | @import url 'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Marcellus&display=swap' ; | | | :root{--bg: 141c19;--panel: 1c2521;--panel2: 232d26;--line: 3a4232;--text: edeede;--muted: 969f8e;--gold: d9ba77;--green: 9cba77;--serif:'Marcellus',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif} | | | {box-sizing:border-box}body{margin:0;background:var --bg ;color:var --text ;font:13px var --sans ;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var --gold ;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.42}button svg{pointer-events:none}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} | | | header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid 48513b66;background:linear-gradient 110deg, 1f2822, 17201d ;position:relative;z-index:4;gap:20px}.brand{display:flex;align-items:center;gap:13px;min-width:252px}.brand-mark{width:38px;height:45px;color:var --gold }.brand-name{font:27px var --serif ;letter-spacing:1.4px;line-height:1.1}.brand-sub{font-size:8px;letter-spacing:3px;color: a8ae99;margin-top:6px}.resources{display:flex;align-items:center;gap:33px}.resource{display:flex;gap:11px;align-items:center;min-width:94px}.resource .icon{width:27px;height:27px;color:var --gold }.resource.wood .icon{color: c8b791}.resource.pop .icon{color: b5c4a0}.resource-value{font-size:18px;line-height:1.2;font-weight:500;font-variant-numeric:tabular-nums}.resource-label{font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:var --muted ;margin-top:4px}.resource-plus{font-size:10px;color:var --green ;margin-left:5px}.header-right{display:flex;gap:18px;align-items:center}.season{color:var --muted ;display:flex;align-items:center;gap:8px;font-size:11px}.season .icon{color:var --gold ;width:17px}.header-divider{height:25px;width:1px;background:var --line }.text-button{background:none;border:0;display:flex;gap:8px;align-items:center;color: c3c8b7;font-size:11px;padding:7px 0}.text-button:hover{color:var --gold }.square-button{width:33px;height:33px;border:1px solid 49523d;border-radius:5px;background: 252e25;display:grid;place-items:center}.square-button:hover{background: 384232}.square-button .icon{width:16px;height:16px} | | | battlefield{position:absolute;inset:78px 0 0;background: 202d25;overflow:hidden} world{width:100%;height:100%;display:block;touch-action:none;cursor:default}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 150px 10px 0a14196b}.region-name{position:absolute;left:50%;top:23px;transform:translateX -50% ;display:flex;align-items:center;gap:13px;color: c4cbb0;letter-spacing:3px;font-size:9px;text-shadow:0 2px 5px 000}.region-name:before,.region-name:after{content:'';width:38px;height:1px;background: bac29b44}.region-name .icon{width:12px;height:12px;color:var --gold }.objectives{position:absolute;top:25px;left:24px;width:239px;background:linear-gradient 130deg, 1b251eef, 19241bdd ;border:1px solid 64744844;border-radius:7px;padding:18px 18px 16px;box-shadow:0 6px 28px 08120833;backdrop-filter:blur 10px }.eyebrow{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var --gold ;display:flex;align-items:center;gap:7px}.eyebrow .icon{width:13px;height:13px}.objectives h1{font:20px var --serif ;margin:11px 0 7px}.objectives p{font-size:11px;line-height:1.65;color: a9b29a;margin:0 0 17px}.quest{display:flex;gap:10px;align-items:center;margin:13px 0;color: b9c1ac;font-size:10px}.check{width:13px;height:13px;border:1px solid 657151;border-radius:3px;flex-shrink:0;display:grid;place-items:center;font-size:10px;color: 142017}.quest.done .check{background:var --green ;border-color:var --green }.quest.done{color: d7e0c8}.quest-value{margin-left:auto;color: 89957d;font-size:9px}.quest-progress{height:3px;background: 3a4631;border-radius:2px;margin-top:16px;overflow:hidden}.quest-progress div{background:var --green ;height:100%;width:0;transition:width .5s}.quest-foot{display:flex;justify-content:space-between;margin-top:9px;color: 87957e;font-size:9px}.quest-foot span:last-child{color: bfd0a8}.collapse-quest{position:absolute;top:13px;right:12px;border:0;background:none;color: 8e9a80;padding:4px}.collapse-quest .icon{width:13px;height:13px}.objectives.collapsed .quest-body{display:none}.objectives.collapsed h1{margin-bottom:0}.map-controls{position:absolute;right:24px;top:26px;display:flex;flex-direction:column;gap:7px}.map-controls button{background: 1c2820df;border-color: 5c6a434d;color: bcc6a5}.map-controls .control-gap{height:6px}.map-controls button.active{color:var --gold ;border-color: ab925b}.camera-note{position:absolute;right:23px;top:198px;color: 8f9b82;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px}.map-bottom{position:absolute;left:26px;bottom:244px;display:flex;align-items:center;gap:8px;color: bbc5a9;font-size:10px}.live-dot{width:5px;height:5px;background: a8c485;border-radius:50%;box-shadow:0 0 8px b3d28b55}.map-bottom .sep{color: 647354;margin:0 4px}.world-hint{position:absolute;bottom:251px;left:50%;transform:translateX -50% ;padding:9px 16px;border:1px solid abb88038;border-radius:5px;background: 1d2a21dd;color: e0e6cf;font-size:11px;pointer-events:none;white-space:nowrap;display:none}.world-hint.show{display:block}.world-hint kbd{margin-left:9px;color:var --gold } | | | .hud{position:absolute;bottom:39px;left:20px;right:20px;height:188px;background:linear-gradient 110deg, 202a23f7, 1a241ff7 ;border:1px solid 59604488;border-radius:8px;display:grid;grid-template-columns:260px minmax 180px,.82fr minmax 340px,1.35fr 200px;box-shadow:0 8px 35px 06100766;backdrop-filter:blur 14px }.hud-section{padding:17px 19px;position:relative;min-width:0}.hud-section+.hud-section{border-left:1px solid 52603d55}.section-heading{font-size:9px;letter-spacing:1.7px;color: a7af96;display:flex;justify-content:space-between;align-items:center;height:15px;margin-bottom:13px}.section-heading small{font-size:8px;color: 76866b;letter-spacing:.5px}.selection-main{display:flex;align-items:center;gap:12px}.portrait{height:71px;width:76px;border:1px solid 786a444d;border-radius:5px;background:radial-gradient ellipse at 50% 90%, 63754455, 151e19 85% ;image-rendering:auto;flex-shrink:0}.selection-name{font:19px var --serif ;margin-bottom:6px}.selection-main div{min-width:0}.selection-type{color: 929f84;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.health-bar{background: 384730;height:4px;margin-top:10px;border-radius:2px;width:119px;overflow:hidden}.health-fill{background: a4be79;height:100%;transition:width .3s}.health-text{display:flex;justify-content:space-between;color: 93a67c;font-size:8px;margin-top:5px}.selection-desc{font-size:10px;line-height:1.6;color: 9ba68e;margin-top:13px;max-width:230px}.action-buttons{display:flex;gap:8px}.action-card{height:81px;width:77px;position:relative;background:linear-gradient 3a432d66, 2c35275c ;border:1px solid 66744755;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .15s,border .15s}.action-card:hover{background: 455234;border-color: 99a469}.action-card .icon{height:29px;width:29px;margin:1px 0 7px;color: c5cca6}.action-label{font-size:9px;color: d3d9c3}.action-cost{font-size:8px;color:var --gold ;margin-top:4px}.keycap{position:absolute;right:5px;top:4px;font:8px var --sans ;color: a3ab8c}.context-note{font-size:9px;color: 7f8e72;margin-top:12px;display:flex;gap:6px;align-items:center;white-space:nowrap}.context-note .icon{width:12px;height:12px}.queue-label{color:var --gold ;letter-spacing:0;font-size:9px}.queue-track{height:3px;position:absolute;bottom:0;left:0;background:var --gold ;border-radius:0 0 3px 3px}.build-buttons{display:grid;grid-template-columns:repeat 4,1fr ;gap:8px}.build-card{height:107px;border:1px solid 6674474d;background: 33402a45;border-radius:5px;padding:2px 2px 8px;position:relative;text-align:center;transition:background .15s,border .15s}.build-card:hover{background: 45533488;border-color: 98a56a}.build-card.active{border-color:var --gold ;background: 75643b44}.build-card img{width:68px;height:62px;display:block;object-fit:contain;margin:0 auto 1px;pointer-events:none}.build-name{font-size:10px;display:block;margin-bottom:6px}.build-cost{display:flex;justify-content:center;align-items:center;gap:4px;font-size:8px;color: c4b580}.build-cost .icon{height:10px;width:10px}.build-cost .wood-cost{color: aeba93;margin-left:3px}.build-section .context-note{margin-top:8px;font-size:8px}.minimap-section{padding:13px}.minimap-heading{font-size:8px;letter-spacing:1.7px;color: a8b595;display:flex;justify-content:space-between;margin-bottom:8px}.minimap-heading span:last-child{color:var --gold ;letter-spacing:0}.minimap-wrap{height:133px;position:relative;overflow:hidden;background: 111d17;border:1px solid 626f445e;border-radius:3px}.minimap-wrap:after{content:'N';position:absolute;right:7px;top:5px;font:9px var --serif ;color: 99ae7d;pointer-events:none} minimap{width:100%;height:100%;display:block;cursor:crosshair}.minimap-caption{font-size:8px;color: 6e8066;text-align:center;letter-spacing:.3px;margin-top:6px}.footer{height:39px;position:absolute;left:25px;right:25px;bottom:0;display:flex;justify-content:space-between;align-items:center;color: 839077;font-size:9px;gap:12px}.shortcuts{display:flex;align-items:center;gap:19px}.shortcut{display:flex;align-items:center;gap:6px}kbd{font:8px var --sans ;display:inline-flex;align-items:center;justify-content:center;color: b2bda1;min-width:17px;height:16px;padding:0 4px;border:1px solid 5a664447;border-radius:3px;background: 29352488}.shortcut .icon{width:12px;height:12px;color: a5b291}.footer-status{display:flex;align-items:center;gap:7px;font-size:8px;color: 748368}.footer-status .icon{width:11px;height:11px}.toast-stack{position:absolute;right:73px;top:28px;display:flex;flex-direction:column;gap:8px;pointer-events:none;z-index:7}.toast{max-width:300px;background: 1e2b22ee;border:1px solid 78885366;border-left:2px solid var --gold ;border-radius:4px;padding:12px 16px;font-size:11px;color: dde4cd;animation:toast-in .2s ease-out;box-shadow:0 4px 15px 0003}.toast.error{border-left-color: d49679}@keyframes toast-in{from{opacity:0;transform:translateY -8px }to{opacity:1;transform:translateY 0 }} | | | .modal-backdrop{position:fixed;inset:0;background: 08120bd4;backdrop-filter:blur 6px ;display:none;align-items:center;justify-content:center;z-index:15;padding:20px}.modal-backdrop.open{display:flex}.modal{position:relative;width:530px;max-height:90vh;overflow:auto;background:linear-gradient 145deg, 293426, 19261e ;border:1px solid 7c845151;border-radius:10px;padding:34px;box-shadow:0 25px 100px 0008}.modal h2{font:32px var --serif ;margin:13px 0 10px}.modal-intro{color: b1bca3;font-size:12px;line-height:1.8}.modal-close{position:absolute;right:18px;top:18px;border:0;background:transparent;color: a6b491;font-size:22px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;margin:27px 0}.help-item{font-size:11px;color: abb99c;line-height:1.7}.help-item b{display:block;color: e1e8d2;font-size:12px;margin-bottom:5px}.help-item .icon{width:18px;height:18px;vertical-align:middle;margin-right:6px;color:var --gold }.primary-button{padding:12px 20px;background: bdab72;border:1px solid d3c28d;color: 1d281d;border-radius:4px;font-weight:600;font-size:12px}.primary-button:hover{background: d3c18a}.secondary-button{padding:12px 20px;background: 394630;border:1px solid 5e6c45;color: c7d3b7;border-radius:4px;font-size:12px}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.help-bottom{border-top:1px solid 697c404d;padding-top:17px;font-size:10px;color: 96a883;line-height:1.9}.pause-info{color: a7b69a;font-size:11px;line-height:1.8;margin:19px 0}.mobile-tip{display:none} | | | @media min-width:1650px {.hud{grid-template-columns:300px minmax 230px,1fr minmax 390px,1.5fr 225px;height:198px}.hud-section{padding:20px 24px}.minimap-section{padding:13px}.minimap-wrap{height:142px}.map-bottom{bottom:255px}.world-hint{bottom:259px}} | | | @media max-width:1150px {header{padding:0 20px}.brand{min-width:206px}.brand-name{font-size:24px}.resources{gap:20px}.header-right{gap:12px}.season{display:none}.hud{left:12px;right:12px;grid-template-columns:218px minmax 160px,.8fr minmax 300px,1.4fr 165px}.hud-section{padding:16px 12px}.minimap-section{padding:12px}.health-bar{width:100px}.portrait{width:63px}.selection-name{font-size:17px}.build-buttons{gap:5px}.build-card img{width:60px}.action-card{width:66px}.shortcuts{gap:12px}.selection-desc{font-size:9px}.footer{left:18px;right:18px}.footer-status{display:none}.objectives{width:220px;left:20px}.build-section .context-note{font-size:7px}} | | | @media max-width:900px {header{height:65px;padding:0 14px;gap:14px}.brand{min-width:0}.brand-name{font-size:21px}.brand-sub{font-size:6px;letter-spacing:2px}.brand-mark{width:28px}.resources{gap:15px}.resource{min-width:63px;gap:7px}.resource .icon{width:21px;height:21px}.resource-value{font-size:15px}.resource-label{font-size:7px}.resource-plus{display:none}.text-button span,.header-divider{display:none} battlefield{top:65px}.hud{height:180px;grid-template-columns:190px 145px minmax 275px,1fr }.minimap-section{position:absolute;right:0;bottom:196px;background: 1c2820dd;width:158px;border:1px solid 59604466 important;border-radius:6px}.minimap-wrap{height:110px}.minimap-caption{display:none}.map-bottom{bottom:235px}.world-hint{bottom:236px}.hud-section{padding:15px 10px}.selection-main{gap:8px}.portrait{width:56px;height:63px}.selection-name{font-size:16px}.health-bar{width:91px}.section-heading{font-size:8px;letter-spacing:1.2px}.action-card{width:59px}.action-buttons{gap:5px}.selection-desc{font-size:9px}.build-name{font-size:9px}.build-card img{width:55px}.context-note{font-size:8px}.shortcuts{gap:10px}.shortcut{font-size:8px}.shortcut.optional{display:none}.objectives{top:19px}.region-name{left:58%;font-size:8px}.map-controls{right:15px;top:18px}.camera-note{display:none}} | | | @media max-width:640px {header{height:61px;gap:8px}.brand{gap:6px}.brand-mark{width:24px}.brand-name{font-size:18px;letter-spacing:.5px}.brand-sub{display:none}.resources{gap:10px}.resource{min-width:0;gap:4px}.resource .icon{width:16px;height:16px}.resource-value{font-size:13px}.resource-label{font-size:6px;letter-spacing:1px}.header-right{gap:7px}.header-right .text-button{display:none}.square-button{width:29px;height:29px} battlefield{top:61px}.objectives{top:12px;left:12px;padding:13px;width:190px}.objectives h1{font-size:17px}.objectives p{font-size:10px;margin-bottom:12px}.quest{font-size:9px;margin:10px 0}.eyebrow{font-size:8px}.region-name{display:none}.hud{height:233px;bottom:32px;left:8px;right:8px;grid-template-columns:1fr 1fr;grid-template-rows:105px 127px}.hud-section{padding:10px 12px}.selection-section .section-heading,.selection-desc,.health-text{display:none}.selection-main{height:82px}.selection-name{font-size:16px}.health-bar{width:90px}.portrait{height:65px;width:54px}.actions-section .section-heading{margin-bottom:6px}.actions-section .context-note{display:none}.action-card{height:61px;width:60px}.action-card .icon{width:20px;height:20px;margin:0 0 3px}.action-label{font-size:8px}.action-cost{font-size:7px;margin-top:2px}.build-section{grid-column:1/3;border-left:0 important;border-top:1px solid 52603d55}.build-section .section-heading{margin-bottom:7px}.build-card{height:80px;padding:0 2px 4px}.build-card img{height:44px;width:51px;margin-bottom:0}.build-name{margin-bottom:3px}.build-section .context-note{display:none}.minimap-section{bottom:250px;right:0;width:119px;padding:8px}.minimap-wrap{height:83px}.minimap-heading{font-size:6px;letter-spacing:.8px;margin-bottom:5px}.map-bottom{left:14px;bottom:281px;font-size:8px}.world-hint{bottom:282px;font-size:9px;max-width:92%;white-space:normal;text-align:center}.footer{height:32px;left:13px;right:13px}.shortcuts{gap:13px}.shortcut.desktop-only{display:none}.mobile-tip{display:flex}.toast-stack{top:12px;right:51px;max-width:220px}.toast{font-size:10px}.modal{padding:25px}.modal h2{font-size:27px}.help-grid{gap:16px}.help-item{font-size:10px}.map-controls{right:12px;top:12px}} | | | </style | | | </head | | | <body | | | <svg width="0" height="0" aria-hidden="true" style="position:absolute" <defs | | | <symbol id="i-wood" viewBox="0 0 24 24" <path d="m4 14 10-9 7 5-10 9zM4 14v5l7 3v-3M21 10v5l-10 7M7 11l7 5M10 8l7 5"/ <ellipse cx="7.5" cy="17" rx="1.1" ry="1.7" transform="rotate -35 7.5 17 "/ </symbol | | | <symbol id="i-gold" viewBox="0 0 24 24" <path d="m5 8 5-4h5l5 5-1 9-8 3-7-6zM5 8l7 2 8-1M12 10l-1 11M10 4l2 6M4 15l8-5 7 8"/ </symbol | | | <symbol id="i-people" viewBox="0 0 24 24" <circle cx="9" cy="7" r="3"/ <path d="M3 20v-4a6 6 0 0 1 12 0v4M17 4a3 3 0 0 1 0 6M18 13a5 5 0 0 1 3 5v2M7 20v-4M11 20v-4"/ </symbol | | | <symbol id="i-worker" viewBox="0 0 32 32" <path d="M6 11h17M9 10V7a6 6 0 0 1 12 0v3M15 2v6M10 12v3a5 5 0 0 0 10 0v-3M5 30v-6c0-4 4-5 10-5s10 1 10 5v6M11 20v6h8v-6M11 26v4M19 26v4M27 10v15M24 11l3-4 4 4"/ </symbol | | | <symbol id="i-scout" viewBox="0 0 32 32" <path d="m10 14-2-5 8-7 8 7-2 5M10 11l6-3 6 3v5a6 6 0 0 1-12 0zM5 30l2-9 9-2 9 2 2 9M10 21l6 7 6-7M16 28v3M27 5v12m-2-10 2-2 2 2"/ </symbol | | | <symbol id="i-sword" viewBox="0 0 24 24" <path d="m14 3 7-1-1 7L9 20l-5-5zM5 13l7 7M6 19l-4 3M15 8l3-3"/ </symbol | | | <symbol id="i-compass" viewBox="0 0 24 24" <circle cx="12" cy="12" r="9"/ <path d="m16 8-2 6-6 2 2-6zM12 1v3M12 20v3M1 12h3M20 12h3"/ </symbol | | | <symbol id="i-flag" viewBox="0 0 24 24" <path d="M5 22V3c5-6 9 6 15 0v10c-6 6-10-6-15 0"/ </symbol | | | <symbol id="i-sun" viewBox="0 0 24 24" <circle cx="12" cy="12" r="4"/ <path d="M12 1v3M12 20v3M1 12h3M20 12h3M4 4l2 2M18 18l2 2M4 20l2-2M18 6l2-2"/ </symbol | | | <symbol id="i-help" viewBox="0 0 24 24" <circle cx="12" cy="12" r="9"/ <path d="M9 8a3 3 0 0 1 6 1c0 2-3 2-3 5M12 17v.1"/ </symbol | | | <symbol id="i-pause" viewBox="0 0 24 24" <path d="M8 5v14M16 5v14" stroke-width="3"/ </symbol | | | <symbol id="i-home" viewBox="0 0 24 24" <path d="m3 11 9-8 9 8M5 10v11h14V10M10 21v-7h4v7"/ </symbol | | | <symbol id="i-plus" viewBox="0 0 24 24" <path d="M12 5v14M5 12h14"/ </symbol | | | <symbol id="i-minus" viewBox="0 0 24 24" <path d="M5 12h14"/ </symbol | | | <symbol id="i-grid" viewBox="0 0 24 24" <path d="M3 3h18v18H3zM3 9h18M3 15h18M9 3v18M15 3v18"/ </symbol | | | <symbol id="i-arrow" viewBox="0 0 24 24" <path d="m8 4 8 8-8 8"/ </symbol | | | <symbol id="i-chevron" viewBox="0 0 24 24" <path d="m6 14 6-6 6 6"/ </symbol | | | <symbol id="i-stop" viewBox="0 0 24 24" <path d="M6 6h12v12H6z"/ </symbol | | | <symbol id="i-mouse" viewBox="0 0 24 24" <rect x="6" y="2" width="12" height="20" rx="6"/ <path d="M12 3v6M6 10h12"/ </symbol | | | <symbol id="i-save" viewBox="0 0 24 24" <path d="M4 3h13l4 4v14H3V3zM7 3v6h9V3M7 21v-8h10v8M13 3v4"/ </symbol | | | <symbol id="i-leaf" viewBox="0 0 24 24" <path d="M5 19C-2 9 9 2 21 3c0 11-4 20-14 15M3 22 16 9M8 17v-5M12 13h5"/ </symbol | | | <symbol id="i-hammer" viewBox="0 0 24 24" <path d="m4 22 10-12M10 5l5-4 7 6-4 5-4-3-2 2-4-3z"/ </symbol | | | </defs </svg | | | <header | | | <div class="brand" <svg class="brand-mark" viewBox="0 0 44 48" fill="none" <path d="M22 2 40 12v24L22 46 4 36V12Z" stroke="currentColor" opacity=".6"/ <path d="M22 7v33M10 31l12-19 12 19M13 28h18M17 21h10" stroke="currentColor" stroke-width="1.5"/ <path d="m22 1 3 5-3 5-3-5Z" fill="currentColor"/ <circle cx="22" cy="34" r="2" fill="currentColor"/ </svg <div <div class="brand-name" Wilderland</div <div class="brand-sub" A WORLD WAITING TO BE YOURS</div </div </div | | | <div class="resources" aria-label="Settlement resources" | | | <div class="resource" <svg class="icon" <use href=" i-gold"/ </svg <div <div class="resource-value" <span id="gold" 500</span <span class="resource-plus" id="gold-rate" </span </div <div class="resource-label" Gold</div </div </div | | | <div class="resource wood" <svg class="icon" <use href=" i-wood"/ </svg <div <div class="resource-value" <span id="wood" 350</span <span class="resource-plus" id="wood-rate" </span </div <div class="resource-label" Timber</div </div </div | | | <div class="resource pop" <svg class="icon" <use href=" i-people"/ </svg <div <div class="resource-value" <span id="population" 4</span <span style="color: 69795e;font-size:13px" / <span id="capacity" 12</span </span </div <div class="resource-label" Population</div </div </div | | | </div | | | <div class="header-right" <div class="season" <svg class="icon" <use href=" i-sun"/ </svg <span Day <span id="day" 1</span · A new beginning</span </div <div class="header-divider" </div <button class="text-button" id="help-button" title="How to play ? " <svg class="icon" <use href=" i-help"/ </svg <span How to play</span </button <button class="square-button" id="pause-button" title="Pause game P " aria-label="Pause game" <svg class="icon" <use href=" i-pause"/ </svg </button </div | | | </header | | | <main id="battlefield" | | | <canvas id="world" aria-label="Isometric strategy game map. Click to select units. Right-click to move or gather resources." tabindex="0" </canvas <div class="vignette" </div | | | <div class="region-name" <svg class="icon" <use href=" i-leaf"/ </svg THE GREEN REACH</div | | | <aside class="objectives" id="objectives" <button class="collapse-quest" id="collapse-quest" title="Toggle objectives" aria-label="Toggle objectives" <svg class="icon" <use href=" i-chevron"/ </svg </button <div class="eyebrow" <svg class="icon" <use href=" i-flag"/ </svg CHAPTER I · NEW ROOTS</div <h1 A foothold in the wild</h1 <div class="quest-body" <p Gather what the land offers.<br Build a home. Discover what lies beyond.</p <div class="quest" id="quest-gather" <span class="check" </span Gather 200 resources <span class="quest-value" id="gather-count" 0 / 200</span </div <div class="quest" id="quest-build" <span class="check" </span Build a barracks <span class="quest-value" id="barracks-count" 0 / 1</span </div <div class="quest" id="quest-explore" <span class="check" </span Explore the Green Reach <span class="quest-value" id="explore-count" 0%</span </div <div class="quest-progress" <div id="exploration-bar" </div </div <div class="quest-foot" <span LAND DISCOVERED</span <span id="explored-label" 0%</span </div </div </aside | | | <div class="map-controls" <button class="square-button" id="home-button" title="Return to settlement H " aria-label="Return to settlement" <svg class="icon" <use href=" i-home"/ </svg </button <span class="control-gap" </span <button class="square-button" id="zoom-in" title="Zoom in" aria-label="Zoom in" <svg class="icon" <use href=" i-plus"/ </svg </button <button class="square-button" id="zoom-out" title="Zoom out" aria-label="Zoom out" <svg class="icon" <use href=" i-minus"/ </svg </button <button class="square-button" id="grid-button" title="Toggle building grid G " aria-label="Toggle grid" <svg class="icon" <use href=" i-grid"/ </svg </button </div | | | <div class="camera-note" SCROLL TO EXPLORE</div <div class="toast-stack" id="toasts" aria-live="polite" </div | | | <div class="map-bottom" <span class="live-dot" </span <span id="world-state" A peaceful frontier</span <span class="sep" ·</span <span id="clock" 00:00</span <span class="sep" ·</span <span id="zoom-label" 100%</span </div | | | <div class="world-hint" id="world-hint" </div | | | <section class="hud" aria-label="Settlement commands" | | | <div class="hud-section selection-section" <div class="section-heading" YOUR SELECTION <small id="selection-count" 01</small </div <div class="selection-main" <img class="portrait" id="portrait" alt="Selected building" <div <div class="selection-name" id="selection-name" Town Hall</div <div class="selection-type" id="selection-type" Settlement · Main building</div <div class="health-bar" <div class="health-fill" id="health-fill" style="width:100%" </div </div <div class="health-text" <span id="health-text" 1,500 / 1,500</span <span id="selection-badge" ◆</span </div </div </div <div class="selection-desc" id="selection-desc" The heart of your new settlement.<br Train workers and store your resources.</div </div | | | <div class="hud-section actions-section" <div class="section-heading" <span id="action-title" RECRUIT & COMMAND</span <span id="queue-label" class="queue-label" </span </div <div class="action-buttons" id="actions" </div <div class="context-note" id="context-note" <svg class="icon" <use href=" i-people"/ </svg Every great settlement starts small.</div </div | | | <div class="hud-section build-section" <div class="section-heading" BUILD YOUR SETTLEMENT <small SELECT & PLACE</small </div <div class="build-buttons" id="build-buttons" </div <div class="context-note" <svg class="icon" <use href=" i-hammer"/ </svg A nearby worker will begin construction.</div </div | | | <div class="hud-section minimap-section" <div class="minimap-heading" <span THE GREEN REACH</span <span id="minimap-percent" 0%</span </div <div class="minimap-wrap" <canvas id="minimap" aria-label="Minimap. Click to navigate." tabindex="0" </canvas </div <div class="minimap-caption" Click the map to travel</div </div | | | </section | | | <footer class="footer" <div class="shortcuts" <span class="shortcut desktop-only" <svg class="icon" <use href=" i-mouse"/ </svg Click to select</span <span class="shortcut desktop-only" <svg class="icon" <use href=" i-mouse"/ </svg Right-click to command</span <span class="shortcut desktop-only" <kbd DRAG</kbd Select units</span <span class="shortcut desktop-only" <kbd W A S D</kbd Pan map</span <span class="shortcut optional" <kbd SPACE</kbd Find selection</span <span class="shortcut optional" <kbd ?</kbd Help</span <span class="shortcut mobile-tip" Tap to select · Tap ground to move</span <span class="shortcut" <kbd ESC</kbd Cancel</span </div <span class="footer-status" id="save-status" <svg class="icon" <use href=" i-save"/ </svg Your world saves automatically</span </footer | | | </main | | | <div class="modal-backdrop" id="help-modal" role="dialog" aria-modal="true" aria-labelledby="help-title" <div class="modal" <button class="modal-close" data-close="help-modal" aria-label="Close help" ×</button <div class="eyebrow" YOUR FIELD GUIDE</div <h2 id="help-title" A world of your own.</h2 <p class="modal-intro" An unhurried strategy game. No enemies, no rush. Grow a settlement and uncover every corner of the Green Reach.</p <div class="help-grid" <div class="help-item" <b <svg class="icon" <use href=" i-mouse"/ </svg Lead your people</b Click a unit to select it, or drag a box around several. Shift-click adds to your selection. Right-click the ground to move. On touch screens, tap the ground.</div <div class="help-item" <b <svg class="icon" <use href=" i-wood"/ </svg Gather resources</b Select workers, then right-click a tree or gold deposit. They'll gather and bring resources home automatically. Each trip delivers 10 resources.</div <div class="help-item" <b <svg class="icon" <use href=" i-hammer"/ </svg Grow your settlement</b Choose a building, then click a clear, discovered tile. A worker will construct it. Houses add 6 population. Sawmills accept timber and make gathering faster.</div <div class="help-item" <b <svg class="icon" <use href=" i-compass"/ </svg Venture beyond</b Train scouts at a barracks and choose Explore E . They automatically uncover the whole map. Watchtowers reveal a wide area. Soldiers can explore too.</div </div <div class="help-bottom" <kbd W A S D</kbd / <kbd ↑ ↓ ← →</kbd Pan · Scroll to zoom · Middle-drag to pan<br <kbd H</kbd Home · <kbd SPACE</kbd Center selection · <kbd I</kbd Idle worker · <kbd G</kbd Grid · <kbd P</kbd Pause<br <kbd 1–4</kbd Build · <kbd R</kbd Train worker / scout · <kbd E</kbd Explore · <kbd X</kbd Stop · <kbd ESC</kbd Cancel<br Your progress is saved in this browser. Manage your world from the pause menu.</div <div class="modal-actions" <button class="primary-button" data-close="help-modal" Make yourself at home <span style="margin-left:15px" →</span </button </div </div </div | | | <div class="modal-backdrop" id="pause-modal" role="dialog" aria-modal="true" aria-labelledby="pause-title" <div class="modal" <div class="eyebrow" TAKE A BREATHER</div <h2 id="pause-title" The wild can wait.</h2 <p class="modal-intro" Your settlement is paused.</p <p class="pause-info" id="pause-info" </p <button class="text-button" id="pause-help" <svg class="icon" <use href=" i-help"/ </svg Open the field guide</button <div class="modal-actions" <button class="primary-button" id="resume-button" Return to the Reach →</button <button class="secondary-button" id="save-button" Save world</button <button class="secondary-button" id="new-button" New world</button </div <p id="reset-warning" style="display:none;color: d6b393;font-size:11px;line-height:1.7" Starting a new world replaces your saved settlement. <button class="text-button" id="confirm-new" style="color: e2b07f;display:inline" Start a new world</button · <button class="text-button" id="cancel-new" style="display:inline" Keep this world</button </p </div </div | | | <div class="modal-backdrop" id="victory-modal" role="dialog" aria-modal="true" aria-labelledby="victory-title" <div class="modal" <div class="eyebrow" <svg class="icon" <use href=" i-flag"/ </svg CHAPTER COMPLETE</div <h2 id="victory-title" From a spark, a settlement.</h2 <p class="modal-intro" Every corner of the Green Reach is on your map. Your people have made a home in the wilderness. This land is yours to keep shaping.</p <div class="modal-actions" <button class="primary-button" data-close="victory-modal" Keep building →</button </div </div </div | | | <script | | | 'use strict'; | | | = { | | | const $=id= document.getElementById id , canvas=$ 'world' , ctx=canvas.getContext '2d' , mini=$ 'minimap' , mctx=mini.getContext '2d' ; | | | const N=48, TW=64, TH=32, SAVE KEY='wilderland-world-v1'; | | | const defs={ | | | townhall:{name:'Town Hall',w:3,h:3,hp:1500,gold:0,wood:0,time:0,vision:8,desc:'The heart of your new settlement. Train workers and store your resources.',type:'Settlement · Main building'}, | | | house:{name:'House',w:2,h:2,hp:500,gold:0,wood:80,time:9,vision:5,desc:'A little place to call home. Provides room for 6 more people.',type:'Settlement · Population +6'}, | | | barracks:{name:'Barracks',w:3,h:2,hp:1000,gold:100,wood:150,time:16,vision:6,desc:'Prepare for the path ahead. Train swift scouts and sturdy soldiers.',type:'Military · Unit training'}, | | | sawmill:{name:'Sawmill',w:2,h:2,hp:700,gold:60,wood:100,time:12,vision:5,desc:'A local drop-off for timber. All workers gather wood 50% faster.',type:'Economy · Timber gathering'}, | | | tower:{name:'Watchtower',w:1,h:1,hp:650,gold:60,wood:120,time:12,vision:11,desc:'A watchful eye above the trees. Reveals a wide stretch of the frontier.',type:'Exploration · Extended vision'} | | | }; | | | const unitsDef={worker:{name:'Worker',hp:60,gold:50,wood:0,time:6,speed:2.0,vision:5,icon:'worker',desc:'Ready to lend a hand. Right-click trees or gold to gather resources.'},scout:{name:'Scout',hp:90,gold:80,wood:20,time:8,speed:3.4,vision:8,icon:'scout',desc:'A restless spirit with a keen eye. Explore the wilds and chart new ground.'},soldier:{name:'Soldier',hp:120,gold:100,wood:30,time:10,speed:2.4,vision:6,icon:'sword',desc:'A steadfast guardian of your people. Send them to explore the frontier.'}}; | | | let state,cam={x:0,y:0,zoom:1},viewW=0,viewH=0,dpr=1,selected= ,placement=null,mouse={x:0,y:0,inside:false},drag=null,keys=new Set ,showGrid=false,paused=false,last=0,uiTimer=0,visionTimer=0,saveTimer=0,effects= ,hover=null,lastSelectionKey='',lastTouch=0; | | | let terrain= ,nodes= ,buildings= ,units= ,explored= ,visible= ,visionStrength= ,reachable= ,exploredTotal=0,blockers=new Uint8Array N N ; | | | let rngSeed=83219; | | | function random {rngSeed= rngSeed 1664525+1013904223 0;return rngSeed/4294967296;} | | | function hash x,y,s=0 {let v=Math.sin x 127.1+y 311.7+s 74.13 43758.5453;return v-Math.floor v ;} | | | function index x,y {return y N+x;} function inMap x,y {return x =0&&y =0&&x<N&&y<N;} | | | function project x,y {return{x: x-y TW/2,y: x+y TH/2};} | | | function screen x,y {const p=project x,y ;return{x: p.x-cam.x cam.zoom+viewW/2,y: p.y-cam.y cam.zoom+viewH .42};} | | | function unproject sx,sy {const px= sx-viewW/2 /cam.zoom+cam.x,py= sy-viewH .42 /cam.zoom+cam.y;return{x:py/TH+px/TW,y:py/TH-px/TW};} | | | function home {const b=buildings.find b= b.type==='townhall' ;if b {const p=project b.x+1.5,b.y+1.5 ;cam.x=p.x;cam.y=p.y+30;}} | | | function notify msg,error=false {const el=document.createElement 'div' ;el.className='toast'+ error?' error':'' ;el.textContent=msg;$ 'toasts' .append el ;setTimeout = el.remove ,4200 ;} | | | function icon name {return '<svg class="icon" <use href=" i-'+name+'"/ </svg ';} | | | function generate { | | | rngSeed=83219;terrain= ;nodes= ;let nid=1; | | | for let y=0;y<N;y++ for let x=0;x<N;x++ { | | | const river=35+Math.sin y .18 3.1;const water=Math.abs x-river <1.25&&y 3&&y<44;const bridge=y===21\|\|y===22; | | | terrain.push {x,y,water:water&& bridge,bridge:water&&bridge,r:random ,flowers:random <.11} ; | | | const dist=Math.hypot x-21.5,y-22.5 ,cluster=Math.sin x .51 +Math.cos y .43 +Math.sin x+y .29 ; | | | let tree= water&&dist 5.5&& cluster .65?random <.49:random <.045 ; | | | if x===0\|\|y===0\|\|x===47\|\|y===47\|\|x%9===0\|\|y%10===0 tree=false; | | | if tree nodes.push {id:'n'+nid++,type:'wood',x:x+.5,y:y+.5,amount:220+Math.floor random 160 ,r:random } ; | | | } | | | const goldSites= 16,20 , 26,29 , 11,9 , 39,13 , 8,37 , 40,39 , 24,5 , 18,42 ; | | | for const x,y of goldSites {nodes=nodes.filter n= Math.hypot n.x-x-.5,n.y-y-.5 1.6 ;terrain index x,y .water=false;nodes.push {id:'n'+nid++,type:'gold',x:x+.5,y:y+.5,amount:3000,r:random } ;} | | | // Guarantee a nearby, distinct starting grove. | | | for const x,y of 25,19 , 26,19 , 27,18 , 28,19 , 26,18 , 25,17 , 27,17 , 29,18 , 28,16 , 29,16 {nodes=nodes.filter n= Math.floor n.x ==x\|\|Math.floor n.y ==y ;terrain index x,y .water=false;nodes.push {id:'n'+nid++,type:'wood',x:x+.5,y:y+.5,amount:340,r:random } ;} | | | } | | | function newState { | | | generate ;state={gold:500,wood:350,time:0,gathered:0,nextId:10,won:false,trained:0}; | | | buildings= makeBuilding 'townhall',20,21,true,1 ,makeBuilding 'house',23,25,true,2 ; | | | units= makeUnit 'worker',19.5,23.6,3 ,makeUnit 'worker',22.5,25,4 ,makeUnit 'worker',24,23.9,5 ,makeUnit 'scout',19,26,6 ; | | | explored=new Array N N .fill false ;selected= {kind:'building',id:1} ;effects= ;placement=null;recomputeReachable ;updateVision ;home ;lastSelectionKey=''; | | | } | | | function makeBuilding type,x,y,complete,id {const d=defs type ;return{id:id??state.nextId++,type,x,y,progress:complete?1:0,hp:d.hp,queue: ,rally:null};} | | | function makeUnit type,x,y,id {return{id:id??state.nextId++,type,x,y,hp:unitsDef type .hp,task:'idle',path: ,target:null,carry:0,carryType:null,work:0,auto:false,animation:random 10,exploreGoal:null};} | | | function getEntity s {return s.kind==='unit'?units.find u= u.id===s.id :s.kind==='building'?buildings.find b= b.id===s.id :nodes.find n= n.id===s.id ;} | | | function populationCap {return 6+buildings.filter b= b.type==='house'&&b.progress =1 .length 6;} | | | function reservedPop {return units.length+buildings.reduce a,b = a+b.queue.length,0 ;} | | | function rebuildBlockers {blockers=new Uint8Array N N ;for const t of terrain if t.water blockers index t.x,t.y =1;for const n of nodes if n.amount 0 blockers index Math.floor n.x ,Math.floor n.y =1;for const b of buildings {const d=defs b.type ;for let y=b.y;y<b.y+d.h;y++ for let x=b.x;x<b.x+d.w;x++ blockers index x,y =1;}} | | | function occupied x,y {return inMap x,y \|\|blockers index x,y ===1;} | | | function recomputeReachable { | | | rebuildBlockers ; | | | reachable=new Array N N .fill false ;const town=buildings.find b= b.type==='townhall' ;if town return; | | | let start=null;for let y=town.y-1;y<=town.y+3&& start;y++ for let x=town.x-1;x<=town.x+3;x++ if occupied x,y {start={x,y};break;}if start return; | | | const q= start ;reachable index start.x,start.y =true;for let i=0;i<q.length;i++ {const p=q i ;for const dx,dy of 1,0 , -1,0 , 0,1 , 0,-1 {let x=p.x+dx,y=p.y+dy,k=index x,y ;if inMap x,y && reachable k && occupied x,y {reachable k =true;q.push {x,y} ;}}} | | | } | | | function pathfind sx,sy,tx,ty,adjacent=false { | | | sx=Math.max 0,Math.min N-1,Math.floor sx ;sy=Math.max 0,Math.min N-1,Math.floor sy ;tx=Math.max 0,Math.min N-1,Math.floor tx ;ty=Math.max 0,Math.min N-1,Math.floor ty ; | | | let goals= ;if occupied tx,ty && adjacent goals= {x:tx,y:ty} ;else{for let r=1;r<=5&&goals.length===0;r++ for let y=ty-r;y<=ty+r;y++ for let x=tx-r;x<=tx+r;x++ if Math.abs x-tx ===r\|\|Math.abs y-ty ===r && occupied x,y goals.push {x,y} ;} | | | if goals.length return null;const goalSet=new Set goals.map p= index p.x,p.y ,start=index sx,sy ,prev=new Int32Array N N .fill -1 ,q= start ;prev start =start;let end=-1; | | | for let i=0;i<q.length;i++ {const k=q i ;if goalSet.has k {end=k;break;}let x=k%N,y=Math.floor k/N ;for const dx,dy of 1,0 , 0,1 , -1,0 , 0,-1 , 1,1 , -1,1 , 1,-1 , -1,-1 {const nx=x+dx,ny=y+dy,nk=index nx,ny ;if inMap nx,ny \|\|prev nk ==-1\|\|occupied nx,ny continue;if dx&&dy&& occupied x+dx,y \|\|occupied x,y+dy continue;prev nk =k;q.push nk ;}} | | | if end===-1 return null;let result= ;while end ==start {result.push {x:end%N+.5,y:Math.floor end/N +.5} ;end=prev end ;}return result.reverse ; | | | } | | | function pathToBuilding u,b {const d=defs b.type ;let best=null;for let y=b.y-1;y<=b.y+d.h;y++ for let x=b.x-1;x<=b.x+d.w;x++ if x===b.x-1\|\|y===b.y-1\|\|x===b.x+d.w\|\|y===b.y+d.h {if occupied x,y continue;const p=pathfind u.x,u.y,x,y ;if p&& best\|\|p.length<best.length best=p;}return best;} | | | function stopUnit u {u.path= ;u.task='idle';u.target=null;u.auto=false;u.work=0;u.exploreGoal=null;} | | | function orderMove list,x,y {let count=0;list.forEach u,i = {const ox=list.length 1? i%3-1 .8:0,oy=list.length 1? Math.floor i/3 %3-1 .8:0;const p=pathfind u.x,u.y,x+ox,y+oy ;if p {stopUnit u ;u.path=p;u.task='move';count++;}} ;if count {effects.push {type:'command',x,y,t:0,max:1,color:' d8df99'} ;}else notify 'There is no clear path to that location.',true ;} | | | function orderGather list,node {let count=0;list.filter u= u.type==='worker' .forEach u= {const p=pathfind u.x,u.y,node.x,node.y,true ;if p {stopUnit u ;u.target=node.id;if u.carry 0&& u.carryType ==node.type\|\|u.carry =10 deposit u ;else{u.path=p;u.task='gather';}count++;}} ;if count notify 'Select a worker to gather these resources.',true ;else effects.push {type:'command',x:node.x,y:node.y,t:0,max:1,color:' e5c773'} ;} | | | function orderBuild u,b {const p=pathToBuilding u,b ;if p===null return false;stopUnit u ;u.path=p;u.task='build';u.target=b.id;return true;} | | | function chooseExplorerGoal u { | | | let best=null,bestScore=-Infinity;const r=unitsDef u.type .vision; | | | for let y=0;y<N;y+=2 for let x=0;x<N;x+=2 {if reachable index x,y \|\|occupied x,y continue;let gain=0;for let dy=-r;dy<=r;dy+=2 for let dx=-r;dx<=r;dx+=2 {if dx dx+dy dy< r-.75 2&&inMap x+dx,y+dy && explored index x+dx,y+dy gain++;}if gain continue;const distance=Math.hypot x-u.x,y-u.y ;let score=gain/ 4+distance ;for const other of units if other ==u&&other.auto&&other.exploreGoal&&Math.hypot other.exploreGoal.x-x,other.exploreGoal.y-y <r score =.25;if score bestScore {bestScore=score;best={x,y};}} | | | // Inspect all walkable cells near the remaining fog to finish even tiny pockets. | | | if best&&exploredTotal<N N {for let k=0;k<N N&& best;k++ {if explored k continue;const fx=k%N,fy=Math.floor k/N ;let dist=Infinity;for let dy=-r+1;dy<r;dy++ for let dx=-r+1;dx<r;dx++ {const x=fx+dx,y=fy+dy;if inMap x,y &&dx dx+dy dy< r-.5 2&&reachable index x,y && occupied x,y {const dd=Math.hypot x-u.x,y-u.y ;if dd<dist {dist=dd;best={x,y};}}}}} | | | if best {const p=pathfind u.x,u.y,best.x,best.y ;if p {u.path=p;u.task='explore';u.exploreGoal=best;return;}} | | | stopUnit u ;if exploredTotal =N N notify 'The Green Reach is fully charted.' ;else notify 'No reachable unexplored land remains. Clear trees or extend your watchtowers.' ; | | | } | | | function orderExplore list {if list.length return;let count=0;list.forEach u= {stopUnit u ;u.auto=true;chooseExplorerGoal u ;if u.auto count++;} ;if count notify count===1?'Charting a course into the unknown.':count+' explorers are charting the frontier.' ;updateUI true ;} | | | function updateVision { | | | visible=new Array N N .fill false ;visionStrength=new Float32Array N N ; | | | const sources= ...units.map u= {x:u.x,y:u.y,r:unitsDef u.type .vision} ,...buildings.map b= {x:b.x+defs b.type .w/2,y:b.y+defs b.type .h/2,r:b.progress =1?defs b.type .vision:3} ; | | | for const s of sources for let y=Math.max 0,Math.floor s.y-s.r ;y<=Math.min N-1,s.y+s.r ;y++ for let x=Math.max 0,Math.floor s.x-s.r ;x<=Math.min N-1,s.x+s.r ;x++ {const dist=Math.hypot x+.5-s.x,y+.5-s.y ;if dist<s.r {const k=index x,y ;visible k =true;explored k =true;visionStrength k =Math.max visionStrength k ,Math.min 1, s.r-dist /1.7 ;}} | | | exploredTotal=explored.filter Boolean .length; | | | } | | | function validPlacement type,x,y {const d=defs type ;for let yy=y;yy<y+d.h;yy++ for let xx=x;xx<x+d.w;xx++ {if inMap xx,yy \|\| explored index xx,yy \|\|occupied xx,yy \|\|units.some u= Math.floor u.x ===xx&&Math.floor u.y ===yy return false;}return true;} | | | function startPlacement type {if paused return;const d=defs type ;if state.gold<d.gold\|\|state.wood<d.wood {notify 'Not enough resources for a '+d.name.toLowerCase +'.',true ;return;}if units.some u= u.type==='worker' {notify 'Train a worker at your Town Hall first.',true ;return;}placement=type;canvas.style.cursor='crosshair';$ 'world-hint' .innerHTML='Place '+d.name+' on clear, discovered land. <kbd ESC</kbd to cancel';$ 'world-hint' .classList.add 'show' ;updateUI true ;} | | | function cancelPlacement {placement=null;canvas.style.cursor='default';$ 'world-hint' .classList.remove 'show' ;updateUI true ;} | | | function placeBuilding x,y {const type=placement,d=defs type ;x=Math.floor x ;y=Math.floor y ;if validPlacement type,x,y {notify 'Choose clear, discovered ground for this building.',true ;return;}if state.gold<d.gold\|\|state.wood<d.wood {notify 'You need more resources to build this.',true ;return;} | | | const b=makeBuilding type,x,y,false ;buildings.push b ;rebuildBlockers ;const chosen=selected.filter s= s.kind==='unit' .map getEntity .filter u= u&&u.type==='worker' ;const candidates= ...new Set ...chosen,...units.filter u= u.type==='worker' .sort a,c = a.task==='idle'?-100:0 +Math.hypot a.x-x,a.y-y - c.task==='idle'?-100:0 +Math.hypot c.x-x,c.y-y ;const worker=candidates.find u= orderBuild u,b ;if worker {buildings.pop ;rebuildBlockers ;notify 'Your workers cannot reach this building site.',true ;return;} | | | state.gold-=d.gold;state.wood-=d.wood;selected= {kind:'building',id:b.id} ;cancelPlacement ;recomputeReachable ;notify d.name+' construction started.' ;updateVision ;updateUI true ;saveGame false ; | | | } | | | function train type {if paused return;const d=unitsDef type ,required=type==='worker'?'townhall':'barracks';let b=selected.map getEntity .find e= e&&e.type===required&&e.queue&&e.progress =1 \|\|buildings.find e= e.type===required&&e.progress =1 ;if b {notify 'Build a '+defs required .name.toLowerCase +' first.',true ;return;}if b.queue.length =5 {notify 'The training queue is full.',true ;return;}if reservedPop =populationCap {notify 'Your settlement needs more houses.',true ;return;}if state.gold<d.gold\|\|state.wood<d.wood {notify 'Not enough resources to train a '+d.name.toLowerCase +'.',true ;return;}state.gold-=d.gold;state.wood-=d.wood;b.queue.push {type,progress:0} ;notify d.name+' added to the training queue.' ;updateUI true ;} | | | function deposit u {const options=buildings.filter b= b.progress =1&& b.type==='townhall'\|\| u.carryType==='wood'&&b.type==='sawmill' ;options.sort a,b = Math.hypot a.x-u.x,a.y-u.y -Math.hypot b.x-u.x,b.y-u.y ;for const b of options {const p=pathToBuilding u,b ;if p ==null {u.path=p;u.task='deposit';u.dropoff=b.id;return;}}u.task='idle';notify 'This worker cannot reach a resource drop-off.',true ;} | | | function resumeGather u {let n=nodes.find n= n.id===u.target&&n.amount 0 ;if n {const nearby=nodes.filter n= n.amount 0&&n.type===u.carryType&&explored index Math.floor n.x ,Math.floor n.y .sort a,b = Math.hypot a.x-u.x,a.y-u.y -Math.hypot b.x-u.x,b.y-u.y ;n=nearby.find n= pathfind u.x,u.y,n.x,n.y,true ==null ;}if n {const p=pathfind u.x,u.y,n.x,n.y,true ;if p ==null {u.target=n.id;u.path=p;u.task='gather';return;}}u.task='idle';u.target=null;} | | | function update dt { | | | state.time+=dt; | | | for const b of buildings {if b.progress<1\|\| b.queue.length continue;let q=b.queue 0 ;q.progress+=dt/unitsDef q.type .time;if q.progress =1 {const d=defs b.type ;let spawn=null;for let y=b.y+d.h;y =b.y-1&& spawn;y-- for let x=b.x+d.w;x =b.x-1;x-- if occupied x,y {spawn={x:x+.5,y:y+.5};break;}if spawn {const u=makeUnit q.type,spawn.x,spawn.y ;units.push u ;b.queue.shift ;state.trained++;effects.push {type:'float',x:u.x,y:u.y,text:unitsDef u.type .name+' ready',t:0,max:2.5,color:' e0e3bb'} ;notify unitsDef u.type .name+' ready for orders.' ;if b.rally orderMove u ,b.rally.x,b.rally.y ;}}} | | | for const u of units {u.animation+=dt;let moving=false; | | | if u.path.length {let budget=unitsDef u.type .speed dt;while budget 0&&u.path.length {const p=u.path 0 ,dx=p.x-u.x,dy=p.y-u.y,dist=Math.hypot dx,dy ;if occupied Math.floor p.x ,Math.floor p.y {const end=u.path u.path.length-1 ,replacement=pathfind u.x,u.y,end.x,end.y ;u.path=replacement\|\| ;break;}if dist<=budget {u.x=p.x;u.y=p.y;u.path.shift ;budget-=dist;}else{u.x+=dx/dist budget;u.y+=dy/dist budget;budget=0;}}moving=true;} | | | if u.path.length continue; | | | if u.task==='move' u.task='idle'; | | | else if u.task==='explore' {if u.auto chooseExplorerGoal u ;else u.task='idle';} | | | else if u.task==='gather' { | | | const n=nodes.find n= n.id===u.target&&n.amount 0 ;if n {if u.carry 0 deposit u ;else resumeGather u ;continue;} | | | if Math.hypot u.x-n.x,u.y-n.y 2 {const p=pathfind u.x,u.y,n.x,n.y,true ;if p===null {u.task='idle';continue;}u.path=p;continue;} | | | u.work+=dt n.type==='wood'&&buildings.some b= b.type==='sawmill'&&b.progress =1 ?1.5:1 ; | | | if u.work =.7 {u.work=0;const amount=Math.min 2,n.amount,10-u.carry ;n.amount-=amount;u.carry+=amount;u.carryType=n.type;if n.amount<=0 {recomputeReachable ;effects.push {type:'float',x:n.x,y:n.y,text:'Cleared',t:0,max:1.8,color:' d8dab2'} ;}if u.carry =10\|\|n.amount<=0 deposit u ;} | | | }else if u.task==='deposit' {const b=buildings.find b= b.id===u.dropoff ;if b {deposit u ;continue;}const d=defs b.type ;if u.x<b.x-1.3\|\|u.y<b.y-1.3\|\|u.x b.x+d.w+1.3\|\|u.y b.y+d.h+1.3 {deposit u ;continue;}state u.carryType +=u.carry;state.gathered+=u.carry;effects.push {type:'float',x:u.x,y:u.y,text:'+'+u.carry+' '+ u.carryType==='wood'?'timber':'gold' ,t:0,max:2,color:u.carryType==='wood'?' d7e5aa':' f3d485'} ;u.carry=0;resumeGather u ; | | | }else if u.task==='build' {const b=buildings.find b= b.id===u.target ;if b\|\|b.progress =1 {u.task='idle';u.target=null;continue;}const d=defs b.type ;if u.x<b.x-1.3\|\|u.y<b.y-1.3\|\|u.x b.x+d.w+1.3\|\|u.y b.y+d.h+1.3 {if orderBuild u,b u.task='idle';continue;}b.progress=Math.min 1,b.progress+dt/d.time ;if b.progress =1 {notify d.name+' complete.' ;effects.push {type:'float',x:b.x+d.w/2,y:b.y+d.h/2,text:'Construction complete',t:0,max:3,color:' e2e8b4'} ;u.task='idle';u.target=null;updateVision ;updateUI true ;}} | | | } | | | effects.forEach e= e.t+=dt ;effects=effects.filter e= e.t<e.max ; | | | visionTimer+=dt;if visionTimer .25 {visionTimer=0;updateVision ;} | | | if state.won&&state.gathered =200&&buildings.some b= b.type==='barracks'&&b.progress =1 &&exploredTotal===N N {state.won=true;openModal 'victory-modal' ;saveGame false ;} | | | } | | | function poly c,points,fill,stroke,width=1 {c.beginPath ;points.forEach p,i = i?c.lineTo p 0 ,p 1 :c.moveTo p 0 ,p 1 ;c.closePath ;if fill {c.fillStyle=fill;c.fill ;}if stroke {c.strokeStyle=stroke;c.lineWidth=width;c.stroke ;}} | | | function ellipse c,x,y,rx,ry,fill {c.beginPath ;c.ellipse x,y,rx,ry,0,0,Math.PI 2 ;c.fillStyle=fill;c.fill ;} | | | function line c,x1,y1,x2,y2,color,width=1 {c.strokeStyle=color;c.lineWidth=width;c.beginPath ;c.moveTo x1,y1 ;c.lineTo x2,y2 ;c.stroke ;} | | | function isoBox c,x,y,w,d,h,top,left,right {poly c, x,y , x+w,y-w .5 , x+w+d,y+ d-w .5 , x+d,y+d .5 ,top ;poly c, x,y , x+d,y+d .5 , x+d,y+d .5-h , x,y-h ,left ;poly c, x+d,y+d .5 , x+w+d,y+ d-w .5 , x+w+d,y+ d-w .5-h , x+d,y+d .5-h ,right ;poly c, x,y-h , x+w,y-w .5-h , x+w+d,y+ d-w .5-h , x+d,y+d .5-h ,top ;} | | | function drawTree c,x,y,r,small=false { | | | const s=small?.7:.86+r .34; c.save ;c.translate x,y ;c.scale s,s ;ellipse c,10,4,21,10,' 12281848' ;line c,0,0,0,-39,' 4b4430',5 ;line c,-1,-4,-1,-36,' 807044',1.5 ; | | | const pine=r .24; | | | if pine {const colors=r .65? ' 355c35',' 4b7140',' 64844c' : ' 285737',' 3e6d40',' 587e48' ;for let i=0;i<3;i++ {const y=-16-i 15,w=24-i 5;poly c, -w,y+2 , 0,y-35 , w,y+2 , 4,y+12 ,colors 0 ;poly c, 0,y-35 , w,y+2 , 4,y+12 , -3,y+2 ,colors 1 ;poly c, -w,y+2 , 0,y-35 , -3,y+2 , -12,y+6 ,colors 2 ;line c,0,y-33,4,y+8,' 8a9d5633',1 ;}} | | | else{const foliage= ' 42673c',' 5c8048',' 76944e' ;poly c, -25,-31 , -27,-50 , -13,-68 , 7,-75 , 27,-61 , 33,-40 , 20,-23 , -3,-19 ,foliage 0 ;poly c, -27,-50 , -13,-68 , 7,-75 , 16,-59 , 3,-42 , -16,-37 ,foliage 2 ;poly c, 7,-75 , 27,-61 , 33,-40 , 10,-35 , 3,-42 , 16,-59 ,foliage 1 ;poly c, -16,-37 , 3,-42 , 10,-35 , -3,-19 , -25,-31 ,' 527440' ;} | | | c.restore ; | | | } | | | function drawGold c,x,y,r {c.save ;c.translate x,y ;ellipse c,6,1,30,13,' 17271955' ;poly c, -29,-2 , -26,-19 , -15,-29 , 4,-33 , 23,-23 , 30,-6 , 16,8 , -6,12 ,' 6b7460' ;poly c, -26,-19 , -15,-29 , 4,-33 , 7,-15 , -10,-7 ,' a4a78a' ;poly c, 4,-33 , 23,-23 , 30,-6 , 7,-15 ,' 858d72' ;poly c, -29,-2 , -26,-19 , -10,-7 , -6,12 ,' 828972' ;poly c, 7,-15 , 30,-6 , 16,8 , -6,12 , -10,-7 ,' 555f4e' ; | | | for const gx,gy,sz of -13,-19,6 , 4,-22,7 , 14,-9,5 , -6,-3,5 , 1,5,3 {poly c, gx-sz,gy , gx-2,gy-sz , gx+sz,gy-sz .5 , gx+sz .6,gy+sz .6 , gx-sz .5,gy+sz .7 ,' c29b4d' ;poly c, gx-sz,gy , gx-2,gy-sz , gx+sz,gy-sz .5 , gx,gy+1 ,' efd17a' ;line c,gx,gy+1,gx+sz .6,gy+sz .6,' 8a6d33',1 ;} | | | c.restore ;} | | | function drawRoof c,x,y,w,d,h,color=' a26442' { | | | // A ridge roof with individually drawn seams, lit from the upper left. | | | const a= x,y ,b= x+w,y-w .5 ,cc= x+w+d,y+ d-w .5 ,dd= x+d,y+d .5 ,r1= x+d .5,y+d .25-h ,r2= x+w+d .5,y-w .5+d .25-h ; | | | poly c, a,b,r2,r1 ,' bb8155',' 6d4b34',1 ;poly c, r1,r2,cc,dd ,color,' 704a32',1 ;poly c, a,r1,dd ,' d2b986',' 7b6548',1 ; | | | for let t=.16;t<1;t+=.16 {const ix=r1 0 + dd 0 -r1 0 t,iy=r1 1 + dd 1 -r1 1 t;line c,ix,iy,ix+w,iy-w .5,' 583e303d',1 ;} | | | for let t=.14;t<1;t+=.14 {line c,r1 0 +w t,r1 1 -w .5 t,dd 0 +w t,dd 1 -w .5 t,' d49c6336',1 ;} | | | line c,r1 0 ,r1 1 ,r2 0 ,r2 1 ,' ddac72',2 ;line c,dd 0 ,dd 1 ,cc 0 ,cc 1 ,' 593e2e',2 ; | | | } | | | function drawBuilding c,b,preview=false { | | | const d=defs b.type ,p=project b.x+d.w/2,b.y+d.h/2 ;c.save ;c.translate p.x,p.y ;let type=b.type; | | | if preview&&b.progress<1 {const w=d.w TW/2-5,h=d.h TH/2-3;poly c, -w,0 , 0,-h , w,0 , 0,h ,' 8a886052',' c2bb7b',1 ;for let i=-1;i<=1;i++ {line c,i 20-27,13,i 20-27,-31,' b49c63',3 ;line c,i 20-27,-25,i 20+27,2,' 91794b',2 ;}line c,-47,-7,26,-43,' c3ab6c',3 ;line c,27,29,27,-18,' bba269',4 ;isoBox c,5,9,14,9,6,' c2b78f',' 8f8464',' a49972' ;c.globalAlpha=.25+.5 b.progress;} | | | ellipse c,10,12,type==='townhall'?80:type==='barracks'?71:type==='tower'?32:53,type==='townhall'?33:25,' 182a1944' ; | | | if type==='townhall' { | | | poly c, -80,10 , -10,-25 , 80,17 , 11,51 ,' 928d6538' ;isoBox c,-59,0,63,49,8,' a09e7a',' 666b53',' 7a7d5d' ; | | | isoBox c,-53,-8,57,42,43,' cfc4a0',' afa887',' c6bb94' ; | | | for let i=0;i<3;i++ {line c,-53,-16-i 12,-11,5-i 12,' 827c5c44',1 ;line c,-11,5-i 12,46,-23-i 12,' 8c815c44',1 ;} | | | line c,-49,-47,-49,-6,' 716245',4 ;line c,-14,-29,-14,11,' 716245',4 ;line c,40,-56,40,-17,' 716245',4 ; | | | drawRoof c,-61,-51,68,53,25 ; | | | // Front door and covered entry. | | | poly c, -37,-11 , -37,-35 , -25,-29 , -25,-5 ,' 504e36' ;line c,-31,-9,-31,-29,' 776b49',1 ;ellipse c,-28,-19,1,1.5,' e4c875' ; | | | isoBox c,-42,4,18,14,4,' c1b792',' 7a7c5b',' 929477' ; | | | for const x of 4,24 {const y=-x .5;poly c, x,-20+y , x+9,-24.5+y , x+9,-38+y , x,-33.5+y ,' 4c6354' ;line c,x+4.5,-22+y,x+4.5,-36+y,' d0b884',1.5 ;line c,x,-28+y,x+9,-32.5+y,' d0b884',1 ;} | | | // Small bell tower. | | | isoBox c,-8,-76,18,17,23,' ded2a9',' aaa080',' c9bd93' ;poly c, 1,-84 , 1,-97 , 8,-100.5 , 8,-87.5 ,' 4f5947' ;drawRoof c,-12,-102,24,24,20,' 527b6a' ;line c,12,-129,12,-150,' b4ad7a',1.8 ;const flutter=Math.sin state?.time 2\|\|0 2;poly c, 13,-150 , 34,-145+flutter , 28,-139+flutter , 13,-142 ,' dbbc72' ; | | | // Settlement banner. | | | line c,45,-14,45,-61,' 5d6041',2 ;poly c, 45,-59 , 57,-53 , 57,-31 , 51,-36 , 45,-36 ,' 477665' ;line c,51,-54,51,-36,' d5c179',2 ; | | | isoBox c,36,7,12,9,9,' b29760',' 796844',' 917c4e' ; | | | }else if type==='house' { | | | isoBox c,-40,-1,39,33,5,' a9a77d',' 71785a',' 888e6a' ;isoBox c,-34,-7,31,29,29,' d0c198',' b0a37f',' cabb91' ;drawRoof c,-41,-36,43,38,25,' 9b6549' ; | | | line c,-31,-32,-31,-8,' 77674b',3 ;line c,-7,-20,-7,3,' 77674b',3 ;poly c, -25,-9 , -25,-27 , -15,-22 , -15,-4 ,' 51553b' ;poly c, 3,-10 , 13,-15 , 13,-25 , 3,-20 ,' 62735d' ;line c,8,-12,8,-22,' d2bc83',1.5 ;line c,3,-15,13,-20,' d2bc83',1 ;isoBox c,15,-55,7,7,18,' b0ad8e',' 818773',' a0a38a' ; | | | }else if type==='barracks' { | | | isoBox c,-57,1,68,37,7,' a09e7d',' 6a755a',' 828b68' ;isoBox c,-50,-6,59,31,31,' c6bd96',' 9a9c7a',' b6b48c' ;drawRoof c,-58,-36,76,39,24,' 5b7e6c' ; | | | poly c, -43,-7 , -43,-29 , -28,-22 , -28,0 ,' 4c5742' ;line c,-36,-26,-36,-5,' b5a87c',2 ;for const x of -7,16,35 {const y=-x .5;poly c, x,-12+y , x+6,-15+y , x+6,-25+y , x,-22+y ,' 4c6351' ;} | | | line c,40,11,40,-47,' 80764b',3 ;poly c, 41,-47 , 61,-43 , 59,-19 , 49,-15 , 41,-24 ,' bda462' ;line c,48,-39,54,-24,' ece0ae',2 ;line c,55,-37,47,-27,' ece0ae',2 ;isoBox c,-3,23,21,10,9,' ae9867',' 766a49',' 91805a' ; | | | }else if type==='sawmill' { | | | isoBox c,-40,1,42,32,5,' 9da077',' 6d7858',' 838e65' ;for const x,y of -32,-3 , -3,12 , 30,-4 , 1,-18 line c,x,y,x,y-37,' a48d58',5 ;drawRoof c,-43,-38,44,39,19,' 83744e' ; | | | for let i=0;i<4;i++ {line c,-32+i 5,14+i 2,1+i 5,-2+i 2,' 6a583c',7 ;ellipse c,-32+i 5,14+i 2,3.5,4,' c0a474' ;ellipse c,-32+i 5,14+i 2,1.6,2,' 8d734c' ;} | | | c.save ;c.translate 26,-4 ;c.scale .7,1 ;c.beginPath ;c.arc 0,0,15,0,Math.PI 2 ;c.strokeStyle=' 858d77';c.lineWidth=5;c.stroke ;for let i=0;i<8;i++ {const a=i Math.PI/4+ state?.time\|\|0 .1;line c,0,0,Math.cos a 15,Math.sin a 15,' a0aa8b',2 ;}c.restore ; | | | }else if type==='tower' { | | | isoBox c,-22,3,23,22,7,' a4a883',' 788361',' 8f9974' ;for const x,y of -15,0 , 0,8 , 16,0 , 0,-8 {line c,x,y,x .85,y-65,' 947d4b',5 ;}line c,-15,-8,13,-54,' b19a62',3 ;line c,14,-6,-12,-52,' aa925b',3 ;isoBox c,-23,-55,24,23,14,' a39969',' 6f7652',' 8a9064' ;drawRoof c,-30,-71,31,29,25,' 557b62' ;line c,0,-103,0,-118,' b2a675',1.5 ;poly c, 1,-118 , 17,-114 , 13,-107 , 1,-110 ,' d4b974' ; | | | } | | | c.restore ; | | | } | | | function drawUnit c,u,portrait=false { | | | const p=project u.x,u.y ;c.save ;c.translate p.x,p.y ;const moving=u.path.length 0,bob=moving?Math.sin u.animation 15 1.4:Math.sin u.animation 2 .3; | | | ellipse c,2,2,9,4,' 19291b65' ;c.translate 0,bob ;const walk=moving?Math.sin u.animation 15 3:0; | | | line c,-2,-4,-3+walk,1,' 443f32',3 ;line c,3,-4,3-walk,1,' 443f32',3 ; | | | if u.type==='worker' { | | | poly c, -6,-16 , 3,-18 , 7,-11 , 5,-4 , -4,-3 , -7,-10 ,' bdad78' ;poly c, -6,-14 , -2,-12 , -1,-4 , -5,-4 ,' 737a52' ;poly c, 1,-15 , 6,-13 , 5,-4 , 0,-5 ,' 809472' ;ellipse c,0,-20,5,5,' d8bc8e' ;ellipse c,0,-23,7,2.8,' bda675' ;poly c, -4,-23 , -3,-27 , 3,-27 , 5,-23 ,' dac18c' ; | | | const working=u.task==='gather'&& moving\|\|u.task==='build'&& moving,a=working?Math.sin u.animation 11 .7:0; | | | c.save ;c.translate 5,-12 ;c.rotate a ;line c,-1,2,9,-6,' d4ba85',3 ;line c,8,-2,13,-17,' 877342',2 ;line c,7,-17,16,-14,' afb8a2',3 ;c.restore ; | | | }else if u.type==='scout' { | | | poly c, -5,-17 , 4,-17 , 8,-2 , -7,-2 ,' 446e57' ;poly c, -5,-16 , -1,-14 , 1,-3 , -7,-2 ,' 6a8d65' ;ellipse c,1,-20,4,4,' d2b485' ;poly c, -6,-21 , -4,-28 , 2,-30 , 7,-22 , 1,-24 ,' 6f926a' ;line c,-6,-14,4,-6,' b7a575',2 ;line c,8,-3,10,-26,' a09262',1.5 ;c.strokeStyle=' b7ab79';c.lineWidth=1.5;c.beginPath ;c.arc 8,-14,10,-1.5,1.5 ;c.stroke ; | | | }else{ | | | poly c, -6,-16 , 5,-17 , 7,-5 , -5,-4 ,' 94a59a' ;poly c, -5,-15 , -2,-13 , -1,-4 , -6,-4 ,' 456854' ;ellipse c,0,-20,5,5,' c5b795' ;poly c, -6,-20 , -5,-27 , 2,-29 , 6,-24 , 5,-20 ,' aeb9a7' ;line c,-3,-25,4,-24,' dae0c1',1 ;poly c, -9,-15 , -3,-12 , -4,-3 , -9,0 , -12,-6 ,' 587c63',' bdc197',1 ;line c,8,-4,12,-24,' bfcabd',2.5 ;line c,6,-9,13,-8,' ac9e68',2 ; | | | } | | | if u.carry 0 {if u.carryType==='wood' {line c,-9,-9,-9,-19,' 77613b',5 ;line c,-7,-9,-7,-18,' bfa271',2 ;}else{ellipse c,-8,-9,4,5,' c8a458' ;}} | | | c.restore ; | | | } | | | const grassColors= ' 6f8150',' 728452',' 748553',' 708151',' 768653',' 798956',' 758653',' 6b7e4e' ; | | | function drawTerrain c,t {const p=project t.x,t.y ,x=p.x,y=p.y; | | | if t.water {poly c, x,y , x+32,y+16 , x,y+32 , x-32,y+16 , ' 4b7970',' 4d7d74',' 527f76' Math.floor t.r 3 ;const wave=Math.sin state.time 1.4+t.x+t.y 4;line c,x-9+wave,y+12,x+5+wave,y+12,' 92b4a13e',1 ;line c,x+1-wave,y+23,x+10-wave,y+23,' a5c6ac30',1 ;return;} | | | if t.bridge {poly c, x,y , x+32,y+16 , x,y+32 , x-32,y+16 ,' a59a70' ;for let i=0;i<5;i++ line c,x-25+i 6,y+13+i 3,x+6+i 6,y-3+i 3,' 6e6d4d',1.5 ;return;} | | | let color=grassColors Math.floor t.r grassColors.length ;const path= Math.abs t.x-22 <1&&t.y =23&&t.y<30 \|\| t.y===25&&t.x =17&&t.x<=23 ;if path color= ' 9b9866',' 999769',' 939263' Math.floor t.r 3 ; | | | poly c, x,y-.3 , x+32.4,y+16 , x,y+32.3 , x-32.4,y+16 ,color ; | | | for let i=0;i<3;i++ {const rx=hash t.x,t.y,i 35-17,ry=hash t.y,t.x,i+6 12+10;line c,x+rx,y+ry,x+rx+3,y+ry+1,' b4bd7937',.8 ;if t.r .55 {line c,x+rx,y+ry,x+rx-1,y+ry-2,' 445b3438',.8 ;}} | | | if t.flowers&& path {for let i=0;i<3;i++ {const xx=x+hash t.x,t.y,i+10 25-12,yy=y+hash t.x,t.y,i+20 10+10;ellipse c,xx,yy,1,.65,t.r .5?' d8d09b88':' b8bfd477' ;}} | | | if t.r<.028&& path {poly c, x+5,y+19 , x+8,y+14 , x+14,y+15 , x+16,y+20 , x+10,y+22 ,' 939c77' ;poly c, x+5,y+19 , x+8,y+14 , x+14,y+15 , x+10,y+18 ,' b3b795' ;} | | | } | | | function drawSelection c,s {const e=getEntity s ;if e return;const p=project e.x+ s.kind==='building'?defs e.type .w/2:0 ,e.y+ s.kind==='building'?defs e.type .h/2:0 ;c.save ;c.strokeStyle=' d2d995';c.lineWidth=1.5;if s.kind==='building' {const d=defs e.type ,a=project e.x-.1,e.y-.1 ,b=project e.x+d.w+.1,e.y-.1 ,cc=project e.x+d.w+.1,e.y+d.h+.1 ,dd=project e.x-.1,e.y+d.h+.1 ;poly c, a.x,a.y , b.x,b.y , cc.x,cc.y , dd.x,dd.y ,' e7e39a10',' d6d994',1.5 ;}else{c.beginPath ;c.ellipse p.x,p.y+1,s.kind==='node'?32:12,s.kind==='node'?15:6,0,0,Math.PI 2 ;c.fillStyle=' d3e09812';c.fill ;c.stroke ;}c.restore ;} | | | function draw { | | | ctx.setTransform dpr,0,0,dpr,0,0 ;ctx.fillStyle=' 202e25';ctx.fillRect 0,0,viewW,viewH ;ctx.save ;ctx.translate viewW/2,viewH .42 ;ctx.scale cam.zoom,cam.zoom ;ctx.translate -cam.x,-cam.y ; | | | const margin=150,worldLeft=cam.x-viewW/ 2 cam.zoom -margin,worldRight=cam.x+viewW/ 2 cam.zoom +margin,worldTop=cam.y-viewH .42/cam.zoom-margin,worldBottom=cam.y+viewH .58/cam.zoom+margin; | | | const tileOnScreen=t= {const p=project t.x,t.y ;return p.x worldLeft&&p.x<worldRight&&p.y worldTop&&p.y<worldBottom;}; | | | // Paint the remembered terrain first; objects retain their silhouettes beneath the mist. | | | for const t of terrain {if tileOnScreen t continue;const k=index t.x,t.y ;if explored k drawTerrain ctx,t ;else{const p=project t.x,t.y ;poly ctx, p.x,p.y-.5 , p.x+32.5,p.y+16 , p.x,p.y+32.5 , p.x-32.5,p.y+16 ,grassColors Math.floor t.r grassColors.length ;}} | | | if showGrid\|\|placement {for const t of terrain {if tileOnScreen t \|\| explored index t.x,t.y continue;const p=project t.x,t.y ;poly ctx, p.x,p.y , p.x+32,p.y+16 , p.x,p.y+32 , p.x-32,p.y+16 ,null,' d0d79b27',.65 ;}} | | | for const s of selected drawSelection ctx,s ; | | | const renderables= ; | | | for const n of nodes {if n.amount<=0\|\| explored index Math.floor n.x ,Math.floor n.y continue;renderables.push {kind:'node',e:n,depth:n.x+n.y} ;} | | | for const b of buildings renderables.push {kind:'building',e:b,depth:b.x+b.y+defs b.type .w/2+defs b.type .h/2+.4} ; | | | for const u of units renderables.push {kind:'unit',e:u,depth:u.x+u.y} ;renderables.sort a,b = a.depth-b.depth ; | | | for const o of renderables {const e=o.e,p=project e.x,e.y ;if p.x<worldLeft\|\|p.x worldRight\|\|p.y<worldTop\|\|p.y worldBottom continue; | | | if o.kind==='node' {if e.type==='wood' drawTree ctx,p.x,p.y,e.r ;else drawGold ctx,p.x,p.y,e.r ;}else if o.kind==='building' drawBuilding ctx,e ;else drawUnit ctx,e ; | | | } | | | // Smooth fog is painted as a low-resolution interpolated light field. | | | drawFog ; | | | // Selection information stays clear of terrain and mist. | | | for const s of selected {const e=getEntity s ;if e continue;const b=s.kind==='building',p=project e.x+ b?defs e.type .w/2:0 ,e.y+ b?defs e.type .h/2:0 ,top=b? e.type==='townhall'?163:e.type==='tower'?130:96 :s.kind==='unit'?40:e.type==='wood'?90:44; | | | if s.kind==='unit' {ctx.fillStyle=' 273d24';ctx.fillRect p.x-12,p.y-top,24,3 ;ctx.fillStyle=' c4d991';ctx.fillRect p.x-12,p.y-top,24 e.hp/unitsDef e.type .hp,3 ;} | | | else if b {const label=defs e.type .name+ e.progress<1?' · '+Math.floor e.progress 100 +'%':'' ;ctx.font='10px "DM Sans",sans-serif';const w=ctx.measureText label .width+23;ctx.fillStyle=' 1b2a22dd';ctx.beginPath ;ctx.roundRect p.x-w/2,p.y-top-9,w,24,4 ;ctx.fill ;ctx.strokeStyle=' b0be7866';ctx.lineWidth=.8;ctx.stroke ;ctx.textAlign='center';ctx.fillStyle=' dce5c1';ctx.fillText label,p.x,p.y-top+7 ;ctx.textAlign='start';if e.progress<1 {ctx.fillStyle=' d7bc75';ctx.fillRect p.x-w/2+3,p.y-top+12, w-6 e.progress,2 ;}} | | | } | | | if placement&&mouse.inside {const mp=unproject mouse.x,mouse.y ,x=Math.floor mp.x ,y=Math.floor mp.y ,d=defs placement ,valid=validPlacement placement,x,y ;const a=project x,y ,b=project x+d.w,y ,cc=project x+d.w,y+d.h ,dd=project x,y+d.h ;poly ctx, a.x,a.y , b.x,b.y , cc.x,cc.y , dd.x,dd.y ,valid?' d7e89e44':' d38e7944',valid?' d4e3a1':' eeaa8a',2 ;ctx.globalAlpha=.55;drawBuilding ctx,{type:placement,x,y,progress:1},true ;ctx.globalAlpha=1;} | | | for const e of effects {const p=project e.x,e.y ,f=e.t/e.max;ctx.globalAlpha=1-f;if e.type==='command' {ctx.strokeStyle=e.color;ctx.lineWidth=2;ctx.beginPath ;ctx.ellipse p.x,p.y,9+f 20,4+f 10,0,0,Math.PI 2 ;ctx.stroke ;for let i=0;i<4;i++ {const a=i Math.PI/2;line ctx,p.x+Math.cos a 5,p.y+Math.sin a 3,p.x+Math.cos a 11,p.y+Math.sin a 6,e.color,1 ;}}else{ctx.font='bold 11px "DM Sans",sans-serif';ctx.textAlign='center';ctx.fillStyle=' 142416';ctx.fillText e.text,p.x+1,p.y-37-f 30+1 ;ctx.fillStyle=e.color;ctx.fillText e.text,p.x,p.y-37-f 30 ;ctx.textAlign='start';}ctx.globalAlpha=1;} | | | ctx.restore ; | | | if drag&&drag.mode==='select'&&drag.moved {const x=Math.min drag.startX,mouse.x ,y=Math.min drag.startY,mouse.y ,w=Math.abs mouse.x-drag.startX ,h=Math.abs mouse.y-drag.startY ;ctx.fillStyle=' c5d59415';ctx.strokeStyle=' c5d594aa';ctx.lineWidth=1;ctx.fillRect x,y,w,h ;ctx.strokeRect x+.5,y+.5,w,h ;} | | | drawMinimap ; | | | } | | | const fogCanvas=document.createElement 'canvas' ;fogCanvas.width=N+2;fogCanvas.height=N+2;const fctx=fogCanvas.getContext '2d' ,fogImage=fctx.createImageData N+2,N+2 ; | | | function drawFog { | | | const data=fogImage.data;for let y=0;y<N+2;y++ for let x=0;x<N+2;x++ {const k=index x-1,y-1 ,i= y N+2 +x 4,valid=inMap x-1,y-1 ;data i =24;data i+1 =39;data i+2 =29;data i+3 = valid?225: explored k ?213:Math.round visible k ?15+ 1-visionStrength k 86:122 ;} | | | fctx.putImageData fogImage,0,0 ;ctx.save ;ctx.transform TW/2,TH/2,-TW/2,TH/2,0,0 ;ctx.imageSmoothingEnabled=true;ctx.drawImage fogCanvas,-1,-1,N+2,N+2 ;ctx.restore ; | | | } | | | function drawMinimap { | | | const w=mini.width,h=mini.height;mctx.clearRect 0,0,w,h ;mctx.fillStyle=' 152319';mctx.fillRect 0,0,w,h ;const scale=Math.min w/ N 2 ,h/N .91,ox=w/2,oy= h-N scale /2; | | | for const t of terrain {const k=index t.x,t.y ;if explored k continue;const x=ox+ t.x-t.y scale,y=oy+ t.x+t.y scale/2;mctx.fillStyle=t.water?' 648e80':visible k ?' 859c62':' 455e3b';mctx.fillRect x-scale,y,scale 2+.4,scale+.4 ;} | | | for const n of nodes {if n.type =='gold'\|\|n.amount<=0\|\| explored index Math.floor n.x ,Math.floor n.y continue;mctx.fillStyle=' c9b269';mctx.fillRect ox+ n.x-n.y scale-1.5,oy+ n.x+n.y scale/2-1.5,3,3 ;} | | | for const b of buildings {const d=defs b.type ,x=b.x+d.w/2,y=b.y+d.h/2;mctx.fillStyle=b.progress<1?' b39b63':' dfd7a1';mctx.fillRect ox+ x-y scale-3,oy+ x+y scale/2-2,6,4 ;} | | | for const u of units {mctx.fillStyle=selected.some s= s.kind==='unit'&&s.id===u.id ?' f3eeb6':' c1d499';mctx.fillRect ox+ u.x-u.y scale-1,oy+ u.x+u.y scale/2-1,2.5,2.5 ;} | | | const corners= 0,0 , viewW,0 , viewW,Math.max 0,viewH-240 , 0,Math.max 0,viewH-240 .map x,y = {const p=unproject x,y ;return ox+ p.x-p.y scale,oy+ p.x+p.y scale/2 ;} ;poly mctx,corners,' e9df9f07',' d9d5a699',.8 ; | | | } | | | function makePortrait type {const c=document.createElement 'canvas' ;c.width=160;c.height=140;const g=c.getContext '2d' ;if defs type {g.translate 80,type==='tower'?118:112 ;const scale=type==='townhall'?.72:type==='barracks'?.94:type==='tower'?.86:1.12;g.scale scale,scale ;const d=defs type ,p=project d.w/2,d.h/2 ;g.translate -p.x,-p.y ;drawBuilding g,{type,x:0,y:0,progress:1},true ;}else if unitsDef type {g.translate 80,116 ;g.scale 3.1,3.1 ;drawUnit g,{...makeUnit type,0,0,0 ,animation:0},true ;}else if type==='gold' {g.translate 80,102 ;g.scale 1.8,1.8 ;drawGold g,0,0,.5 ;}else if type==='wood' {g.translate 80,126 ;g.scale 1.35,1.35 ;drawTree g,0,0,.7 ;}else{g.strokeStyle=' b9c690';g.lineWidth=3;g.beginPath ;g.arc 80,70,31,0,Math.PI 2 ;g.stroke ;poly g, 94,48 , 86,76 , 63,89 , 71,62 ,' bdc993' ;}return c.toDataURL ;} | | | let portraits={}; | | | function actionButton label,ic,key,action,cost='',disabled=false {return '<button class="action-card" data-action="'+action+'" title="'+label+' '+key+' " '+ disabled?'disabled':'' +' <span class="keycap" '+key+'</span '+icon ic +'<span class="action-label" '+label+'</span '+ cost?'<span class="action-cost" '+cost+'</span ':'' +'</button ';} | | | function updateUI force=false { | | | $ 'gold' .textContent=Math.floor state.gold .toLocaleString ;$ 'wood' .textContent=Math.floor state.wood .toLocaleString ;$ 'population' .textContent=units.length;$ 'capacity' .textContent=populationCap ; | | | const goldWorkers=units.filter u= u.type==='worker'&& u.task==='gather'\|\|u.task==='deposit' &&nodes.find n= n.id===u.target ?.type==='gold' .length,woodWorkers=units.filter u= u.type==='worker'&& u.task==='gather'\|\|u.task==='deposit' &&nodes.find n= n.id===u.target ?.type==='wood' .length; | | | $ 'gold-rate' .textContent=goldWorkers?'↗ '+goldWorkers:'';$ 'wood-rate' .textContent=woodWorkers?'↗ '+woodWorkers:''; | | | const percent=exploredTotal===N N?100:Math.floor exploredTotal/ N N 100 ;$ 'explore-count' .textContent=percent+'%';$ 'explored-label' .textContent=percent+'%';$ 'minimap-percent' .textContent=percent+'%';$ 'exploration-bar' .style.width=percent+'%';$ 'gather-count' .textContent=Math.min 200,state.gathered +' / 200';const barracks=buildings.some b= b.type==='barracks'&&b.progress =1 ;$ 'barracks-count' .textContent= barracks?1:0 +' / 1'; | | | for const id,done of 'quest-gather',state.gathered =200 , 'quest-build',barracks , 'quest-explore',exploredTotal===N N {$ id .classList.toggle 'done',done ;$ id .querySelector '.check' .textContent=done?'✓':'';} | | | $ 'clock' .textContent=Math.floor state.time/60 .toString .padStart 2,'0' +':'+Math.floor state.time%60 .toString .padStart 2,'0' ;$ 'day' .textContent=1+Math.floor state.time/300 ;$ 'zoom-label' .textContent=Math.round cam.zoom 100 +'%'; | | | selected=selected.filter s= getEntity s ;const entry=selected 0 ,e=entry&&getEntity entry ,kind=entry?.kind,selectionKey=JSON.stringify selected + e?.progress<1?'building':'ready' ; | | | if force\|\|selectionKey ==lastSelectionKey {lastSelectionKey=selectionKey;$ 'selection-count' .textContent=String selected.length .padStart 2,'0' ;const type=selected.length 1?'group':e?.type\|\|'empty';$ 'portrait' .src=portraits type \|\|portraits.scout;$ 'portrait' .alt=selected.length 1?'Selected units':e? defs e.type \|\|unitsDef e.type ?.name\|\|e.type:'No selection'; | | | if selected.length 1 {$ 'selection-name' .textContent=selected.length+' units';$ 'selection-type' .textContent='Your people · Group selected';$ 'selection-desc' .textContent='Right-click to move together. Workers can gather resources and build.';} | | | else if e {const d=defs e.type \|\|unitsDef e.type ;$ 'selection-name' .textContent=d?.name\|\| e.type==='wood'?'Ancient pine':'Gold deposit' ;$ 'selection-type' .textContent=d?.type\|\| kind==='unit'?'Your people · '+ e.type==='worker'?'Economy':'Exploration' :'Resource · '+ e.type==='wood'?'Timber':'Gold' ;$ 'selection-desc' .textContent=d?.desc\|\|'Select workers and right-click here to gather. Resources are delivered to your settlement.';} | | | else{$ 'selection-name' .textContent='The Green Reach';$ 'selection-type' .textContent='A world waiting to be yours';$ 'selection-desc' .textContent='Select a building or one of your people to see available commands.';} | | | let actions='',title='FIELD COMMANDS',note='Right-click the ground to move.'; | | | if kind==='building'&&e.progress<1 {title='CONSTRUCTION';actions=actionButton 'Assign worker','hammer','R','assign' ;note='Workers make progress while on site.';} | | | else if kind==='building'&&e.type==='townhall' {title='RECRUIT & COMMAND';actions=actionButton 'Worker','worker','R','worker','50 gold' +actionButton 'Find idle','people','I','idle' ;note='Every great settlement starts small.';} | | | else if kind==='building'&&e.type==='barracks' {title='TRAIN YOUR PEOPLE';actions=actionButton 'Scout','scout','R','scout','80 G · 20 T' +actionButton 'Soldier','sword','T','soldier','100 G · 30 T' ;note='Right-click ground to set a rally point.';} | | | else if kind==='unit' {actions=actionButton 'Explore','compass','E','explore' +actionButton 'Stop','stop','X','stop' ;if e.type==='worker'&&selected.length===1 note='Right-click a tree or gold to gather.';} | | | else if kind==='node' {title='GATHER RESOURCES';actions=actionButton 'Send worker','worker','R','gather' ;note='A nearby worker will gather here.';} | | | else{actions=actionButton 'Find idle','people','I','idle' +actionButton 'Go home','home','H','home' ;note=kind==='building'?'Your settlement is growing.':'Select a unit to give it orders.';} | | | $ 'action-title' .textContent=title;$ 'actions' .innerHTML=actions;$ 'context-note' .innerHTML=icon kind==='unit'?'flag':'people' +note; | | | } | | | if e {let ratio=1,label='';if kind==='building' {ratio=e.progress<1?e.progress:1;label=e.progress<1?'Building · '+Math.floor e.progress 100 +'%':e.hp.toLocaleString +' / '+defs e.type .hp.toLocaleString ;}else if kind==='unit' {ratio=e.hp/unitsDef e.type .hp;label=selected.length 1?selected.length+' units selected':e.hp+' / '+unitsDef e.type .hp;$ 'selection-type' .textContent=selected.length 1?'Your people · Group selected': {idle:'Awaiting your orders',move:'On the move',gather:'Gathering '+ nodes.find n= n.id===e.target ?.type==='wood'?'timber':'gold' ,deposit:'Bringing resources home',build:'Building your settlement',explore:'Exploring the frontier'} e.task \|\|'Your people' ;}else{ratio=e.amount/ e.type==='gold'?3000:400 ;label=Math.floor e.amount +' '+ e.type==='wood'?'timber':'gold' +' remaining';}$ 'health-fill' .style.width=Math.max 0,ratio 100 +'%';$ 'health-text' .textContent=label;}else{$ 'health-fill' .style.width='0';$ 'health-text' .textContent='Explore. Build. Belong.';} | | | $ 'queue-label' .textContent=e?.queue?.length?'QUEUED '+e.queue.length+'/5':'';document.querySelectorAll '.queue-track' .forEach el= el.remove ;if e?.queue?.length {const btn=$ 'actions' .querySelector ' data-action="'+e.queue 0 .type+'" ' ;if btn {const p=document.createElement 'div' ;p.className='queue-track';p.style.width=Math.min 100,e.queue 0 .progress 100 +'%';btn.append p ;}} | | | document.querySelectorAll '.build-card' .forEach b= {b.classList.toggle 'active',b.dataset.build===placement ;const d=defs b.dataset.build ;b.style.opacity=state.gold<d.gold\|\|state.wood<d.wood?'.5':'1';} ; | | | } | | | function handleAction action {const list=selected.filter s= s.kind==='unit' .map getEntity .filter Boolean ;if 'worker','scout','soldier' .includes action train action ;else if action==='explore' orderExplore list ;else if action==='stop' {list.forEach stopUnit ;updateUI true ;}else if action==='idle' findIdle ;else if action==='home' home ;else if action==='assign' {const b=getEntity selected 0 ;const candidates=units.filter u= u.type==='worker' .sort a,c = a.task==='idle'?0:100 +Math.hypot a.x-b.x,a.y-b.y - c.task==='idle'?0:100 +Math.hypot c.x-b.x,c.y-b.y ;if candidates.some u= orderBuild u,b notify 'A worker is on the way.' ;else notify 'No worker can reach this construction site.',true ;}else if action==='gather' {const n=getEntity selected 0 ;const candidates=units.filter u= u.type==='worker' .sort a,b = a.task==='idle'?0:100 +Math.hypot a.x-n.x,a.y-n.y - b.task==='idle'?0:100 +Math.hypot b.x-n.x,b.y-n.y ;const u=candidates.find u= pathfind u.x,u.y,n.x,n.y,true ==null ;if u {orderGather u ,n ;selected= {kind:'unit',id:u.id} ;updateUI true ;}else notify 'No worker can reach these resources.',true ;}} | | | function findIdle {const idle=units.filter u= u.type==='worker'&&u.task==='idle' ,current=selected 0 ?.id,i=idle.findIndex u= u.id===current ,u=idle i+1 %idle.length ;if u {notify 'All workers have a task.' ;return;}selected= {kind:'unit',id:u.id} ;centerSelection ;updateUI true ;} | | | function centerSelection {const e=selected 0 &&getEntity selected 0 ;if e return;const d=defs e.type ,p=project e.x+ d?d.w/2:0 ,e.y+ d?d.h/2:0 ;cam.x=p.x;cam.y=p.y+20;} | | | function hitTest sx,sy {let best=null,bd=Infinity;for const u of units {const p=screen u.x,u.y ,distance=Math.hypot sx-p.x, sy- p.y-12 cam.zoom .8 ;if distance<18 cam.zoom&&distance<bd {bd=distance;best={kind:'unit',id:u.id};}}if best return best; | | | const wp=unproject sx,sy ;for const b of ...buildings .sort a,b = b.x+b.y-a.x-a.y {const d=defs b.type ;if wp.x =b.x&&wp.x<=b.x+d.w&&wp.y =b.y&&wp.y<=b.y+d.h return{kind:'building',id:b.id};const p=screen b.x+d.w/2,b.y+d.h/2 ;if Math.abs sx-p.x < b.type==='tower'?21:41 cam.zoom&&sy<p.y+9 cam.zoom&&sy p.y- b.type==='townhall'?125:b.type==='tower'?100:65 cam.zoom return{kind:'building',id:b.id};} | | | for const n of nodes {if n.amount<=0\|\| explored index Math.floor n.x ,Math.floor n.y continue;const p=screen n.x,n.y ,dist=Math.hypot sx-p.x , sy- p.y- n.type==='wood'?34:13 cam.zoom .65 ;if dist< n.type==='wood'?25:27 cam.zoom&&dist<bd {bd=dist;best={kind:'node',id:n.id};}} | | | return best; | | | } | | | function command sx,sy {if paused return;if placement {cancelPlacement ;return;}const point=unproject sx,sy ,hit=hitTest sx,sy ,list=selected.filter s= s.kind==='unit' .map getEntity .filter Boolean ;if inMap Math.floor point.x ,Math.floor point.y {notify 'That is beyond the edge of the Reach.',true ;return;}if list.length {if hit?.kind==='node' {orderGather list,getEntity hit ;const nonWorkers=list.filter u= u.type =='worker' ;if nonWorkers.length orderMove nonWorkers,point.x,point.y ;}else if hit?.kind==='building'&&getEntity hit .progress<1 {let assigned=0;list.filter u= u.type==='worker' .forEach u= {if orderBuild u,getEntity hit assigned++;} ;if assigned notify 'Select a worker to finish construction.',true ;}else orderMove list,point.x,point.y ;updateUI true ;}else if selected 0 ?.kind==='building' {const b=getEntity selected 0 ;if b.type==='townhall'\|\|b.type==='barracks' {b.rally={x:point.x,y:point.y};effects.push {type:'command',...point,t:0,max:1.5,color:' ddbe78'} ;notify 'Rally point set. New units will gather here.' ;}}else notify 'Select a unit before giving an order.' ;} | | | function selectAt sx,sy,add=false,isTouch=false {if paused return;const p=unproject sx,sy ;if placement {placeBuilding p.x,p.y ;return;}const hit=hitTest sx,sy ;if isTouch&&selected.some s= s.kind==='unit' && hit\|\|hit.kind==='node'\|\|hit.kind==='building'&&getEntity hit .progress<1 {command sx,sy ;return;}if hit {if add&&hit.kind==='unit' {selected=selected.filter s= s.kind==='unit' ;const i=selected.findIndex s= s.id===hit.id ;if i =0 selected.splice i,1 ;else selected.push hit ;}else selected= hit ;}else if add selected= ;updateUI true ;} | | | function zoom delta,sx=viewW/2,sy=viewH .42 {const before=unproject sx,sy ;cam.zoom=Math.max .55,Math.min 1.8,cam.zoom+delta ;const after=unproject sx,sy ,p1=project before.x,before.y ,p2=project after.x,after.y ;cam.x+=p1.x-p2.x;cam.y+=p1.y-p2.y;updateUI ;} | | | function resize {const r=canvas.getBoundingClientRect ;viewW=r.width;viewH=r.height;dpr=Math.min 2,window.devicePixelRatio\|\|1 ;canvas.width=Math.round viewW dpr ;canvas.height=Math.round viewH dpr ;const mr=mini.getBoundingClientRect ;mini.width=Math.round mr.width 2 ;mini.height=Math.round mr.height 2 ;} | | | function openModal id {paused=true;keys.clear ;$ id .classList.add 'open' ;if id==='pause-modal' {$ 'pause-info' .textContent=units.length+' people · '+buildings.filter b= b.progress =1 .length+' buildings · '+Math.floor exploredTotal/ N N 100 +'% of the land discovered';$ 'reset-warning' .style.display='none';}$ id .querySelector 'button' ?.focus ;} | | | function closeModal id {$ id .classList.remove 'open' ;paused= document.querySelector '.modal-backdrop.open' ;last=performance.now ;canvas.focus {preventScroll:true} ;} | | | function saveGame manual=true {try{const data={version:1,state,units,buildings,nodes,explored,cam};localStorage.setItem SAVE KEY,JSON.stringify data ;$ 'save-status' .innerHTML=icon 'save' +'Saved just now';if manual notify 'Your world has been saved.' ;return true;}catch e {$ 'save-status' .textContent='Saving unavailable in this browser';if manual notify 'Could not save. Browser storage may be full or disabled.',true ;return false;}} | | | function loadGame {try{const raw=localStorage.getItem SAVE KEY ;if raw return false;const data=JSON.parse raw ;if data.version ==1\|\| Array.isArray data.explored \|\|data.explored.length ==N N\|\| data.state\|\| Array.isArray data.units \|\| Array.isArray data.buildings \|\| Array.isArray data.nodes \|\| data.buildings.some b= b.type==='townhall' return false;generate ;state=data.state;units=data.units;buildings=data.buildings;nodes=data.nodes;explored=data.explored;cam=data.cam\|\|cam;selected= {kind:'building',id:buildings.find b= b.type==='townhall' .id} ;recomputeReachable ;updateVision ;return true;}catch e {return false;}} | | | canvas.addEventListener 'contextmenu',e= {e.preventDefault ;const r=canvas.getBoundingClientRect ;command e.clientX-r.left,e.clientY-r.top ;} ; | | | canvas.addEventListener 'pointerdown',e= {if paused\|\|e.button===2 return;canvas.focus {preventScroll:true} ;const r=canvas.getBoundingClientRect ;mouse={x:e.clientX-r.left,y:e.clientY-r.top,inside:true};drag={startX:mouse.x,startY:mouse.y,oldX:mouse.x,oldY:mouse.y,mode:e.button===1\|\|e.altKey?'pan':e.pointerType==='touch'?'touch':'select',moved:false,shift:e.shiftKey,id:e.pointerId};canvas.setPointerCapture e.pointerId ;if e.button===1 e.preventDefault ;} ; | | | canvas.addEventListener 'pointermove',e= {const r=canvas.getBoundingClientRect ;mouse={x:e.clientX-r.left,y:e.clientY-r.top,inside:true};if drag {if Math.hypot mouse.x-drag.startX,mouse.y-drag.startY 6 drag.moved=true;if drag.mode==='pan'\|\|drag.mode==='touch'&&drag.moved {cam.x-= mouse.x-drag.oldX /cam.zoom;cam.y-= mouse.y-drag.oldY /cam.zoom;}drag.oldX=mouse.x;drag.oldY=mouse.y;}else if placement {hover=hitTest mouse.x,mouse.y ;canvas.style.cursor=hover?'pointer':'default';}} ; | | | canvas.addEventListener 'pointerup',e= {if drag return;const d=drag;drag=null;if canvas.hasPointerCapture e.pointerId canvas.releasePointerCapture e.pointerId ;if paused return;if d.mode==='select'&&d.moved&& placement {const left=Math.min d.startX,mouse.x ,right=Math.max d.startX,mouse.x ,top=Math.min d.startY,mouse.y ,bottom=Math.max d.startY,mouse.y ;const picked=units.filter u= {const p=screen u.x,u.y ;return p.x =left&&p.x<=right&&p.y-12 cam.zoom =top&&p.y-12 cam.zoom<=bottom;} .map u= {kind:'unit',id:u.id} ;selected=d.shift? ...selected.filter s= s.kind==='unit' ,...picked.filter p= selected.some s= s.kind==='unit'&&s.id===p.id :picked;updateUI true ;}else if d.moved&&d.mode =='pan' selectAt mouse.x,mouse.y,d.shift,d.mode==='touch' ;} ; | | | canvas.addEventListener 'pointercancel', = drag=null ;canvas.addEventListener 'pointerleave', = {mouse.inside=false;} ;canvas.addEventListener 'wheel',e= {e.preventDefault ;const r=canvas.getBoundingClientRect ;zoom e.deltaY 0?-.08:.08,e.clientX-r.left,e.clientY-r.top ;},{passive:false} ; | | | canvas.addEventListener 'dblclick',e= {if placement\|\|paused return;const r=canvas.getBoundingClientRect ,hit=hitTest e.clientX-r.left,e.clientY-r.top ;if hit?.kind==='unit' {const u=getEntity hit ;selected=units.filter e= e.type===u.type .map e= {kind:'unit',id:e.id} ;updateUI true ;}} ; | | | mini.addEventListener 'pointerdown',e= {const r=mini.getBoundingClientRect ,sx= e.clientX-r.left mini.width/r.width,sy= e.clientY-r.top mini.height/r.height,scale=Math.min mini.width/ N 2 ,mini.height/N .91,ox=mini.width/2,oy= mini.height-N scale /2;const x= sy-oy /scale+ sx-ox / 2 scale ,y= sy-oy /scale- sx-ox / 2 scale ;if inMap x,y {const p=project x,y ;cam.x=p.x;cam.y=p.y;}} ; | | | mini.addEventListener 'contextmenu',e= {e.preventDefault ;const r=mini.getBoundingClientRect ,sx= e.clientX-r.left mini.width/r.width,sy= e.clientY-r.top mini.height/r.height,scale=Math.min mini.width/ N 2 ,mini.height/N .91,ox=mini.width/2,oy= mini.height-N scale /2,x= sy-oy /scale+ sx-ox / 2 scale ,y= sy-oy /scale- sx-ox / 2 scale ;if paused&&inMap x,y {orderMove selected.filter s= s.kind==='unit' .map getEntity ,x,y ;updateUI true ;}} ; | | | document.addEventListener 'keydown',e= {if e.target.matches 'input,textarea' return;const k=e.key.toLowerCase ;if ' ','arrowup','arrowdown','arrowleft','arrowright' .includes k e.preventDefault ;if k==='escape' {if document.querySelector '.modal-backdrop.open' closeModal document.querySelector '.modal-backdrop.open' .id ;else if placement cancelPlacement ;else{selected= ;updateUI true ;}return;}if k==='p'&& e.repeat {if $ 'pause-modal' .classList.contains 'open' closeModal 'pause-modal' ;else if document.querySelector '.modal-backdrop.open' openModal 'pause-modal' ;return;}if k==='?'&& e.repeat {if $ 'help-modal' .classList.contains 'open' closeModal 'help-modal' ;else if paused openModal 'help-modal' ;return;}if paused return;keys.add k ;if e.repeat return;if '1','2','3','4' .includes k startPlacement 'house','barracks','sawmill','tower' Number k -1 ;else if k==='h' home ;else if k===' ' centerSelection ;else if k==='g' toggleGrid ;else if k==='i' findIdle ;else if k==='e' handleAction 'explore' ;else if k==='x' handleAction 'stop' ;else if k==='r' {const btn=$ 'actions' .querySelector 'button' ;if btn handleAction btn.dataset.action ;}else if k==='t'&&selected.some s= getEntity s ?.type==='barracks' train 'soldier' ;} ; | | | document.addEventListener 'keyup',e= keys.delete e.key.toLowerCase ;window.addEventListener 'blur', = {keys.clear ;drag=null;saveGame false ;} ;document.addEventListener 'visibilitychange', = {if document.hidden {keys.clear ;saveGame false ;}last=performance.now ;} ;window.addEventListener 'pagehide', = saveGame false ; | | | function toggleGrid {showGrid= showGrid;$ 'grid-button' .classList.toggle 'active',showGrid ;$ 'grid-button' .setAttribute 'aria-pressed',showGrid ;} | | | $ 'pause-help' .onclick= = {closeModal 'pause-modal' ;openModal 'help-modal' ;};$ 'grid-button' .onclick=toggleGrid;$ 'home-button' .onclick=home;$ 'zoom-in' .onclick= = zoom .15 ;$ 'zoom-out' .onclick= = zoom -.15 ;$ 'help-button' .onclick= = openModal 'help-modal' ;$ 'pause-button' .onclick= = openModal 'pause-modal' ;$ 'resume-button' .onclick= = closeModal 'pause-modal' ;$ 'save-button' .onclick= = saveGame true ;$ 'new-button' .onclick= = {$ 'reset-warning' .style.display='block';};$ 'cancel-new' .onclick= = {$ 'reset-warning' .style.display='none';};$ 'confirm-new' .onclick= = {newState ;cam.zoom=1;home ;updateUI true ;saveGame false ;closeModal 'pause-modal' ;notify 'A new chapter begins. Welcome to the Green Reach.' ;};$ 'collapse-quest' .onclick= = {$ 'objectives' .classList.toggle 'collapsed' ;$ 'collapse-quest' .setAttribute 'aria-expanded', $ 'objectives' .classList.contains 'collapsed' ;};document.querySelectorAll ' data-close ' .forEach b= b.onclick= = closeModal b.dataset.close ; | | | $ 'actions' .addEventListener 'click',e= {const b=e.target.closest ' data-action ' ;if b&& paused handleAction b.dataset.action ;} ;$ 'build-buttons' .addEventListener 'click',e= {const b=e.target.closest ' data-build ' ;if b placement===b.dataset.build?cancelPlacement :startPlacement b.dataset.build ;} ; | | | window.addEventListener 'resize',resize ; | | | const loaded=loadGame ;if loaded newState ;for const type of ...Object.keys defs ,...Object.keys unitsDef ,'gold','wood','empty','group' portraits type =makePortrait type ; | | | $ 'build-buttons' .innerHTML= 'house','barracks','sawmill','tower' .map type,i = {const d=defs type ;return '<button class="build-card" data-build="'+type+'" title="'+d.name+' '+ i+1 +' — '+d.desc+'" <span class="keycap" '+ i+1 +'</span <img src="'+portraits type +'" alt="" <span class="build-name" '+d.name+'</span <span class="build-cost" '+ d.gold?icon 'gold' +d.gold:'' +'<span class="wood-cost" '+icon 'wood' +'</span '+d.wood+'</span </button ';} .join '' ;resize ;if loaded home ;if innerWidth<=640 {$ 'objectives' .classList.add 'collapsed' ;$ 'collapse-quest' .setAttribute 'aria-expanded','false' ;}updateUI true ; | | | function frame now {let dt=Math.min .06, now- last\|\|now /1000 ;last=now;if paused&& document.hidden {const speed=440 dt/cam.zoom;if keys.has 'w' \|\|keys.has 'arrowup' cam.y-=speed;if keys.has 's' \|\|keys.has 'arrowdown' cam.y+=speed;if keys.has 'a' \|\|keys.has 'arrowleft' cam.x-=speed;if keys.has 'd' \|\|keys.has 'arrowright' cam.x+=speed;cam.x=Math.max -N TW/2,Math.min N TW/2,cam.x ;cam.y=Math.max -130,Math.min N TH+130,cam.y ;update dt ;uiTimer+=dt;saveTimer+=dt;if uiTimer .2 {uiTimer=0;updateUI ;}if saveTimer 15 {saveTimer=0;saveGame false ;}}draw ;requestAnimationFrame frame ;} | | | requestAnimationFrame frame ; | | | // A compact inspection surface for deterministic gameplay verification. | | | window.Wilderland={get state {return state;},get units {return units;},get buildings {return buildings;},get nodes {return nodes;},get explored {return explored;},get selected {return selected;},get camera {return cam;},get paused {return paused;},get terrain {return terrain;},screen,unproject,pathfind,validPlacement,save:saveGame}; | | | } ; | | | </script | | | </body | | | </html |