I am working in chessboard.js for creating a multyplayer chessboard using signalR.
but i am having a problem in player movement.
what i am doing is sending the FEN string from client1 to client2.and Thus client2 represent that FEN string on board.
Now the problem is that the player2 represent the FEN on Board but player turn is not changed by FEN.
So both Player 1 and 2 move white first then black secondly.and that is not to be supposed.
i want Player1 moves from white side.His FEN is send To Player2.then Player2 will Move with Black Color (but currently player2 move with white which is error).
So please help me how to change the turn of player1 or player2 forcely.
I was struggling with the same issue when creating a similar multiplayer chess game using chessboard.js along with chess.js (the engine running the actual game rules)
The answer lies within the chess.js file that is referenced on the chessboard.js api documentation.
Line 157 of chess.js has this:
var turn = WHITE;
If you wish to change the turn of the whole game you can simply do this:
turn = BLACK;
turn = WHITE;
turn = "w";
turn = "b";
Any of them will work. I also created a convenience function that can be more easily used by other scripts which adds setTurn() and turn() to the public API..
Convenience function to add to API for turn manipulation:
Around line 1115 of chess.js (not chessboard.js), you will find a function that starts off with:
return {
/***************************************************************************
* PUBLIC CONSTANTS (is there a better way to do this?)
**************************************************************************
I simply added The following to right below the comment:
turn: function() {
return turn;
},
setTurn: function(newTurn) {
turn = newTurn;
},
The result is that now from either any instance of chess.js
(default name is game), you can simply change turns like this:
game.setTurn("b");
game.setTurn("w");
This is but one hurdle that I ran into while making a multiplayer version. The next hurdle you will likely face is going to be: what happens if a player gets disconnected or doesn't respond? How about if they inject a JS file into the page that allows them to change turns at will? These issues will be more of a pain to solve. Also look out for other types of injection attacks such as manipulation of the game FEN externally.
Good luck!
Leave comment if you want me to share my source code -- I figured out most of the issues that come up with chessboard.js as multiplayer.
Related
I need to send different sounds on the left and right ear but I don't succeed to do that. I followed those steps :
loaded my sounds (sentences and one pure tone called 'bip'),
used getChannelData() to work on the raw data (Float32Array) : apply a gain to one of the three sentences I use and do the sum in the variable 'source' to hear the 3 sentences simultaneously.
used createBuffer(1,source.length,fs) to turn my source variable from type Float32Array to AudioBuffer.
finally used createBufferSource() where I can put my buffer to play it.
It worked well but now I need to play those sentence in the 'source' variable in the left ear and the 'bip' sound in the variable of the same name in the right ear. So, I did the modifications you can bellow to put the source variable and the bip variable in one different channel. The problem is that when I hear it sentences are not completely on the left and bip is not completely on the right. I hear that it's not completely mixed but it's not completely separate. I don't understand why and how to fix it. Do js mix the channels before playing ? How could I do to really have one sound on left and the other on the right ? I didn't precise but right and left needs to be simultaneous, it's for an auditory test. I tried with StereoPannerNode and pan but it didn't work well, two problems : (1) yes I can have more level on left or right to have a balanced sound but I can't put all the sound in one hear... and (2) it seems that I can't use it to put one sound on the left and one the right because it's acting on the final mix...
// concatenate all sentences and put it in a buffer
let buffer = context.createBuffer(2, source.length, fs);
let bufferData = {
l: buffer.getChannelData(0),
r: buffer.getChannelData(1)
};
bufferData.l.set(source);
bufferData.r.set(bip);
// create a source that will be used to play the buffer
trial.sound = context.createBufferSource();
trial.sound.buffer = buffer;
trial.sound.connect(context.destination);
EDIT: The comment of Raymond Toy helped me to find the solution. When I tried his little test code it doesn't work well whereas js said it is (context.destination.channelCount = 2). It makes me remember about something that causes me a lot of problem before : the preinstalled Dolby software (as you can see below, now it's disabled). It's basically a filter (I thought) and... a mixer, I just realised it by trying to disable it. Enable : sound in the two ears, Disable : one sound in each ear... So my problem is solved in part because I need to make it work for anybody, the only solution I have for the moment is to make a video to explain to viewers how to disable it before doing the test...
Note that I can also let Dobly enabled but quote the box you see in the next image "désactiver les effets sonores" i.e. "disabled sound effects"
:
This should have worked. As a simple test of your setup, try the following (untested):
// context is the AudioContext.
let s1 = new OscillatorNode(context, {frequency: 440});
let s2 = new OscillatorNode(context, {frequency: 880});
let g1 = new GainNode(context);
let g2 = new GainNode(context);
let merger = new ChannelMergerNode(context, {numberOfInputs: 2});
merger.connect(context.destination);
s1.connect(g1).connect(merger, 0, 0);
s2.connect(g2).connect(merger, 0, 1);
s1.start();
s2.start();
You should hear a 440 Hz tone in one ear and an 880 Hz tone in the other. This, of course, assumes your audio HW supports stereo. Check to see if context.destination.channelCount is actually two.
If it still sounds funny, try setting g1.gain.value=0 or g2.gain.value=0 (but not both). This should force sound to go to only the left or right. If not, something else is wrong. I tested this at https://hoch.github.io/canopy and it's working as I expected.
When I use the write() function of the Turtle graphics library in a Python script and then translate it in javascript with Transcrypt, it displays nothing.
My code looks like this:
import turtle
def SomeText():
pen.goto(0, 250)
pen.pensize(10)
pen.write("Nothing happens")
pen = turtle.Turtle()
SomeText()
pen.done()
The program runs alright in a Python environment but it displays only the turtle line and no text when translated into Javascript through Transcrypt and then is executed on a web browser.
Am I doing something wrong or is it just that Transcrypt doesn't support the write() function? If this is the case, how can I combine the turtle graphics with text in a compact way into Javascript? It's not that convenient to use extra html code for text messages.
Your original code doesn't work for me. The line pen.done() isn't valid as done() isn't a method of turtle. It's an alias of the screen method mainloop() and is also available as a top level function that acts on the screen singleton instance.
I'm not saying it'll necessarily fix your stated problem, but to make your original code vaild, change pen.done() to turtle.done(). I.e. change it from a non-existent turtle method call to a top level function call. Then try Transcrypt again...
After that, I'd consider the issue of fonts and do both Python and JavaScript have access to the default write() font Arial?
hm.... I don't know if I'm right, as I have left turtle quite a while ago, but aren't you supposed to add a lot more after just pen.write("nothing happens")? For example: pen.write("something happens", True, 'center', font = ([whatever font], [whatever size], 'bold' [or not])) That may be the problem, but like I said before, I'm not too familiar with turtle and I've also never used Transcript or JavaScript.
Modify the Turtle graphics program to incorporate the functions of the left and middle mouse buttons. In other words, when you press the left mouse button, a random color changes and the size of the turtle changes, and a line is drawn.
Is it possible to generate a tone based on a specific formula? I've tried googling it, but the only things I could find were about normal sine waves, such as this other SO question. So I was wondering if it is possible to generate tones based on other kinds of formulas?
On that other SO question, I did find a link to this demo page, but it seems like that page just downloads sound files and uses them to just alter the pitch of the sounds.
I've already tried combining sine waves by using multiple oscillators, based on this answer, which works just as expected:
window.ctx = new webkitAudioContext();
window.osc = [];
function startTones() {
osc[0] = ctx.createOscillator(),
osc[1] = ctx.createOscillator()
osc[0].frequency.value = 120;
osc[1].frequency.value = 240;
osc[0].connect(ctx.destination);
osc[1].connect(ctx.destination);
osc[0].start(0);
osc[1].start(0);
}
function stopTones() {
osc[0].stop(0);
osc[1].stop(0);
}
<button onclick="startTones();">Start</button>
<button onclick="stopTones();">Stop</button>
So now I was wondering, is it possible to make a wave that's not based on adding sine waves like this, such as a sawtooth wave (x - floor(x)), or a multiplication of sine waves (sin(PI*440*x)*sin(PI*220*x))?
PS: I'm okay with not supporting some browsers - as long as it still works in at least one (although more is better).
All (periodic) waves can be expressed as the addition of sine waves, and WebAudio has a function for synthesising a wave form based on a harmonic series, context.createPeriodicWave(real, imag).
The successive elements of the supplied real and imag input arrays specify the relative amplitude and phase of each harmonic.
Should you want to create a wave procedurally, then in theory you could populate an array with the desired waveform, take the FFT of that, and then pass the resulting FFT components to the above function.
(WebAudio happens to support the sawtooth waveform natively, BTW)
i wonder how this is made: http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage
Those spots form a text and when clicked , they explode.
How can shapes form a text? Can i achieve this with processing.js?
Thanks.
I guess one way is to have a model for each character. For example, manually create the letter 'A' via shapes. Then for each letter in the message, you would display the character model for the letters
I'm not sure if you want to write this in processing or in javascript. This is a javascript library, so you can use it in a javascript context. To make it on processing and use processingjs to display it on web you got to use processing resources to achieve the same result or manage to pass data from/to javascript and processing. There is this example from processingjs site on connecting your page with a processing sketch. Note that processingjs does not support use of processing libraries, so you can't use any of Precessing typography libraries in this workflow. I think that they could be very handy though...
As how doing this on processing, i think i would go for drawing letters in a not displayed PGraphics, and using a pixel color test on this surface to drive the drawings of the circles. This would allow to alter the text in run time. Like, in pseudo code
PGraphics matteImage = new PGraphics(size, size, render);//
matteImage.background(black);
matteImage.fill(255);
matteImage.text("A", x,y);
matteImage.loadPixels();
for(i; i < matteImage.length;i++)
{
color c = matteImage.pixels[i];
if ( c == white)
{
doDrawEllipses();
}
}
In drawing circles method/class i would add some noise/randomness, exploding handle...
A while ago I created a small cardgame web app for fun. The player plays against the computer and mostly it works fine. Sometimes though the computer player gets into a loop, the point of the game is to lose all your cards and if you don't have a card to play you take the pile. Sometimes the computer plays x,y,z, takes the pile, plays x,yz, takes the pile etc.
I keep track of the moves I've made, so at any point I have an array that looks something like : [C2,D5,H2,S4,C5,H2,S4,C5,H2,S4,C5]
In this case I can see that I've gotten into a loop of playing H2,S4,C5, then taking the pile and then repeating.
So, the generalized problem is, what's the best way to detect repeating patterns in a list? I could probably whip something up using a simple for loop, trying to find the card I'm about to play and if I find that in position x then I could check whether the pattern from x to n repeats at position x-(n-x) to x, but this seems like the kind of problem that could have a nice algorithm for it. How would you code this given the following function signature:
function findLoops(previousMoves, nextMove, maxPatternLength) {
//Return [loopLength, loopCount] or null if there are no loops
}
p.s. this is not a homework assignment, the game exists and is at http://www.idiot-cardgame.com if anyone is interested :)
First the general question: Your suggested method
trying to find the card I'm about to play and if I find that in position x then I could check whether the pattern from x to n repeats at position x-(n-x) to x,
looks really good. I would suggest basically the same. It is O(n) and needs a fixed amount of storage, and is simple: what else would you wish for?
Second: You can check for repetition in games generally if you keep a hash table of all previous game states (complete state, nothing left out). Everytime you reach a new state look up if it is in the hashtable, if its in it: you game state is looping.
In Javascript you have builtin hastables so this is very easy to do with something similar like this:
new_state = next_move(old_state);
new_encoded_state = encode(new_state); // make it into a string
if (allstates[new_encoded_state]) {
// we are looping!
} else {
allstates[new_encoded_state] = 1;
// no looping
}
The variable allstates is not an Array but of type Object. You can have array like access with strings and this uses the Object as hastable.