Skip to content

Commit

Permalink
MVP complete
Browse files Browse the repository at this point in the history 
now to publish and put it to the test. (And make it look better)
  • Loading branch information
@MoSadie
MoSadie committed Jun 23, 2024
1 parent 3944fe0 commit f0e4f71
Show file tree
Hide file tree
Showing 19 changed files with 1,243 additions and 9 deletions.
14 changes: 5 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# SSOverlays

A handful of useful overlays for Slipstream: Rogue Space. Supports multiple methods of getting information from the game, including SlipInfo and SlipStreamer.bot.
A handful of useful overlays for Slipstream: Rogue Space. Currently requires the SlipInfo mod to retrieve data from the game.

## How to use

1) Follow the instruction to setup either SlipInfo or SlipStreamer.bot
1) Follow the instruction to setup [SlipInfo](https://thunderstore.io/c/slipstream-rogue-space/p/MoSadie/SlipInfo/).
2) Go to the overlay generator and select the overlay you want to use as well as configure any other options.
3) Copy the generated URL and paste it into your streaming software as a browser source.
4) Done!
Expand All @@ -13,24 +13,20 @@ A handful of useful overlays for Slipstream: Rogue Space. Supports multiple meth

### Ship Info

Displays the current ship's health, shield, fuel, and scrap. (Note: Scrap & Fuel may not be accurate if you are not the captain)
Displays the current ship's health, fuel, salvage, and gems. (Note: Salvage & Fuel may not be accurate if you are not the captain)

### Crew Info

Displays a breakdown of the current crew composition based on their crewmember archetypes.

### Self Info
### Self Info (coming soon)

Displays information about the player's current status, including health, shield, and archetype.

### Specific Crew Info
### Specific Crew Info (coming soon)

Displays information about a specific crew member, including their health, shield, and archetype.

### Scrap Info

Displays just the current scrap of the ship.

### Enemy Info

Displays information about the current enemy, including health, shield, stats, and any intel we could gather.
112 changes: 112 additions & 0 deletions crewoverview/generator.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html>

<head>
<title>Crew Overview Overlay Generator</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<script src="../js/generator.js"></script>
</head>

<body>
<div>
<h1>Crew Overview Overlay</h1>
<form id="generator">
<label for="ip">IP:</label>
<input type="text" id="ip" name="ip" value="127.0.0.1" required>

<br />

<label for="port">Port:</label>
<input type="number" id="port" name="port" value="8001" required>

<br />

<label for="provider">Connection Method:</label>
<select id="provider" name="provider" required>
<option value="slipinfo">SlipInfo</option>
<option value="example">Example Data</option>
</select>

<br />

<label for="prefix">Prefix:</label>
<input type="text" id="prefix" name="prefix" value="slipinfo" required>

<br />

<label for="sort">Order:</label>
<select id="sort" name="sort">
<option value="least">Least Popular</option>
<option value="most">Most Popular</option>
<option value="alphabetical">Alphabetical</option>
</select>

<br />

<label for="label">Label:</label>
<select id="label" name="label">
<option value="total">Total Number</option>
<option value="percent">Percentage</option>
</select>

<br />

<label for="total">Show Total Crew Size:</label>
<input type="checkbox" id="total" name="total" checked>

<br />

<label for="hideempty">Hide Empty Crew Archetypes:</label>
<input type="checkbox" id="hideempty" name="hideempty">

<br />

<label for="font">Font:</label>
<input type="text" id="font" name="font" value="Arial">

<br />

<label for="size">Text Size:</label>
<input type="number" id="size" name="size" value="20">

<br />

<label for="color">Text Color:</label>
<input type="color" id="color" name="color" value="#000000">

<br />

<label for="updateRate">Update Rate: (ms)</label>
<input type="number" id="updateRate" name="updateRate" value="1000">

<br />

<label for="onerror">If the overlay cannot connect:</label>
<select id="onerror" name="onerror">
<option value="hide">Hide Overlay Completely</option>
<option value="show">Do nothing</option>
</select>

</form>

<br />

<button onclick="generate()">Generate</button>

<br />

<button id="copyButton" onclick="copy()">Copy Url</button>
<code id="generatedURL"></code>

<br />

<br />

<iframe id="preview" src="about:blank"></iframe>

<br />

<a href="../index.html">Back to Overlay List</a>


</div>
Empty file added crewoverview/overlay.css
View file
Empty file.
29 changes: 29 additions & 0 deletions crewoverview/overlay.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>

<head>
<title>Ship Info Overlay</title>
<link rel="stylesheet" type="text/css" href="overlay.css">
<script type="module" src="../js/overlay.js"></script>
<script type="module" src="./overlay.js"></script>
</head>

<body>
<div id="overlay">
<div id="crew-info">
<div id="total-crew">
<span id="total-crew-text">Loading...</span>
</div>
<div id="crew">
<ul id="crew-list">
<li id="bear"><span id="bear-text">Loading...</span></li>
<li id="cat"><span id="cat-text">Loading...</span></li>
<li id="croc"><span id="croc-text">Loading...</span></li>
<li id="hamster"><span id="hamster-text">Loading...</span></li>
<li id="octopus"><span id="octopus-text">Loading...</span></li>
<li id="turtle"><span id="turtle-text">Loading...</span></li>
</ul>
</div>
</div>

