Slot Machine

Slot machine that can be controlled with triggers from Streamer.bot

Slot Machine v1

Requirements:

Slot Machine v1

Fully Customizable Slot Machine v1.0.0




Fully customizable slot machine that can be controlled through chat commands using Streamer.bot.

Original Pen created by user Rattatat on CodePen.

Pen tweaked and modified by MarkusoOoO to communicate with Streamer.bot.

This project uses VueJS to create interactive Slot Machine which can be controled using websocket server that communicates with Streamer.bot (SB for short from now on in this document).

You can control Slot Machine using commands written into the chat of your stream.

Example video



Slot Machine DemoOverlay on top of the browser source seen in this example was drawn by my lovely wife <3 FoxyThePurpleWitch <3

Chat widget seen in the demo was made by Blackywersonst.

Guide to make this work for you



Prerequisites

*Examples of points system that can be used for this project:


Video Guide

Video instructions coming soon (I say that a lot).

Below is a text version in the "meantime".


Text Guide

  1. This guide assumes, that OBS and SB are installed, SB is connected to Twitch and/or Youtube and to the OBS itself

    (you can find a tutorial on how to do all of this on Youtube for example).

  2. Unzip the zip file downloaded from Ko-Fi page mentioned in Prerequisites part of this guide.

    In the unzipped folder, there are two items, LICENSE.txt and folder called SlotMachine.

    Place folder SlotMachine somewhere on your system, we will need to reference it later.

    For example, I will put it into the path D:\StreamingStuff\SlotMachine.

  3. Open OBS and create new Scene (take note of the EXACT name of this scene) and in this scene, Add > Browser (also take note of EXACT name of this source).

Lets go over the fields in Browser source
OBS browser source settings


slotObsDemogif.gif

OBS part is now done! Pat yourself on head and smile! :3

  1. Let's setup SB now.
Streamer.bot actions and commands import
How to import actions and commands into SB

Navigate into D:\StreamingStuff\SlotMachine\StreamerBot,
and make sure, you have SM-ImportString.txt in this path ready.

In SB, click on Import (on the top bar of the window).

A new window called Import Actions should appear.

Drag and drop SM-ImportString.txt file into the Import String field.

You should see 8/8 actions and 6/6 commands being selected.

Click Import and on popup window click OK (we are gonna address that popup window right now and enable commands).

In SB, click on tab Commands, find a group called SlotMachine, right click that group (with blue color), select Group > Enable All (or enable all commands one by one, if you struggle to find the option described).

slotSBimport.gif

Slot Machine websockets settings
SB websocket server settings

Now we need to make sure, that SB can communicate with Slot Machine.

Select tab Servers/Clients > Websocket Server (Server, not Servers!).

Check Auto Start (to make sure, we do not need to start the server every time we restart SB). And click on Start Server.

