Half-Life Fallout: A Glimpse of our horrors - Half-Life Fallout

Jump to content

  • (3 Pages)
  • +
  • 1
  • 2
  • 3
  • You cannot start a new topic
  • You cannot reply to this topic

A Glimpse of our horrors



G-Man Personal Aid

Posts: 2,452

#16 Posted 12 February 2016 - 04:15 AM

The main page that links to irc via iframe has scrolling="no". That is what I'd remove to re-enable scrolling.
Does Gabe Newell ever wonder what life would be like without Gordon Freeman?

Posted Image



Ivan the Space Biker's Personal Aid

Posts: 6,964

Icon

#17 Posted 12 February 2016 - 07:45 AM

ok, let me re-iterate

SCROLLBARS = BAD

Let me put this in code form:


BrainLogit_t _brainLogic = getBrainLogic();

if(make_string(_brainLogic) == "scrollbars are a good idea")
{
	run("C:\self_destruct.exe");

	char *ptr_seg_fault = NULL;

	ptr_seg_fault[1] = '!';		
} 


Posted Image



G-Man Personal Aid

Posts: 2,452

#18 Posted 12 February 2016 - 01:31 PM

I got vibe that during the irc chat so I am not considering scrollbars.

I couldn't screencap my design while capturing the hover text but here is source:

<!DOCTYPE html>
<html>
<head>
    <title>#HLFallout Chat History</title>
    <style>
        body.irc
        {
            font-family: Helvetica,Arial,sans-serif;
            background-color: #fff;
            font-size: 14px;
            white-space:nowrap;
            overflow: hidden;
        }

        div.date
        {
            background-color: #606060;
            color: #fff;
            padding: 10px;
            margin-bottom: 5px;
        }

        div.date a
        {
            color: #fff;
        }

        span.nick
        {
            white-space: nowrap;
            color: #ee8514;
            font-weight: bold;
            width: 70px;
            display: inline-block;
        }

        span.date
        {
            white-space: nowrap;
            color: #ee8514;
            font-weight: bold;
        }

        span.t
        {
            white-space: normal;
            color: #606060;
        }

        a
        {
            color: #ee8514;
            text-decoration: underline;
            font-weight: bold;
        }
        a:hover
        {
            color: #000;
        }
    </style>
</head>
<body class="irc">
    <div class="date">
        <div style="float:right">Thu Feb 11 17:42:46 2016</div>
        <div style="text-align:left;">
            <a href="http://gamesurge.net/chat" target="_blank" alt="Join us now!">#hlfallout</a>
        </div>
    </div>

    <span class="nick" title="Brumisator the Onionator">Brumis.. </span><span class="text">Check it out! <a href="http://gamesurge.net/chat" target="_blank" alt="Join us now!">#hlfallout</a></span><br />
    <span class="nick">Poseidon </span><span class="t">lol, people can't see quotes on hfl</span><br />
    <span class="nick">Trooper </span><span class="t">TEXT14</span><br />
    <span class="nick" title="Headmonkeys">Headmo.. </span><span class="t" title="You don't know about Dave Lynch?  Ok, here are a dozen movies you need to watch NAO!">You don't know about Dave Lynch?  O..</span><br />
    <span class="nick">Grumpy </span><span class="t">Aw man, Snow White, what a bitch!</span><br />
    <span class="nick" title="screech">screech </span><span class="t">TEXT11</span><br />
    <span class="nick" title="Athena">Athena </span><span class="t" title="My garden has some of the best hash out there no joke">My garden has some of the best hash..</span><br />
    <span class="nick">Pluto </span><span class="t">TEXT9</span><br />
    <span class="nick">Apophis </span><span class="t">TEXT8</span><br />
    <span class="nick" title="Big Bad Wolf">Big Ba.. </span><span class="t">TEXT7</span><br />
    <span class="nick">Santa </span><span class="t">TEXT6</span><br />
    <span class="nick">Yo Mama </span><span class="t">So fat</span><br />
    <span class="nick" title="Aaron Rodgers">Aaron R.. </span><span class="t">I need some god-damn receivers</span><br />
    <span class="nick">NICK3 </span><span class="t">TEXT3</span><br />
    <span class="nick">NICK2 </span><span class="t">TEXT2</span><br />
    <span class="nick">NICK1 </span><span class="t">TEXT1</span><br />
