Skip to content

Commit

Permalink
commit
Browse files Browse the repository at this point in the history 
commit
  • Loading branch information
@samutich
samutich committed Apr 10, 2024
1 parent a6f6935 commit 7fa34ff
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 52 deletions.
10 changes: 5 additions & 5 deletions board.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
<button
type="button"
id="clear"
onclick="clearBoard(), sendCommand('clear')"
onclick="clearBoard()"
data-tooltip="Clear board"
></button>
</div>
Expand Down Expand Up @@ -162,22 +162,22 @@
<button
id="none"
class="active"
onclick="setPattern('none'), sendCommand('none')"
onclick="setPattern('none')"
data-tooltip="Empty"
></button>
<button
id="sq"
onclick="setPattern('sq'), sendCommand('sq')"
onclick="setPattern('sq')"
data-tooltip="Checkered"
></button>
<button
id="line"
onclick="setPattern('line'), sendCommand('line')"
onclick="setPattern('line')"
data-tooltip="Lined"
></button>
<button
id="dot"
onclick="setPattern('dot'), sendCommand('dot')"
onclick="setPattern('dot')"
data-tooltip="Dotted"
></button>
</div>
Expand Down
44 changes: 22 additions & 22 deletions css/board.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
font-style: normal;
font-weight: 400;
src: local('M PLUS Medium 1c'),
url('/assets/fonts/MPLUSRounded1c-Medium.woff2') format('woff2'),
url('/assets/fonts/MPLUSRounded1c-Medium.woff') format('woff');
url('../assets/fonts/MPLUSRounded1c-Medium.woff2') format('woff2'),
url('../assets/fonts/MPLUSRounded1c-Medium.woff') format('woff');
}
body {
margin: 0;
Expand Down Expand Up @@ -71,19 +71,19 @@ body {
}

#exit {
background-image: url(/assets/icons/door-exit.svg);
background-image: url('../assets/icons/door-exit.svg');
}
#exit:hover {
background-color: #ff655b;
}
#link {
background-image: url(/assets/icons/link.svg);
background-image: url('../assets/icons/link.svg');
}
#link:hover {
background-color: #00a92f;
}
#download {
background-image: url(/assets/icons/file-download.svg);
background-image: url('../assets/icons/file-download.svg');
}
#download:hover {
background-color: #00a92f;
Expand Down Expand Up @@ -158,23 +158,23 @@ button:active {
}

#undo {
background-image: url(/assets/icons/arrow-back-up.svg);
background-image: url('../assets/icons/arrow-back-up.svg');
}
#redo {
background-image: url(/assets/icons/arrow-forward-up.svg);
background-image: url('../assets/icons/arrow-forward-up.svg');
}

#pointer {
background-image: url(/assets/icons/pointer.svg);
background-image: url('../assets/icons/pointer.svg');
}
#pen {
background-image: url(/assets/icons/pencil.svg);
background-image: url('../assets/icons/pencil.svg');
}
#eraser {
background-image: url(/assets/icons/eraser.svg);
background-image: url('../assets/icons/eraser.svg');
}
#clear {
background-image: url(/assets/icons/trash-x.svg);
background-image: url('../assets/icons/trash-x.svg');
}
#clear:active {
background-color: #ff655b;
Expand All @@ -188,7 +188,7 @@ button:active {
width: 30px;
height: 30px;
background: transparent;
background-image: url(/assets/icons/photo.svg);
background-image: url('../assets/icons/photo.svg');
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
Expand All @@ -207,21 +207,21 @@ button:active {
}

#color {
background-image: url(/assets/icons/palette.svg);
background-image: url('../assets/icons/palette.svg');
background-color: black;
}
#size {
background-size: 76%;
}
#pattern {
background-image: url(/assets/icons/sq.svg);
background-image: url('../assets/icons/sq.svg');
}

