Giter Club home page Giter Club logo

shitishot's Introduction

🔥 The Shit Is Hot

Twitter The Shit Is Hot

This project is inspired by the segment Der Scheiß ist heiß on NEO MAGAZIN ROYALE. It's derived from The Price Is Right but in this game, you have to guess how many hits the shown words generate in a search engine and then place them in the correct order.

You can play The Shit Is Hot at shitishot.de.

More background information and reactions to the release, can be read in my blog post. It's in German since this game is inspired by a German late-night talk show.

Made With

Words for new games are generated via Wikipedia. Search results come from Yandex, Google (experimental), and Bing (experimental). Google and Bing are experimental because web scraping is used.

Thanks to Wikipedia's open API, it can be used purely client-side. However, the numbers of search results are (and have to be) retrieved from a backend. The server applications used are:

Install

Install Node.js® and npm if they are not already on your machine. brew install node is recommended on macOS.

npm install

Start

npm run start

The run script start executes ng serve with open and aot options.

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the --open (or just -o) option will automatically open your browser on http://localhost:4200/.

Using the --aot (Ahead-of-Time) option will compile the app at build time.

Deploy

This project is hosted on GitHub Pages with a custom domain and uses angular-cli-ghpages to publish it.

npm run deploy

The run script deploy executes

  • npm install to ensure dependencies are installed (and in the correct version),
  • ng lint to lint the app code using TSLint,
  • ng build with prod environment,
  • writing shitishot.de into dist/CNAME for using a custom domain (see FAQ of angular-cli-ghpages), and
  • ngh (short for angular-cli-ghpages) to publish the output at dist into the gh-pages branch.

Scripts

"scripts": {
  "ng": "ng",
  "start": "ng serve --open --aot",
  "deploy": "npm install && ng build --prod && echo \"shitishot.de\" > dist/CNAME && ngh",
  "lint": "ng lint"
}

License

Distributed under the MIT license. See the LICENSE file for more info.

shitishot's People

Contributors

tobihagemann avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

ppaivr alyoneek

shitishot's Issues

Repeated answers in subsequent rounds

I was playing 2 rounds of the game and immediately got some of the answers from round one also in round two. This limits fun in the game as I already know the answer from previous round.

Refactor components

Currently, services almost only contain logic that deals with server communication. Therefore, components have too much application logic that isn't associated with a specific view. This is a misconception of mine.

Components should be refactored and their application logic should be moved to (new) services.

Dedicated backend

Currently, retrieving the number of search results is not optimal.

  • Yandex has a limit of 10,000 requests per day. And its results aren't really what you would expect.
  • Google and Bing are marked as experimental because the numbers are retrieved via web scraping. When too many requests are made, they respond either with HTTP error 503 or false numbers.

A dedicated backend for this game with a database that saves the number of search results for certain words would at least solve some uncertainty.

I'll probably never be able to solve this for creating custom games because new words will always generate new requests to a search engine.

Drag'n'Drop does not work in Firefox

The drag'n'drop feature seems to be broken and does not work in Firefox.
Most times it's possible to drop an item in exactly one place, sometimes it's not possible to drop it somewhere at all.
Unfortunateley this is a game breaker. ;)

Since Firefox is a modern browser supporting latest web features it must be an issue in code.
Tested in Firefox 59.

Add TSLint rules

Even though this project already has a TSLint dependency, it's currently unused. A set of TSLint rules should be added.

Change navigation paradigm

Currently, the navigation works like a typical website. The navigation bar doesn't really change (except some colors) when navigating to a subpage like settings.

This kind of navigation is confusing when it's viewed as an app or a game. You'd always want to return to the main page because that's where the game is being played. Even though it's already possible by pressing the logo, it's not intuitive.

When visiting a subpage, the navigation bar should change and show a back button or something like that.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.