search

JirkaDellOro / FUDGE_Story

A FUDGE module for the easy development of interactive stories, visual novels and simple adventure games
https://jirkadelloro.github.io/FUDGE_Story/
7 stars 9 forks source link

--- Hiding Meter-bar; Meter-bar peeks out behind background in starting screen/splash screen --- #40

Closed Hanhan139 closed 1 year ago

Hanhan139 commented 1 year ago

-- This: --

image

Meter-bar goes hiiiiiii~

-- Other: -- Riem said in the VN discord chat that: "(...) also MeterBar einfach platziert in der HTML unter dem geschlossenen speech-tag dann ist es nicht auf dem Splash-Screen :)"

It is placed there correctly and still shows; I suspect that, in Riem's example, she theoretically simply hides it behind the sparkling star background. But if my splash screen image is smaller, how do I hide the meta-bar from the viewer?

-- File/s: -- Template.html (yep its still named Template, will be renamed in the future) Template.css Image: Assets/Backgrounds/BG_FUD_General.png -- Git: -- https://github.com/Hanhan139/HFU_VisualNovel -- Code: --

`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="Template.css">
  <script src="Fudge/FudgeCore.js"></script>
  <script src="FudgeStory/FudgeStory.js"></script>
  <script src="./Build/Template.js"></script>
  <title>Fudge Story Template</title>
 <!-- <splash src="./Assets/Backgrounds/BG_Title_1.png"/> -->
 <!--GOOGLE FONTS-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@700&family=Rubik&display=swap" rel="stylesheet">
</head>

<body>
  <scene>

    <canvas></canvas>

    <speech>
      <name></name>
      <content>"See you tomorrow"</content>
    </speech>

    <!-- Meter bar -->
    <div type="interface">
      <input id="scoreForAisaka" type="text" value="Aisaka" disabled>
      <!-- für value der Skala; Füllung -->
      <meter id="aisakaMeter" name="aisakaScore" min="0" max="100" disabled></meter>
    </div>

    <!-- Dialogue box -->
    <dialog type="text">

    </dialog>

  </scene>

  <dialog type="splash" open>
    <p>
      <img id="FudgeStoryLogo" theme="light" />
      <!-- Design your splash screen here. Reposition and rescale the logo above, but do not remove. -->
      <img id="StartingImage" src="./Assets/Backgrounds/BG_FUD_General.png" alt="Starting Image HERE Look how pretty, 10/10 image">
    </p>
  </dialog>

</body>

</html>

`

BG_FUD_General

Hanhan139 commented 1 year ago

In any case, I can always just use a bigger image. But is there a way to hide that thing from the get-go?

JirkaDellOro commented 1 year ago

Maybe use the css-property visibility

Hanhan139 commented 1 year ago

-- Solved! --

Visibility does remove it; The problem with visibility is that the bar won't turn visible again with the commands we learnt in the lesson.

document.getElementsByName("aisakaScore").forEach(meterStuff => meterStuff.hidden = false);

BUT you can get any CSS/HTML Item with and ID with that command. If anyone else is having this problem, you can access the CSS options with .style.attributeyouwanttochange = "changedValue".

You have to pass over any values as a string, and setting visibility "true" is not enough; You have to set it to "inherit" and it will work as normally before!

document.getElementById("aisakaMeter").style.visibility = "inherit";