</body>
</html>


Differences in this: span.nick has display:inline-block and a width property to emulate a min-width like a table column and I show examples of how we'd abbreviate/cut-off nicks or texts that are too long.

As I said though we'd likely have to modify the Lua script that takes in the template to append title attributes and use a function that generates the title attribute value and replacement text.
Does Gabe Newell ever wonder what life would be like without Gordon Freeman?

Posted Image



Ivan the Space Biker's Personal Aid

Posts: 6,964

Icon

#19 Posted 13 February 2016 - 05:21 PM

View Postscreechingringer, on 12 February 2016 - 08:31 AM, said:

Differences in this: span.nick has display:inline-block and a width property to emulate a min-width like a table column and I show examples of how we'd abbreviate/cut-off nicks or texts that are too long.

As I said though we'd likely have to modify the Lua script that takes in the template to append title attributes and use a function that generates the title attribute value and replacement text.


I get were your going with that, but space is at a premium, for long nicks that will each up all the text available for all irc posts. You should reconsider your plan. Also, I can replace any text with specifics about the irc, but you need to switch the text you want replaced with something unique like TITLE1, etc..

also,


due to technical difficulties, I am going to test your designs before nilly wily added them to the site. There are some bugs that need to be resolved...

One thing you can do to test it out is to create a box of size 560px by 265px and inserting an iframe that will contain the template file

You can play around with that as much as you want until you get it the way you want it to look. If you need additional elements, like string length I will add it.

I was hoping for more cosmetic changes, like backgrounds, colors, make it nice and purdy like the website.


Posted Image



G-Man Personal Aid

Posts: 2,452

#20 Posted 13 February 2016 - 06:23 PM

In fact I have added the abbreviation code with the template so no changes to HLFbot are needed.

I have been testing this locally with a basic page and an iframe of width of about 560px and have scrolling turned off.

This test successfully abbreviates nicks and messages.

The important lacking as you pointed out is variable pixel-width of font characters making the max width settings suspect, but this is about as good as I got without importing jquery or other font metric libraries:
<!DOCTYPE html>
<html>
<head>
    <title>#HLFallout Chat History</title>
    <style>
        body.irc {
            font-family: Helvetica,Arial,sans-serif;
            background-color: #fff;
            font-size: 14px;
            white-space:nowrap;
            overflow: hidden;
        }
        div.date {
            background-color: #606060;
            color: #fff;
            padding: 10px;
            margin-bottom: 5px;
        }
        div.date a {
            color: #fff;
        }
        span.nick {
            white-space: nowrap;
            color: #ee8514;
            font-weight: bold;
            width: 80px;
            display: inline-block;
        }
        span.date {
            white-space: nowrap;
            color: #ee8514;
            font-weight: bold;
        }
        span.msg {
            white-space: normal;
            color: #606060;
            width: 400px;
            display: inline-block;
        }
        a {
            color: #ee8514;
            text-decoration: underline;
            font-weight: bold;
        }
        a:hover {
            color: #000;
        }
    </style>
    <script type="text/javascript">
        function TextNodeAbbreviation(element, maxLength) {
            this.element = element;
            this.maxLength = maxLength;
            this.fullText = this.sourceTextNode().data;
            this.cappedText = this.capText();
        }
        TextNodeAbbreviation.prototype.capText = function() {
            var sourceText = this.sourceText();
            return (sourceText.length > this.maxLength ? sourceText.substring(0, this.maxLength - 3) + "..." : null);
        }
        TextNodeAbbreviation.prototype.abbreviatorTextNode = function() {
            return (this.cappedText != null ? document.createTextNode(this.cappedText) : null);
        }
        TextNodeAbbreviation.prototype.sourceTextNode = function() {
            return this.element.childNodes[0];
        }
        TextNodeAbbreviation.prototype.sourceText = function() {
            return this.sourceTextNode().data;
        }
        TextNodeAbbreviation.prototype.onAbbreviate = function(abbreviateHandler) {
            if (this.cappedText != null) {
                abbreviateHandler(this.element, this.sourceTextNode(), this.abbreviatorTextNode());
            }
        }
        function abbreviate(elements, maxLength) {
            for (var i = 0; i < elements.length; i++) {
                var abbreviation = new TextNodeAbbreviation(elements[i], maxLength);
                abbreviation.onAbbreviate(function(element, sourceTextNode, abbreviatorTextNode) {
                    element.replaceChild(abbreviatorTextNode, sourceTextNode);
                    element.setAttribute("title", sourceTextNode.data);
                });
            }
        }
        function abbreviateAll() {
            abbreviate(document.getElementsByClassName("nick"), 10);
            abbreviate(document.getElementsByClassName("msg"), 60);
        }
    </script>
