DEV Community: DishyDev

Hacking together a quick multiplayer browser game to play during lockdown

DishyDev — Sat, 25 Apr 2020 17:50:45 +0000

Hacking together a quick multiplayer browser game to play during lockdown

This is a little web game I knocked together this week to play with friends during lockdown. We were looking for an easy to play simple version of Yatzy and all of the ones we were finding required linking your social media, going through long tutorials and had micro-transactions.

So I spent my evenings this week knocking together a simple multiplayer web app version to play.

And here's a link to what I created - Yatzy

The philosophy of it

I was inspired by the CodeNames game you can play at horsepaste.com which is a simple easy to play implementation of the game. You just come up with a unique game code, and anyone who has that code can join.

The architecture

The rough architecture of the game looked like this.

Bulma is a really clean, simple to use CSS only front-end framework. It resizes really nicely onto mobile devices.
A bit of JQuery was used to provide dynamic behaviour for the front-end. I know JQuery very out of style at the moment but I like how quick you can get up and running it with, and I didn't feel my app was complex enough to need React/Angular/Vue.
The logic of the game was implemented with a basic Python Flask app.
And I used Azure Table Storage to handle managing game state, scores, player lists etc. It's a simple documentDB store and its very cheap compared to SQL DBs on Azure.

Conclusions

I've been pretty pleased with the results. Nothing ground breaking, but a very playable experience.

I'll be doing more articles going forward about performance, some of the horrible hacks used to get it going and some reflections on what I learned. But for now if you want to have a play on the game you can do so here - Yatzy.

Creating a Reddit /r/anime Image Scraper

DishyDev — Thu, 27 Feb 2020 20:20:22 +0000

Scraping Images from Reddit /r/anime

Following on from my previous article about scraping images from Reddit, I decided to expand the concept out to a more fully featured tool.

I think Reddit's /r/anime is one of the most entertaining and best subreddits. Something that drives this is they have a bot that creates discussion threads for new episodes as they go out. They generate a lot of discussion and screenshots for shows.

I noticed since the threads are generated by a bot, its easy to search and get a list of all of the discussion threads for a show.

I decided to have a go to see how easy it was to implement an episode search.

Search for Episodes

The PRAW library makes it trivial to search Reddit.

subreddit = reddit.subreddit('anime')
matches = subreddit.search('violet evergarden', limit=250)

From here we can RegEx someones search string into a query to find all of the threads that match the ShowName - Episode discussion format.

REGEX_STR = '.*' + filteredName.replace(' ','.+') + '.*Episode\\D+(\\d+).+discussion.*'

This combined with the image search from the last article machines for a nice little scraper based on show name.

Frontend

The Frontend uses a simple CSS only framework Bulma for the UI. I'm really impressed with how easy it is to get an image window up for the preview feature of the app.

And the loading bars are nice too

This with a bit of JQuery to let us search the API and populate the results. It's a bit hacky so I've not gone into much detail on it, it'll be doing more work with it for the next article. The API is all served up through Azure Functions.

You can give it a try on my site below Reddit Anime Scraper Version 2.

Next Steps

It'd be nice to allow scrolling through the images while in fullscreen mode through arrow keys or buttons each side of the image.
These lookups are slow. There's an opportunity to implement a caching solution that looks at the number of comments or another flag to let us re-use lookups.

Scraping Images from Reddit Threads in Python

DishyDev — Sun, 23 Feb 2020 18:12:25 +0000

Introduction

This is a little side project I did to try and scrape images out of reddit threads. There's a few different subreddits discussing shows, specifically /r/anime where users add a lot screenshots of the episodes. And I thought it'd be cool to see how much effort it'd be to automatically collate a list of those screenshots from a thread and display them in a simple gallery. The result looked like this

PRAW

PRAW is the Python Reddit API Wrapper, that provides a nice set of bindings to talk to Reddit.

To scrape Reddit you need credentials. The way to generate credentials is hidden away at https://www.reddit.com/prefs/apps where you have to register a new "app" with Reddit. Connecting is as simple as

import praw

reddit = praw.Reddit(client_id='id', \
                     client_secret='secret', \
                     user_agent='useragent', \
                     username='username', \
                     password='DevToIsCool')

Traversing reddit is made simple by the API, for example printing all of the comments in a thread.

submission = reddit.submission(url="https://reddit.com/r/abcde")
for comment in submission.comments.list():
    print(comment)

Finding links

99% of the images I was looking for are posted to imgur so I just matched on those. I used a regular expression to extract the links. I always recommend using a tool like RegEx101 that makes it really easy to debug your regular expressions as they can be pretty brain bending.

    REGEX_TEST = r"((http|https)://i.imgur.com/.+?(jpg|png))"
    p = re.compile(REGEX_TEST, re.IGNORECASE)

Check if an image still exists

One of the problems I found was dead image links, so I created a simple helper that checks the status_code for that link.

# Check if a link still is exists
def checkLinkActive(url):
    request = requests.head(url)
    if request.status_code == 200:
        return True
    else:
        return False

Getting Thumbnails

To save bandwidth and your mobile data I wanted to return a smaller version of the image. In imgur you can append a size character onto a URL to get it at a different size, for example 'l' large and 's' small.

# Add a letter to an imgur url to make a small thumbnail
def getImgurThumbnail(url, size):
    startStr = url[:(len(url)-4)]
    endStr = url[len(url)-4:]
    return startStr + size + endStr

Putting it all together

Putting all of these bits together you get

def getImages(url):
    submission = reddit.submission(url=url)
    # Tell API to return all comment in thread, results are
    # paginated by default
    submission.comments.replace_more(limit=None)

    # Create RegEx object for matching images
    REGEX_TEST = r"((http|https)://i.imgur.com/.+?(jpg|png))"
    p = re.compile(REGEX_TEST, re.IGNORECASE)

    imageMatches = []
    for comment in submission.comments.list():
        matches = p.findall(comment.body)
        for match in matches:
            if checkLinkActive(match[0]):
                imageMatches.append(
                    {"image": match[0], "thumbnail": getImgurThumbnail(match[0], "m")}
                )

    return imageMatches

Trying it out

I decided to stand up a quick demo of this, using an Azure Function to host my new function and a simple web form to allow people to try it out. Just copy and paste a Reddit URL and the function will return any images.

The Demo App uses Bulma for the look and feel, and a little bit of JQuery for the loading of the page.

If you want to give it a go, you can have a play on my site here.

I'll be looking in a future article at providing a show name search instead of having to paste individual episode URLs. Happy Reddit scraping!

Deploying a quick Markdown Site on Azure

DishyDev — Sat, 22 Feb 2020 15:11:49 +0000

Deploying Markdown Site on Azure

This blog was originally posted on my site and I thought I might share it here. I've found a pattern I like using a python markdown generator to get a simple site up and running quickly. I had three main requirements

Markdown
- I wanted to use Markdown as I use it day to day, and I think its a quick way to get ideas down without having to mess around with rich text formatting.
Static Site
- I wanted to keep this as simple and clean as possible, just HTML, CSS and JS.
Azure
- I wanted to deploy the site through Azure as its the cloud service I'm most familiar with.

MkDocs

MkDocs is a really elegant, fast way to build a static site from markdown. You can create a site from just a configuration file and a set of markdown files. Getting started is as simple as

pip install mkdocs
mkdocs new my-new-project
mkdocs serve

And viola! You've got a site with navigation, search facility, table of contents and a theme that renders nicely on mobile and desktop.

Whenever you save a change to the site it gets rebuilt.

Adding new pages and updating the navigation is just updating the root mkdocs.yml YAML file to point towards new markdown files.

site_name: Dishy Dev
nav:
  - Home: index.md
  - Article:
    - 'My Cool Article': 'articles/cool-article-1.md'

Themes

MkDocs comes with a selection of themes that can be easily installed through pip. In the end I went with Cinder, a clean style based on Bootstrap.
After pip install mkdocs-cinder getting it going was updating the mkdocs.yml file.

theme: cinder

Hosting Static Site

The quickest and easiest way for me to start hosting my site was through an Azure Storage account. Azure Storage supports Static Site Hosting where you can serve up the contents of a container called $web.

Building Site

Building the site is done through the mkdocs build command. This generates a sites directory. MkDocs will give you everything you need for your site, you just need to get those files served up over a web server.

I just used Azure Storage Explorer to upload the generated site directory into Azure Storage.

In future I'm going to look at how to automate this step so the site can be rebuilt and re-uploaded every time a new version is created (Azure Functions with an Event on the Storage Container possibly).

Adding a CDN

Something that caused me a lot of fustration and wasted time was trying to link my domain name to my storage. Ideally I wanted to serve up the contents of my storage straight through the dishy.dev domain name. I couldn't get the storage serving up over the root domain, it was always on a subdomain.

In the end I found out that the scenario I was trying to do wasn't possible, and that using a CDN to serve up the storage contents would allow me to quickly link my domain.

CDN setup can be quite confusing but Microsoft have some good guidance on how to do it. Remember to enable http to https redirection in your CDN rules. And if you want to let people access your site without needing "www." at the front Arlan Blogs - Adding a Root Domain to Azure CDN Endpoint has instructions on how to do this.

Adding Telemetry

In the mkdocs.yml I added a link to an Azure Application Insights Snippet to let me see what sort of traffic the site was generating.

extra_javascript:
  - 'scripts/application_insights.js'

And there you have it, not bad for a couple of hours work. A really quick way to stand up a quick site for blogging or documentation.

MkDocs is very extendable with a lot of plugins available to easily expand your site. Tagging of your pages, Minifiers for your build etc so there's plenty of scope to build more complex sites.