Crumb
c/perchance · by OkOtt@lemmy.world · 117d

Cant code, and am trying to make my own text adventure/ visual novel ish thing

The ai ia asked to make a layout did a good job, now i jsut need to figure out how to make it work. i wnat it to generate the map image automatically, maybe based on lorebooks as well, and to generate visual novel style character images, but we'll see if any of this actualy happens

-2 points · 2 comments · view on lemmy.world

2 Comments

Tod_1ncignito@lemmy.world · 2 pts · 116d

Wow thats actually awesome and perfectly nice and small code use, i like it. This is just a little help with the map part :

Paste this line inside your hub-bar div at line 279 <button class="hud-btn" id="mapBtn">Map</button>

Paste this code in after the map-legend div at line 503

<!-- ══ MAP MODAL ══ -->
<div id="mapModal" class="modal-overlay" hidden>
  <div class="modal-box">
    <div class="modal-header">
      <span class="modal-title">Region Map</span>
      <button class="close-icon-btn" onclick="mapModal.hidden=true">&times;</button>
    </div>
    <div class="modal-body">
      <div style="width:100%; border:1px solid var(--border); border-radius:2px; overflow:hidden; background:#0e1c2e; margin-bottom:15px; box-shadow:0 0 20px rgba(0,0,0,0.5);">
        <svg viewBox="0 0 248 186" xmlns="http://www.w3.org/2000/svg" style="width:100%; height:auto; display:block;">
          <rect width="248" height="186" fill="#0e1c2e"/>
          <path d="M10,186 L10,50 Q30,30 60,40 Q80,20 120,30 Q160,15 200,35 Q230,30 248,50 L248,186 Z" fill="#142010" opacity="0.9"/>
          <ellipse cx="70" cy="100" rx="40" ry="30" fill="#0e1a0a" opacity="0.8"/>
          <ellipse cx="110" cy="85" rx="30" ry="22" fill="#0e1a0a" opacity="0.7"/>
          <ellipse cx="150" cy="105" rx="35" ry="25" fill="#0e1a0a" opacity="0.8"/>
          <path d="M124,176 Q124,140 120,110 Q118,90 100,75 Q80,60 60,50" stroke="#2a2416" stroke-width="3" fill="none" stroke-linecap="round"/>
          <path d="M124,176 Q128,140 140,110 Q158,85 180,70 Q200,58 220,60" stroke="#2a2416" stroke-width="3" fill="none" stroke-linecap="round"/>
          <path d="M0,80 Q40,90 80,85 Q100,82 120,95 Q140,108 160,100 Q200,88 248,100" stroke="#1a2d44" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.9"/>
          <path d="M0,80 Q40,90 80,85 Q100,82 120,95 Q140,108 160,100 Q200,88 248,100" stroke="#1d3550" stroke-width="2" fill="none" stroke-linecap="round"/>
          <rect x="111" y="162" width="10" height="8" rx="1" fill="#3a3020"/>
          <polygon points="116,156 108,162 124,162" fill="#4a3a28"/>
          <rect x="53" y="64" width="8" height="8" rx="1" fill="#2a2018"/>
          <polygon points="185,58 178,72 192,72" fill="#2a2030" opacity="0.8"/>
          <rect x="180" y="72" width="10" height="4" rx="1" fill="#2a2030"/>
          <circle cx="124" cy="155" r="5" fill="none" stroke="#c9a55e" stroke-width="1.5"/>
          <circle cx="124" cy="155" r="2" fill="#c9a55e"/>
          <circle cx="124" cy="155" r="8" fill="none" stroke="#c9a55e" stroke-width="0.5" opacity="0.4"/>
          <circle cx="57"  cy="60" r="3" fill="#6a5a30" opacity="0.8"/>
          <circle cx="186" cy="62" r="3" fill="#3a3060" opacity="0.8"/>
          <circle cx="115" cy="160" r="3" fill="#504030" opacity="0.9"/>
          <ellipse cx="30"  cy="150" rx="25" ry="30" fill="#0e1c2e" opacity="0.6"/>
          <ellipse cx="220" cy="155" rx="30" ry="25" fill="#0e1c2e" opacity="0.5"/>
          <rect width="248" height="186" fill="none" stroke="#3a2f52" stroke-width="1.5" rx="1"/>
          <g transform="translate(226,20)">
            <line x1="0" y1="-10" x2="0" y2="10" stroke="#3a3020" stroke-width="0.8"/>
            <line x1="-10" y1="0" x2="10" y2="0" stroke="#3a3020" stroke-width="0.8"/>
            <polygon points="0,-10 -3,-5 3,-5" fill="#c9a55e" opacity="0.8"/>
            <text x="0" y="-12" text-anchor="middle" font-family="serif" font-size="6" fill="#8a7f6a">N</text>
          </g>
        </svg>
      </div>
      <div class="map-legend" style="justify-content:center;">
        <div class="legend-item"><div class="legend-dot" style="background:#c9a55e"></div>You (Current Location)</div>
        <div class="legend-item"><div class="legend-dot" style="background:#6a5a30"></div>Old Mill</div>
        <div class="legend-item"><div class="legend-dot" style="background:#3a3060"></div>Shrine</div>
        <div class="legend-item"><div class="legend-dot" style="background:#504030"></div>Village</div>
      </div>
      <div style="text-align:center; margin-top:15px; font-family:var(--serif); font-size:13px; color:var(--text-dim); font-style:italic;">
        The forest stretches endlessly to the North.
      </div>
    </div>
  </div>
</div>

And paste this script after function addLoreEntry at 898 and before Local Storage

// ── Map Button Function ───────────────────────────────────────────────
mapBtn.onclick = function() {
  mapModal.hidden = false;
};
OkOtt@lemmy.world · 1 pts · 117d

heres the url for it btw https://perchance.org/shavm8a252