70 lines
2.9 KiB
JavaScript
70 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import md5 from 'crypto-js/md5';
|
|
|
|
const finderSpan = (finder, possessive = false, ownItem = false) => (
|
|
<span className={ `finder-span ${ownItem ? 'mine' : null}` }>{finder}{possessive ? "'s" : null}</span>
|
|
);
|
|
const recipientSpan = (recipient, possessive = false, ownItem = false) => (
|
|
<span className={ `recipient-span ${ownItem ? 'mine' : null}` }>{recipient}{possessive ? "'s" : null}</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>;
|
|
|
|
class MonitorTools {
|
|
/** Convert plaintext into a React-friendly div */
|
|
static createTextDiv = (text) => (
|
|
<div key={ `${md5(text)}${Math.floor((Math.random() * 1000000))}` }>
|
|
{text}
|
|
</div>
|
|
);
|
|
|
|
/** Sent an item to another player */
|
|
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)}
|
|
{itemSpan(item, unique)} at {locationSpan(location)}
|
|
</div>
|
|
)
|
|
|
|
/** Received item from another player */
|
|
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
|
|
{itemSpan(item, unique)} at {locationSpan(location)}
|
|
</div>
|
|
)
|
|
|
|
/** Player found their own item (local or remote player) */
|
|
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, unique)} at {locationSpan(location)}
|
|
</div>
|
|
)
|
|
|
|
/** Hint message */
|
|
static hintMessage = (finder, recipient, item, location, found, iAmFinder = false, iAmRecipient = false,
|
|
entranceLocation = null) => (
|
|
<div
|
|
key={ `${md5(finder + recipient + item + location)}${Math.floor((Math.random() * 1000000))}` }
|
|
className={ (iAmFinder || iAmRecipient) ? 'relevant' : null }
|
|
>
|
|
{recipientSpan(recipient, true, iAmRecipient)} {itemSpan(item)} can be found in
|
|
{finderSpan(finder, true, iAmFinder)} world at {locationSpan(location)}
|
|
{ entranceLocation ? [', which is at ', entranceSpan(entranceLocation)] : null }
|
|
({found ? '✔' : '❌'})
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MonitorTools;
|