Skip to content
Snippets Groups Projects
Commit 88f806be authored by deepdigger's avatar deepdigger
Browse files

Merge branch 'custom-server' into mybranch

parents deb8f1c4 7fff3e70
1 merge request!8Merge Changes into custom-server, mainly paint-functionality
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 754 additions and 513 deletions
.gitignore 0 → 100644
+ 2
− 0
View file @ 88f806be
client/res/MouthsAndEyes.png~
client/res/palette.png
client/logic/SkribblClient.js
+ 5
− 4
View file @ 88f806be
......@@ -10,6 +10,7 @@ import Util, {CallbackHandler,Value,ReadOnlyValue} from "../util/Util.js";
* @typedef {import("./SkribblServer.js").ClearOrder} ClearOrder
* @typedef {import("./SkribblServer.js").DrawOrder} DrawOrder
* @typedef {import("./SkribblServer.js").WordReveal} WordReveal
* @typedef {import("./SkribblServer.js").BackgroundOrder} BackgroundOrder
*/
/**
* @typedef {import("../util/Util.js").DeepReadOnly<T>} DeepReadOnly
......@@ -32,7 +33,7 @@ export default class SkribblClient {
this._state = new Value(null);
/** @type {CallbackHandler<[guessData:GuessResponse]>} */
this._onGuessCallbacks = new CallbackHandler();
/** @type {CallbackHandler<[order:ClearOrder|DrawOrder]>} */
/** @type {CallbackHandler<[order:ClearOrder|BackgroundOrder|DrawOrder]>} */
this._onDrawCallbacks = new CallbackHandler();
/** @type {CallbackHandler<[message:WordReveal]>} */
this._onWordRevealCallbacks = new CallbackHandler();
......@@ -55,7 +56,7 @@ export default class SkribblClient {
}else if(message.action=="guessedWord"){
let data = (({action,...data})=>data)(message);
this._onGuessCallbacks.callAll(data);
}else if(message.action=="clearCanvas"||message.action=="draw"||message.action=="erase"){
}else if(message.action=="clearCanvas"||message.action=="changeBackgroundColor"||message.action=="draw"||message.action=="erase"){
this._onDrawCallbacks.callAll(message);
}else if(message.action=="revealWord"){
this._onWordRevealCallbacks.callAll(message);
......@@ -197,7 +198,7 @@ export default class SkribblClient {
/**
* Sends the given drawing order to the server and the immediately returns, without waiting for a response.
* @param {ClearOrder|DrawOrder} order
* @param {ClearOrder|BackgroundOrder|DrawOrder} order
*/
draw(order){
this._dataChannel.send(order);
......@@ -205,7 +206,7 @@ export default class SkribblClient {
/**
* Registers a callback to be called whenever someone draws something on the canvas.
* @param {(order:ClearOrder|DrawOrder)=>void} callback
* @param {(order:ClearOrder|BackgroundOrder|DrawOrder)=>void} callback
* @param {object} [options]
* @param {Value<boolean>|ReadOnlyValue<boolean>} [options.onlyWhen] when specified, calls the callback only when this is value is true.
*/
......
client/logic/SkribblServer.js
+ 336
− 328
View file @ 88f806be
This diff is collapsed.
client/res/.gitignore
+ 4
− 1
View file @ 88f806be
*.kra~
\ No newline at end of file
*.kra*
paintnet/*
*.log
client/res/MouthsAndEyes.gif 0 → 100644
+ 0
− 0
View file @ 88f806be
client/res/MouthsAndEyes.gif

17 KiB

client/res/pi.gif 0 → 100644
+ 0
− 0
View file @ 88f806be
client/res/pi.gif

11 KiB

client/res/selectArrows.gif 0 → 100644
+ 0
− 0
View file @ 88f806be
client/res/selectArrows.gif

6.68 KiB

client/ui/SkribblCanvas.js
+ 181
− 37
View file @ 88f806be
import SkribblClient from "../logic/SkribblClient.js";
import {CustomElement} from "../util/Util.js";
import { CustomElement } from "../util/Util.js";
/**
* @typedef {import("../logic/SkribblServer.js").DrawOrder} DrawOrder
*/
/**
* Custom element `<skribbl-canvas>` for the canvas that can be drawn on by whoever is currently drawing.
*/
export default class SkribblCanvas extends CustomElement {
/**
* @param {SkribblClient} client
*/
constructor(client){
super();
this._drawable = false;
this.attachShadow({mode:"open"});
this.shadowRoot.innerHTML = `
/**
* @param {SkribblClient} client
*/
constructor(client) {
super();
this._drawable = false;
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
......@@ -26,32 +31,171 @@ export default class SkribblCanvas extends CustomElement {
</style>
<canvas width="960" height="720"></canvas>
`;
this._canvas = this.shadowRoot.querySelector("canvas");
client.onDraw(order=>{
// runs whenever the server tells all clients to draw something on the canvas
// TODO draw stuff to the canvas here
console.log("incoming draw order:",order); // just for testing, can be removed once this has been implemented
},{onlyWhen:this.connected});
// TODO whenever the player draws stuff, send it to the server using `client.draw(order)` here
this._canvas.addEventListener("mousedown",e=>{
// for example, this code runs whenever the user clicks on the canvas. "mousemove", "mouseup", "mouseenter" and "mouseleave" events can be monitored similarly.
});
}
/**
* Whether the canvas can currently be drawn on by this player.
*/
set drawable(drawable){
if (this._drawable!==drawable){
this._drawable = drawable;
// if some styles need to be changed depending on whether or not the player is currently allowed to draw, like the mouse coursor for example, this is probably the right place to do so
}
}
get drawable(){
return this._drawable;
}
// TODO add getters and setters for properties like `color` and `radius` here, so they can then be set in `SkribblCanvasContainer.js` whenever the user clicks on the corresponding controls.
this._canvas = this.shadowRoot.querySelector("canvas");
this._radius = 10;
this._color = "red";
this._client = client;
/**
* looks what kind of order is given, then either draws, erases(=drawing with background color), changes the backgroundcolor or clears the canvas
* Todo: test functionality
*/
client.onDraw(order => {
// runs whenever the server tells all clients to draw something on the canvas
this._canvas = this.shadowRoot.querySelector("canvas");
var ctx = this._canvas.getContext("2d");
ctx.lineCap = "round";
if (order.action == "draw") {
let x = 960 * order.points[0].x / 1000;
let y = 720 * order.points[0].y / 1000;
ctx.beginPath();
ctx.moveTo(x, y);
let xx = 960 * order.points[1].x / 1000;
let yy = 720 * order.points[1].y / 1000;
ctx.lineTo(xx, yy);
ctx.lineWidth = order.radius;
ctx.strokeStyle = order.color;
ctx.stroke();
} else if (order.action == "erase") {
let x = 960 * order.points[0].x / 1000;
let y = 720 * order.points[0].y / 1000;
ctx.beginPath();
ctx.moveTo(x, y);
let xx = 960 * order.points[1].x / 1000;
let yy = 720 * order.points[1].y / 1000;
ctx.lineTo(xx, yy);
ctx.lineWidth = order.radius;
ctx.strokeStyle = this._backgroundColor;
ctx.stroke();
} else if (order.action == "changeBackgroundColor") {
this._backgroundColor = order.color;
ctx.fillStyle = order.color;
ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
} else if (order.action == "clearCanvas") {
ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
}
console.log("incoming draw order:", order); // just for testing, can be removed once this has been implemented
}, { onlyWhen: this.connected });
/**
* is allowed to Draw and last known mouse position
*/
this._isDrawing = false;
this._relativeMousePositionX = 0;
this._relativeMousePositionY = 0;
/**
* Sends on MouseMove event if you are allowed to draw a draw event to the server with color, radius and erase/draw
*/
this._canvas.addEventListener("mousemove", e => {
if (this._drawable && this._isDrawing) {
let oldMousePositionX = this._relativeMousePositionX;
let oldMousePositionY = this._relativeMousePositionY;
this.updateRelativeMousePosition(e); // Size not in Percent but in perMille (per Thousand)
/** @type {"draw"|"erase"} */
let actionToDo = "draw";
if (this._erasorActive) {
actionToDo = "erase"
}
/** @type {DrawOrder} */
let coolOrder = { action: actionToDo, color: this._color, radius: this._radius, points: [{ x: oldMousePositionX, y: oldMousePositionY }, { x: this._relativeMousePositionX, y: this._relativeMousePositionY }] };
client.draw(coolOrder);
}
});
/**
* look if you can draw on the canvas
*/
this._canvas.addEventListener("mousedown", e => {
this._isDrawing = true;
this.updateRelativeMousePosition(e);
});
this._canvas.addEventListener("mouseup", e => {
this._isDrawing = false;
});
this._canvas.addEventListener("mouseleave", e => {
this._isDrawing = false;
});
}
/**
* Sets the backgroundColor of the canvas
*/
/** @param {string} backgroundColor */
set backgroundColor(backgroundColor) {
/** @type {import("../logic/SkribblServer.js").BackgroundOrder} */
let coolOrder = { action: "changeBackgroundColor", color: backgroundColor };
this._client.draw(coolOrder);
}
/**
* Tells the relative mouse position on the canvas in per Mille (min0, max1000)
*/
/** @param {MouseEvent} e */
updateRelativeMousePosition(e) {
this._canvas = this.shadowRoot.querySelector("canvas");
let canvasSizeWidth = this._canvas.getBoundingClientRect().width;
let canvasSizeHeight = this._canvas.getBoundingClientRect().height;
this._relativeMousePositionX = Math.round(1000 * e.offsetX / canvasSizeWidth); // Size not in Percent but in perMille (per Thousand)
this._relativeMousePositionY = Math.round(1000 * e.offsetY / canvasSizeHeight); // Size not in Percent but in perMille (per Thousand)
}
/**
* Whether the canvas can currently be drawn on by this player.
*/
set drawable(drawable) {
if (this._drawable !== drawable) {
this._drawable = drawable;
// if some styles need to be changed depending on whether or not the player is currently allowed to draw, like the mouse coursor for example, this is probably the right place to do so
}
}
get drawable() {
return this._drawable;
}
/**
* which radius the pen should have
*/
/** @param {number} radius */
set radius(radius) {
this._radius = radius;
}
/**
* Which color the pen should have
*/
/** @param {string} color */
set color(color) {
this._color = color;
}
/**
* Whether the erasor is active
*/
/** @param {boolean} erasorActive */
set erasorActive(erasorActive) {
this._penActive = false;
this._erasorActive = erasorActive;
}
/**
* Whether the pen is active
*/
/** @param {boolean} penActive */
set penActive(penActive) {
this._penActive = false;
this._penActive = penActive;
}
}
customElements.define("skribbl-canvas",SkribblCanvas);
\ No newline at end of file
customElements.define("skribbl-canvas", SkribblCanvas);
\ No newline at end of file
client/ui/SkribblCanvasContainer.js
+ 201
− 131
View file @ 88f806be
import SkribblClient from "../logic/SkribblClient.js";
import LatexJS from "../util/Latex.js";
import Util, {CustomElement} from "../util/Util.js";
import Util, { CustomElement } from "../util/Util.js";
import SkribblCanvas from "./SkribblCanvas.js";
/**
* Custom element `<skribbl-canvas-container>` that manages the canvas and its overlays.
*/
export default class SkribblCanvasContainer extends CustomElement {
/**
* @param {SkribblClient} client
*/
constructor(client){
super();
this.attachShadow({mode:"open"});
this.shadowRoot.innerHTML = `
/**
* @param {SkribblClient} client
*/
constructor(client) {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
......@@ -44,10 +44,18 @@ export default class SkribblCanvasContainer extends CustomElement {
.button {
margin: auto;
text-align: center;
<<<<<<< HEAD
=======
>>>>>>> custom-server
display:inline-block;
border:none;
height:40px;
width:40px;
<<<<<<< HEAD
=======
>>>>>>> custom-server
/*
background: url('/res/selectArrows.png');
......@@ -62,10 +70,19 @@ export default class SkribblCanvasContainer extends CustomElement {
}
.widthButton{
height:40px;
<<<<<<< HEAD
width: 100 px;
}
=======
width: 40px;
}
.drawButton{
height: 40px;
width: 100px;
}
>>>>>>> custom-server
</style>
<!-- invisible svg to maintain an aspect ratio of 960:720, aka 4:3 -->
......@@ -83,8 +100,13 @@ export default class SkribblCanvasContainer extends CustomElement {
<div id = "green" class = "button colorButton" style="background: ForestGreen"> </div>
<div id = "lightblue" class = "button colorButton" style="background: SkyBlue"> </div>
<div id = "blue" class = "button colorButton" style="background: SlateBlue"> </div>
<<<<<<< HEAD
<div id = "pink" class = "button colorButton" style="background: pink"> </div>
<div id = "purple" class = "button colorButton" style="background: BlueViolet"> </div>
=======
<div id = "purple" class = "button colorButton" style="background: BlueViolet"> </div>
<div id = "pink" class = "button colorButton" style="background: pink"> </div>
>>>>>>> custom-server
<div id = "lightbrown" class = "button colorButton" style="background: SandyBrown"> </div>
<div id = "darkbrown" class = "button colorButton" style="background: SaddleBrown"> </div>
<div id = "lightgrey" class = "button colorButton" style="background: LightGrey"> </div>
......@@ -93,6 +115,7 @@ export default class SkribblCanvasContainer extends CustomElement {
<div id = "white" class = "button colorButton" style="background: white"> </div>
<<<<<<< HEAD
<div id = "widthS" class = "button widthButton" style="background: white"> </div>
<div id = "widthM" class = "button widthButton" style="background: white"> </div>
<div id = "widthL" class = "button widthButton" style="background: white"> </div>
......@@ -102,121 +125,166 @@ export default class SkribblCanvasContainer extends CustomElement {
<div id = "erasor" class = "button" style="background: white"> </div>
<div id = "changeBackgroundColor" class = "button" style="background: white"> </div>
=======
<div id = "widthS" class = "button widthButton" style="background: white"> dünn </div>
<div id = "widthM" class = "button widthButton" style="background: white"> mittel </div>
<div id = "widthL" class = "button widthButton" style="background: white"> dick </div>
<div id = "widthXL" class = "button widthButton" style="background: white"> sehr dick </div>
<div id = "pen" class = "button drawButton" style="background:white"> malen </div>
<div id = "erasor" class = "button drawButton" style="background: white"> radieren </div>
<div id = "changeBackgroundColor" class = "button drawButton" style="background: white"> Hintergrund färben </div>
>>>>>>> custom-server
</div>
`;
this._canvas = new SkribblCanvas(client);
this._container = this.shadowRoot.getElementById("container");
this._container.insertBefore(this._canvas,this._container.firstChild);
this._controls = this.shadowRoot.getElementById("controls");
client.state.onChange(state=>{
/** whether the player should currently be allowed to draw on the canvas */
let allowToDraw = state.hasGameStarted&&state.drawingPlayer==state.playerIndex&&typeof state.word=="string";
this._canvas.drawable = allowToDraw;
this._controls.classList.toggle("hidden",!allowToDraw);
},{onlyWhen:this.connected});
// TODO implement color settings and set the correspondig properties of `this._canvas` whenever they change here.
this._canvas = new SkribblCanvas(client);
this._container = this.shadowRoot.getElementById("container");
this._container.insertBefore(this._canvas, this._container.firstChild);
this._controls = this.shadowRoot.getElementById("controls");
client.state.onChange(state => {
/** whether the player should currently be allowed to draw on the canvas */
let allowToDraw = state.hasGameStarted && state.drawingPlayer == state.playerIndex && typeof state.word == "string";
this._canvas.drawable = allowToDraw;
this._controls.classList.toggle("hidden", !allowToDraw);
}, { onlyWhen: this.connected });
// TODO implement color settings and set the correspondig properties of `this._canvas` whenever they change here.
<<
<< << < HEAD
===
=== =
//Logik fuer die Buttons zur Farbauswahl
>>>
>>> > custom - server
this._darkredButton = this.shadowRoot.querySelector("#darkred");
this._darkredButton.addEventListener("click", e => {
this._canvas.color = "DarkRed";
});
this._redButton = this.shadowRoot.querySelector("#red");
this._redButton.addEventListener("click", e => {
this._canvas.color = "Firebrick";
});
this._orangeButton = this.shadowRoot.querySelector("#orange");
this._orangeButton.addEventListener("click", e => {
this._canvas.color = "orange";
});
this._yellowButton = this.shadowRoot.querySelector("#yellow");
this._yellowButton.addEventListener("click", e => {
this._canvas.color = "yellow";
});
this._lightgreenButton = this.shadowRoot.querySelector("#lightgreen");
this._lightgreenButton.addEventListener("click", e => {
this._canvas.color = "YellowGreen";
});
this._greenButton = this.shadowRoot.querySelector("#green");
this._greenButton.addEventListener("click", e => {
this._canvas.color = "ForestGreen";
});
this._lightblueButton = this.shadowRoot.querySelector("#lightblue");
this._lightblueButton.addEventListener("click", e => {
this._canvas.color = "SkyBlue";
});
this._blueButton = this.shadowRoot.querySelector("#blue");
this._blueButton.addEventListener("click", e => {
this._canvas.color = "SlateBlue";
});
this._purpleButton = this.shadowRoot.querySelector("#purple");
this._purpleButton.addEventListener("click", e => {
this._canvas.color = "BlueViolet";
});
this._pinkButton = this.shadowRoot.querySelector("#pink");
this._pinkButton.addEventListener("click", e => {
this._canvas.color = "pink";
});
this._lightbrownButton = this.shadowRoot.querySelector("#lightbrown");
this._lightbrownButton.addEventListener("click", e => {
this._canvas.color = "SandyBrown";
});
this._darkbrownButton = this.shadowRoot.querySelector("#darkbrown");
this._darkbrownButton.addEventListener("click", e => {
this._canvas.color = "SaddleBrown";
});
this._lightgreyButton = this.shadowRoot.querySelector("#lightgrey");
this._lightgreyButton.addEventListener("click", e => {
this._canvas.color = "LightGrey";
});
this._darkgreyButton = this.shadowRoot.querySelector("#darkgrey");
this._darkgreyButton.addEventListener("click", e => {
this._canvas.color = "DarkGrey";
});
this._blackButton = this.shadowRoot.querySelector("#black");
this._blackButton.addEventListener("click", e => {
this._canvas.color = "black";
});
this._whiteButton = this.shadowRoot.querySelector("#white");
this._whiteButton.addEventListener("click", e => {
this._canvas.color = "white";
});
this._darkredButton = this.shadowRoot.querySelector("#darkred");
this._darkredButton.addEventListener("click",e=>{
this._canvas.color = "DarkRed";
});
this._redButton = this.shadowRoot.querySelector("#red");
this._redButton.addEventListener("click",e=>{
this._canvas.color = "Firebrick";
});
this._orangeButton = this.shadowRoot.querySelector("#orange");
this._orangeButton.addEventListener("click",e=>{
this._canvas.color = "orange";
});
this._yellowButton = this.shadowRoot.querySelector("#yellow");
this._yellowButton.addEventListener("click",e=>{
this._canvas.color = "yellow";
});
this._lightgreenButton = this.shadowRoot.querySelector("#lightgreen");
this._lightgreenButton.addEventListener("click",e=>{
this._canvas.color = "YellowGreen";
});
this._greenButton = this.shadowRoot.querySelector("#green");
this._greenButton.addEventListener("click",e=>{
this._canvas.color = "ForestGreen";
});
this._lightblueButton = this.shadowRoot.querySelector("#lightblue");
this._lightblueButton.addEventListener("click",e=>{
this._canvas.color = "SkyBlue";
});
this._blueButton = this.shadowRoot.querySelector("#blue");
this._blueButton.addEventListener("click",e=>{
this._canvas.color = "SlateBlue";
});
this._pinkButton = this.shadowRoot.querySelector("#pink");
this._pinkButton.addEventListener("click",e=>{
this._canvas.color = "pink";
});
this._purpleButton = this.shadowRoot.querySelector("#purple");
this._purpleButton.addEventListener("click",e=>{
this._canvas.color = "BlueViolet";
});
this._lightbrownButton = this.shadowRoot.querySelector("#lightbrown");
this._lightbrownButton.addEventListener("click",e=>{
this._canvas.color = "SandyBrown";
});
this._darkbrownButton = this.shadowRoot.querySelector("#darkbrown");
this._darkbrownButton.addEventListener("click",e=>{
this._canvas.color = "SaddleBrown";
});
this._lightgreyButton = this.shadowRoot.querySelector("#lightgrey");
this._lightgreyButton.addEventListener("click",e=>{
this._canvas.color = "LightGrey";
});
this._darkgreyButton = this.shadowRoot.querySelector("#darkgrey");
this._darkgreyButton.addEventListener("click",e=>{
this._canvas.color = "DarkGrey";
});
this._blackButton = this.shadowRoot.querySelector("#black");
this._blackButton.addEventListener("click",e=>{
this._canvas.color = "black";
});
this._whiteButton = this.shadowRoot.querySelector("#white");
this._whiteButton.addEventListener("click",e=>{
this._canvas.color = "white";
});
//Logik fuer Buttons zur Auswahl der Stiftdicke
this._widthSDrawButton = this.shadowRoot.querySelector("#widthS");
this._widthSDrawButton.addEventListener("click", e => {
this._canvas.radius = 10;
});
this._widthMDrawButton = this.shadowRoot.querySelector("#widthM");
this._widthMDrawButton.addEventListener("click", e => {
this._canvas.radius = 20;
});
this._widthLDrawButton = this.shadowRoot.querySelector("#widthL");
this._widthMDrawButton.addEventListener("click", e => {
this._canvas.radius = 30;
});
this._widthXLDrawButton = this.shadowRoot.querySelector("#widthXL");
this._widthXLDrawButton.addEventListener("click", e => {
this._canvas.radius = 50;
});
//Logik fuer Buttons (Radieren und Malen)
this._penButton = this.shadowRoot.querySelector("#pen");
this._penButton.addEventListener("click", e => {
this._canvas.penActive = true;
});
this._erasorButton = this.shadowRoot.querySelector("#erasor");
this._erasorButton.addEventListener("click", e => {
this._canvas.erasorActive = true;
});
}
}
set overlay(overlay){
if (this._overlay){
this._overlay.remove();
}
this._overlay = overlay;
if (overlay){
overlay.slot = "overlay";
this.appendChild(overlay);
}
}
set overlay(overlay) {
if (this._overlay) {
this._overlay.remove();
}
this._overlay = overlay;
if (overlay) {
overlay.slot = "overlay";
this.appendChild(overlay);
}
}
/**
* @type {SkribblCanvasOverlay}
*/
get overlay(){
return this._overlay;
}
/**
* @type {SkribblCanvasOverlay}
*/
get overlay() {
return this._overlay;
}
}
/**
* Custom element `<skribbl-canvas-overlay>` for overlays on the `<skribbl-canvas>`-element.
*/
export class SkribblCanvasOverlay extends HTMLElement {
/**
* Constructs a new SkribblCanvasOverlay and appends the given nodes or strings to it.
* @param {(string|Node)[]|import("../logic/SkribblClient.js").WordReveal} data the nodes or data to display
* @param {SkribblClient} client
*/
constructor(data=[],client=null){
super();
this.attachShadow({mode:"open"});
this.shadowRoot.innerHTML = `
/**
* Constructs a new SkribblCanvasOverlay and appends the given nodes or strings to it.
* @param {(string|Node)[]|import("../logic/SkribblClient.js").WordReveal} data the nodes or data to display
* @param {SkribblClient} client
*/
constructor(data = [], client = null) {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
......@@ -279,30 +347,32 @@ export class SkribblCanvasOverlay extends HTMLElement {
</div>
</div>
`;
this._contents = this.shadowRoot.querySelector("#contents");
if (Array.isArray(data)){
this.append(...data);
}else{
let points = data.points.map((points,index)=>({name:client.players.value[index].name,points}));
points.sort((a,b)=>b.points-a.points);
this._contents.innerHTML = `
this._contents = this.shadowRoot.querySelector("#contents");
if (Array.isArray(data)) {
this.append(...data);
} else {
let points = data.points.map((points, index) => ({ name: client.players.value[index].name, points }));
points.sort((a, b) => b.points - a.points);
this._contents.innerHTML = `
<h2>The word was: ${Util.htmlEscape(data.word)}</h2>
<table>
${points.map(({name,points})=>`
<tr>
<td>${Util.htmlEscape(name)}:</td>
<td style="color:${points>0?"#00bf00":"#bf0000"}">+${Util.htmlEscape(points.toString())}</td>
</tr>
`).join("")}
${points.map(({name,points})=>` <
tr >
<
td > $ { Util.htmlEscape(name) }: < /td> <
td style = "color:${points>0?"
#00bf00":"# bf0000 "}" > +$ { Util.htmlEscape(points.toString()) } < /td> <
/tr>
`).join("")}
</table>
`;
if (data.description){
let latex = new LatexJS(data.description,{macros:data.macros});
latex.className = "description";
this._contents.insertBefore(latex,this._contents.children[1]);
}
}
}
if (data.description) {
let latex = new LatexJS(data.description, { macros: data.macros });
latex.className = "description";
this._contents.insertBefore(latex, this._contents.children[1]);
}
}
}
}
customElements.define("skribbl-canvas-container",SkribblCanvasContainer);
customElements.define("skribbl-canvas-overlay",SkribblCanvasOverlay);
\ No newline at end of file
customElements.define("skribbl-canvas-container", SkribblCanvasContainer);
customElements.define("skribbl-canvas-overlay", SkribblCanvasOverlay);
\ No newline at end of file
client/ui/SkribblMenu.js
+ 6
− 1
View file @ 88f806be
......@@ -23,7 +23,7 @@ export default class SkribblMenu extends HTMLElement {
border:none;
height:34px;
width:34px;
background: url('/res/selectArrows.png');
background: url('/res/selectArrows.gif');
background-size: 54px;
background-repeat: no-repeat;
cursor: pointer;
......@@ -74,6 +74,11 @@ export default class SkribblMenu extends HTMLElement {
justify-content: center;
position: relative;
}
#avatar-container{
flex: 0 0 auto;
width:66px;
height:96px;
}
......
client/ui/SkribblPlayerIcon.js
+ 19
− 11
View file @ 88f806be
......@@ -15,20 +15,23 @@
border-radius: 5px;
}
.container-character{
border: 2px solid #777;
border-radius: 10px;
background:url("/res/pi.gif");
background-size:contain;
background-repeat: no-repeat;
}
.character-eyes{
height: 34px;
width: 34px;
background:url("/res/MouthsAndEyes.png");
background-position: 10px 0;
width: 68px;
background:url("/res/MouthsAndEyes.gif");
background-position: 25px 18px;
background-repeat: no-repeat;
}
.character-mouth{
height: 34px;
width: 34x;
background:url("/res/MouthsAndEyes.png");
background-position: 0px -52px;
width: 68x;
background:url("/res/MouthsAndEyes.gif");
background-position: 24px -32px;
background-repeat: no-repeat;
}
</style>
......@@ -43,26 +46,31 @@
/** @param {boolean} toTheRight */
changeEye(toTheRight) {
let displacement = 80;
let displacement = 38;
if (toTheRight){
this.eyesDisplacement += displacement;
}else{
this.eyesDisplacement -= displacement;
}
if(this.eyesDisplacement>266){
this.eyesDisplacement = 10;
}
const eye = this.shadowRoot.getElementById("eyes");
eye.style.backgroundPositionX = this.eyesDisplacement+"px";
}
/** @param {boolean} toTheRight */
changeMouth(toTheRight) {
let displacement = 80;
let displacement = 38;
if (toTheRight){
this.mouthDisplacement += displacement;
}else{
this.mouthDisplacement -= displacement;
}
if(this.mouthDisplacement>266){
this.mouthDisplacement = 0;
}
const mouth = this.shadowRoot.getElementById("mouth");
mouth.style.backgroundPositionX = this.mouthDisplacement+"px";
}
......
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