diff --git a/client/src/Board.css b/client/src/Board.css index 7d0f477..821d310 100644 --- a/client/src/Board.css +++ b/client/src/Board.css @@ -156,21 +156,44 @@ .Board .Option { cursor: pointer; 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 .Corner-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 .Corner-Shape:hover, -.Board .Option .Road-Shape :hover{ - /* background-color: rgba(255, 255, 255, 0.75) !important; */ +.Board .Option:hover { + filter: brightness(150%) drop-shadow(0 0 5px white); } +.Board .Option:hover { + +/* opacity: 1; + filter: brightness(150%) drop-shadow(0 0 2px black); + animation-play-state: paused; +*/ +} + + .Robber .Pip-Shape { top: -40px; left: -40px; @@ -197,13 +220,6 @@ 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 { filter: brightness(135%); transform: scale(1.05); @@ -265,6 +281,29 @@ 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 { from { @@ -282,22 +321,26 @@ } } */ + .Board .Option:hover { - filter: brightness(100%) drop-shadow(0 0 2px black); - opacity: 1; - /* + +/* opacity: 1; + animation-play-state: paused; - */ +*/ } + .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; animation-duration: 0.5s; animation-name: blink; animation-iteration-count: infinite; animation-direction: alternate; - */ -} \ No newline at end of file + */ +} + \ No newline at end of file diff --git a/client/src/MediaControl.js b/client/src/MediaControl.js index 567d950..19612fd 100644 --- a/client/src/MediaControl.js +++ b/client/src/MediaControl.js @@ -98,12 +98,18 @@ const MediaAgent = () => { credential: "ketran" }, */ - + { + urls: "turns:ketrenos.com:5349", + username: "ketra", + credential: "ketran" + }, + /* { urls: "turn:numb.viagenie.ca", username: "james_viagenie@ketrenos.com", credential: "1!viagenie" } + */ ] }, { @@ -121,12 +127,16 @@ const MediaAgent = () => { console.log(`media-agent - addPeer - remote`, peers); setPeers(Object.assign({}, peers)); + connection.addEventListener('connectionstatechange', (event) => { + console.log(`media-agent - connectionstatechange - `, connection.connectionState, event); + }); + connection.addEventListener('icecandidateerror', (event) => { if (event.errorCode === 701) { if (connection.icegatheringstate === 'gathering') { console.log(`Unable to reach host: ${event.url}`); } else { - console.error(`media-agent - icecandidateerror - `, event.url, event.errorText); + console.error(`media-agent - icecandidateerror - `, event.errorCode, event.hostcandidate, event.url, event.errorText); } } });