[Webb] Trudvang website with namegenerator

[ziox]

Hi, I created a name generator for Game Masters and players alike. (Click English to change language)
http://davidsyntex.github.io/WebTrudvangSL/

Anything else that would be interesting on this kind of website?

[Lobst5r]

This is awesome! Thank you for creating this. I'm new to the game, so any creative tools or resources are welcome as far as I'm concerned.

[ziox]

Updated version is now up with Trudvang Chronicles, Initiative-tracker and NPC fragment (goals, secrets, traits, professions etc. ).

http://davidsyntex.github.io/WebTrudvangSL/

[Lobst5r]

The updates look good, but now it does not seem to be able to switch from Swedish to English. The only elements that switch are the links in the drop-down menu list.

I have not yet tried using a browser on a computer, I am using the Firefox browser on an Android phone, should that make a difference.

If I may ask, would you share how you are creating this? It would give me an opportunity to learn a little about coding.

[ziox]

The updates look good, but now it does not seem to be able to switch from Swedish to English. The only elements that switch are the links in the drop-down menu list.

I have not yet tried using a browser on a computer, I am using the Firefox browser on an Android phone, should that make a difference.

If I may ask, would you share how you are creating this? It would give me an opportunity to learn a little about coding.

All of the code is hosted here: https://github.com/davidsyntex/WebTrudvangSL
And it uses the MIT license, basically as long as you include the license file, i.e. telling people that I created the code in the beginning you can copy, modify and publish it.

Code: Select all

The MIT License (MIT)

Copyright (c) 2016 David Malmström

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

I code the HTML and CSS using a text-editor (Intellij IDEA). The main source of the UI comes from Twitter Bootstrap http://getbootstrap.com/ which has a uniform look to it and includes all nice things such as Navigation bar, buttons, forms etc.

From there I use JavaScript, more specifically jQuery to introduce the functionality like buttons randomizing things.

All of the random prefix, suffix, random table stuff is in JSON-files which are loaded by JavaScript. All language files are also in stored in JSON.
Example from the frontpage:

Code: Select all

{
  "swedish": {
    "navbarGames": "Spel<span class=\"caret\"></span>",
    "navbarGeneral": "Generella<span class=\"caret\"></span>",
    "navbarGeneralHooks": "Äventyrsuppslag",
    "navbarGeneralNPC": "Spelledarperson",
    "navbarGeneralIntrigue": "Intriger",
    "navbarGeneralInitiative": "Initiativ",
    "buttonInitiative": "Initiativ &raquo;",
    "buttonNPC": "Spelledarperson &raquo;"
  },
  "english": {
    "navbarGames": "Games<span class=\"caret\"></span>",
    "navbarGeneral": "General<span class=\"caret\"></span>",
    "navbarGeneralHooks": "Hooks",
    "navbarGeneralNPC": "NPC",
    "navbarGeneralIntrigue": "Intrigue",
    "navbarGeneralInitiative": "Initiative",
    "buttonInitiative": "Initiative &raquo;",
    "buttonNPC": "NPC &raquo;"
  }
}

So first there is the language, english or swedish, it chooses based on the button on the page. Then it loop through all the elements in it

Code: Select all

"navbarGames"

is the key and

Code: Select all

"Games<span class=\"caret\"></span>"

is the value. So with jQuery I look for an element in HTML that has

Code: Select all

id="navbarGames"

and replaces the value in that HTML-tag for the value of that key.

Each part of the site is in a folder so Trudvang Chronicles is in the folder Root/game/tc there I have a json folder for all the random table stuff and a language.json which contains all the strings needed for translations. I also have an index.html which is the page that is loaded. The navbar and footer stay the same so I load those like a translation, I get jQuery to load a HTML-file and fill those in.

Then I have a folder named js which is where I store all the JavaScript-files for all games/sub-pages, each file is responsible for just their page. So tc.js just do Trudvang Chronicles stuff and trudvang.js just do Trudvang stuff.

I had to do it this way to keep it scaleable with many sub-pages and keep my sanity. The other reason is that the site is hosted on Github Pages so I can't use a server-side language like PHP, Python, Ruby on Rails or Node.js to build the site.

So all in all, it's a static site with JavaScript-functionality.

I hope that helps, fork me on GitHub. If you have specific questions on parts of the code you can PM me and we could talk/chat on Skype