Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new move: Ra La Ua Da Fa Ba #24

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions demo/alexfung.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='../roofpig_and_three.min.js'></script>
<style>
body {
font-family: Calibri;
margin-left: 1em;
}

div.roofpig {width: 15rem; margin-bottom: 2rem; margin-top: 1rem; float: left}

h3, h4 {
clear:left;
padding-top: 1rem;
}

li {margin-bottom: 0.5rem; margin-left: 2rem; list-style-type: disc}
</style>
</head>
<h2>alexfung commits demo</h2>
<p>
This demo page shows the effects of the commits on the alexfung branch,
which is a fork of the 1.4 master.
</p><p>
The demo files refer to the roofpig JS file at the root of this repo.
That file is not exactly the same as the output of the build process.
The roofpig JS file contains non-ANSI characters and may confuse browsers.
I have added BOM to the roofpig JS file at the root of this repo to make sure browsers know it is a UTF-8 file.
</p>

<h3>Color Fix</h3>
<p>
In 1.4 (and 1.5P) color is not assigned correctly if alg= includes any M/E/S slice movement or x/y/z rotation.
Fixed in the color fix commit.
</p>
<div class="roofpig" data-config="alg=U| colored=*|flags=showalg startsolved">Normal: U on top</div>
<div class="roofpig" data-config="alg=M| colored=*|flags=showalg startsolved|algdisplay=rotations">color fix for M</div>
<div class="roofpig" data-config="alg=x| colored=*|flags=showalg startsolved|algdisplay=rotations">color fix for X</div>


<h3>Rotations: X vs R&gt; vs Ra</h3>

<p>
It came to my notice that the two types of rotations are not identical.
<ul>
<li>
X/Y/Z are macros for combo moves.
For example, X&nbsp;&equiv;&nbsp;R&oplus;M<sup>-1</sup>&oplus;L<sup>-1</sup>.
After X/Y/Z, U is still on top.
</li>
<li>
R&gt; etc moves the camera angle.
It allows you to view the cube from another direction.
After this kind of rotations, U moves the same face as if the rotation never happened.
</li>
</ul>
It is easier to understand with examples:
</p>
<div class="roofpig" data-config="alg=x U| colored=*|flags=showalg startsolved|algdisplay=rotations">U is still on top</div>

<div class="roofpig" data-config="alg=R> U| colored=*|flags=showalg startsolved|algdisplay=rotations">U not on top</div>
<p style='clear:left'>
I keep the current hebaviour without making any changes.
I don't need R&gt; at all, and I found that X is too diffult to understand.
So I added a new set of accepted input alg=
<ul>
<li>Ra&nbsp;&equiv;&nbsp;X</li>
<li>Ua&nbsp;&equiv;&nbsp;Y</li>
<li>Fa&nbsp;&equiv;&nbsp;Z</li>
<li>La&nbsp;&equiv;&nbsp;X<sup>-1</sup></li>
<li>Da&nbsp;&equiv;&nbsp;Y<sup>-1</sup></li>
<li>Ba&nbsp;&equiv;&nbsp;Z<sup>-1</sup></li>
</ul>
</p><p>
I think my names are much easier to understand.
Following the style of Rw (rotate double rows),
I use Ra to mean moving all three planes.
Ra moves the cube in the same direction as R,
La moves the cube in the same direction as L.
</p>
<div class="roofpig" data-config="alg=Ra La Fa Ba Ua Da|solved=undefined|flags=startsolved showalg|algdisplay=rotation fancy-1s xyzUpper">Rotations: Ra La Fa Ba Ua Da</div>
14 changes: 14 additions & 0 deletions demo/alg.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='../roofpig_and_three.min.js'></script>
<style>
body {font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 11px;}
.roofpig {width:160px; height:210px; float: left; margin:4px;}
</style>
</head>
<h2>Roofpig 'alg' demo</h2>
<div class="roofpig" data-config="alg=F U F' U F U2 F' | flags=showalg">Basic moves</div>

<div class="roofpig" data-config="alg=M E' S2 x y' z2 Rw Uw' Lw2 | flags=showalg">Standard advanced moves</div>

<div class="roofpig" data-config="alg=F+B' U+U< R2+LZ+U>>| algdisplay=rotations 2p| flags=showalg">Roofpig advanced moves</div>
30 changes: 30 additions & 0 deletions demo/cubexp.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='../roofpig_and_three.min.js'></script>
<style>
body {
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: small
}
.roofpig {
width:100px;
height:116px;
margin: 4px;
float:left;
background-color: #cc9;
}
</style>
</head>
<h2>Roofpig Cubexp Lab</h2>