</head>
<body class="irc" onload="abbreviateAll()">
    <div class="date">
        <div style="float:right">IRC_LOG_DATE</div>
        <div style="text-align:left;">
            <a href="http://gamesurge.net/chat" target="_blank" alt="Join us now!">#hlfallout</a>
        </div>
    </div>

    <span class="nick">NICK16 </span><span class="msg">TEXT16</span><br />
    <span class="nick">NICK15 </span><span class="msg">TEXT15</span><br />
    <span class="nick">NICK14 </span><span class="msg">TEXT14</span><br />
    <span class="nick">NICK13 </span><span class="msg">TEXT13</span><br />
    <span class="nick">NICK12 </span><span class="msg">TEXT12</span><br />
    <span class="nick">NICK11 </span><span class="msg">TEXT11</span><br />
    <span class="nick">NICK10 </span><span class="msg">TEXT10</span><br />
    <span class="nick">NICK9 </span><span class="msg">TEXT9</span><br />
    <span class="nick">NICK8 </span><span class="msg">TEXT8</span><br />
    <span class="nick">NICK7 </span><span class="msg">TEXT7</span><br />
    <span class="nick">NICK6 </span><span class="msg">TEXT6</span><br />
    <span class="nick">NICK5 </span><span class="msg">TEXT5</span><br />
    <span class="nick">NICK4 </span><span class="msg">TEXT4</span><br />
    <span class="nick">NICK3 </span><span class="msg">TEXT3</span><br />
    <span class="nick">NICK2 </span><span class="msg">TEXT2</span><br />
    <span class="nick">NICK1 </span><span class="msg">TEXT1</span><br />
</body>
</html>

Does Gabe Newell ever wonder what life would be like without Gordon Freeman?

Posted Image



Gordon Freeman's Personal Aid

Posts: 7,731

#21 Posted 14 February 2016 - 05:13 AM

Only thing I changed is I set a fixed height on the body.irc so it's the same size as the iframe. It's 260px right now but you can adjust it until it is the right length and no longer scrolls the iframe.

<!DOCTYPE html>
<html>
<head>
    <title>#HLFallout Chat History</title>
    <style>
        body.irc
        {
            height: 260px;
            font-family: Helvetica,Arial,sans-serif;   
            background-color: #fff;
            font-size: 14px;
            white-space:nowrap;
            overflow: hidden;
        }

        div.date
        {
            background-color: #606060;
            color: #fff;
            padding: 10px;
            margin-bottom: 5px;
        }

        div.date a
        {
            color: #fff;
        }

        span.nick
        {
            white-space: nowrap;
            color: #ee8514;
            font-weight: bold;
        }

        span.date
        {
            white-space: nowrap;
            color: #ee8514;
            font-weight: bold;
        }
        
        span.t 
        {
            white-space: normal;
            color: #606060;
        }
        
        a
        {
            color: #ee8514;
            text-decoration: underline;
            font-weight: bold;
        }
        a:hover
        {
            color: #000;
        }
    </style>
