Forums » Advanced Editor Forum » Read Thread

This is probably a thread I'll be updating periodically, as I'm sure to have more than one question relevant to this subject.

1) I've recently learned HTML and CSS, and am now learning javascript, and testing how CSS works in the editor (only just disabled the white box text editor). I could get the text to turn blue using style="color:blue" inside the <p> opening tag, but when I tried to define a class with the following code, it didn't work:

  <style>
  .colorblue {
    color: blue;
  }
  </style>
  
  <p class="colorblue">text that should be blue but isn't</p>

I copy pasted the code into an HTML/CSS/javascript testing site and it worked the way it was supposed to, so I suspect this is a CYS-specific issue. Does CYS not let you define classes? Is there something else I'm doing wrong?

2) Also, are there any general resources for using CSS and javascript on CYS? I checked the articles but didn't find anything other than Peng's article on HTML. Does CYS allow for the use of functions, objects, etc., or is the use of CSS and javascript limited to affecting the text as it appears?

This thread will probably be updated with more questions as I learn more javascript.

I just steal stuff others have made. Hopefully some more knowledgeable members chime in.

I did have issues trying to use classes as well, but I imagine there's some way to do it. There's no way the tedious approach is the only option, right?

P.S.

Ain't that funny? It works!

I tried to play with this a few months back. From what I've seen html/js/css code only worked when changing the page text variable:

$PAGETEXT:= $PAGETEXT+"(cool HTML/JS/CSS stuff)"

I think you can even use values from the site %VARIABLES for js calculations but not vice versa. For example:

%PARAM:=8

$PAGETEXT:= "(script)var foo= "  +%PARAM+   ";
document.write('This is Foo: '+foo);
(/script)

(style)
  .colorblue {
    color: blue;
  }
  (/style)
  
  (p class='colorblue')text that should be blue(/p)"

Just checked that code and it worked. Just switch the () to <>, and also if you want to use "" for strings inside it would only let you use ' ' instead. Because all the terms are already inside a big " ". At least that's how I understand it.

Hope this helps.

1) This should work, but the cascading nature of CSS means that some other selector might be overriding it. You can always use the inspect element tool, and specifically the "computed" tab, to see exactly how an element's final style is chosen.

2) Using styles and scripts in the forums is limited, but you are given a bit more free rein in storygames. Though lack of classes/ids does make referencing specific elements tricky, lol.

Thanks everyone for the suggestions!

Zake: Weird, I'm not sure why the text looks like that for you. On my screen it's showing up as regular text. What browser are you using?

Ogre: Thanks, I'll try that.

Elad: Thanks, I'll try that too.

Bradin: Thanks, I'll use the inspect tool for troubleshooting.

Thanks Ogre11, that's what I was coming to expect. 

I think this will encourage me to stick more to storytelling !

It's possible! The story's state is always present on the page in a hidden input, document.getElementById("pbForm").elements.SS

Its value is a base64-encoded string. If you decode it with atob() you'll see it's got five pipe-separated groups of values:

1. The story id and the current page id
2. A history of every page id visited ordered from most to least recent
3. Key/value pair of link id and # of times clicked
4. Key/value pair of item id and # of times used
5. Key/value pair of variable name and value

The first two are comma separated, but for the last three, the pairs are separated by semicolons and the key and value themselves are separated with commas.

If you're storing an integer, it's as easy as parsing that string, changing the variable, reincoding with btoa(), and updating the input's value.

If you're trying to save noninteger values, it's more involved but doable. Internally, variable's names are not strictly enforced, so you can actually store data in a variable's name (just remember to still give it a dummy value). You could for instance include the key/value pair JS:eyJ4IjozMiwieSI6MCwieiI6MTZ9,0 and that would persist a stringified JSON object of xyz coordinates.

I don't have time to provide a bigger snippet of code right now, so I hope this information is usable! I do have a simple example of it being used here (the long variables page, not the multi-variables one).

Oh yeah. The old method of one letter per variable would not have cut it there lol.

Yeah, all the info is stored in the one story state input. The system will interpret a lot of variable names as valid, so that's the safest portion to modify. Even if they're too long or oddly named they'll still persist over page changes; however, if it's got a weird name don't expect it to work in a CYS script.

That is so interesting! Thank you.

However, in the meantime I looked up some JS & found the localstorage method to save variables on the player's computer & they persist until the cache is cleared or whatever (as long as it's not an incognito page)

I'll try the localstorage at least in order to learn something... then I can use your method to insert important values back into the ol' CYS variables if I need to.

I'm quite a low-level JS person - I just dabble. So this may all be a bit above me. But when you say 'decode it with atob() you'll see' - how can I view the string when running the story? This is what I've tried so far-

$PAGETEXT:= $PAGETEXT+"[script]
const astring64 = document.getElementById('pbForm').elements.SS;
let decoded = atob(astring64);

document.write('String is : '+decoded);

[/script]"

but nothing shows up on screen with document.write this time - it works with something simpler on another page.

I think if I can view the string, I'll be able to manipulate it as you outlined.

Pretty simple fix. You're using the element itself instead of its value.

const astring64 = document.getElementById('pbForm').elements.SS.value;

I'd also say consider using alternatives to document.write (it has some weird behaviors). In this case, you can write the string to the inspect element console with console.log()

Thanks for that! Will try it.