<div class="roofpig" data-config="colored=UFR DFR LF R">UFR DFR LF R</div>
<div class="roofpig" data-config="colored=UfR DFr lF R">UfR DFr lF R</div>
<div class="roofpig" data-config="colored=F*">F*</div>
<div class="roofpig" data-config="colored=FR*">FR*</div>
<div class="roofpig" data-config="colored=U-">U-</div>
<div class="roofpig" data-config="colored=BD-">BD-</div>
<div class="roofpig" data-config="colored=BLD-">BLD-</div>
<div class="roofpig" data-config="colored=FB-">FB-</div>
<div class="roofpig" data-config="colored=r">r</div>
<div class="roofpig" data-config="colored=*/mc">*/mc</div>
<div class="roofpig" data-config="colored=r/e">r/e</div>
29 changes: 29 additions & 0 deletions demo/other.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='../roofpig_and_three.min.js'></script>
<style>
body {
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 10px;
}
div.roofpig {
width:120px;
height:160px;
margin: 0px;
float:left;
}
</style>
</head>
<h2>Roofpig various options Demo</h2>

<div class="roofpig" data-config="colors=F:r R:#fee U:#f99 L:pink B:#f44 D:#fdd">colors in pink</div>
<div class="roofpig" data-config="colors=solved:plum ignored:#cfc cube:yellow | colored=UD- | solved=D*">non sticker colors</div>
<div class="roofpig" data-config="flags=startsolved|alg=F L F U' R U F2 L2 U' L' B D' B' L2 U">startsolved</div>

<div class="roofpig" data-config="algdisplay=fancy2s | alg=F D2 UZ+R>>|flags=showalg">algdisplay=fancy2s</div>
<div class="roofpig" data-config="algdisplay=rotations 2p| alg=F D2 UZ+R>>|flags=showalg">algdisplay=rotations 2p</div>

<div class="roofpig" data-config="hover=far">hover=far</div>
<div class="roofpig" data-config="hover=5">hover=5</div>
<div class="roofpig" data-config="hover=near">hover=near</div>
<div class="roofpig" data-config="hover=none">hover=none</div>
34 changes: 34 additions & 0 deletions demo/readme.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<head>
<style>
body {
font-family: Calibri;
margin-left: 1em;
}
</style>
</head>
<body>
<h2>Offline demo</h2>
<p>
The original roofpig demos are at jsfiddle.net
They are no longer operational, because they tried to load the roofpig_and_three.js over http.
Therefore, I downloaded the demo file so I can run them offline.
</p><p>
The demo files refer to the roofpig JS file at the root of this repo.
The script has non-ANSI characters, and most browsers will not like it.
To browse the demo locally, you may need to manually add BOM at the start of the file.
A bom.txt is included under /lib for you.
</p>
<p>
Also, I added an extra demo file for the changes I made to the repo.
</p>
<h2>Demo pages</h2>
<ul>
<li><a href='alexfung.html'>My fixes and Features</a></li>
<li><a href='alg.html'>alg notation demo</a></li>
<li><a href='cubexp.html'>cubeexp demo</a></li>
<li><a href='solved.html'>solved and colored demo</a></li>
<li><a href='tweaks.html'>setupmoves and tweaks demo</a></li>
<li><a href='other.html'>other parameters demo</a></li>
<li><a href='sample.html'>feature sample demo</a></li>
</ul>
</body>
22 changes: 22 additions & 0 deletions demo/sample.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='../roofpig_and_three.min.js'></script>
<style>
body {
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 10px;
}
div.roofpig {
width:150px;
height:193px;
margin: 5px;
float:left;
}</style>
</head>
<h2>Roofpig Feature Sample</h2>

<div class="roofpig" data-config="alg=L' U2 L U2 R U' L' U L+R'| colored=U*| flags=showalg|hover=none">Simple. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Helpful -></div>

<div class="roofpig" data-config="alg=L+R U+R>>|colors=F:#fff B:#000 L:pink R:purple U:#0d0 D:#07f c:cyan|tweaks=x:Bdr X:Fdr" style="background-color:#dff;">Customizable. Edgy.</div>