#prev {
background-image: url(/assets/icons/chevron-left.svg);
background-image: url('../assets/icons/chevron-left.svg');
}
#next {
background-image: url(/assets/icons/chevron-right.svg);
background-image: url('../assets/icons/chevron-right.svg');
}

#colors > button {
Expand Down Expand Up @@ -268,7 +268,7 @@ button:active {
#small,
#medium,
#large {
background-image: url(/assets/icons/point.svg);
background-image: url('../assets/icons/point.svg');
}
#small {
background-size: 50%;
Expand All @@ -281,16 +281,16 @@ button:active {
}

#none {
background-image: url(/assets/icons/none.svg);
background-image: url('../assets/icons/none.svg');
}
#sq {
background-image: url(/assets/icons/sq.svg);
background-image: url('../assets/icons/sq.svg');
}
#line {
background-image: url(/assets/icons/line.svg);
background-image: url('../assets/icons/line.svg');
}
#dot {
background-image: url(/assets/icons/dot.svg);
background-image: url('../assets/icons/dot.svg');
}

input[type='color'] {
Expand All @@ -310,7 +310,7 @@ input[type='color']::-webkit-color-swatch-wrapper {
transition: 0.3s;
}
input[type='color']::-webkit-color-swatch {
background-image: url(/assets/icons/color-picker.svg);
background-image: url('../assets/icons/color-picker.svg');
background-size: 17px;
background-repeat: no-repeat;
background-position: center;
Expand Down
35 changes: 12 additions & 23 deletions js/functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,47 +30,41 @@ function scrollColor(event) {
customColor
]
if (event.deltaY > 0) {
options.color += 1
if (options.color == colorOptions.length) {
options.color = 0
if (options.color < colorOptions.length - 1) {
options.color += 1
}
} else {
if (!options.color) {
options.color = colorOptions.length
if (options.color) {
options.color -= 1
}
options.color -= 1
}
setBrush({ color: colorOptions[options.color] })
}
// Change size of drawing subject by scrolling
function scrollSize(event) {
sizeOptions = [3, 4, 5]
if (event.deltaY > 0) {
options.size += 1
if (options.size == sizeOptions.length) {
options.size = 0
if (options.size < sizeOptions.length - 1) {
options.size += 1
}
} else {
if (!options.size) {
options.size = sizeOptions.length
if (options.size) {
options.size -= 1
}
options.size -= 1
}
setBrush({ size: sizeOptions[options.size] })
}
// Change board patterns by scrolling
function scrollPattern(event) {
patternOptions = ['none', 'sq', 'line', 'dot']
if (event.deltaY > 0) {
options.pattern += 1
if (options.pattern == patternOptions.length) {
options.pattern = 0
if (options.pattern < patternOptions.length - 1) {
options.pattern += 1
}
} else {
if (!options.pattern) {
options.pattern = patternOptions.length
if (options.pattern) {
options.pattern -= 1
}
options.pattern -= 1
}
setPattern(patternOptions[options.pattern])
}
Expand Down Expand Up @@ -114,8 +108,3 @@ const fadeOut = (cl, timeout) => {
element.style.display = 'none'
}, timeout)
}

// Command
function sendCommand(command) {
console.log('New command:', command)
}
4 changes: 2 additions & 2 deletions js/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ colorInput.onchange = function () {
// Set canvas pattern
let currentPattern = 'none'
function setPattern(name) {
background.style.backgroundImage = `url(/assets/patterns/pattern_${name}.svg)`
pattern.style.backgroundImage = `url(/assets/icons/${name}.svg)`
background.style.backgroundImage = `url('assets/patterns/pattern_${name}.svg')`
pattern.style.backgroundImage = `url('assets/icons/${name}.svg')`
document.querySelector('#patterns button.active').classList.remove('active')
document.getElementById(name).classList.add('active')
currentPattern = name
Expand Down

0 comments on commit 7fa34ff

Please sign in to comment.