Commit a094073f authored by marioromera's avatar marioromera
Browse files

smaller offer answer better turn animation

parent 33e04c37
......@@ -12,10 +12,10 @@
<body>
<div class="app">
<div class="id-container">
<div>
<p>My name is:</p>
<input type="text" class="id-input" />
</div>
<p>My name is:</p>
<input type="text" class="id-input" />
<div class="scuttlebutt">
<canvas id="node-pool" height="100%" width="100%"></canvas>
</div>
......
......@@ -31,10 +31,10 @@ export default function Drawing(svgId) {
this.myTurnG;
this.myTurnLine = this.line = d3
.line()
.curve(d3.curveStep)
.curve(d3.curveStepBefore)
// X and Y are percentages
.x((d) => (Math.random() * 1 + d.x) * (this.width / 100))
.y((d) => (Math.random() * 1 + d.y) * (this.height / 100));
.x((d) => (2 + Math.random() * 8 + d.x) * (this.width / 100))
.y((d) => (2 + Math.random() * 8 + d.y) * (this.height / 100));
this.width =
this.svg.node().parentElement.getBoundingClientRect().width - MARGIN;
......@@ -84,7 +84,7 @@ export default function Drawing(svgId) {
.attr('class', 'myTurnPathBackground')
.attr('d', this.myTurnLine)
.attr('stroke-width', '8px')
.attr('stroke', '#fdff72')
.attr('stroke', '#5f5f5f48')
.attr('fill', 'transparent');
this.myTurnG
.append('path')
......@@ -92,7 +92,7 @@ export default function Drawing(svgId) {
.attr('class', 'myTurnPath')
.attr('d', this.myTurnLine)
.attr('stroke-width', '2px')
.attr('stroke', '#0bfa03')
.attr('stroke', 'white')
.attr('fill', 'transparent');
});
} else {
......
......@@ -84,7 +84,8 @@ body {
display: flex;
flex-direction: column;
margin: 5px;
height: 30%;
font-size: 0.5em;
.p2p-containers {
display: flex;
justify-content: space-around;
......@@ -94,7 +95,8 @@ body {
max-width: 50%;
display: flex;
border: 1px dashed white;
border-radius: 5px;
border-radius: 0.12em;
align-items: flex-end;
padding: 5px;
}
......@@ -104,25 +106,52 @@ body {
background-color: #ffffff;
}
.btn {
width: 60%;
flex-shrink: 0;
height: 90%;
padding: 25% 0;
// width: 60%;
// flex-shrink: 0;
// height: 90%;
// padding: 25% 0;
display: flex;
// display: flex;
border-radius: 5px;
color: black;
align-items: center;
justify-content: center;
position: relative;
// border-radius: 0.12em;
// color: black;
// align-items: center;
// justify-content: center;
// position: relative;
}
.btn {
& {
display: inline-block;
padding: 0.35em 0.35em;
border: 0.1em solid #ffffff;
margin: 0 0.3em 0.3em 0;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: 'TerminalGrotesque', sans-serif;
font-weight: 300;
color: black;
text-align: center;
transition: all 0.2s;
}
&:hover {
color: #000000;
background-color: #ffffff;
}
@media all and (max-width: 30em) {
& {
display: block;
}
}
}
textarea {
border-radius: 5px;
width: 50%;
min-height: 50%;
padding-bottom: 20%;
border-radius: 0.12em;
width: 60%;
height: 50%;
overflow: hidden;
}
button[class*='try'] {
......@@ -145,7 +174,8 @@ body {
#drawing-svg {
display: inline-block;
border: 1px white dashed;
border-radius: 5px;
border-radius: 0.12em;
pointer-events: all;
}
......@@ -156,7 +186,7 @@ body {
path.myTurn {
fill: none;
stroke: #0bfa03;
stroke: #5f5f5f48;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment