I've the below code, which is drawing a rec in a svg element:
.container
{
display: flex;
align-items: center;
height: 1.3em;
}
<div class="container">
<label for="from">From:</label>
<input type="number" name="from">
<label for="to">To:</label>
<input type="number" name="to">
<svg margin="0" width="200" height="1.3em">
<rect x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
I want to be able "prpgramatically" to:
Shift the location of the rec by changing the value of the from field
Chang the width of the rec by changing the value of the to field
const svgRect = document.querySelector('svg rect')
function xStart(XS){
svgRect.setAttribute('x',XS)
}
function rWidth(RW){
svgRect.setAttribute('width',RW)
}
.container
{
display: flex;
align-items: center;
height: 1.3em;
}
<div class="container">
<label for="from">From:</label>
<input onchange="xStart(this.value)" type="number" name="from">
<label for="to">To:</label>
<input onchange="rWidth(this.value)" type="number" name="to">
<svg margin="0" width="200" height="1.3em">
<rect x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
For changing width, you can add even listeners to mouse position and situations, below sample code:
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "octicon octicon-star");
// svg.setAttribute("viewBox", "0 0 14 16");
svg.setAttribute("version", "1.1");
svg.setAttribute("width", 240);
svg.setAttribute("height", 160);
svg.setAttribute("aria-hidden", "true");
let barThickness = 20
let orders = [100, 152];
//orders.forEach((element, index, array) => console.log('a[' + index + '] = ' + element) )
orders.forEach(function(element, index, array) {
console.log('a[' + index + '] = ' + element)
let r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.setAttribute("x", 0);
r.setAttribute("y",(barThickness+10)*index+0);
r.setAttribute("width", element);
r.setAttribute("height", barThickness);
r.setAttribute("fill","black");
let isDrawing = false;
let x = element
let mousePosition = 0
r.addEventListener('mouseenter', e => {
e.path[0].setAttribute("fill","red")
});
r.addEventListener('mouseleave', e => {
e.path[0].setAttribute("fill","black")
if (isDrawing === true) {
isDrawing = false;
}
});
r.addEventListener('mousedown', e => {
isDrawing = true;
});
r.addEventListener('mousemove', e => {
if (isDrawing === true) {
console.log(e.offsetX)
if(e.offsetX>mousePosition) {
x++
} else if(e.offsetX < mousePosition){
x--
}
mousePosition = e.offsetX
r.setAttribute("width", x)
}
});
r.addEventListener('mouseup', e => {
if (isDrawing === true) {
isDrawing = false;
}
});
svg.appendChild(r);
document.body.appendChild(svg)
} )
var startX = 100;
var startY = 100;
function init() {
Snap("#rect").drag(dragMove, dragStart, dragEnd);
}
function dragStart(x, y, evt) {
// figure out where the circle currently is
startX = parseInt(Snap("#rect").attr("x"), 10);
startY = parseInt(Snap("#rect").attr("y"), 0);
}
function dragMove(dx, dy, x, y, evt) {
Snap("#rect").attr({
x: (startX + dx),
y: (startY + dy)
});
}
function dragEnd(evt) {
// no action required
}
.container {
display: flex;
align-items: center;
height: 1.3em;
position:relative;
}
svg {
position: absolute;
top: 0;
left:420px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<body onload="init()">
<div class="container">
<label for="from">From:</label>
<input type="number" name="from">
<label for="to">To:</label>
<input type="number" name="to">
<svg margin="0" width="400" height="400">
<rect draggable="true" id='rect' x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
</div>
</body>
Related
i have a 3divs inside of a container and when i click div number 1 i want the others to disappear
but it works only when i click the "rock" div
The parent div is called "choices" in the JS file
i am trying to loop over the child divs to keep the clicked one and hide the others
choices.addEventListener("click", (e) => {
let currentTag = e.target.tagName;
let current;
if (e.target.className !== "choices") {
// to make sure the user click on the choices only
switch (
currentTag // to get the div element even if the user clicked the svg or the path
) {
case "DIV":
current = e.target;
console.log(current);
break;
case "svg":
current = e.target.parentElement;
console.log(current);
break;
case "path":
current = e.target.parentElement.parentElement;
console.log(current);
break;
default:
break;
}
current.setAttribute("chosen", "true");
for (i = 0; i < choicesList.length; i++) {
choicesList[i].hasAttribute("chosen") ?
"" :
choices.removeChild(choicesList[i]);
}
}
});
<div class="choices" vassel="true">
<!-- Scissors -->
<div class="scissors">
<svg class="scissors" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path
class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"
/>
</svg>
</div>
<!-- rock -->
<div class="rock">
<svg class="rock" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path
class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"
/>
</svg>
</div>
<!-- Paper -->
<div class="paper">
<svg class="paper" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path
class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"
/>
</svg>
</div>
</div>
and here is the link for codepen : https://codepen.io/omarmahdy/pen/JjpEMaV
There is a problem with your child selector. My suggestion is to use querySelectorAll() and add a second class to all options. I created a working fork here: https://codepen.io/foorschtbar/pen/OJQWZJJ
const choicesList = document.querySelectorAll(".choice");
<!-- Scissors -->
<div class="scissors choice">
[...]
</div>
<!-- Rock -->
<div class="rock choice">
[...]
</div>
<!-- Paper -->
<div class="paper choice">
[...]
</div>
(i hope i understand your problem right and is now fixed)
IMHO you should apply a CSS-class with classList.add('class-name) to all the child div elements of choices:
document.querySelectorAll('.choices div').forEach(el => el.classList.add('class-name');
Then you remove this class for the clicked element after wards. That CSS-Class only needs to contain: display: none;
var choices = document.querySelector('.choices');
choices.addEventListener('click', e => {
var scissors = document.querySelector('.scissors'),
rock = document.querySelector('.rock'),
paper = document.querySelector('.paper');
document.querySelectorAll('.choices div').forEach(el => el.classList.add('d-none'));
if (e.target.classList.contains('scissors')) {
scissors.classList.remove('d-none');
}
if (e.target.classList.contains('rock')) {
rock.classList.remove('d-none');
}
if (e.target.classList.contains('paper')) {
paper.classList.remove('d-none');
}
});
.d-none {
display: none;
}
<div class="choices" vassel="true">
<!-- Scissors -->
<div class="scissors">
<svg class="scissors" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path
class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"
/>
</svg>
</div>
<!-- rock -->
<div class="rock selection">
<svg class="rock" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path
class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"
/>
</svg>
</div>
<!-- Paper -->
<div class="paper selection">
<svg class="paper" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path
class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"
/>
</svg>
</div>
</div>
You need to manipulate the styling of each div that you needs to be removed. I have written a code to add display:none; property to the div those you need to remove.
const rockDiv = document.querySelectorAll(".rock");
const paperDiv = document.querySelectorAll(".paper");
const scissorsDiv = document.querySelectorAll(".scissors");
for (let i = 0; i < rockDiv.length; i++) {
rockDiv[i].addEventListener("click", ()=>{
paperDiv[i].style.display = "none";
scissorsDiv[i].style.display = "none";
});
}
for (let i = 0; i < paperDiv.length; i++) {
paperDiv[i].addEventListener("click", ()=>{
rockDiv[i].style.display = "none";
scissorsDiv[i].style.display = "none";
});
}
for (let i = 0; i < scissorsDiv.length; i++) {
scissorsDiv[i].addEventListener("click", ()=>{
paperDiv[i].style.display = "none";
rockDiv[i].style.display = "none";
});
}
Details commented in example, refer here for the CSS
// Score counters
let T = 0;
let W = 0;
let L = 0;
// Reference the <form>
const RPS = document.forms.RPS;
// Register <form> to the click event
RPS.onclick = pick;
// Event handler passes Event Object
function pick(e) {
// Reference ALL form controls
const IO = this.elements;
// The tag the user clicked
const clk = e.target;
// If the tag clicked is an <input>..
if (clk.matches('input')) {
// Disable <label>s
IO.choices.disabled = true;
// Add .picked class to <form>
this.classList.add('picked');
// Get a random number 0-2
let r = Math.floor(Math.floor(Math.random() * 6) / 2);
/* Pass:
** All form controls,
** Random number,
** and #id of clicked <label>
** to outcome(IO, r, id)
*/
switch (clk.id) {
case 'R':
console.log('Rock');
outcome(IO, r, 'R');
break;
case 'P':
console.log('Paper');
outcome(IO, r, 'P');
break;
case 'S':
console.log('Scissors', );
outcome(IO, r, 'S');
break;
default:
break;
}
}
}
/*
** Pass all form controls, random
** number, and #id of clicked
*/
function outcome(node, vs, user) {
// 'R'ock, 'P'aper, 'S'cissors
let rpsA = ['R', 'P', 'S'];
// Index of user's pick
const sv = rpsA.indexOf(user);
/*
** Clone the `<label>` that
** corresponds to opponent's index
*//*
** Add .vs class to opponent
*//*
** Add opponent to #choices
*/
const opponent = document.querySelector(`[
for='${rpsA[vs]}'
]`).cloneNode(true);
opponent.classList.add('vs');
node.choices.append(opponent);
/**
** One line nested ternary to
** resolve win, lose, or tie
*/
let result = vs === sv ? 'tied' :
vs === sv + 1 ? 'lost' :
vs === 0 && sv === 2 ? 'lost' : 'win';
// Increment score
switch (result) {
case 'tied':
T++;
break;
case 'win':
W++;
break;
case 'lost':
L++;
break;
default:
break;
}
// Display score
node.w.value = W;
node.l.value = L;
node.t.value = T;
// Array for final outcome
const roshambo = ["Rock", "Paper", "Scissors"];
// Message of outcome
let msg = `You played ${roshambo[sv]},
your opponent played ${roshambo[vs]}, you ${result}!`;
// Display message
node.msg.value = msg;
}
// Register <form> to reset event
RPS.onreset = reset;
// Resets game
function reset(e) {
this.classList.remove('picked');
this.choices.disabled = false;
document.querySelectorAll('label').forEach(tag => {
if (tag.classList.contains('vs')) {
tag.remove();
}
});
}
html {
font: 300 1ch/1.1 'Segoe UI'
}
form {
width: 100%;
min-height: 100vh;
padding: 2rem;
color: white;
}
#choices {
border: 0;
margin: 0 auto;
}
input,
output,
button {
font: inherit;
font-size: 100%;
}
legend,
button {
font-size: 1.25rem;
}
[type='radio'] {
display: none
}
[type='radio']:checked+label {
color: cyan
}
[type='radio']:checked+label * {
fill: cyan
}
label.vs {
color: gold
}
label.vs * {
fill: gold;
}
.picked {
background: #3B4262;
}
output {
display: inline-block;
width: 4rem;
margin-bottom: 0.5rem;
}
output::before {
content: attr(value);
}
#msg {
display: inline-block;
width: 100%;
}
[type='reset'] {
position: relative;
top: 14vh;
}
.as-console-row::after {
width: 0;
font-size: 0;
}
.as-console-row-code {
width: 100%;
word-break: break-word;
}
.as-console-wrapper {
max-height: 15% !important;
max-width: 50%;
margin-left: 50%;
}
<form id='RPS'>
<fieldset id='choices'>
<legend>
<label>Wins:
<output id='w'></output>
</label>
<label>Lost:
<output id='l'></output>
</label>
<label>Tied:
<output id='t'></output>
</label><br>
<output id='msg'></output>
</legend>
<!-- rock -->
<input id='R' name='rps' type='radio'>
<label for='R' class="rock">
<svg class="rock svg" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"/></svg></label>
<!-- Paper -->
<input id='P' name='rps' type='radio'>
<label for='P' class="paper">
<svg class="paper svg" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"/></svg></label>
<!-- Scissors -->
<input id='S' name='rps' type='radio'>
<label for='S' class="scissors">
<svg class="scissors svg" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"/></svg></label>
</fieldset>
<button type='reset'>Reset</button>
</form>
I am currently experimenting with a d-i-y collage game, where users can click an image and drag it into a desired position. The code works fine, except at load time all of the images are scrunched up in the top left corner. The are on top of one another and hide those under them.
I can't figure out why the random position generation isn't working. The images are in div, as a beginner I don't know if there's another way to do it at the moment. Is Math.random() possible?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
let currentlyDragging;
let drawing = false;;
let offset_x;
let offset_y;
let puzzle;
$(window).load(function () {
$(".draggable").click(startDragging);
$(".draggable").mousemove(whileDragging);
$("#puzzle").mousemove(whileDragging);
puzzle = document.getElementById("puzzle");
});
function startDragging(e) {
if (!drawing) {
drawing = true;
currentlyDragging = $(this);
if (offset_x == null && offset_y == null) {
var current_origin_y;
var current_origin_x;
var current_origin_y_string = currentlyDragging.context.style['margin-top'];
if (current_origin_y_string === "") {
current_origin_y = 0;
} else {
current_origin_y = parseInt(current_origin_y_string.split("px")[0]);
}
var current_origin_x_string = currentlyDragging.context.style['margin-left'];
if (current_origin_x_string === "") {
current_origin_x = 0;
} else {
current_origin_x = parseInt(current_origin_x_string.split("px")[0]);
}
offset_x = current_origin_x - e.pageX;
offset_y = current_origin_y - e.pageY;
}
} else {
drawing = false;
currentlyDragging = null;
offset_x = null;
offset_y = null;
}
}
function whileDragging(e) {
if (currentlyDragging == null) {
return false;
}
currentlyDragging.css({
"margin-top": Math.min(Math.max(e.pageY + offset_y, 0), puzzle.clientHeight - currentlyDragging.context.height) + "px",
"margin-left": Math.min(Math.max(e.pageX + offset_x, 0), puzzle.clientWidth - currentlyDragging.context.width) + "px"
});
}
</script>
<style>
.draggable {
position: absolute;
cursor: pointer;
user-select: none;
}
</style>
<div id="puzzle" scroll="no" style="height: 100%; overflow: hidden; border: 5px solid yellow;">
<img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
<img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
<img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
<img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
<img class=draggable src="https://avatars3.githubusercontent.com/u/9167554?s=460&v=4" width=50 height=50 />
</div>
</body>
I am using vanilla javascript to navigate the pages of a comic book. However, I need to setup a condition that checks if the points in the current polygon intersects with the points in the next polygon. If true, I want the viewBox to animate from the current points to the next points, if false let nothing happen (use the default fade transition).
Here is a section of my code
var DELAY = 400;
function nextArea() {
if (isFirstPage() || areaIndex >= areas.length - 1) {
changePage(true);
changeArea();
} else {
fade();
areaIndex++;
setTimeout(changeArea, DELAY);
}
}
function prevArea() {
if (isLastPage() || areaIndex <= 0) {
changePage(false);
changeArea();
} else {
fade();
areaIndex--;
setTimeout(changeArea, DELAY);
}
}
function changeArea() {
if (isFirstPage() || isLastPage()) {
return;
}
var activeArea = areas[areaIndex];
var points = activeArea.getAttribute('points').split(' ');
var xy1 = points[0].split(',');
var xy2 = points[1].split(',');
var xy3 = points[2].split(',');
var box = [xy1[0], xy1[1], xy2[0] - xy1[0], xy3[1] - xy2[1]];
activePage.classList.remove('fade');
activePage.setAttribute('viewBox', box.join(' '));
activeRect = rects[pageIndex - 1];
activeRect.setAttribute('x', xy1[0]);
activeRect.setAttribute('y', xy1[1]);
}
My code repository is here: https://github.com/cnario/svg-carousel
Here is what I have thus far: https://cnario.github.io/svg-carousel/
Here is how I expect it to act: https://read.marvel.com/#book/41323
I suppose this is what you may need: a way to transition the viewBox from one value to another so that every time you have only one part of the svg in the viewBox.
let BB = {};
BB.tomato = tomato.getBBox();
BB.skyblue = skyblue.getBBox();
BB.gold = gold.getBBox();
let radios = document.querySelectorAll("#controls input");
radios.forEach(r =>{
let color = r.dataset.color;
let bb = BB[color];
r.addEventListener("change",()=>{
svg.setAttributeNS(null,"viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
svg.style.height = `${bb.height * 300 / bb.width}px`;
})
})
svg {
width: 300px;
border: 1px solid;
height: 600px;
transition: height 1s;
}
<p id="controls">
<label>tomato: <input type="radio" name="selector" data-color="tomato" /></label>
<label>skyblue: <input type="radio" name="selector" data-color="skyblue" /></label>
<label>gold: <input type="radio" name="selector" data-color="gold" /></label>
</p>
<svg id="svg" viewBox="0 0 100 200">
<g id="tomato">
<circle cx="35" cy="70" r="25" fill="tomato" />
</g>
<g id="skyblue">
<ellipse cx="75" cy="160" rx="15" ry="35" fill="skyblue" />
</g>
<g id="gold">
<polygon fill="gold" points="75,15 60,30 90,30" />
</g>
</svg>
I'm using the Fabricjs for creating a drawing tool. I'm using version 2.2.
Using the canvas methods selection:created and selection:updated. I'm able to remove the object like circle and rectangle bu to a line object.
Here is my JSFiddle link for the code demo.
Draw a line and try to remove it with an eraser.
var canvas = new fabric.Canvas('c', {
selection: false
});
canvas.perPixelTargetFind = true;
canvas.targetFindTolerance = 4;
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 100,
top: 100
});
var triangle = new fabric.Triangle({
width: 20,
height: 30,
fill: 'blue',
left: 50,
top: 50
});
canvas.add(circle, triangle);
$('#clear').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('clear');
}
});
$('#line').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('line');
}
});
$('#eraser').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('erase');
}
});
var drawingPointer = {
status: false,
previousObj: false
};
function drawingOperation(operation) {
if (drawingPointer.status == 'freedraw') {
canvas.isDrawingMode = false;
}
if (operation == 'line') {
console.log('Called to draw line');
drawingPointer.status = 'line';
canvas.defaultCursor = 'url("https://image.ibb.co/dCkbWc/icon_straight.png") 0 16 ,auto';
canvas.hoverCursor = 'auto';
return;
}
if (operation == 'erase') {
drawingPointer.status = 'erase';
canvas.defaultCursor = canvas.hoverCursor = 'url("https://image.ibb.co/h2bGWc/icon_eraser.png") 2 12 ,auto';
return;
}
if (operation == 'clear') {
drawingPointer.status = false;
drawingPointer.previousObj = false;
canvas.defaultCursor = 'auto';
canvas.hoverCursor = 'auto';
}
}
function handlerObjectSelection(o) {
console.log(o.target);
if (drawingPointer.status == 'erase') {
console.log('Called from Erase Section');
canvas.remove(o.target);
}
}
function handleMouseMovement(o) {
if (drawingPointer.status == 'line' && drawingPointer.strightLine) {
var pointer = canvas.getPointer(o.e);
drawingPointer.down = false;
drawingPointer.strightLine.set({
'x2': pointer.x,
'y2': pointer.y
});
canvas.renderAll();
}
}
function handleMouseDown(o) {
if (drawingPointer.status == 'line') {
console.log('MouseDown from Line');
var pointer = canvas.getPointer(o.e);
drawingPointer.down = true;
drawingPointer.strightLine = new fabric.Line([pointer.x, pointer.y, pointer.x, pointer.y], {
fill: 'red',
stroke: 'red',
strokeWidth: 3,
originX: 'center',
originY: 'center'
});
canvas.add(drawingPointer.strightLine);
canvas.renderAll();
}
}
function handleMouseUp(o) {
if (drawingPointer.status == 'line') {
console.log('MouseUp from Line');
var pointer = canvas.getPointer(o.e);
drawingPointer.down = false;
drawingPointer.strightLine.set({
'x2': pointer.x,
'y2': pointer.y
});
canvas.renderAll();
drawingPointer.strightLine = null;
}
}
canvas.on('selection:created', handlerObjectSelection);
canvas.on('selection:updated', handlerObjectSelection);
canvas.on('mouse:move', handleMouseMovement);
canvas.on('mouse:down', handleMouseDown);
canvas.on('mouse:up', handleMouseUp);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300" style="border: 1px solid;margin: 10px;"></canvas>
<div class="row">
<div class="col-xs-10 col-xs-offset-2">
<h3>Drawing Function</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="options" id="clear" autocomplete="off" checked>
<img src="https://image.ibb.co/iedVrc/icon_cursor.png" height="16" width="16" />
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="line" autocomplete="off">
<img src="https://image.ibb.co/dCkbWc/icon_straight.png" height="16" width="16" />
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="eraser" autocomplete="off">
<img src="https://image.ibb.co/h2bGWc/icon_eraser.png" height="16" width="16" />
</label>
</div>
</div>
</div>
drawingPointer.strightLine.setCoords();
You need to use setCoords after drawing complete.
var canvas = new fabric.Canvas('c', {
selection: false
});
canvas.perPixelTargetFind = true;
canvas.targetFindTolerance = 4;
var circle = new fabric.Circle({
radius: 20,
fill: 'green',
left: 100,
top: 100
});
var triangle = new fabric.Triangle({
width: 20,
height: 30,
fill: 'blue',
left: 50,
top: 50
});
canvas.add(circle, triangle);
$('#clear').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('clear');
}
});
$('#line').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('line');
}
});
$('#eraser').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('erase');
}
});
var drawingPointer = {
status: false,
previousObj: false
};
function drawingOperation(operation) {
if (drawingPointer.status == 'freedraw') {
canvas.isDrawingMode = false;
}
if (operation == 'line') {
console.log('Called to draw line');
drawingPointer.status = 'line';
canvas.defaultCursor = 'url("https://image.ibb.co/dCkbWc/icon_straight.png") 0 16 ,auto';
canvas.hoverCursor = 'auto';
return;
}
if (operation == 'erase') {
drawingPointer.status = 'erase';
canvas.defaultCursor = canvas.hoverCursor = 'url("https://image.ibb.co/h2bGWc/icon_eraser.png") 2 12 ,auto';
return;
}
if (operation == 'clear') {
drawingPointer.status = false;
drawingPointer.previousObj = false;
canvas.defaultCursor = 'auto';
canvas.hoverCursor = 'auto';
}
}
function handlerObjectSelection(o) {
console.log(o.target);
if (drawingPointer.status == 'erase') {
console.log('Called from Erase Section');
canvas.remove(o.target);
}
}
function handleMouseMovement(o) {
if (drawingPointer.status == 'line' && drawingPointer.strightLine) {
var pointer = canvas.getPointer(o.e);
drawingPointer.down = false;
drawingPointer.strightLine.set({
'x2': pointer.x,
'y2': pointer.y
});
canvas.renderAll();
}
}
function handleMouseDown(o) {
if (drawingPointer.status == 'line') {
console.log('MouseDown from Line');
var pointer = canvas.getPointer(o.e);
drawingPointer.down = true;
drawingPointer.strightLine = new fabric.Line([pointer.x, pointer.y, pointer.x, pointer.y], {
fill: 'red',
stroke: 'red',
strokeWidth: 3,
originX: 'center',
originY: 'center'
});
canvas.add(drawingPointer.strightLine);
canvas.renderAll();
}
}
function handleMouseUp(o) {
if (drawingPointer.status == 'line') {
console.log('MouseUp from Line');
var pointer = canvas.getPointer(o.e);
drawingPointer.down = false;
drawingPointer.strightLine.set({
'x2': pointer.x,
'y2': pointer.y
});
drawingPointer.strightLine.setCoords();
canvas.renderAll();
drawingPointer.strightLine = null;
}
}
canvas.on('selection:created', handlerObjectSelection);
canvas.on('selection:updated', handlerObjectSelection);
canvas.on('mouse:move', handleMouseMovement);
canvas.on('mouse:down', handleMouseDown);
canvas.on('mouse:up', handleMouseUp);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300" style="border: 1px solid;margin: 10px;"></canvas>
<div class="row">
<div class="col-xs-10 col-xs-offset-2">
<h3>Drawing Function</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="options" id="clear" autocomplete="off" checked>
<img src="https://image.ibb.co/iedVrc/icon_cursor.png" height="16" width="16" />
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="line" autocomplete="off">
<img src="https://image.ibb.co/dCkbWc/icon_straight.png" height="16" width="16" />
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="eraser" autocomplete="off">
<img src="https://image.ibb.co/h2bGWc/icon_eraser.png" height="16" width="16" />
</label>
</div>
</div>
</div>
I am new to long polling and don't quite grasp it's method. I already have a timer function in javascript that is controlled with buttons on one page [Code Below]. I want the same timer to run simultaneously on multiple pages (that can be on different computers and browsers). Except it will be controlled with buttons only from this page (timerMode.php). How could I do this with long pooling?
Note: I use phpMyAdmin SQL Database. The same svg will be used for every timer
timerMode.php:
var timerMode = function() {
var timergc;
var runningsc = false;
var runninggc = false;
var endedsc = false;
var edndedgc = false;
var startTimer = function(seconds, container, oncomplete, type) {
var startTime, timer, obj, ms = seconds * 1000;
var paused = false;
var display = document.getElementById(container);
obj = {};
obj.resume = function() {
paused = false;
startTime = new Date().getTime();
timer = setInterval(obj.step, 100);
};
obj.pause = function() {
if (!paused) {
paused = true;
ms = obj.step();
clearInterval(timer);
}
};
obj.reset = function(res) {
ms = res * 1000;
m = Math.floor(ms / 60000), s = Math.floor(ms / 1000) % 60;
switch (type) {
case "game":
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
break;
case "shot":
if (s <= 4) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
break;
}
};
obj.modify = function(diff) {
if (diff == 1) {
if (ms < seconds * 1000) {
ms += diff * 1000;
m = Math.floor(ms / 60000), s = Math.floor(ms / 1000) % 60;
if (type == "shot") {
if (s <= 4) {
var mili = String(ms % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
} else {
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
}
}
} else {
if (Math.floor(ms / 1000) % 60 > 0) {
ms += diff * 1000;
m = Math.floor(ms / 60000), s = Math.floor(ms / 1000) % 60;
if (type == "shot") {
if (s <= 4) {
var mili = String(ms % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
} else {
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
}
}
}
};
obj.step = function() {
var now = Math.max(0, ms - (new Date().getTime() - startTime)),
m = Math.floor(now / 60000),
s = Math.floor(now / 1000) % 60;
switch (type) {
case "game":
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
break;
case "shot":
if (s <= 4) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
break;
}
if (now == 0) {
clearInterval(timer);
if (type == "shot") {
runningsc = false;
runninggc = false;
endedsc = true;
}
if (oncomplete) oncomplete();
}
return now;
};
obj.resume();
return obj;
};
$(document).on("click", "#start", function() {
timergc = startTimer(600, "game_clock", function() {}, "game");
timersc = startTimer(24, "shot_clock", function() {}, "shot");
runningsc = true;
runninggc = true;
$(".gcbtn_main").text("Pause");
$(".gcbtn_main").attr("id", "pausegc");
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#pausegc", function() {
timergc.pause();
timersc.pause();
runningsc = false;
runninggc = false;
$(".gcbtn_main").text("Resume");
$(".gcbtn_main").attr("id", "resumegc");
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
});
$(document).on("click", "#resumegc", function() {
timergc.resume();
runninggc = true;
if (!runningsc) {
timersc.resume();
runningsc = true;
}
$(".gcbtn_main").text("Pause");
$(".gcbtn_main").attr("id", "pausegc");
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#resetgc", function() {
timergc.pause();
timergc.reset(600);
timersc.pause();
timersc.reset(24);
$(".gcbtn_main").text("Start");
$(".gcbtn_main").attr("id", "resumegc");
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#upgc", function() {
console.log(runninggc);
timergc.pause();
timergc.modify(1);
if (runninggc) {
timergc.resume();
}
});
$(document).on("click", "#downgc", function() {
timergc.pause();
timergc.modify(-1);
if (runninggc) {
timergc.resume();
}
});
$(document).on("click", "#pausesc", function() {
timersc.pause();
runningsc = false;
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
});
$(document).on("click", "#resumesc", function() {
timersc.resume();
runningsc = true;
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#reset14", function() {
timersc.pause();
timersc.reset(14);
if (runningsc) {
timersc.resume();
}
if (endedsc) {
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
}
});
$(document).on("click", "#reset24", function() {
timersc.pause();
timersc.reset(24);
if (runningsc) {
timersc.resume();
}
if (endedsc) {
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
}
});
$(document).on("click", "#upsc", function() {
timersc.pause();
timersc.modify(1);
endedsc = false;
if (runningsc) {
timersc.resume();
}
});
$(document).on("click", "#downsc", function() {
timersc.pause();
timersc.modify(-1);
endedsc = false;
if (runningsc) {
timersc.resume();
}
});
$(document).on("click", "#upqrt", function() {
console.log("Works");
var quarter = $("#quarter").text();
console.log(quarter);
if (quarter == 4) {
$("#quarter").text("E");
}
if (quarter < 4) {
console.log(quarter);
quarter++;
$("#quarter").text(quarter);
}
});
$(document).on("click", "#downqrt", function() {
var quarter = $("#quarter").text();
if (quarter == "E") {
$("#quarter").text(4);
}
if (quarter > 1) {
quarter--
$("#quarter").text(quarter);
}
});
};
$(document).ready(function() {
timerMode();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="page-block">
<div class="row">
<div class="col-xs-6">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 432.7 198" style="enable-background:new 0 0 432.7 198;background:white;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #FFFFFF;
stroke: #000000;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
}
.st2 {
font-family: 'Helvetica';
}
.st3 {
font-size: 58px;
}
.st4 {
fill: none;
stroke: #000000;
stroke-miterlimit: 10;
}
.st5 {
font-size: 42px;
}
.st6 {
font-size: 18px;
}
.st7 {
font-size: 46px;
}
.st8 {
font-size: 50.9768px;
}
.st9 {
stroke: #000000;
stroke-miterlimit: 10;
}
.st10 {
font-size: 23px;
}
.st11 {
fill: none;
stroke: #000000;
}
</style>
<path id="XMLID_12_" class="st0" d="M125.9,114.8H44.1c-2.3,0-4.2-1.9-4.2-4.2V73.4c0-2.3,1.9-4.2,4.2-4.2h81.8c2.3,0,4.2,1.9,4.2,4.2v37.2C130.1,112.9,128.2,114.8,125.9,114.8z" />
<rect id="XMLID_9_" x="39.9" y="69.2" class="st1" width="90.2" height="45.6" />
<text id="XMLID_10_" transform="matrix(1 0 0 1 99.3335 111.792)" class="st2 st3">0</text>
<path id="XMLID_16_" class="st0" d="M387.9,114.8h-81.8c-2.3,0-4.2-1.9-4.2-4.2V73.4c0-2.3,1.9-4.2,4.2-4.2h81.8
c2.3,0,4.2,1.9,4.2,4.2v37.2C392.1,112.9,390.2,114.8,387.9,114.8z" />
<rect id="home_rect" x="7.1" y="6.8" class="st1" width="129.8" height="36.3"></rect>
<text id="home_name" transform="matrix(1 0 0 1 7.0877 38.7791)" class="st2 st5">HOME</text>
<rect id="XMLID_20_" x="42" y="159.5" class="st1" width="60.9" height="16.5" />
<text id="XMLID_19_" transform="matrix(1 0 0 1 42.0301 173.6536)" class="st2 st6">FOULS:</text>
<rect id="XMLID_22_" x="112.5" y="160.5" class="st1" width="10.7" height="16" />
<text id="XMLID_21_" transform="matrix(1 0 0 1 112.4562 174.6557)" class="st2 st6">0</text>
<rect id="XMLID_33_" x="186.7" y="145.9" class="st1" width="59.4" height="36.6" />
<text id="shot_clock" transform="matrix(1 0 0 1 191.8234 179.9915)" class="st2 st7">24</text>
<rect id="away_rect" x="295.1" y="6.8" class="st1" width="129.8" height="36.3" />
<text id="away_name" transform="matrix(1 0 0 1 295.0877 38.7791)" class="st2 st5">AWAY</text>
<rect id="XMLID_5_" x="153.2" y="6.8" class="st1" width="125.6" height="36.3" />
<text id="game_clock" transform="matrix(0.8828 0 0 1 165.1738 43.0225)" class="st2 st8">10:00</text>
<rect id="XMLID_15_" x="301.9" y="69.2" class="st1" width="90.2" height="45.6" />
<text id="XMLID_14_" transform="matrix(1 0 0 1 301.8873 111.792)" class="st2 st3">0</text>
<g id="XMLID_11_">
<text id="quarter" transform="matrix(1 0 0 1 209.3371 99.3377)" class="st9 st2 st10">1</text>
</g>
<path id="XMLID_13_" class="st11" d="M221,103.6h-10.4c-2.3,0-4.2-1.9-4.2-4.2V83.2c0-2.3,1.9-4.2,4.2-4.2H221
c2.3,0,4.2,1.9,4.2,4.2v16.2C225.2,101.7,223.3,103.6,221,103.6z" />
<path id="XMLID_18_" class="st11" d="M123,180.7h-10.4c-2.3,0-4.2-1.9-4.2-4.2v-16.2c0-2.3,1.9-4.2,4.2-4.2H123
c2.3,0,4.2,1.9,4.2,4.2v16.2C127.2,178.9,125.3,180.7,123,180.7z" />
<path id="XMLID_31_" class="st11" d="M245.2,186.3h-57.3c-2.3,0-4.2-1.9-4.2-4.2v-36.7c0-2.3,1.9-4.2,4.2-4.2h57.3
c2.3,0,4.2,1.9,4.2,4.2v36.7C249.4,184.4,247.5,186.3,245.2,186.3z" />
<rect id="XMLID_30_" x="300.7" y="158.7" class="st1" width="60.9" height="16.5" />
<text id="XMLID_29_" transform="matrix(1 0 0 1 300.6767 172.9018)" class="st2 st6">FOULS:</text>
<rect id="XMLID_28_" x="371.1" y="159.7" class="st1" width="10.7" height="16" />
<text id="XMLID_26_" transform="matrix(1 0 0 1 371.1028 173.9038)" class="st2 st6">0</text>
<path id="XMLID_23_" class="st11" d="M381.7,180h-10.4c-2.3,0-4.2-1.9-4.2-4.2v-16.2c0-2.3,1.9-4.2,4.2-4.2h10.4
c2.3,0,4.2,1.9,4.2,4.2v16.2C385.9,178.1,384,180,381.7,180z" />
<circle id="XMLID_17_" cx="155" cy="91.3" r="2.5" />
<circle id="XMLID_35_" cx="165" cy="91.3" r="2.5" />
<circle id="XMLID_36_" cx="175" cy="91.3" r="2.5" />
<circle id="XMLID_39_" cx="257" cy="91.3" r="2.5" />
<circle id="XMLID_38_" cx="267" cy="91.3" r="2.5" />
<circle id="XMLID_37_" cx="277" cy="91.3" r="2.5" />
</svg>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Game Clock</div>
<div class="panel-body">
<div role="toolbar" class="btn-toolbar">
<button id="start" type="button" class="btn btn-default btn-lg gcbtn_main">Start</button>
<button id="resetgc" type="button" class="btn btn-default btn-lg">Reset</button>
<div class="btn-group-vertical" style="margin-left:5px;">
<button id="upgc" type="button" class="btn btn-default"><i class="fa fa-angle-up"></i>
</button>
<button id="downgc" type="button" class="btn btn-default"><i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">:24</div>
<div class="panel-body">
<div role="toolbar" class="btn-toolbar">
<button id="pausesc" type="button" class="btn btn-default btn-lg scbtn_main">Pause</button>
<div class="btn-group" style="margin-left:5px;">
<button id="reset14" type="button" class="btn btn-default btn-lg">:14</button>
<button id="reset24" type="button" class="btn btn-default btn-lg">:24</button>
</div>
<div class="btn-group-vertical" style="margin-left:5px;">
<button id="upsc" type="button" class="btn btn-default"><i class="fa fa-angle-up"></i>
</button>
<button id="downsc" type="button" class="btn btn-default"><i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Quarter</div>
<div class="panel-body">
<div role="toolbar" class="btn-toolbar">
<div class="btn-group-vertical" style="margin-left:5px;">
<button id="upqrt" type="button" class="btn btn-default"><i class="fa fa-angle-up"></i>
</button>
<button id="downqrt" type="button" class="btn btn-default"><i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>