Post-Image

steambuddies.robinglauser.ch – Find steam games you can play

Posted on

What this project is about

When my friends come over to my place or when I want to play games online with them, there’s always the question:

What game should we play?

I’ve created this project to answer this question for once for all. You may already have heard of the website steamparty.info, which does something similar.

The problem with their solution is that they don’t filter games based on if they have online multiplayer or local multiplayer.

This is why I’ve created the website steambuddies.robinglauser.ch which offers a solution to all those problems on a really simple and clean web-interface.

Technologies used in this project

The web-application consists of two parts: A simple HTTP API built in PHP which provides the access to steam API and a front-end built with AngularJS.

The PHP API is built with Silex which is perfect for small single page applications. I use it to create a simple JSON API which connects to the Steam API and caches the game information.

In the AngularJS part I’ve created a simple paging system with which I can easily change the slides.

  $scope.activeSlide = 0;

  $scope.nextSlide = function () {
    $scope.goToSlide($scope.activeSlide + 1);
  };

  $scope.goToSlide = function (slide) {
    $scope.activeSlide = slide;
  };

<div class="localoronline slide slide-0" data-ng-class="activeSlide == 0 ? 'active' : ''">
<div class="container">
<h1>Would you like to play on a</h1>
<button data-ng-click="setMode(LOCAL_MODE)">Single PC</button>
or
<button data-ng-click="setMode(ONLINE_MODE)">Online</button>
</div>
</div>
<div class="howmanyplayers slide slide-1" data-ng-class="activeSlide == 1 ? 'active' : ''">
<div class="container">
<h1>How many players?</h1>
<button data-ng-repeat="n in [1,2,3,4,5,6,7,8]" data-ng-click="setPlayers(n)">{{n}}</button>
</div>
</div>

For the API usage I’ve created a factory with Angular Js.


app.factory('steamBuddies', function ($http, $q) {
  return {
    getGames: function (friends) {
      return $q(function (resolve, reject) {
        $http.post('/findmatches', {steam: friends}).then(function (response) {
          if (response.data.status == 'error') {
            reject(response.data.response);
          }
          else {
            resolve(response.data.response);
          }
        });
      });
    }
  };
});

With this I can simply call the API by using the following snippet.

 $scope.loadGame = function () {
    $scope.lastGame = $scope.game.id;
    $scope.game = '';
    $scope.error = '';
    steamBuddies.getGames($scope.players).then(function (d) {
      if ($scope.lastGame == d.id) {
        $scope.loadGame();
      }
      else {
        $scope.game = d;
      }
    }, function (rejected) {
      $scope.error = rejected;
    });
  };

How the project looks for the end user

When the user first loads the page he can choose whether he wants to play on a single computer or if he wants to play online with multiple players.

After the user enters the steam id for all players the api find games you can play.

Those will either be games all players have or games with local ko-op if you choose to play locally.

Bellow you can see how it works as a animation.

steamgames

If you want to test it out yourself, you can do that at http://steambuddies.robinglauser.ch/

Don’t hesitate to leave a comment if you have any feedback, ideas or new improvements.

 

Leave a Reply