Special buttons to trigger the cube's movements

BakiTANRISEVEN commented 1 month ago

<!doctype html>

AnimCubeJS Move Buttons

Cube 1		Cube 2

Cube 1:

Cube 2:

Note:
If the cube has been rotated (via mouse or touch) prior to pressing a move button then the cube will "snap" into position when the move is applied. To ensure the correct snap position, rotate so the front face is largest. To snap prior to doing a move, use the Snap button.

Hello; what should be the codes for the L' R' F' B' U' D' and L2 R2 F2 B2 U2 D2 rotations of the cube?

mfeather1 commented 1 month ago

For buttons :

<button onclick="cubeMove('c1','R\'')">R'</button>&nbsp;
<button onclick="cubeMove('c1','L\'')">L'</button>&nbsp;
<button onclick="cubeMove('c1','U\'')">U'</button>&nbsp;
<button onclick="cubeMove('c1','D\'')">D'</button>&nbsp;
<button onclick="cubeMove('c1','F\'')">F'</button>&nbsp;
<button onclick="cubeMove('c1','B\'')">B'</button>&nbsp;
<br>
<button onclick="cubeMove('c1','R2')">R2</button>&nbsp;
<button onclick="cubeMove('c1','L2')">L2</button>&nbsp;
<button onclick="cubeMove('c1','U2')">U2</button>&nbsp;
<button onclick="cubeMove('c1','D2')">D2</button>&nbsp;
<button onclick="cubeMove('c1','F2')">F2</button>&nbsp;
<button onclick="cubeMove('c1','B2')">B2</button>&nbsp;

For keyboard input, just hit the letter twice for half-twist or three times for counter-clockwise.

Another way is to make the shift key do counter-clockwise moves:

function keydown(e) {
  if (gid == '')
    return;
  var mlist = ['x','y','z','r','l','u','d','f','b'];
  if (mlist.includes(e.key.toLowerCase())) {
    var mv = e.key;
    if (['r','l','u','d','f','b'].includes(mv))
      mv = mv.toUpperCase();
    else if (['R','L','U','D','F','B'].includes(mv))
      mv += "'";
    cubeMove(gid, mv);
  }
}

That still requires hitting key twice for half-twists.

While it would be nice to use the Ctrl and Alt keys as modifiers that does not work too well because the browser and window manager overrides several of them for various things.

If you can think of another way to do it, it can likely be programmed but that's all I can think of at the moment.

BakiTANRISEVEN commented 1 month ago

For buttons :
<button onclick="cubeMove('c1','R\'')">R'</button>&nbsp;
<button onclick="cubeMove('c1','L\'')">L'</button>&nbsp;
<button onclick="cubeMove('c1','U\'')">U'</button>&nbsp;
<button onclick="cubeMove('c1','D\'')">D'</button>&nbsp;
<button onclick="cubeMove('c1','F\'')">F'</button>&nbsp;
<button onclick="cubeMove('c1','B\'')">B'</button>&nbsp;
<br>
<button onclick="cubeMove('c1','R2')">R2</button>&nbsp;
<button onclick="cubeMove('c1','L2')">L2</button>&nbsp;
<button onclick="cubeMove('c1','U2')">U2</button>&nbsp;
<button onclick="cubeMove('c1','D2')">D2</button>&nbsp;
<button onclick="cubeMove('c1','F2')">F2</button>&nbsp;
<button onclick="cubeMove('c1','B2')">B2</button>&nbsp;
For keyboard input, just hit the letter twice for half-twist or three times for counter-clockwise.

Another way is to make the shift key do counter-clockwise moves:
function keydown(e) {
  if (gid == '')
    return;
  var mlist = ['x','y','z','r','l','u','d','f','b'];
  if (mlist.includes(e.key.toLowerCase())) {
    var mv = e.key;
    if (['r','l','u','d','f','b'].includes(mv))
      mv = mv.toUpperCase();
    else if (['R','L','U','D','F','B'].includes(mv))
      mv += "'";
    cubeMove(gid, mv);
  }
}
That still requires hitting key twice for half-twists.

While it would be nice to use the Ctrl and Alt keys as modifiers that does not work too well because the browser and window manager overrides several of them for various things.

If you can think of another way to do it, it can likely be programmed but that's all I can think of at the moment.

Thank you very much.

mfeather1 commented 1 month ago

I spoke to soon, ctrl & alt can be used by using e.preventDefault() in keydown function to override browser shortcuts. If you are only using buttons then you don't need this but I'm adding this for future reference. :)

For this, there is also a minor mod to the mousedown function (added gid = '';).

function mousedown(e) {
  gid = '';
  if (typeof e.target.parentNode.id != 'undefined') {
    var s = e.target.parentNode.id;
    if (typeof acjs_parNode[s] != 'undefined')
      gid = s; 
  }
}

In keydown function, ctrl key is added for half-turns, alt can be used the same way (just change e.ctrlKey to e.altKey).

function keydown(e) {
  if (gid == '')
    return;
  var mlist = ['x','y','z','r','l','u','d','f','b'];
  if (mlist.includes(e.key.toLowerCase())) {
    e.preventDefault();
    var mv = e.key.toUpperCase();
    if (e.ctrlKey)
      mv += "2";
    else if (!mlist.includes(e.key))
      mv += "'"; 
    cubeMove(gid, mv);
  }
}

BakiTANRISEVEN commented 1 month ago

Yakında konuştum, ctrl ve alt, tarayıcı kısayollarını geçersiz kılmak için keydown fonksiyonunda e.preventDefault() kullanılarak kullanılabilir. Sadece düğmeleri kullanıyorsanız buna ihtiyacınız yok ama gelecekte referans olması için bunu ekliyorum. :)

Bunun için mousedown fonksiyonuna küçük bir mod daha eklendi (gid = '';).
function mousedown(e) {
  gid = '';
  if (typeof e.target.parentNode.id != 'undefined') {
    var s = e.target.parentNode.id;
    if (typeof acjs_parNode[s] != 'undefined')
      gid = s; 
  }
}
Keydown fonksiyonunda yarım dönüşler için ctrl tuşu eklenmiştir, alt tuşu da aynı şekilde kullanılabilir (e.ctrlKey'i e.altKey olarak değiştirmeniz yeterlidir).
function keydown(e) {
  if (gid == '')
    return;
  var mlist = ['x','y','z','r','l','u','d','f','b'];
  if (mlist.includes(e.key.toLowerCase())) {
    e.preventDefault();
    var mv = e.key.toUpperCase();
    if (e.ctrlKey)
      mv += "2";
    else if (!mlist.includes(e.key))
      mv += "'"; 
    cubeMove(gid, mv);
  }
}

This information was helpful. Thank you for your work and efforts.

cubing / AnimCubeJS

Special buttons to trigger the cube's movements #41