jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Played with colors

Browse Source
This commit is contained in:
James Ketrenos 2022-03-14 23:59:59 -07:00
parent dee8cb684b
commit d967f3955c
2 changed files with 76 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
client/src/Board.css
View File

@ -156,21 +156,44 @@
.Board .Option { .Board .Option {
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
filter: brightness(115%); filter: brightness(100%) drop-shadow(0 0 10px black);
/*
opacity: 0.7;
transition-timing-function: ease-in-out;
animation-duration: 0.5s;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
*/
}
.Tile-Shape:hover,
.Corner-Shape:hover,
.Road-Shape:hover {
background-color: white;
} }
.Board .Option .Tile-Shape, .Board .Option .Tile-Shape,
.Board .Option .Corner-Shape, .Board .Option .Corner-Shape,
.Board .Option .Road-Shape { .Board .Option .Road-Shape {
/* background-color: rgba(255, 255, 255, 0.5) !important;*/ background-color: rgba(255, 255, 255, 0.75);
} }
.Board .Option .Tile-Shape:hover, .Board .Option:hover {
.Board .Option .Corner-Shape:hover, filter: brightness(150%) drop-shadow(0 0 5px white);
.Board .Option .Road-Shape :hover{
/* background-color: rgba(255, 255, 255, 0.75) !important; */
} }
.Board .Option:hover {
/* opacity: 1;
filter: brightness(150%) drop-shadow(0 0 2px black);
animation-play-state: paused;
*/
}
.Robber .Pip-Shape { .Robber .Pip-Shape {
top: -40px; top: -40px;
left: -40px; left: -40px;
@ -197,13 +220,6 @@
background-image:url("./assets/raptor-robber.png"); background-image:url("./assets/raptor-robber.png");
} }
.Tile-Shape:hover,
.Corner-Shape:hover,
.Road-Shape:hover {
background-color: white;
filter: brightness(150%);
}
.Road.LongestRoad .Road-Shape { .Road.LongestRoad .Road-Shape {
filter: brightness(135%); filter: brightness(135%);
transform: scale(1.05); transform: scale(1.05);
@ -265,6 +281,29 @@
background-color: rgba(0, 0, 255, 1); background-color: rgba(0, 0, 255, 1);
} }
/*
.Option[data-color='R'] > .Corner-Shape,
.Option[data-color='R'] > .Road-Shape {
background-color: rgba(255, 188, 188, 0.8);
}
.Option[data-color='O'] > .Corner-Shape,
.Option[data-color='O'] > .Road-Shape {
background-color: rgba(255, 224, 162, 0.8);
}
.Option[data-color='W'] > .Corner-Shape,
.Option[data-color='W'] > .Road-Shape {
background-color: rgba(122, 122, 122, 0.8);
}
.Option[data-color='B'] > .Corner-Shape,
.Option[data-color='B'] > .Road-Shape {
background-color: rgba(192, 192, 255, 0.8);
}
*/
/* /*
@keyframes blink { @keyframes blink {
from { from {
@ -282,22 +321,26 @@
} }
} }
*/ */
.Board .Option:hover { .Board .Option:hover {
filter: brightness(100%) drop-shadow(0 0 2px black);
opacity: 1; /* opacity: 1;
/*
animation-play-state: paused; animation-play-state: paused;
*/ */
} }
.Board .Option { .Board .Option {
filter: brightness(200%) drop-shadow(0 0 3px rgba(255, 0, 255, 1));
opacity: 1;
/* /*
opacity: 0.7;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-name: blink; animation-name: blink;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
*/ */
} }

14
client/src/MediaControl.js
View File

@ -98,12 +98,18 @@ const MediaAgent = () => {
credential: "ketran" credential: "ketran"
}, },
*/ */
{
urls: "turns:ketrenos.com:5349",
username: "ketra",
credential: "ketran"
},
/*
{ {
urls: "turn:numb.viagenie.ca", urls: "turn:numb.viagenie.ca",
username: "james_viagenie@ketrenos.com", username: "james_viagenie@ketrenos.com",
credential: "1!viagenie" credential: "1!viagenie"
} }
*/
] ]
}, { }, {
@ -121,12 +127,16 @@ const MediaAgent = () => {
console.log(`media-agent - addPeer - remote`, peers); console.log(`media-agent - addPeer - remote`, peers);
setPeers(Object.assign({}, peers)); setPeers(Object.assign({}, peers));
connection.addEventListener('connectionstatechange', (event) => {
console.log(`media-agent - connectionstatechange - `, connection.connectionState, event);
});
connection.addEventListener('icecandidateerror', (event) => { connection.addEventListener('icecandidateerror', (event) => {
if (event.errorCode === 701) { if (event.errorCode === 701) {
if (connection.icegatheringstate === 'gathering') { if (connection.icegatheringstate === 'gathering') {
console.log(`Unable to reach host: ${event.url}`); console.log(`Unable to reach host: ${event.url}`);
} else { } else {
console.error(`media-agent - icecandidateerror - `, event.url, event.errorText); console.error(`media-agent - icecandidateerror - `, event.errorCode, event.hostcandidate, event.url, event.errorText);
} }
} }
}); });