Chaotic Backup Forum

Members Log In. Show your support. Boost our moral. Don't just browse, log in.

King's Royal Chaotic Backup


    Write a script that auto links chaotic creature names to tco pictures

    Share
    avatar
    Marrillian
    Marrillian

    Chaotic Username : KingMaxor4
    Chaotic Coins : 2342
    Location : where the steak is

    Write a script that auto links chaotic creature names to tco pictures

    Post by Marrillian on Thu Jun 11, 2015 7:15 pm

    Wow this sounds like a challenge...

    I was thinking it would be nice to have a javascript that I can plug in to the forum which would do this.

    When a person makes a post, checks post for names within {{}} or something similar. Than parse the name compare it to a database (json file?) which maps names to tco urls. Then replaces the plain text to be a url.

    Stretch goal:
    Have the picture show up on hovering the name.


    ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== =====
    Founder and leader of Marrillian Reign. Marrillian
    Supporter of Maxxor Ruler of Perim


    Light vi Britannia - 
    "This is what happens when I take an anime personality quiz..."
    avatar
    Blitser
    Marrillian

    Chaotic Username : Blitser
    Chaotic Coins : 420
    Location : Running a server somewhere.

    Re: Write a script that auto links chaotic creature names to tco pictures

    Post by Blitser on Thu Jun 11, 2015 9:12 pm

    Annnd, then we realize most people don't know how to spell the names for creatures properly. EyeRoll

    In all seriousness though, that would be an excellent feature. If you want help with the grunt-work of the scripting once you've done the base let me know.


    ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== =====
    Blitser
    Grand Master of the Grapefruit Brigade

    • Here for a visit? Come say hi to everyone in this topic!
    • Got a question that you want answered? The forum staff are here for any and all Chaotic inquiries!
    • Do you have an idea to help improve upon the forums? Share it here!
    • Interested in a Chaotic TeamSpeak? Post here!
    avatar
    brainard52
    Uncommon

    Chaotic Username : brainard52
    Chaotic Coins : 86

    Re: Write a script that auto links chaotic creature names to tco pictures

    Post by brainard52 on Mon Jun 15, 2015 6:32 pm

    Something else that could be implemented is linking through SET:CARDID

    So for example: [[DOP:12]] would link to the 12th card in DoP.


    ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== =====


    Old Signatures:

    Second:



    First:




    avatar
    Marrillian
    Marrillian

    Chaotic Username : KingMaxor4
    Chaotic Coins : 2342
    Location : where the steak is

    Re: Write a script that auto links chaotic creature names to tco pictures

    Post by Marrillian on Tue Jun 16, 2015 6:58 pm

    I doubt enough people would know the card ids for that to be viable.


    ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== =====
    Founder and leader of Marrillian Reign. Marrillian
    Supporter of Maxxor Ruler of Perim


    Light vi Britannia - 
    "This is what happens when I take an anime personality quiz..."
    avatar
    KingCrazy
    Common

    Chaotic Username : KingCrazy
    Chaotic Coins : 43

    Re: Write a script that auto links chaotic creature names to tco pictures

    Post by KingCrazy on Tue Feb 02, 2016 3:21 pm

    Edit: Wow, my bad. I didn't see it said June of 2015. I thought it said January 2016. <.>
    Well my post still stands... ^^

    Well, you could have it linked up like that, but then further link the names to the IDs.

    So when a user types the name the system looks up what ID is associated with the name, and then goes and checks the information associated with the ID.
    So it goes:

    Name->ID->Information

    Seems like kind of an unnecessary middle man, but it could work as a starting point?

    So it could kind of work like, the names of creatures have the id's of the SET:CARDID associated with them. Once a player types, for instance, Chaor, the script will read "Chaor" and look up what ID is associated with that word. Once the ID is looked up, the script then looks for the information associated with the ID (In this case, the URL to the page).

    I'm not too familiar with Javascript, but I'm pretty familiar with other languages so I'll see if I can come up with something on the side.

    Although knowing a bit how things like JSON work (Well, more specifically I've had experience with XML), you could have each name be a node and search for the node from the name.

    Not sure. Just spitting out ideas here. XD

    With JSON's formatting, could you not include both a way to search for ID or name to get the same results? Not sure if that would work...
    avatar
    Marrillian
    Marrillian

    Chaotic Username : KingMaxor4
    Chaotic Coins : 2342
    Location : where the steak is

    Re: Write a script that auto links chaotic creature names to tco pictures

    Post by Marrillian on Tue Feb 02, 2016 7:00 pm

    So doing a little bit of research on to use JS in forumotion
    http://help.forumotion.com/t135662-using-javascript-in-forumotion

    Basically it would be dom manipulation? So parsing through messages and replacing the text (we define the code) with the image. We would have to have a giant javascript json map for the names to image urls...

    Originally, I was thinking bbcode, 
    [card]name[/card]

    But, since I can't find a way of simply adding custom bbcode to forumotion, we would have to look for the card "bbcode" within posts. Instead of grabbing by ID, it would be
    http://stackoverflow.com/questions/3813294/how-to-get-element-by-innertext


    Parsing posts like that would probably get ugly and slow the site down? So I was thinking to have users post in html:
    Code:
    <div class='card'>card name<div>
    Some for loop looking for the class card and replacing its inner text with the image
    http://stackoverflow.com/questions/2924210/replace-images-in-a-div-using-javascript
    Old Approach :

    Code:
    var x = document.getElementByClassName('card')
    x[0].text = x[0].innerHTML;
    for (var i = 0; i < x.length; i++) {
      var img = document.createElement("IMG");
      img.src = findURL(x[i].text.toLowerCase());
      //Checks if src before replacing
      if (img.src) {
        x[i].replaceChild(img, x[i].childNodes[0]);
      }
    }

    function findURL(name) {
      var src = "";
      var card = jsonMap[name];
      if (card) {
        src = "tco + path/to/img/" + card.cardID;
      }
      return src;
    }

    var jsonMap = {
      "name" : { setID = "id", cardID = "id" }
    }
    Second Method:

    Code:
    var x = document.getElementByClassName('card')
    x[0].text = x[0].innerHTML;
    for (var i = 0; i < x.length; i++) {
      var html = getHTML(x[i].text.toLowerCase());
      //Checks if html before replacing
      if (html) {
        x[i].childNodes[0].nodeValue.replace(/./, html);
      }
    }

    function getHTML(name) {
      var html = "";
      var card = jsonMap[name];
      if (card) {
        html =
        '<a href=\"tco + /img/cards/chaotic-tcg/' + setID + '/big/' + cardID + '.png\" target=\"_blank\" onfocus=\"blur();\">
          <img src=\"tco + /img/cards/chaotic-tcg/' + setID + '/' + cardID + '.png\" width=\"150\" alt=\"click to enlarge\" title=\"click to enlarge\">
        </a>';
      }
      return html;
    }

    var jsonMap = {
      "name" : { setID = "id", cardID = "id" }
    }

    But that still didn't work so... http://stackoverflow.com/questions/13388379/js-how-to-replace-html-element-with-another-element-text-represented-in-string
    Tried using a hacky method to replace the div with the html.
    Spoiler:

    Code:
    var jsonMap = {
      "name": { setID: "1594", cardID: "1" }
    };

    var x = document.getElementsByClassName('card');
    for (var i = 0; i < x.length; i++) {
      var text = x[i].innerHTML;
      var html = getHTML(text.toLowerCase());
      //Checks if html before replacing
      if (html) {
        replaceTargetWith(x[i], html);
      }
    }

    function getHTML(name) {
      var html = "";
      var card = jsonMap[name];
      if (card) {
        html =
        '<a href=\"tco + /img/cards/chaotic-tcg/' + card.setID + '/big/' + card.cardID + '.png\" target=\"_blank\" onfocus=\"blur();\">' +
          '<img src=\"tco + /img/cards/chaotic-tcg/' + card.setID + '/' + card.cardID + '.png\" width=\"150\" alt=\"click to enlarge\" title=\"click to enlarge\">' +
        '</a>';
      }
      return html;
    }

    function replaceTargetWith(target, html) {
      var i, tmp, elm, last;
      tmp = document.createElement(html.indexOf('<td')!=-1?'tr':'div'));
      tmp.innerHTML = html;
      i = tmp.childNodes.length;
      last = target;
      while(i--){
        target.parentNode.insertBefore((elm = tmp.childNodes[i]), last);
        last = elm;
      }
      target.parentNode.removeChild(target);
    }


    Still broken...
    I asked a friend, and he told me to just change the innerHTML of the div. I had already done that, and it didn't work before, but since my initial try, I had fixed some of the code. So trying it one more time finally created a working solution... rip my evening
    Code:
    var jsonMap = {
      "name": { setID: "1594", cardID: "1" }
    };

    var x = document.getElementsByClassName('card');
    for (var i = 0; i < x.length; i++) {
      var text = x[i].innerHTML;
      var html = getHTML(text.toLowerCase());
      //Checks if html before replacing
      if (html) {
        x[i].innerHTML = html;
      }
    }

    function getHTML(name) {
      var html = "";
      var card = jsonMap[name];
      if (card) {
        html =
        '<a href=\"tco + img/cards/chaotic-tcg/' + card.setID + '/big/' + card.cardID + '.png\" target=\"_blank\" onfocus=\"blur();\">' +
          '<img src=\"tco + /img/cards/chaotic-tcg/' + card.setID + '/' + card.cardID + '.png\" width=\"150\" alt=\"click to enlarge\" title=\"click to enlarge\">' +
        '</a>';
      }
      return html;
    }


    So the map would have to contain name to ID. Since the image urls are something like this:
    Code:
    <a href="tco + /img/cards/chaotic-tcg/{{number}}/big/{{id}}.png" target="_blank" onfocus="blur();"><img src="/img/cards/chaotic-tcg/1586/126.png" width="150" alt="click to enlarge" title="click to enlarge">
      <img src="tco + /img/cards/chaotic-tcg/{{number}}/{{id}}.png"></img>
    </a>
    *Replace tco with the url of tco.

    The "number" is a four digit identifier that corresponds to card sets within tco
    The "id" is the card (image?) id

    KC, if you could write a script that crawls the card lists for each set and create the json object in the above format (jsonMap), that would be great. 
    The first column in the table is the id and the second is the card name (save as lowercase pls)

    The url for card sets is
     tco + /im/selectCard/series_id/{{setID}}/goal/

    List of Sets


    If you don't want to do it, I'll eventually get around to it. I spent too much time figuring the parsing already.

    Lastly the working jsfiddle: https://jsfiddle.net/epksyL69/5/


    Last edited by Marrillian on Tue Feb 02, 2016 11:53 pm; edited 1 time in total
    avatar
    Marrillian
    Marrillian

    Chaotic Username : KingMaxor4
    Chaotic Coins : 2342
    Location : where the steak is

    Re: Write a script that auto links chaotic creature names to tco pictures

    Post by Marrillian on Tue Feb 02, 2016 11:15 pm

    name


    Oh well it doesn't seem to work on the forum gg
    avatar
    Marrillian
    Marrillian

    Chaotic Username : KingMaxor4
    Chaotic Coins : 2342
    Location : where the steak is

    Re: Write a script that auto links chaotic creature names to tco pictures

    Post by Marrillian on Wed Feb 03, 2016 5:52 pm

    Yay I got help to fix it!

    http://help.forumotion.com/t145714-javascript-inject-images-in-post

    Just gonna wait on that json Tongue


    ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== =====
    Founder and leader of Marrillian Reign. Marrillian
    Supporter of Maxxor Ruler of Perim


    Light vi Britannia - 
    "This is what happens when I take an anime personality quiz..."
    avatar
    Marrillian
    Marrillian

    Chaotic Username : KingMaxor4
    Chaotic Coins : 2342
    Location : where the steak is

    Re: Write a script that auto links chaotic creature names to tco pictures

    Post by Marrillian on Wed Feb 03, 2016 7:55 pm

    http://stackoverflow.com/questions/19187085/how-can-i-quickly-and-easily-convert-spreadsheet-data-to-json

    So I did the first two sets of json by copying the table to excel and then saving as csv. Then using an online csv-to-json tool and "First row is column names" using "name, setID, cardID" and "selecting csv to keyed json".
    But since the images stopped being served, I won't finish the sets. It was cool while it lasted Frown


    ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== =====
    Founder and leader of Marrillian Reign. Marrillian
    Supporter of Maxxor Ruler of Perim


    Light vi Britannia - 
    "This is what happens when I take an anime personality quiz..."
    avatar
    Marrillian
    Marrillian

    Chaotic Username : KingMaxor4
    Chaotic Coins : 2342
    Location : where the steak is

    Re: Write a script that auto links chaotic creature names to tco pictures

    Post by Marrillian on Mon Aug 22, 2016 3:43 pm

    I've hosted a lot of the images in google drive. I'll see if I can modify this script to work with those cards instead. This would be a cool feature.


    ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== =====
    Founder and leader of Marrillian Reign. Marrillian
    Supporter of Maxxor Ruler of Perim


    Light vi Britannia - 
    "This is what happens when I take an anime personality quiz..."

    Sponsored content

    Re: Write a script that auto links chaotic creature names to tco pictures

    Post by Sponsored content


      Current date/time is Sun Jun 25, 2017 2:13 am