Presenting Mafia Reader



  • so, i made this:
    http://mafiareader.duckdns.org/

    currently it shows all the posts from a mafia game into a single stream ordered by date.

    i'm finding it really useful to follow old mafia games.

    Enjoy!

    Notes:

    • I really really suck at UI design, so if anyone wants to contribute css, i'll be glad to use it :D
    • thread colors are derived from this scale: http://colorbrewer2.org/#type=qualitative&scheme=Pastel1&n=3, and a bitmask on the topic id.
    • for the moment i will not crawl current game, leakage potential is too high, if someone wants to figure a way to show current game, we can work on it.
    • Tech stack for the curious: Node and CouchDB for the backend, and React+Redux for the frontend.

    EDIT:
    two more things:
    code is here: https://github.com/Jarry-TDWTF/mafiareader
    because i'm lazy, i didn't found a way to check into the posts to append the https://what.thedailywtf.com/ needed for the relative links of images to work, it's a shame because a lot of the wonderful @r10pez10 art is lost until i fix it.


  • Winner of the 2016 Presidential Election

    if there's a way to easily let players crawl the game themselves, that would let club ded folk use the reader for the current game. as for CSS, I can contribute some tomorrow or something.


  • mod

    @Jarry said in Presenting Mafia Reader:

    i didn't found a way to check into the posts to append the https://what.thedailywtf.com/ needed for the relative links of images to work

    We could get Ben to host it on this domain? :)



  • @Jarry said in Presenting Mafia Reader:

    because i'm lazy, i didn't found a way to check into the posts to append the https://what.thedailywtf.com/ needed for the relative links of images to work, it's a shame because a lot of the wonderful @r10pez10 art is lost until i fix it.

    Why not just redirect /upload/.* to what.thedailywtf.com?



  • @Jarry said in Presenting Mafia Reader:

    currently it shows all the posts from a mafia game into a single stream ordered by date.

    Hm, looks good. Obviously not applicable to current games though, unless you can set up an authentication system.

    Speaking of Mafia, one thing I'd love to see is a plugin for NodeBB allowing to filter the thread by user - it was a nice feature on Discourse (even if it was relatively useless for any threads that weren't Mafia games).



  • For current games, it might be useful even if it just contained the main topic, for searchability?



  • For some reason, the topic title makes me think of an Oxford University Press anthology of short stories, poems, and essays about La Cosa Nostra.


  • Winner of the 2016 Presidential Election

    @Maciejasjmj said in Presenting Mafia Reader:

    @Jarry said in Presenting Mafia Reader:

    currently it shows all the posts from a mafia game into a single stream ordered by date.

    Hm, looks good. Obviously not applicable to current games though, unless you can set up an authentication system.

    Speaking of Mafia, one thing I'd love to see is a plugin for NodeBB allowing to filter the thread by user - it was a nice feature on Discourse (even if it was relatively useless for any threads that weren't Mafia games).

    In the meantime, here's a bit of CSS that can do it - you just have to replace [data-userslug="jarry"] with the userslug for whoever you're searching for. Super simple and easy to use UI's are for users, and we're all developers here, right?

    @-moz-document domain("what.thedailywtf.com") {
      .posts > li {
        display:none
      }
      .posts > [data-userslug="jarry"]{
        display:block
      }
    }
    

    Not tested on infiniscroll with topics large enough to infiniscroll. May have... Interesting results. You should probably just use pages if you're doing this.



  • @ben_lubar
    done. good catch



  • @Fox said in Presenting Mafia Reader:

    if there's a way to easily let players crawl the game themselves, that would let club ded folk use the reader for the current game. as for CSS, I can contribute some tomorrow or something.

    it currently needs the data to be in the server, so, there's not really a way for each user to crawl it's own games.

    @Maciejasjmj said in Presenting Mafia Reader:

    Hm, looks good. Obviously not applicable to current games though, unless you can set up an authentication system.

    authentication, and a way for the crawler to identify itself in the forum to access the non-public threads

    @PleegWat said in Presenting Mafia Reader:

    For current games, it might be useful even if it just contained the main topic, for searchability?

    uhm, that would need some way to listen to the threads. maybe i should look what sockbot does...


  • Winner of the 2016 Presidential Election

    @Jarry Here's some CSS that I think makes it look a bit better, and more user-friendly

    small.pull-right{
    	font-size:20px;
    }div.post-list{
    	width:80%;
    	margin: 20px 10%;
    	background-color:white
    }p+blockquote{
    	top:-10px;
    }blockquote{
    	border: 0px hidden #4e5d6c;
    	border-left: 2px solid #4e5d6c;
    	margin:1px 25px;
    	position:relative
    }blockquote > p:last-child{
    	font-style:normal;
    	line-height:1;
    	margin:1px 15px;
    }select{
    	position:relative;
    	left:50%;
    	font-size:20px;
    	margin:20px
    }post{
    	border-radius:10px;
    	border: 0px hidden;
    }a.plugin-mentions-a{
    	background: rgb(0, 0, 0);
    	background: rgba(0, 0, 0, 0.15);
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    }tr>td>img{
    	border:1px solid black
    }
    

  • Winner of the 2016 Presidential Election

    @Jarry or, if you want to more clearly differentiate the game thread and club ded thread from other (scum) threads (and assuming you use the same exact color for the game thread and club ded threadevery time), here's some different CSS for the posts

    .post{
    	border-radius:10px;
    	border: 0px hidden;
    	width:60%;
    	position:relative;
    	left:23%
    }[style="background-color: rgb(255, 242, 174);"]{
    	left:1%
    }[style="background-color: rgb(244, 202, 228);"]{
    	left:45%
    }
    

  • Winner of the 2016 Presidential Election

    Actually the above makes the border on blockquotes stretch up into the post header if there's nothing above the quote, so

    	small.pull-right{
    		font-size:20px;
    	}div.post-list{
    		width:80%;
    		margin: 20px 10%;
    		background-color:white
    	}p + blockquote{
    		top:-10px;
    	}blockquote{
    		display:inline-block;
    		border: 0px hidden #4e5d6c;
    		position:relative;
    		margin:0px;
    		padding:0px;
    	}blockquote > p:last-child{
    		position:relative;
    		bottom:1%;
    		font-style:normal;
    		line-height:1;
    		border-left: 2px solid #4e5d6c;
    		margin:1px 25px;
    		padding:3px 15px;
    	}select{
    		position:relative;
    		left:50%;
    		font-size:20px;
    		margin:20px
    	}.post{
    		border-radius:10px;
    		border: 0px hidden;
    		width:60%;
    		position:relative;
    		left:23%
    	}[style="background-color: rgb(255, 242, 174);"]{
    		left:1%
    	}[style="background-color: rgb(244, 202, 228);"]{
    		left:45%
    	}a.plugin-mentions-a{
    		background: rgb(0, 0, 0);
    		background: rgba(0, 0, 0, 0.15);
    		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    	}a.plugin-mentions-a:empty{
    		display:none
    	}tr>td>img{
    		border:1px solid black
    	}
    


  • @Fox nice!
    i'll integrate this tonight.
    :bow:


  • Winner of the 2016 Presidential Election


  • mod

    how fast can you get the just finished game loaded?

    Also, why isnt' this in the mafia category?



  • @Yamikuronue
    the topics are public now? i'd say 10'
    this is not in the mafia category because reasons, feel free to jeff it


  • Winner of the 2016 Presidential Election

    @Jarry Yup, game just ended.



  • @Fox
    only three threads?
    20577,20578,20579 ?


  • Winner of the 2016 Presidential Election

    @Jarry Yes, only three, and I'm guessing the ID's are right. Anything starting with "Mafia IX - "




  • Winner of the 2016 Presidential Election

    @Jarry New CSS to include Flame War Mafia's game thread color, and a fix for squished images due to thinner posts

    	small.pull-right{
    		font-size:20px;
    	}div.post-list{
    		width:80%;
    		margin: 20px 10%;
    		background-color:white
    	}div.post-content>p>img{
    		height:auto
    	}p + blockquote{
    		top:-10px;
    	}blockquote{
    		display:inline-block;
    		border: 0px hidden #4e5d6c;
    		position:relative;
    		margin:0px;
    		padding:0px;
    	}blockquote > p:last-child{
    		position:relative;
    		bottom:1%;
    		font-style:normal;
    		line-height:1;
    		border-left: 2px solid #4e5d6c;
    		margin:1px 25px;
    		padding:3px 15px;
    	}select{
    		position:relative;
    		left:50%;
    		font-size:20px;
    		margin:20px
    	}.post{
    		border-radius:10px;
    		border: 0px hidden;
    		width:60%;
    		position:relative;
    		left:23%
    	}[style="background-color: rgb(255, 242, 174);"],[style="background-color: rgb(253, 205, 172);"]{
    		left:1%
    	}[style="background-color: rgb(244, 202, 228);"]{
    		left:45%
    	}a.plugin-mentions-a{
    		background: rgb(0, 0, 0);
    		background: rgba(0, 0, 0, 0.15);
    		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    	}a.plugin-mentions-a:empty{
    		display:none
    	}tr>td>img{
    		border:1px solid black
    	}
    

Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.