</html>
182 changes: 182 additions & 0 deletions crewoverview/overlay.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
import { getSettings, init, infoProviderCrewList, infoProviderUnload } from '../js/overlay.js';

// get the animals in the crew list
var bearLI = document.getElementById('bear');
var catLI = document.getElementById('cat');
var crocLI = document.getElementById('croc');
var hamsterLI = document.getElementById('hamster');
var octopusLI = document.getElementById('octopus');
var turtleLI = document.getElementById('turtle');

function updateLI(li, liText, name, number, total) {
var settings = getSettings();

// Convert the strings to a boolean, if needed
settings.hideempty = settings.hideempty === "true" || settings.hideempty === true;
settings.percentage = settings.label === "percentage" || settings.percentage === true;


if (number > 0 || !settings.hideempty) {
li.style.display = 'block';
liText.style.display = 'block';
liText.style.fontFamily = settings.font;
liText.style.fontSize = `${settings.size}px`;
liText.style.color = `#${settings.color}`;

switch (settings.label) {
case 'percent':
liText.innerText = `${name}: ${Math.round((number / total) * 100)}%`;
break;

case 'total':
liText.innerText = `${name}: ${number}`;
break;

default:
console.error('Unknown label setting: ' + settings.label);
break;
}
} else {
li.style.display = 'none';
liText.style.display = 'none';
}
}

function updateOverlay(updateData) {
var crewList = undefined;

if (updateData) {
crewList = infoProviderCrewList();
}

var settings = getSettings();

// Total Crew Text
var totalCrew = document.getElementById('total-crew');
var totalCrewText = document.getElementById('total-crew-text');

// Convert the string to a boolean, if needed
settings.total = settings.total === "true" || settings.total === true;

if (settings.total) {
totalCrew.style.display = 'block';
totalCrewText.style.display = 'block';
totalCrewText.style.fontFamily = settings.font;
totalCrewText.style.fontSize = `${settings.size}px`;
totalCrewText.style.color = `#${settings.color}`;
totalCrewText.innerText = crewList ? `Total Crew: ${crewList.length}` : totalCrewText.innerText;
} else {
totalCrew.style.display = 'none';
totalCrewText.style.display = 'none';
}

var crewLiList = [];

// Bear

var bear = document.getElementById('bear');
var bearText = document.getElementById('bear-text');
var bearCount = crewList.filter(crew => crew.archetype === 'bear').length;
updateLI(bear, bearText, "Bear", bearCount, crewList.length);

crewLiList.push({
li: bearLI,
count: bearCount,
name: 'bear'
});

// Cat

var cat = document.getElementById('cat');
var catText = document.getElementById('cat-text');
var catCount = crewList.filter(crew => crew.archetype === 'cat').length;
updateLI(cat, catText, "Cat", catCount, crewList.length);

crewLiList.push({
li: catLI,
count: catCount,
name: 'cat'
});

// Crocodile

var croc = document.getElementById('croc');
var crocText = document.getElementById('croc-text');
var crocCount = crewList.filter(crew => crew.archetype === 'crocodile').length;
updateLI(croc, crocText, "Croc", crocCount, crewList.length);

crewLiList.push({
li: crocLI,
count: crocCount,
name: 'crocodile'
});

// Hamster

var hamster = document.getElementById('hamster');
var hamsterText = document.getElementById('hamster-text');
var hamsterCount = crewList.filter(crew => crew.archetype === 'hamster').length;
updateLI(hamster, hamsterText, "Hamster", hamsterCount, crewList.length);

crewLiList.push({
li: hamsterLI,
count: hamsterCount,
name: 'hamster'
});

// Octopus

var octopus = document.getElementById('octopus');
var octopusText = document.getElementById('octopus-text');
var octopusCount = crewList.filter(crew => crew.archetype === 'octopus').length;
updateLI(octopus, octopusText, "Octopus", octopusCount, crewList.length);

crewLiList.push({
li: octopusLI,
count: octopusCount,
name: 'octopus'
});

// Turtle

var turtle = document.getElementById('turtle');
var turtleText = document.getElementById('turtle-text');
var turtleCount = crewList.filter(crew => crew.archetype === 'turtle').length;
updateLI(turtle, turtleText, "Turtle", turtleCount, crewList.length);

crewLiList.push({
li: turtleLI,
count: turtleCount,
name: 'turtle'
});

// Sort the crew list based on the settings
var crewListElement = document.getElementById('crew-list');
crewListElement.innerHTML = '';

switch (settings.sort) {
case 'least':
crewLiList.sort((a, b) => a.count - b.count);
break;
case 'most':
crewLiList.sort((a, b) => b.count - a.count);
break;
case 'alphabetical':
crewLiList.sort((a, b) => a.name.localeCompare(b.name));
break;
default:
console.error('Unknown sort setting: ' + settings.sort);
break;
}

crewLiList.forEach(crew => {
crewListElement.appendChild(crew.li);
});

}

addEventListener('beforeunload', function () {
infoProviderUnload();
});

init(updateOverlay);
Loading

0 comments on commit f0e4f71

Please sign in to comment.