<div class="roofpig" data-config="algdisplay=fancy2s | pov=dFr| alg=D'+D> F F>> R' U F>> L2 D2 L D2+D<< B R' U' B' U B2 R' B' R' B R D< L' B' L B' L2 B' L' B' L2 B L B L2 B2|flags=showalg|hover=far|speed=200" style="width:313px; height: 370px;">Big. Visible. Fast.</div>
27 changes: 27 additions & 0 deletions demo/solved.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='../roofpig_and_three.min.js'></script>
<style>
body {
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: small
}
.roofpig {
width:100px;
height:116px;
margin: 5px;
float:left;
background-color: #cc9;
}
</style>
</head>
<h2>Roofpig solved and colored Lab</h2>

<div class="roofpig" data-config="colored=D*/e */m">Cross</div>
<div class="roofpig" data-config="colored=U- U">F2L</div>
<div class="roofpig" data-config="colored=U*|solved=U-">PLL</div>
<div class="roofpig" data-config="colored=u|solved=U-">OLL</div>
<div class="roofpig" data-config="colored=ULB-">Petrus Step 1</div>
<div class="roofpig" data-config="colored=UL-">Petrus Step 2</div>
<div class="roofpig" data-config="colored=u/me f/me|solved=UF-">Petrus Step 3</div>
<div class="roofpig" data-config="colored=U- u/me UF|solved=UF-">Petrus Step 4</div>
22 changes: 22 additions & 0 deletions demo/tweaks.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='../roofpig_and_three.min.js'></script>
<style>
body {
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: small
}
.roofpig {
width:120px;
height:136px;
margin: 4px;
float:left;
}
</style>
</head>
<h2>Roofpig 'setupmoves' and 'tweaks' Lab</h2>

<div class="roofpig" data-config="setupmoves=M2 E2 ">setupmoves</div>
<div class="roofpig" data-config="solved=*|tweaks=F:Ubr R:ULB- B:UFL B:UL B:UBL">color tweaks</div>
<div class="roofpig" data-config="colored=D |solved=D |tweaks=X:UF x:RU X:Rf x:Fr">X tweaks</div>
<div class="roofpig" data-config="tweaks=U:Fur U:Luf U:Rub U:Ulb X:Rub x:Fur x:Luf x:Ubl| solved=U-| colored=u/me| colors=U:b| hover=2.7">All at once</div>
1 change: 1 addition & 0 deletions lib/bom.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

11 changes: 11 additions & 0 deletions src/Alg.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,17 @@ class Alg
when 'y' then "U#{t1}+E#{t2}+D#{t2}"
when 'z' then "F#{t1}+S#{t1}+B#{t2}"
new CompositeMove(moves, @world3d, @speed, code)

else if (code[1] == 'a' && code[0] in ['U', 'D', 'L', 'R', 'F', 'B'])
[t1, t2] = turn_codes[Move.parse_turns(code.substring(2))]
moves = switch code[0]
when 'R' then "R#{t1}+M#{t2}+L#{t2}"
when 'U' then "U#{t1}+E#{t2}+D#{t2}"
when 'F' then "F#{t1}+S#{t1}+B#{t2}"
when 'L' then "R#{t2}+M#{t1}+L#{t1}"
when 'D' then "U#{t2}+E#{t1}+D#{t1}"
when 'B' then "F#{t2}+S#{t2}+B#{t1}"
new CompositeMove(moves, @world3d, @speed, code)

else
last_char_index = 2 if (code[1] == 'w' && code[0] in ['U', 'D', 'L', 'R', 'F', 'B'])
Expand Down
10 changes: 9 additions & 1 deletion src/Dom.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,15 @@ class Dom

@buttons = [@reset, @prev, @next, @pause, @play]

LUCIDA_WIDTHS = {M:108, '+':100, '>':100, '<':100, w:98, D:94, U:87, 2:80, R:80, x:78, Z:77, B:73, z:73, F:68, E:68, S:68, L:67, y:65, '²':53, ' ':40, "'":29}
# LUCIDA_WIDTHS = {M:108, '+':100, '>':100, '<':100, w:98, D:94, U:87, 2:80, R:80, x:78, Z:77, B:73, z:73, F:68, E:68, S:68, L:67, y:65, '²':53, ' ':40, "'":29}
LUCIDA_WIDTHS = {M:108, '+':100, '>':100, '<':100, w:98, D:94, U:87, 2:80, R:80, x:78, Z:77, B:73, z:73, F:68, E:68, S:68, L:67, y:65, '²':53, ' ':40, "'":29
, "a": 70
}
# I haven't really found out what the width here means.
# Below are the real values from the Lucida Sans font,
# since +/</> are 1628, I divide numbers by 16.28 and round up to get the value for LUCIDA_WIDTHS
# , "a": 1131

init_alg_text: (text) ->
if @alg_text
width = 0
Expand Down