</head>
<body class="irc">
    <div class="date">
        <div style="float:right">IRC_LOG_DATE</div>
        <div style="text-align:left;">
            <a href="http://gamesurge.net/chat" target="_blank" alt="Join us now!">#hlfallout</a>
        </div>
    </div>
        
    <span class="nick">NICK16 </span><span class="text"><a href="http://gamesurge.net/chat" target="_blank" alt="Join us now!">#hlfallout</a></span><br />    
    <span class="nick">NICK15 </span><span class="t">lol, people can't see quotes on hfl</span><br />
    <span class="nick">NICK14 </span><span class="t">TEXT14</span><br />
    <span class="nick">NICK13 </span><span class="t">TEXT13</span><br />    
    <span class="nick">NICK12 </span><span class="t">some of my friends already have one or two, or are working on it. Kids are never something I've wanted. Being an uncle is close enough for me, and that only started recently.</span><br />
    <span class="nick">NICK11 </span><span class="t">TEXT11</span><br />
    <span class="nick">NICK10 </span><span class="t">TEXT10</span><br />
    <span class="nick">NICK9 </span><span class="t">TEXT9</span><br />
    <span class="nick">NICK8 </span><span class="t">TEXT8</span><br />
    <span class="nick">NICK7 </span><span class="t">TEXT7</span><br />
    <span class="nick">NICK6 </span><span class="t">TEXT6</span><br />
    <span class="nick">NICK5 </span><span class="t">TEXT5</span><br />
    <span class="nick">NICK4 </span><span class="t">TEXT4</span><br />
    <span class="nick">NICK3 </span><span class="t">TEXT3</span><br />
    <span class="nick">NICK2 </span><span class="t">TEXT2</span><br />
    <span class="nick">NICK1 </span><span class="t">TEXT1</span><br />
</body>
</html>




Ivan the Space Biker's Personal Aid

Posts: 6,964

Icon

#22 Posted 14 February 2016 - 07:36 AM

updated to screech's new code, adding a small edit to hide overflow and align right to look like irc.

im liking it, you can also hover over the text to show the full text which is pretty cool. good job to screech. I think whats missing is some sort of vertical line between the nick and the text to make it look like the chat app

Here is my changes:

<!DOCTYPE html>
<html>
<head>
    <title>#HLFallout Chat History</title>
    <style>
        body.irc {
            font-family: Helvetica,Arial,sans-serif;
            background-color: #fff;
            font-size: 14px;
            white-space:nowrap;
            overflow: hidden;
        }
        div.date {
            background-color: #606060;
            color: #fff;
            padding: 10px;
            margin-bottom: 9px;
        }
        div.date a {
            color: #fff;
        }
        span.nick {
            white-space: nowrap;
            color: #ee8514;
            font-weight: bold;
            width: 100px;
            display: inline-block;
			margin-top:0px;
			margin-right:6px;
			text-align:right;
        }
        span.date {
            white-space: nowrap;
            color: #ee8514;
            font-weight: bold;
			margin-bottom: 4px;
        }
        span.msg {
            white-space: normal;
            color: #606060;
            width: 400px;
            display: inline-block;
			margin-top:0px;
        }
        a {
            color: #ee8514;
            text-decoration: underline;
            font-weight: bold;
        }
        a:hover {
            color: #000;
        }
    </style>
    <script type="text/javascript">
        function TextNodeAbbreviation(element, maxLength) {
            this.element = element;
            this.maxLength = maxLength;
            this.fullText = this.sourceTextNode().data;
            this.cappedText = this.capText();
        }
        TextNodeAbbreviation.prototype.capText = function() {
            var sourceText = this.sourceText();
            return (sourceText.length > this.maxLength ? sourceText.substring(0, this.maxLength - 3) + "..." : null);
        }
        TextNodeAbbreviation.prototype.abbreviatorTextNode = function() {
            return (this.cappedText != null ? document.createTextNode(this.cappedText) : null);
        }
        TextNodeAbbreviation.prototype.sourceTextNode = function() {
            return this.element.childNodes[0];
        }
        TextNodeAbbreviation.prototype.sourceText = function() {
            return this.sourceTextNode().data;
        }
        TextNodeAbbreviation.prototype.onAbbreviate = function(abbreviateHandler) {
            if (this.cappedText != null) {
                abbreviateHandler(this.element, this.sourceTextNode(), this.abbreviatorTextNode());
            }
        }
        function abbreviate(elements, maxLength) {
            for (var i = 0; i < elements.length; i++) {
                var abbreviation = new TextNodeAbbreviation(elements[i], maxLength);
                abbreviation.onAbbreviate(function(element, sourceTextNode, abbreviatorTextNode) {
                    element.replaceChild(abbreviatorTextNode, sourceTextNode);
                    element.setAttribute("title", sourceTextNode.data);
                });
            }
        }
        function abbreviateAll() {
            abbreviate(document.getElementsByClassName("nick"), 15);
            abbreviate(document.getElementsByClassName("msg"), 60);
        }
    </script>