Take note of the Address, Port and Endpoint. These must match with variables in script.js (open this file with Notepad, or other favorite editor) located in our example path at D:\StreamingStuff\SlotMachine\OBS-resources\script.js first three uncommented lines (uncommented line has no // at start of the lines).

In SB, default values are: IP - 127.0.0.1, Port - 8080, Endpoint - /, so these should match with values in script.js.

If they do not match or you use different values, change them accordingly in both places.

slotSBwsSettingsJS.gif

Okay, we enabled commands and made sure SB communicates with our Slot Machine.

Now let's make sure, all imported actions are setup correctly and working.

Streamer.bot Variables
SB arguments and their options

In SB select Actions and select SlotMachine redeem (this is Action that starts it all, binded to command !slotStart).

Sub-Actions (right side of window) have a few places that should be checked. On top there is a folder called Variables - CHECK ME!. Click the small + button.

You can find comments for each set of variables in SB itself, but let's glance over them also in this guide (double click each sub-action if you wish to change it).

slotSBvariables.gif

Streamer.bot C# compile check
SB C# compiling checks

There is four C# sub-actions in the actions and each of them needs to be checked:

      1. In SB select Actions and select SlotMachine redeem. Double click Sub-Action called Execute Code (SlotMachine Redeem Crossroads) and hit Compile. You should see in Compiling Log this message: Building out needed information... Compiled successfully! (if you see something else, you are probably missing some references, so click on Find Refs and then Compile). Click Save   and Compile.
      2. In SB the Actions tab, select SlotMachine Cashout. Then double click on Sub-Action called Execute Code (Slot Cashout Crossroad) and click on Compile. You should see in Compiling Log this message - Building out needed information... Compiled successfully! (if you see something else, you are probably missing some references, so click on Find Refs and then Compile). Click Save and Compile.
      3. In SB Actions tab, select SlotMachine Lock. Then double click on Sub-Action called Execute Code (Check Reels Lock Argument Crossroad) and click on Compile. You should see in Compiling Log this message - Building out needed information... Compiled successfully! (if so, ignore three next lines in this guide and click Save and Compile).
      4. Last one is hidden inside the Action called SlotMachine redeem in the group Static points value and name group for testing without Points System. Double click it and make sure it compiles as the rest of them. Leave this C# Sub-Action disabled (you can tell it is disabled, since it has pink/purple color, not black). Enable it ONLY IF you need it for testing, since you do not use any Points System.

slotSBcompile.gif

If you see some dependency errors after clicking on any compile button, below is a fix!.

In Execute C# Code window, next to Compiling Log, click on References. You have to manually add System.Linq.dll & System.Core.dll. How? Right click the white space in References tab and click on Add reference from file.... Into File name fill in System.Linq.dll and click Open. And do same for System.Core.dll. Try clicking Compile now and you should see in Compiling Log this message - Building out needed information... Compiled successfully!. Click Save and Compile.

Do this only if you rename any of the actions!!!
In SB Actions tab, select SlotMachine Start. Once again, on top, there is folder called Variables - CHECK ONLY IF RENAMING. This folder contains names of all Actions from group SlotMachine by MarkusoOoO. AGAIN, there is no need to change anything, unless you are renaming actions in SB.

Testing and explanation of commands



It is time for testing, so let's go over the commands and how they work

Make sure your Slot Machine OBS source is hidden before testing or NOTHING happens!

Once Slot Machine game starts with first command !slotStart, any other command will work ONLY for user who started the game (exception is last command listed here, !slotForceEnd).

There is three situations when Slot Machine game ends

  1. Player reaches 0 at Credits and also has 0 at Won (game ends automatically, telling player he lost everything in chat).
  2. Player decides to use !slotWithdraw.
  3. Someone writes !slotForceEnd (same as !slotWithdraw, but anyone can use it, if not moderated)

Try typing following commands into twitch/youtube chat for testing

!slotStart points amount sets all pieces in action, if all checks are passed (minimum, maximum point amounts, C# compiles, OBS source and scene names are correct, all arguments are happy, Lucifer smiles, etc..) it shows OBS source with Player Name (whoever started the game) and Credits with same amount that are written after the command !slotStart. Name of the points is by default called points, unless you changed it using your Points System of choice (or use Testing argument, described below).

Example for !slotStart

!slotStart 200 initiated by me, would fill under Player: MarkusoOoO and under Credits: 200 points (since I did not change default points to something else in my example).

Side note
Amount of point your are betting must be multiples of 10, eg. 10, 20, 30... 300, 310, 320... 1110, 1120... Reason being, actual spin cost is always divided by 10. If you try to use something like "!slotStart 111" it will not let you through and you will get a response in the chat complaining.


!slotSpin would start the Slot Machine and spin the reels. Cost of each spin is ALWAYS points bet divided by 10.

Example for !slotSpin

!slotSpin (yup that's it)


!slotLock reel option*s will lock selected reels.
Slot Machine has 3 reels to choose from. There are two rules for locking reels.
1. You can lock only once in a row.
2. If you receive one or more jackpot items on spin, lock is disabled that turn.

Examples for !slotLock

!slotLock 23: locks second and third reel

!slotLock 3: locks third reel

!slotLock 123: locks all three reels (if you do this, and then you !slotSpin, you just spent credits for nothing KEKW)


!slotTransfer will move your Won points into your Credits (so you can continue spining).

Example for !slotTransfer

Before I use the command, I see that under Credits is 0 and under Won is 690.

Using !slotTransfer shifts Won to 0 and transfers it to Credits ( in this case to 690), so I can continue spining using Credits.


!slotWithdraw ends the game, hiding the source in OBS and summing up the game by adding together Credits and Won and adding them to the points of the player. All information is shown in twitch chat.

Example for !slotWithdraw

Before I use the command, I see that under Credits, I have 420 and under Won is 690.

Using !slotWithdraw I see in chat, that game ended and I got 1110 points added to my current points.


!slotForceEnd is only command, that can be used by anyone, so I highly recommend setting it as MODS ONLY in SB.

Example for !slotForceEnd

!slotForceEnd - same thing happens as with !slotWithdraw

Few last notes
Once somebody starts the game with !slotStart command, only that user can use commands tied with the game, nobody else!
Not even you as a streamer!
However, there is one safeguard command, !slotForceEnd, that will end the game immediately and it does not matter who writes it (I suggest making this MOD only command).

And here we are! Did all of the commands work as expected?
Well, you just finished the setup!
Well done! Get some ice cream, squeeze your plushie! YOU did it!

What can go wrong?



Here is list of possible issues that you could encounter

REMEMBER
Disable Set user specific subaction when you do not need it anymore for testing and have Points System in place!

Something else is not working? Refer to Found a bug? section below.

Can I tweak visuals/function to my liking?



Yes! This project is fully customizable!

Since this project is mainly made with VueJS, you can basically modify any behaviour and/or add more features straight in script.js

Other resource changes, eg. images of items on Slot Machine or sounds effects, can be easily swapped with provided example files (just keep the naming of the files same) in the paths for my example: D:\StreamingStuff\SlotMachine\OBS-resources\images\ and D:\StreamingStuff\SlotMachine\OBS-resources\sounds\. Images work best when they have "squared" resolution.

If you want to change colors, positioning, fonts, font size, etc... use style.css.

TIP 1
You can add overlay on top of browser source, which will add look for actual Slot Machine (you can find overlay drawn by PurpleFoxWitch in D:\StreamingStuff\SlotMachine\OBS-resources\overlays\.
This overlay might not fit your stream, so create your own, if needed.

TIP 2
In OBS you can add transition to show and hide the source with Slot Machine to make browser source appearing and disappearing look way smoother.

You want to change currency name? Use Points System for that. Or you can just for testing use pre-made Sub-Action in Action called SlotMachine redeem in group called Static points value and name group for testing without Points System. Double click Sub-Action inside this group, called Set argument %pointsname% and change Value to whatever name of points you want.

REMEMBER
Disable Set argument subaction when you do not need it anymore for testing and have Points System in place!

Found a bug?



Let me know, so I can fix it!
You can write a comment (login is required) directly below this guide (fastest way to reach me) or
try to reach out to me elsewhere at MarkusoOoO.

Known issues (Work in progress)



This project is by no means complete. It needs to be properly tested by other users than myself, to make sure everything is working as expected.

TD's Points system might not work in current release (I did not test it properly yet). I will implement it eventually (wink).

Video guide will be provided (soon, cough cough).

Do you like what I do?



Feel free to leave a "motivation" for me at my Ko-Fi page.