monorail
/
Archipelago
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
MultiClient.py
View File

@ -939,7 +939,8 @@ async def process_server_cmd(ctx: Context, cmd, args):
player_sent, location, player_recvd, item = args
ctx.ui_node.notify_item_sent(ctx.player_names[player_sent], ctx.player_names[player_recvd],
get_item_name_from_id(item), get_location_name_from_address(location),
player_sent == ctx.slot, player_recvd == ctx.slot)
player_sent == ctx.slot, player_recvd == ctx.slot,
True if get_item_name_from_id(item) in Items.progression_items else False)
item = color_item(item, player_sent == ctx.slot)
player_sent = color(ctx.player_names[player_sent], 'yellow' if player_sent != ctx.slot else 'magenta')
player_recvd = color(ctx.player_names[player_recvd], 'yellow' if player_recvd != ctx.slot else 'magenta')
@ -950,7 +951,8 @@ async def process_server_cmd(ctx: Context, cmd, args):
elif cmd == 'ItemFound':
found = ReceivedItem(*args)
ctx.ui_node.notify_item_found(ctx.player_names[found.player], get_item_name_from_id(found.item),
get_location_name_from_address(found.location), found.player == ctx.slot)
get_location_name_from_address(found.location), found.player == ctx.slot,
True if get_item_name_from_id(found.item) in Items.progression_items else False)
item = color_item(found.item, found.player == ctx.slot)
player_sent = color(ctx.player_names[found.player], 'yellow' if found.player != ctx.slot else 'magenta')
logging.info('%s found %s (%s)' % (player_sent, item, color(get_location_name_from_address(found.location),
@ -1086,7 +1088,8 @@ class ClientCommandProcessor(CommandProcessor):
for index, item in enumerate(self.ctx.items_received, 1):
self.ctx.ui_node.notify_item_received(self.ctx.player_names[item.player], get_item_name_from_id(item.item),
get_location_name_from_address(item.location), index,
len(self.ctx.items_received))
len(self.ctx.items_received),
True if get_item_name_from_id(item.item) in Items.progression_items else False)
logging.info('%s from %s (%s) (%d/%d in list)' % (
color(get_item_name_from_id(item.item), 'red', 'bold'),
color(self.ctx.player_names[item.player], 'yellow'),
@ -1344,7 +1347,8 @@ async def game_watcher(ctx : Context):
item = ctx.items_received[recv_index]
ctx.ui_node.notify_item_received(ctx.player_names[item.player], get_item_name_from_id(item.item),
get_location_name_from_address(item.location), recv_index + 1,
len(ctx.items_received))
len(ctx.items_received),
True if get_item_name_from_id(item.item) in Items.progression_items else False)
logging.info('Received %s from %s (%s) (%d/%d in list)' % (
color(get_item_name_from_id(item.item), 'red', 'bold'), color(ctx.player_names[item.player], 'yellow'),
get_location_name_from_address(item.location), recv_index + 1, len(ctx.items_received)))

11
WebUI.py
View File

@ -51,7 +51,8 @@ class WebUiClient(Node, logging.Handler):
def poll_for_server_ip(self):
self.broadcast_all(self.build_message('serverAddress', {}))
def notify_item_sent(self, finder, recipient, item, location, i_am_finder: bool, i_am_recipient: bool):
def notify_item_sent(self, finder, recipient, item, location, i_am_finder: bool, i_am_recipient: bool,
item_is_unique: bool = False):
self.broadcast_all(self.build_message('itemSent', {
'finder': finder,
'recipient': recipient,
@ -59,23 +60,27 @@ class WebUiClient(Node, logging.Handler):
'location': location,
'iAmFinder': 1 if i_am_finder else 0,
'iAmRecipient': 1 if i_am_recipient else 0,
'itemIsUnique': 1 if item_is_unique else 0,
}))
def notify_item_found(self, finder: str, item: str, location: str, i_am_finder: bool):
def notify_item_found(self, finder: str, item: str, location: str, i_am_finder: bool, item_is_unique: bool = False):
self.broadcast_all(self.build_message('itemFound', {
'finder': finder,
'item': item,
'location': location,
'iAmFinder': 1 if i_am_finder else 0,
'itemIsUnique': 1 if item_is_unique else 0,
}))
def notify_item_received(self, finder: str, item: str, location: str, item_index: int, queue_length: int):
def notify_item_received(self, finder: str, item: str, location: str, item_index: int, queue_length: int,
item_is_unique: bool = False):
self.broadcast_all(self.build_message('itemReceived', {
'finder': finder,
'item': item,
'location': location,
'itemIndex': item_index,
'queueLength': queue_length,
'itemIsUnique': 1 if item_is_unique else 0,
}))
def send_hint(self, finder, recipient, item, location, found, i_am_finder: bool, i_am_recipient: bool,

15841
data/web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

51
data/web/package.json
View File

@ -10,38 +10,39 @@
"author": "LegendaryLinux",
"license": "MIT",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.10",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"crypto-browserify": "^3.12.0",
"crypto-js": "^4.0.0",
"css-loader": "^3.5.3",
"lodash-es": "^4.17.15",
"css-loader": "^5.0.1",
"lodash-es": "^4.17.20",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"webpack-cli": "^3.3.11"
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"webpack-cli": "^4.5.0"
},
"devDependencies": {
"@babel/core": "^7.11.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"@babel/core": "^7.12.13",
"@babel/plugin-proposal-class-properties": "^7.12.13",
"@babel/preset-env": "^7.12.13",
"@babel/preset-react": "^7.12.13",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^2.5.1",
"file-loader": "^6.0.0",
"node-sass": "^4.14.1",
"webpack": "^4.44.1"
"babel-loader": "^8.2.2",
"eslint": "^7.19.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.2.0",
"node-sass": "^5.0.0",
"webpack": "^5.20.0"
}
}

48
data/web/public/assets/index.bundle.js
View File

File diff suppressed because one or more lines are too long

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; }

2
data/web/webpack.config.js
View File

@ -9,7 +9,7 @@ module.exports = {
{
test: /\.(js|jsx|es6)$/,
loader: 'babel-loader',
query: {
options: {
compact: true,
minified: true,
},

3
data/web/webpack.dev.js
View File

@ -9,7 +9,7 @@ module.exports = {
{
test: /\.(js|jsx|es6)$/,
loader: 'babel-loader',
query: {
options: {
compact: false,
minified: false,
},
@ -42,5 +42,4 @@ module.exports = {
publicPath: '/',
filename: '[name].bundle.js',
},
devtool: 'source-map',
};