</head>
<body class="irc" onload="abbreviateAll()">
    <div class="date">
        <div style="float:right">IRC_LOG_DATE</div>
        <div style="text-align:left;">
            <a href="http://gamesurge.net/chat" target="_blank" alt="Join us now!">#hlfallout</a>
        </div>
    </div>

    <span class="nick">NICK16 </span><span class="msg">TEXT16</span><br />
    <span class="nick">NICK15 </span><span class="msg">TEXT15</span><br />
    <span class="nick">NICK14 </span><span class="msg">TEXT14</span><br />
    <span class="nick">NICK13 </span><span class="msg">TEXT13</span><br />
    <span class="nick">NICK12 </span><span class="msg">TEXT12</span><br />
    <span class="nick">NICK11 </span><span class="msg">TEXT11</span><br />
    <span class="nick">NICK10 </span><span class="msg">TEXT10</span><br />
    <span class="nick">NICK9 </span><span class="msg">TEXT9</span><br />
    <span class="nick">NICK8 </span><span class="msg">TEXT8</span><br />
    <span class="nick">NICK7 </span><span class="msg">TEXT7</span><br />
    <span class="nick">NICK6 </span><span class="msg">TEXT6</span><br />
    <span class="nick">NICK5 </span><span class="msg">TEXT5</span><br />
    <span class="nick">NICK4 </span><span class="msg">TEXT4</span><br />
    <span class="nick">NICK3 </span><span class="msg">TEXT3</span><br />
    <span class="nick">NICK2 </span><span class="msg">TEXT2</span><br />
    <span class="nick">NICK1 </span><span class="msg">TEXT1</span><br />
</body>
</html>

Posted Image



G-Man Personal Aid

Posts: 2,452

#23 Posted 14 February 2016 - 02:00 PM

Shits and giggles I created a Github repository for people to make grand experiments:

https://github.com/tinyrye/hlfallout

Now we are thinking with branches (portals).
Does Gabe Newell ever wonder what life would be like without Gordon Freeman?

Posted Image



Mr Macintosh

Posts: 16,888

Icon

#24 Posted 14 February 2016 - 08:17 PM

Ok guys I'm a bit new to this... took a few hours but I think I did my first code!

  }

font-family: comic-sans ,divorced,2kids;

color: #6969696969;


Hello World


</httpml.org>


node?

Posted Image



Sex bomb

Posts: 11,469

#25 Posted 14 February 2016 - 09:11 PM

View PostCity 17, on 14 February 2016 - 06:17 PM, said:

Ok guys I'm a bit new to this... took a few hours but I think I did my first code!

  }

font-family: comic-sans ,divorced,2kids;

color: #6969696969;


Hello World


</httpml.org>


node?


we've got the next steve jobs right here



Hupsakee!

Posts: 21,012

Icon

#26 Posted 15 February 2016 - 06:45 PM

View PostCity 17, on 14 February 2016 - 10:17 PM, said:

Ok guys I'm a bit new to this... took a few hours but I think I did my first code!

  }

font-family: comic-sans ,divorced,2kids;

color: #6969696969;


Hello World


</httpml.org>


node?


I tried running it, I got Node Graph Out of Date, rebuilding.
Posted Image
A Vvaardenfell sunset



Mr Macintosh

Posts: 16,888

Icon

#27 Posted 15 February 2016 - 07:30 PM

HAHA YOU SUCKER! I HAVE INSTAILED A SUPER VIRRRUS ON YOU NOW!!!!


Posted Image


Posted Image

Posted Image

Posted Image



Hupsakee!

Posts: 21,012

Icon

#28 Posted 15 February 2016 - 10:08 PM

my CS:S reference was too obscure, how sad
Posted Image
A Vvaardenfell sunset



Gordon Freeman's Personal Aid

Posts: 7,731

#29 Posted 16 February 2016 - 06:04 AM

You don't need Javascript, you can use the CSS property "text-overflow: ellipsis" and set a "max-width" instead. Compared to the above script you lose the title attribute but you'll gain a lot of simplicity and independence from different font sizes. I'll do a write up later.



G-Man Personal Aid

Posts: 2,452

#30 Posted 16 February 2016 - 01:42 PM

So are we going to display the overflow in any capacity? Because that was the whole point.
Does Gabe Newell ever wonder what life would be like without Gordon Freeman?

Posted Image

  • (3 Pages)
  • +
  • 1
  • 2
  • 3
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users