morgan/Grinch-AP
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update WebUI to show unique items as a different color, and with a drop-shadow

Browse Source
This commit is contained in:
Chris Wilson
2021-02-02 22:58:22 -05:00
parent cf49cd5e4b
commit db6642f290
10 changed files with 10181 additions and 5819 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
data/web/src/js/global/MonitorTools.js
View File

@@ -7,7 +7,7 @@ const finderSpan = (finder, possessive = false, ownItem = false) => (
const recipientSpan = (recipient, possessive = false, ownItem = false) => (
<span className={ `recipient-span ${ownItem ? 'mine' : null}` }>{recipient}{possessive ? "'s" : null}</span>
);
const itemSpan = (item) => <span className="item-span">{item}</span>;
const itemSpan = (item, unique) => <span className={ `item-span ${unique ? 'unique' : ''}` }>{item}</span>;
const locationSpan = (location) => <span className="location-span">{location}</span>;
const entranceSpan = (entrance) => <span className="entrance-span">{entrance}</span>;
@@ -20,34 +20,34 @@ class MonitorTools {
);
/** Sent an item to another player */
static sentItem = (finder, recipient, item, location, iAmFinder = false, iAmRecipient = false) => (
static sentItem = (finder, recipient, item, location, iAmFinder = false, iAmRecipient = false, unique = false) => (
<div
key={ `${md5(finder + recipient + item + location)}${Math.floor((Math.random() * 1000000))}` }
className={ (iAmFinder || iAmRecipient) ? 'relevant' : null }
>
{finderSpan(finder, false, iAmFinder)} found {recipientSpan(recipient, true, iAmRecipient)}&nbsp;
{itemSpan(item)} at {locationSpan(location)}
{itemSpan(item, unique)} at {locationSpan(location)}
</div>
)
/** Received item from another player */
static receivedItem = (finder, item, location, itemIndex, queueLength) => (
static receivedItem = (finder, item, location, itemIndex, queueLength, unique = false) => (
<div
key={ `${md5(finder + item + location)}${Math.floor((Math.random() * 1000000))}` }
className="relevant"
>
({itemIndex}/{queueLength}) {finderSpan(finder, false)} found your&nbsp;
{itemSpan(item)} at {locationSpan(location)}
{itemSpan(item, unique)} at {locationSpan(location)}
</div>
)
/** Player found their own item (local or remote player) */
static foundItem = (finder, item, location, iAmFinder = false) => (
static foundItem = (finder, item, location, iAmFinder = false, unique = false) => (
<div
key={ `${md5(finder + item + location)}${Math.floor((Math.random() * 1000000))}` }
className={ iAmFinder ? 'relevant' : null }
>
{finderSpan(finder, false, iAmFinder)} found their own {itemSpan(item)} at {locationSpan(location)}
{finderSpan(finder, false, iAmFinder)} found their own {itemSpan(item, unique)} at {locationSpan(location)}
</div>
)

7
data/web/src/js/global/WebSocketUtils.js
View File

@@ -44,15 +44,16 @@ class WebSocketUtils {
case 'itemSent':
return appendMessage(MonitorTools.sentItem(data.content.finder, data.content.recipient,
data.content.item, data.content.location, parseInt(data.content.iAmFinder, 10) === 1,
parseInt(data.content.iAmRecipient, 10) === 1));
parseInt(data.content.iAmRecipient, 10) === 1, parseInt(data.content.itemIsUnique, 10) === 1));
case 'itemReceived':
return appendMessage(MonitorTools.receivedItem(data.content.finder, data.content.item,
data.content.location, data.content.itemIndex, data.content.queueLength));
data.content.location, data.content.itemIndex, data.content.queueLength,
parseInt(data.content.itemIsUnique, 10) === 1));
case 'itemFound':
return appendMessage(MonitorTools.foundItem(data.content.finder, data.content.item, data.content.location,
parseInt(data.content.iAmFinder, 10) === 1));
parseInt(data.content.iAmFinder, 10) === 1, parseInt(data.content.itemIsUnique, 10) === 1));
case 'hint':
return appendMessage(MonitorTools.hintMessage(data.content.finder, data.content.recipient,

11
data/web/src/styles/Monitor/containers/MonitorWindow.scss
View File

@@ -25,9 +25,16 @@
}
}
.item-span{ color: #67e9ff; }
.item-span{
color: #67e9ff;
&.unique{
color: #ff884e;
text-shadow: #000000 2px 2px;
}
}
.location-span{ color: #f5e63c; }
.entrance-span{ color: #73ae38 }
.entrance-span{ color: #73ae38; }
.finder-span{ color: #f96cb8; }
.recipient-span{ color: #9b8aff; }
.mine{ color: #ffa500; }