diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..73c39b91e3fdddaf6a73154f168b47ece5fa6fc7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+client/res/MouthsAndEyes.png~
+client/res/palette.png
diff --git a/client/logic/SkribblClient.js b/client/logic/SkribblClient.js
index 7faad7fe8896c2aa29aa4f1f43dab568eaa7b5cc..20ea0e8036fbedaeefafb9a681dc008f10418e36 100644
--- a/client/logic/SkribblClient.js
+++ b/client/logic/SkribblClient.js
@@ -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.
*/
diff --git a/client/logic/SkribblServer.js b/client/logic/SkribblServer.js
index dac9882bf3307b38269d5cd1df43a7e89f3d15ab..63392c74c258436e5eeb0271ad41c2a567be1512 100644
--- a/client/logic/SkribblServer.js
+++ b/client/logic/SkribblServer.js
@@ -1,16 +1,16 @@
import { SkribblWord } from "../docs/CustomElements.js";
-import Util, {ConditionFulfilledPromise} from "../util/Util.js";
+import Util, { ConditionFulfilledPromise } from "../util/Util.js";
import DataChannel from "./networking/DataChannel.js";
import Signaler from "./networking/Signaler.js";
import SkribblWords from "./SkribblWords.js";
/**
* Format of the messages send to the server by the clients.
- * @typedef {{action:"join",name:string}|{action:"startGame"}|{action:"changeSettings",rounds:number,drawTime:number}|{action:"chooseWord",word:number}|{action:"guess",word:string}|ClearOrder|DrawOrder} MessageToServer
+ * @typedef {{action:"join",name:string}|{action:"startGame"}|{action:"changeSettings",rounds:number,drawTime:number}|{action:"chooseWord",word:number}|{action:"guess",word:string}|ClearOrder|BackgroundOrder|DrawOrder} MessageToServer
*/
/**
* Format of the messages send to the clients by the server.
- * @typedef {"yup"|"nope"|{action:"stateUpdate",newState:GameState}|{action:"settingsUpdate",rounds:number,drawTime:number}|({action:"guessedWord"}&GuessResponse)|ClearOrder|DrawOrder|WordReveal} MessageToClient
+ * @typedef {"yup"|"nope"|{action:"stateUpdate",newState:GameState}|{action:"settingsUpdate",rounds:number,drawTime:number}|({action:"guessedWord"}&GuessResponse)|ClearOrder|DrawOrder|BackgroundOrder|WordReveal} MessageToClient
*/
/**
* Format in which the game state is send to the clients by the server.
@@ -52,6 +52,12 @@ import SkribblWords from "./SkribblWords.js";
* @property {number} radius radius in pixels
* @property {{x:number,y:number}[]} points array of points between which lines should be drawn
*/
+/**
+ * Format to change the Background-Color of the Canvas
+ * @typedef {object} BackgroundOrder
+ * @property {"changeBackgroundColor"} action
+ * @property {string} color
+ */
/**
* @typedef {object} WordReveal
* @property {"revealWord"} action
@@ -64,341 +70,343 @@ import SkribblWords from "./SkribblWords.js";
* A local server. Handles all the important game logic, and communicates with clients via DataChannels.
*/
export default class SkribblServer {
- /**
- * Starts a new SkribblServer.
- */
- constructor(){
- this._readyPromise = (async()=>{
- /** @type {{name:string,dataChannel:DataChannel<MessageToClient,MessageToServer>,points:number,guessedWord:boolean,guessedIndex:number}[]} */
- this._clients = [];
- this._hasGameStarted = false;
- /** current round, starts counting at 1, only 0 when the game hasn't started yet */
- this._round = 0;
- this._rounds = 3;
- this._drawTime = 180;
- /** index of the currently drawing player in the player list */
- this._drawingPlayer = 0;
- /**
- * word that is currently being drawn, or list of words a word is currently getting choosen from
- * @type {string|string[]}
- */
- this._word = null;
- this._id = await Signaler.host(dataChannel=>{
- this.connect(DataChannel.from(dataChannel,JSON.stringify,JSON.parse));
- });
- /** @type {[DataChannel<MessageToServer,MessageToClient>,DataChannel<MessageToClient,MessageToServer>]} */
- let [endpointA,endpointB] = DataChannel.createPair();
- this._dataChannel = endpointA;
- this.connect(endpointB);
- })();
- }
+ /**
+ * Starts a new SkribblServer.
+ */
+ constructor() {
+ this._readyPromise = (async() => {
+ /** @type {{name:string,dataChannel:DataChannel<MessageToClient,MessageToServer>,points:number,guessedWord:boolean,guessedIndex:number}[]} */
+ this._clients = [];
+ this._hasGameStarted = false;
+ /** current round, starts counting at 1, only 0 when the game hasn't started yet */
+ this._round = 0;
+ this._rounds = 3;
+ this._drawTime = 180;
+ /** index of the currently drawing player in the player list */
+ this._drawingPlayer = 0;
+ /**
+ * word that is currently being drawn, or list of words a word is currently getting choosen from
+ * @type {string|string[]}
+ */
+ this._word = null;
+ this._id = await Signaler.host(dataChannel => {
+ this.connect(DataChannel.from(dataChannel, JSON.stringify, JSON.parse));
+ });
+ /** @type {[DataChannel<MessageToServer,MessageToClient>,DataChannel<MessageToClient,MessageToServer>]} */
+ let [endpointA, endpointB] = DataChannel.createPair();
+ this._dataChannel = endpointA;
+ this.connect(endpointB);
+ })();
+ }
+
+ /**
+ * Waits until the server is ready.
+ */
+ async waitUntilReady() {
+ return this._readyPromise;
+ }
+
+ /**
+ * A dataChannel talking to this server like any other client.
+ * @readonly
+ */
+ get dataChannel() {
+ return this._dataChannel;
+ }
+
+ /**
+ * The ID others can use to connect to this server.
+ * @readonly
+ */
+ get id() {
+ return this._id;
+ }
+
+ /**
+ * Returns the full url others can use to connect to this server.
+ * @readonly
+ */
+ get url() {
+ return document.location.host + document.location.pathname + "#" + this._id;
+ }
+
+ /**
+ * Adds an incoming connection as a client.
+ * @param {DataChannel<MessageToClient,MessageToServer>} dataChannel
+ */
+ connect(dataChannel) {
+ (async() => {
+ let message = await dataChannel.next();
+ console.log("message: ", message);
+ if (message.action === "join") {
+ let name = message.name;
+ if (name.length < 30 && name.length >= 1) {
+ dataChannel.send("yup");
+ this._clients.push({ name, dataChannel, points: 0, guessedWord: false, guessedIndex: 0 });
+ this._sendStateUpdate();
+ if (!this._hasGameStarted) {
+ dataChannel.send({ action: "settingsUpdate", rounds: this._rounds, drawTime: this._drawTime });
+ }
+ dataChannel.onMessage(message => {
+ let playerIndex = this._clients.map(({ dataChannel }) => dataChannel).indexOf(dataChannel);
+ let isHost = (playerIndex == 0);
+ if (message.action == "startGame") {
+ if (isHost && !this._hasGameStarted) {
+ this._startGame();
+ }
+ } else if (message.action == "changeSettings") {
+ if (isHost && !this._hasGameStarted) {
+ this._rounds = message.rounds;
+ this._drawTime = message.drawTime;
+ this._sendToAll({ action: "settingsUpdate", rounds: this._rounds, drawTime: this._drawTime });
+ }
+ } else if (message.action == "guess") {
+ this._handleGuess(playerIndex, message.word);
+ } else if (message.action == "clearCanvas" || message.action == "changeBackgroundColor" || message.action == "draw" || message.action == "erase") {
+ // sends the drawing order to all connected clients iff the player is currently drawing and has already chosen a word
+ if (this._hasGameStarted && this._drawingPlayer == playerIndex && typeof this._word == "string") {
+ this._sendToAll(message);
+ }
+ }
+ });
+ } else {
+ dataChannel.send("nope");
+ dataChannel.close();
+ }
+ } else {
+ dataChannel.send("nope");
+ dataChannel.close();
+ }
+ })();
+ }
- /**
- * Waits until the server is ready.
- */
- async waitUntilReady(){
- return this._readyPromise;
- }
+ /**
+ * Sends a message to all currently connected clients.
+ * @param {MessageToClient} message
+ */
+ _sendToAll(message) {
+ this._clients.forEach(({ dataChannel }) => {
+ dataChannel.send(message);
+ })
+ }
- /**
- * A dataChannel talking to this server like any other client.
- * @readonly
- */
- get dataChannel(){
- return this._dataChannel;
- }
+ /**
+ * Starts the game if it hasn't already started.
+ */
+ _startGame() {
+ if (this._hasGameStarted) {
+ console.warn("Tried to start a game that has already started.");
+ } else {
+ this._hasGameStarted = true;
+ this._clients.forEach(client => {
+ client.points = 0;
+ client.guessedWord = false;
+ client.guessedIndex = 0;
+ });
+ (async() => {
+ for (this._round = 1; this._round <= this._rounds; this._round++) {
+ for (this._drawingPlayer = 0; this._drawingPlayer < this._clients.length; this._drawingPlayer++) {
+ let words = await Promise.all([SkribblWords.get(), SkribblWords.get(), SkribblWords.get()]);
+ this._word = words.map(({ word }) => word);
+ this._sendStateUpdate();
+ /** @type {number} */
+ let wordIndex = await new Promise(async resolve => {
+ let cancelled = false;
+ setTimeout(() => {
+ cancelled = true;
+ resolve(Math.floor(Math.random() * 3));
+ }, 10000);
+ let dataChannel = this._clients[this._drawingPlayer].dataChannel;
+ while (!cancelled) {
+ let message = await dataChannel.next();
+ if (message.action == "chooseWord") {
+ resolve(message.word);
+ }
+ }
+ });
+ this._word = words[wordIndex].word;
+ this._sendToAll({ action: "clearCanvas" });
+ this._sendStateUpdate();
+ this._allGuessedPromise = new ConditionFulfilledPromise(() => {
+ return this._clients.every((client, index) => client.guessedWord || index == this._drawingPlayer);
+ });
+ let timeOverPromise = Util.wait(this._drawTime);
+ await Promise.race([this._allGuessedPromise, timeOverPromise]);
+ let points = this._awardPoints();
+ this._sendStateUpdate();
+ this._sendToAll({ action: "revealWord", word: this._word, description: words[wordIndex].description, macros: await SkribblWords.macros, points });
+ await Util.wait(8);
+ }
+ }
+ this._hasGameStarted = false;
+ this._sendStateUpdate();
+ })();
+ }
+ }
- /**
- * The ID others can use to connect to this server.
- * @readonly
- */
- get id(){
- return this._id;
- }
+ /**
+ * Sends a state update to all connected clients (that is, clients that have already joined the game).
+ */
+ _sendStateUpdate() {
+ console.log("sending state update! players:", this._clients);
+ if (this._hasGameStarted) {
+ let players = this._clients.map(({ name, points, guessedWord }) => ({ name, points, guessedWord }));
+ this._clients.forEach(({ dataChannel }, index) => {
+ let host = index == 0;
+ let word = this._drawingPlayer == index ? this._word : (typeof this._word == "string" ? this._word.replace(/[^ -]/g, "_") : null);
+ /** @type {ActiveGameState} */
+ let state = { players, playerIndex: index, host, hasGameStarted: true, rounds: this._rounds, round: this._round, drawingPlayer: this._drawingPlayer, word };
+ dataChannel.send({ action: "stateUpdate", newState: state });
+ });
+ } else {
+ let players = this._clients.map(({ name }) => ({ name }));
+ this._clients.forEach(({ dataChannel }, index) => {
+ dataChannel.send({ action: "stateUpdate", newState: { players, playerIndex: index, host: index == 0, hasGameStarted: false } });
+ });
+ }
+ }
- /**
- * Returns the full url others can use to connect to this server.
- * @readonly
- */
- get url(){
- return document.location.host+document.location.pathname+"#"+this._id;
- }
+ /**
+ * Handles a guess send from a given dataChannel.
+ * @param {number} playerIndex
+ * @param {string} word
+ */
+ _handleGuess(playerIndex, word) {
+ let player = this._clients[playerIndex];
+ if (this._hasGameStarted) {
+ if (player.guessedWord || playerIndex == this._drawingPlayer) {
+ // TODO let people who already know the word send ghost messages to others who already know it too
+ } else if (typeof this._word == "string" && SkribblServer._isCorrect(word, this._word)) {
+ player.guessedWord = true;
+ player.guessedIndex = Math.max(...this._clients.map(client => client.guessedIndex)) + 1;
+ this._clients.forEach((client, index) => {
+ if (index == playerIndex) {
+ client.dataChannel.send({ action: "guessedWord", player: playerIndex, correct: true, word });
+ } else {
+ client.dataChannel.send({ action: "guessedWord", player: playerIndex, correct: true });
+ }
+ });
+ this._allGuessedPromise.checkCondition();
+ } else {
+ this._clients.forEach((client, index) => {
+ let close = typeof this._word == "string" ? SkribblServer._isClose(word, this._word) : false;
+ if (index == playerIndex) {
+ client.dataChannel.send({ action: "guessedWord", player: playerIndex, correct: false, word, close });
+ } else {
+ client.dataChannel.send({ action: "guessedWord", player: playerIndex, correct: false, word });
+ }
+ });
+ }
+ }
+ }
- /**
- * Adds an incoming connection as a client.
- * @param {DataChannel<MessageToClient,MessageToServer>} dataChannel
- */
- connect(dataChannel){
- (async()=>{
- let message = await dataChannel.next();
- console.log("message: ",message);
- if (message.action==="join"){
- let name = message.name;
- if (name.length<30&&name.length>=1){
- dataChannel.send("yup");
- this._clients.push({name,dataChannel,points:0,guessedWord:false,guessedIndex:0});
- this._sendStateUpdate();
- if (!this._hasGameStarted){
- dataChannel.send({action:"settingsUpdate",rounds:this._rounds,drawTime:this._drawTime});
- }
- dataChannel.onMessage(message=>{
- let playerIndex = this._clients.map(({dataChannel})=>dataChannel).indexOf(dataChannel);
- let isHost = (playerIndex==0);
- if (message.action=="startGame"){
- if (isHost&&!this._hasGameStarted){
- this._startGame();
- }
- }else if(message.action=="changeSettings"){
- if (isHost&&!this._hasGameStarted){
- this._rounds = message.rounds;
- this._drawTime = message.drawTime;
- this._sendToAll({action:"settingsUpdate",rounds:this._rounds,drawTime:this._drawTime});
- }
- }else if (message.action=="guess"){
- this._handleGuess(playerIndex,message.word);
- }else if (message.action=="clearCanvas"||message.action=="draw"||message.action=="erase"){
- // sends the drawing order to all connected clients iff the player is currently drawing and has already chosen a word
- if (this._hasGameStarted&&this._drawingPlayer==playerIndex&&typeof this._word=="string"){
- this._sendToAll(message);
- }
- }
- });
- }else{
- dataChannel.send("nope");
- dataChannel.close();
- }
- }else{
- dataChannel.send("nope");
- dataChannel.close();
- }
- })();
- }
+ /**
+ * Awards points to each player based on if and when they guessed the word, resets the corresponding properties and then returns the list of points each player got.
+ * @todo find better formula for the number of points each player should get
+ */
+ _awardPoints() {
+ let guessingPlayers = this._clients.length - 1;
+ let successfullPlayers = Math.max(...this._clients.map(client => client.guessedIndex));
+ let points = this._clients.map((client, index) => {
+ let points;
+ if (this._drawingPlayer == index) {
+ points = successfullPlayers * 50;
+ } else if (client.guessedIndex != 0) {
+ points = ((guessingPlayers - client.guessedIndex + 1) ** 2) / guessingPlayers * 100;
+ } else {
+ points = 0;
+ }
+ points = Math.round(points / 5) * 5;
+ client.points += points;
+ client.guessedWord = false;
+ client.guessedIndex = 0;
+ return points;
+ });
+ return points;
+ }
- /**
- * Sends a message to all currently connected clients.
- * @param {MessageToClient} message
- */
- _sendToAll(message){
- this._clients.forEach(({dataChannel})=>{
- dataChannel.send(message);
- })
- }
+ /**
+ * Checks whether a given guess is close to the given word. A guess counts as close, if one letter is wrong,
+ * two letters are swapped or the guess has one letter too much or too little.
+ * @param {string} guess
+ * @param {string} word
+ */
+ static _isClose(guess, word) {
+ guess = guess.toLowerCase().replace(/-/g, " ");
+ word = word.toLowerCase().replace(/-/g, " ");
+ const wordArray = Array.from(word);
+ const guessArray = Array.from(guess);
- /**
- * Starts the game if it hasn't already started.
- */
- _startGame(){
- if (this._hasGameStarted){
- console.warn("Tried to start a game that has already started.");
- }else{
- this._hasGameStarted = true;
- this._clients.forEach(client=>{
- client.points = 0;
- client.guessedWord = false;
- client.guessedIndex = 0;
- });
- (async()=>{
- for (this._round=1;this._round<=this._rounds;this._round++){
- for (this._drawingPlayer=0;this._drawingPlayer<this._clients.length;this._drawingPlayer++){
- let words = await Promise.all([SkribblWords.get(),SkribblWords.get(),SkribblWords.get()]);
- this._word = words.map(({word})=>word);
- this._sendStateUpdate();
- /** @type {number} */
- let wordIndex = await new Promise(async resolve=>{
- let cancelled = false;
- setTimeout(()=>{
- cancelled = true;
- resolve(Math.floor(Math.random()*3));
- },10000);
- let dataChannel = this._clients[this._drawingPlayer].dataChannel;
- while (!cancelled){
- let message = await dataChannel.next();
- if (message.action=="chooseWord"){
- resolve(message.word);
- }
- }
- });
- this._word = words[wordIndex].word;
- this._sendToAll({action:"clearCanvas"});
- this._sendStateUpdate();
- this._allGuessedPromise = new ConditionFulfilledPromise(()=>{
- return this._clients.every((client,index)=>client.guessedWord||index==this._drawingPlayer);
- });
- let timeOverPromise = Util.wait(this._drawTime);
- await Promise.race([this._allGuessedPromise,timeOverPromise]);
- let points = this._awardPoints();
- this._sendStateUpdate();
- this._sendToAll({action:"revealWord",word:this._word,description:words[wordIndex].description,macros:await SkribblWords.macros,points});
- await Util.wait(8);
- }
- }
- this._hasGameStarted = false;
- this._sendStateUpdate();
- })();
- }
- }
+ //if equal
+ if (guess == word) {
+ return true;
+ }
- /**
- * Sends a state update to all connected clients (that is, clients that have already joined the game).
- */
- _sendStateUpdate(){
- console.log("sending state update! players:",this._clients);
- if (this._hasGameStarted){
- let players = this._clients.map(({name,points,guessedWord})=>({name,points,guessedWord}));
- this._clients.forEach(({dataChannel},index)=>{
- let host = index==0;
- let word = this._drawingPlayer==index?this._word:(typeof this._word=="string"?this._word.replace(/[^ -]/g,"_"):null);
- /** @type {ActiveGameState} */
- let state = {players,playerIndex:index,host,hasGameStarted:true,rounds:this._rounds,round:this._round,drawingPlayer:this._drawingPlayer,word};
- dataChannel.send({action:"stateUpdate",newState:state});
- });
- }else{
- let players = this._clients.map(({name})=>({name}));
- this._clients.forEach(({dataChannel},index)=>{
- dataChannel.send({action:"stateUpdate",newState:{players,playerIndex:index,host:index==0,hasGameStarted:false}});
- });
- }
- }
+ //either one letter wrong or two letters swapped
+ if (guess.length == word.length) {
+ //Counts the mistakes and their position
+ let errorCounter = 0;
+ let errorPos = 0;
+ for (var i = 0; i < wordArray.length; i++) {
+ if (wordArray[i] != guessArray[i]) {
+ if (errorCounter == 0) {
+ errorPos = i;
+ }
+ if (errorCounter == 1) { //if a second mistake occurs, either the letters are swapped or it is not correct
+ //but there could be a third mistake, so in the case of a swap, true is not directly returned.
+ if ((wordArray[i] != guessArray[errorPos]) || (wordArray[errorPos] != guessArray[i])) {
+ return false;
+ }
+ }
+ if (errorCounter >= 2) { //with two or more mistakes, the word is not close
+ return false;
+ }
+ errorCounter++;
+ }
+ }
+ //if it hasnt returned false by now, the guess is close
+ return true;
+ }
- /**
- * Handles a guess send from a given dataChannel.
- * @param {number} playerIndex
- * @param {string} word
- */
- _handleGuess(playerIndex,word){
- let player = this._clients[playerIndex];
- if (this._hasGameStarted){
- if (player.guessedWord||playerIndex==this._drawingPlayer){
- // TODO let people who already know the word send ghost messages to others who already know it too
- }else if (typeof this._word=="string"&&SkribblServer._isCorrect(word,this._word)){
- player.guessedWord = true;
- player.guessedIndex = Math.max(...this._clients.map(client=>client.guessedIndex))+1;
- this._clients.forEach((client,index)=>{
- if (index==playerIndex){
- client.dataChannel.send({action:"guessedWord",player:playerIndex,correct:true,word});
- }else{
- client.dataChannel.send({action:"guessedWord",player:playerIndex,correct:true});
- }
- });
- this._allGuessedPromise.checkCondition();
- }else{
- this._clients.forEach((client,index)=>{
- let close = typeof this._word=="string"?SkribblServer._isClose(word,this._word):false;
- if (index==playerIndex){
- client.dataChannel.send({action:"guessedWord",player:playerIndex,correct:false,word,close});
- }else{
- client.dataChannel.send({action:"guessedWord",player:playerIndex,correct:false,word});
- }
- });
- }
- }
- }
+ //if one letter too much
+ if (guess.length - 1 == word.length) {
+ let errorCounter = 0; //also the offset
+ for (var i = 0; i < wordArray.length; i++) {
+ if (wordArray[i] != guessArray[i + errorCounter]) {
+ errorCounter++;
+ if (errorCounter >= 2) {
+ return false;
+ }
+ }
+ }
+ return true;
+ }
- /**
- * Awards points to each player based on if and when they guessed the word, resets the corresponding properties and then returns the list of points each player got.
- * @todo find better formula for the number of points each player should get
- */
- _awardPoints(){
- let guessingPlayers = this._clients.length-1;
- let successfullPlayers = Math.max(...this._clients.map(client=>client.guessedIndex));
- let points = this._clients.map((client,index)=>{
- let points;
- if (this._drawingPlayer==index){
- points = successfullPlayers*50;
- }else if(client.guessedIndex!=0){
- points = ((guessingPlayers-client.guessedIndex+1)**2)/guessingPlayers*100;
- }else{
- points = 0;
- }
- points = Math.round(points/5)*5;
- client.points += points;
- client.guessedWord = false;
- client.guessedIndex = 0;
- return points;
- });
- return points;
- }
+ //if one letter too little
+ if (guess.length + 1 == word.length) {
+ let errorCounter = 0; //also the offset
+ for (var i = 0; i < guessArray.length; i++) {
+ if (wordArray[i + errorCounter] != guessArray[i]) {
+ errorCounter++;
+ if (errorCounter >= 2) {
+ return false;
+ }
+ }
+ }
+ return true;
+ }
- /**
- * Checks whether a given guess is close to the given word. A guess counts as close, if one letter is wrong,
- * two letters are swapped or the guess has one letter too much or too little.
- * @param {string} guess
- * @param {string} word
- */
- static _isClose(guess,word) {
- guess = guess.toLowerCase().replace(/-/g," ");
- word = word.toLowerCase().replace(/-/g," ");
- const wordArray = Array.from(word);
- const guessArray = Array.from(guess);
-
- //if equal
- if (guess == word) {
- return true;
- }
-
- //either one letter wrong or two letters swapped
- if (guess.length == word.length) {
- //Counts the mistakes and their position
- let errorCounter = 0;
- let errorPos = 0;
- for (var i = 0; i < wordArray.length; i++) {
- if (wordArray[i] != guessArray[i]) {
- if (errorCounter == 0) {
- errorPos = i;
- } if (errorCounter == 1) { //if a second mistake occurs, either the letters are swapped or it is not correct
- //but there could be a third mistake, so in the case of a swap, true is not directly returned.
- if ((wordArray[i] != guessArray[errorPos]) || (wordArray[errorPos] != guessArray[i])) {
- return false;
- }
- } if (errorCounter >= 2) { //with two or more mistakes, the word is not close
- return false;
- }
- errorCounter++;
- }
- }
- //if it hasnt returned false by now, the guess is close
- return true;
- }
-
- //if one letter too much
- if (guess.length - 1 == word.length) {
- let errorCounter = 0; //also the offset
- for (var i = 0; i < wordArray.length; i++) {
- if (wordArray[i] != guessArray[i + errorCounter]) {
- errorCounter++;
- if (errorCounter >= 2) {
- return false;
- }
- }
- }
- return true;
- }
-
- //if one letter too little
- if (guess.length + 1 == word.length) {
- let errorCounter = 0; //also the offset
- for (var i = 0; i < guessArray.length; i++) {
- if (wordArray[i + errorCounter] != guessArray[i]) {
- errorCounter++;
- if (errorCounter >= 2) {
- return false;
- }
- }
- }
- return true;
- }
-
- return false;
- }
+ return false;
+ }
- /**
- * Checks if the guess is correct. It is not case-sensitive.
- * @param {string} guess
- * @param {string} word
- */
- static _isCorrect(guess, word) {
- guess = guess.toLowerCase().replace(/-/g," ");
- word = word.toLowerCase().replace(/-/g," ");
- return guess==word;
- }
+ /**
+ * Checks if the guess is correct. It is not case-sensitive.
+ * @param {string} guess
+ * @param {string} word
+ */
+ static _isCorrect(guess, word) {
+ guess = guess.toLowerCase().replace(/-/g, " ");
+ word = word.toLowerCase().replace(/-/g, " ");
+ return guess == word;
+ }
}
\ No newline at end of file
diff --git a/client/res/.gitignore b/client/res/.gitignore
index c5d9347ecac15b7ea248e668896fbfdc0e2f8dca..25eb906f699d422f5ad626677cbf261ee6b05d4d 100644
--- a/client/res/.gitignore
+++ b/client/res/.gitignore
@@ -1 +1,4 @@
-*.kra~
\ No newline at end of file
+*.kra*
+paintnet/*
+*.log
+
diff --git a/client/res/MouthsAndEyes.gif b/client/res/MouthsAndEyes.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ed5240368cc9437b52a811a0ca99afa4dab1390c
Binary files /dev/null and b/client/res/MouthsAndEyes.gif differ
diff --git a/client/res/pi.gif b/client/res/pi.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7668e7fb1c57f3b881ae79c99df6ce220e306505
Binary files /dev/null and b/client/res/pi.gif differ
diff --git a/client/res/selectArrows.gif b/client/res/selectArrows.gif
new file mode 100644
index 0000000000000000000000000000000000000000..471bcd941529067d0de354d4332af0026e3fb021
Binary files /dev/null and b/client/res/selectArrows.gif differ
diff --git a/client/ui/SkribblCanvas.js b/client/ui/SkribblCanvas.js
index b30736281be3020ec7c8baefa3db2e4942e373e8..0fd71f826c8b1451b5022430ca904997125067ad 100644
--- a/client/ui/SkribblCanvas.js
+++ b/client/ui/SkribblCanvas.js
@@ -1,18 +1,23 @@
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
diff --git a/client/ui/SkribblCanvasContainer.js b/client/ui/SkribblCanvasContainer.js
index ba62a2a93f3c015e2c14d7ed88a25ffdf4a73f41..cb1e9862d011a9065c01fc4819ea7f56b123c90f 100644
--- a/client/ui/SkribblCanvasContainer.js
+++ b/client/ui/SkribblCanvasContainer.js
@@ -1,19 +1,19 @@
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
diff --git a/client/ui/SkribblMenu.js b/client/ui/SkribblMenu.js
index aa613e110d748a78f0aa3354dc782da7629c6d26..4308e47e7302159706943448f8b5ecd6e3178257 100644
--- a/client/ui/SkribblMenu.js
+++ b/client/ui/SkribblMenu.js
@@ -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;
+ }
diff --git a/client/ui/SkribblPlayerIcon.js b/client/ui/SkribblPlayerIcon.js
index ddc2107f012a041cc7a0ed67b613c360612c6908..ab1b06a5edc9cb104255c7bcf5d8651a080fd7e4 100644
--- a/client/ui/SkribblPlayerIcon.js
+++ b/client/ui/SkribblPlayerIcon.js
@@ -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";
}