Skip to content

Commit

Permalink
Merge branch 'svg-stickering' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@lgarron
lgarron committed Jan 2, 2021
2 parents 69f8ce1 + 7fc2f3a commit cb7e56b
Show file tree
Hide file tree
Showing 16 changed files with 377 additions and 115 deletions.
4 changes: 2 additions & 2 deletions src/cubing/bluetooth/gan.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Quaternion } from "three";
import { BareBlockMove, BlockMove } from "../alg";
import { KPuzzle } from "../kpuzzle";
import { KPuzzleDefinition } from "../puzzle-geometry/interfaces";
import { puzzles } from "../puzzles";
import * as puzzles from "../puzzles";
import {
BluetoothConfig,
BluetoothPuzzle,
Expand Down Expand Up @@ -330,7 +330,7 @@ export class GanCube extends BluetoothPuzzle {
).moveCounter();
debugLog("Initial Move Counter:", initialMoveCounter);
const cube = new GanCube(
await puzzles["3x3x3"].def(),
await puzzles.koob333.def(),
ganCubeService,
server,
physicalStateCharacteristic,
Expand Down
83 changes: 81 additions & 2 deletions src/cubing/kpuzzle/svg.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
import type {
FaceletMeshAppearance,
PuzzleAppearance,
} from "../twisty/3D/puzzles/appearance"; // TODO
import { KPuzzleDefinition, Transformation } from "./definition_types";
import { KPuzzle } from "./kpuzzle";

Expand All @@ -12,13 +16,56 @@ function nextSVGID(): string {
return "svg" + svgCounter.toString();
}

// TODO: This is hardcoded to 3x3x3 SVGs
const colorMaps: Partial<Record<
FaceletMeshAppearance,
Record<string, string>
>> = {
dim: {
"white": "#dddddd",
"orange": "#884400",
"limegreen": "#008800",
"red": "#660000",
"rgb(34, 102, 255)": "#000088", // TODO
"yellow": "#888800",
},
oriented: {
"white": "#ff88ff",
"orange": "#ff88ff",
"limegreen": "#ff88ff",
"red": "#ff88ff",
"rgb(34, 102, 255)": "#ff88ff", // TODO
"yellow": "#ff88ff",
},
ignored: {
"white": "#444444",
"orange": "#444444",
"limegreen": "#444444",
"red": "#444444",
"rgb(34, 102, 255)": "#444444", // TODO
"yellow": "#444444",
},
invisible: {
"white": "#00000000",
"orange": "#00000000",
"limegreen": "#00000000",
"red": "#00000000",
"rgb(34, 102, 255)": "#00000000", // TODO
"yellow": "#00000000",
},
};

export class SVG {
public element: HTMLElement;
public gradientDefs: SVGDefsElement;
private originalColors: { [type: string]: string } = {};
private gradients: { [type: string]: SVGGradientElement } = {};
private svgID: string;
constructor(public kPuzzleDefinition: KPuzzleDefinition, svgSource: string) {
constructor(
public kPuzzleDefinition: KPuzzleDefinition,
svgSource: string,
experimentalAppearance?: PuzzleAppearance,
) {
if (!svgSource) {
throw new Error(
`No SVG definition for puzzle type: ${kPuzzleDefinition.name}`,
Expand Down Expand Up @@ -58,7 +105,39 @@ export class SVG {
) {
const id = this.elementID(orbitName, idx, orientation);
const elem = this.elementByID(id);
const originalColor = elem.style.fill as string;
let originalColor: string = elem.style.fill;
/// TODO: Allow setting appearance dynamically.
if (experimentalAppearance) {
(() => {
// TODO: dedup with Cube3D,,factor out fallback calculations
const a = experimentalAppearance.orbits;
if (!a) {
return;
}
const orbitAppearance = a[orbitName];
if (!orbitAppearance) {
return;
}
const pieceAppearance = orbitAppearance.pieces[idx];
if (!pieceAppearance) {
return;
}
const faceletAppearance = pieceAppearance.facelets[orientation];
if (!faceletAppearance) {
return;
}
const appearance =
typeof faceletAppearance === "string"
? faceletAppearance
: faceletAppearance?.appearance;
const colorMap = colorMaps[appearance];
if (colorMap) {
originalColor = colorMap[originalColor];
}
})();
} else {
originalColor = elem.style.fill as string;
}
this.originalColors[id] = originalColor;
this.gradients[id] = this.newGradient(id, originalColor);
this.gradientDefs.appendChild(this.gradients[id]);
Expand Down
54 changes: 27 additions & 27 deletions src/cubing/puzzles/implementations/3x3x3/3x3x3-ll.kpuzzle.svg.ts
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
export default `<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="288px" height="288px" viewBox="-16 -16 288 288" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>3x3x3 LL</title>
<defs>
<g id="sticker">
<rect x="-10" y="-10" width="1" height="1" stroke="black" stroke-width="0.04px" />
</g>
</defs>
<g id="3x3x3-LL" stroke="none" stroke-width="4" style="none" stroke-linejoin="round">
<rect id="CENTERS-l0-o0" stroke="#000000" style="fill: #FFFFFF" x="96" y="96" width="64" height="64"></rect>
<rect id="CENTERS-l0-o1" stroke="#000000" style="fill: #FFFFFF" x="96" y="96" width="64" height="64"></rect>
<rect id="CENTERS-l0-o2" stroke="#000000" style="fill: #FFFFFF" x="96" y="96" width="64" height="64"></rect>
<rect id="CENTERS-l0-o3" stroke="#000000" style="fill: #FFFFFF" x="96" y="96" width="64" height="64"></rect>
<rect id="CORNERS-l0-o0" stroke="#000000" style="fill: #FFFFFF" x="160" y="160" width="64" height="64"></rect>
<polygon id="CORNERS-l0-o1" stroke="#000000" style="fill: #FF0000" points="224 160 252 160 252 252 224 224"></polygon>
<polygon id="CORNERS-l0-o2" stroke="#000000" style="fill: #00FF00" transform="translate(206, 238) scale(1, -1) rotate(-90) translate(-206, -238) " points="192 192 220 192 220 284 192 256"></polygon>
<rect id="CORNERS-l1-o0" stroke="#000000" style="fill: #FFFFFF" x="160" y="32" width="64" height="64"></rect>
<polygon id="CORNERS-l1-o1" stroke="#000000" style="fill: #0000FF" transform="translate(206, 18) rotate(-90) translate(-206, -18) " points="192 -28 220 -28 220 64 192 36"></polygon>
<polygon id="CORNERS-l1-o2" stroke="#000000" style="fill: #FF0000" transform="translate(238, 50) scale(1, -1) translate(-238, -50) " points="224 4 252 4 252 96 224 68"></polygon>
<rect id="CORNERS-l2-o0" stroke="#000000" style="fill: #FFFFFF" x="32" y="32" width="64" height="64"></rect>
<polygon id="CORNERS-l2-o1" stroke="#000000" style="fill: #FF7F00" transform="translate(18, 50) scale(-1, -1) translate(-18, -50) " points="4 4 32 4 32 96 4 68"></polygon>
<polygon id="CORNERS-l2-o2" stroke="#000000" style="fill: #0000FF" transform="translate(50, 18) scale(1, -1) rotate(90) translate(-50, -18) " points="36 -28 64 -28 64 64 36 36"></polygon>
<rect id="CORNERS-l3-o0" stroke="#000000" style="fill: #FFFFFF" x="32" y="160" width="64" height="64"></rect>
<polygon id="CORNERS-l3-o1" stroke="#000000" style="fill: #00FF00" transform="translate(50, 238) rotate(90) translate(-50, -238) " points="36 192 64 192 64 284 36 256"></polygon>
<polygon id="CORNERS-l3-o2" stroke="#000000" style="fill: #FF7F00" transform="translate(18, 206) scale(-1, 1) translate(-18, -206) " points="4 160 32 160 32 252 4 224"></polygon>
<rect id="EDGES-l0-o0" stroke="#000000" style="fill: #FFFFFF" x="96" y="160" width="64" height="64"></rect>
<rect id="EDGES-l0-o1" stroke="#000000" style="fill: #00FF00" transform="translate(128, 238) scale(1, -1) rotate(90) translate(-128, -238) " x="114" y="206" width="28" height="64"></rect>
<rect id="EDGES-l1-o0" stroke="#000000" style="fill: #FFFFFF" x="160" y="96" width="64" height="64"></rect>
<rect id="EDGES-l1-o1" stroke="#000000" style="fill: #FF0000" x="224" y="96" width="28" height="64"></rect>
<rect id="EDGES-l2-o0" stroke="#000000" style="fill: #FFFFFF" x="96" y="32" width="64" height="64"></rect>
<rect id="EDGES-l2-o1" stroke="#000000" style="fill: #0000FF" transform="translate(128, 18) scale(1, -1) rotate(90) translate(-128, -18) " x="114" y="-14" width="28" height="64"></rect>
<rect id="EDGES-l3-o0" stroke="#000000" style="fill: #FFFFFF" x="32" y="96" width="64" height="64"></rect>
<rect id="EDGES-l3-o1" stroke="#000000" style="fill: #FF7F00" x="4" y="96" width="28" height="64"></rect>
<rect id="CENTERS-l0-o0" stroke="#000000" style="fill: white" x="96" y="96" width="64" height="64"></rect>
<rect id="CENTERS-l0-o1" stroke="#000000" style="fill: white" x="96" y="96" width="64" height="64"></rect>
<rect id="CENTERS-l0-o2" stroke="#000000" style="fill: white" x="96" y="96" width="64" height="64"></rect>
<rect id="CENTERS-l0-o3" stroke="#000000" style="fill: white" x="96" y="96" width="64" height="64"></rect>
<rect id="CORNERS-l0-o0" stroke="#000000" style="fill: white" x="160" y="160" width="64" height="64"></rect>
<polygon id="CORNERS-l0-o1" stroke="#000000" style="fill: red" points="224 160 252 160 252 252 224 224"></polygon>
<polygon id="CORNERS-l0-o2" stroke="#000000" style="fill: limegreen" transform="translate(206, 238) scale(1, -1) rotate(-90) translate(-206, -238) " points="192 192 220 192 220 284 192 256"></polygon>
<rect id="CORNERS-l1-o0" stroke="#000000" style="fill: white" x="160" y="32" width="64" height="64"></rect>
<polygon id="CORNERS-l1-o1" stroke="#000000" style="fill: #26f" transform="translate(206, 18) rotate(-90) translate(-206, -18) " points="192 -28 220 -28 220 64 192 36"></polygon>
<polygon id="CORNERS-l1-o2" stroke="#000000" style="fill: red" transform="translate(238, 50) scale(1, -1) translate(-238, -50) " points="224 4 252 4 252 96 224 68"></polygon>
<rect id="CORNERS-l2-o0" stroke="#000000" style="fill: white" x="32" y="32" width="64" height="64"></rect>
<polygon id="CORNERS-l2-o1" stroke="#000000" style="fill: orange" transform="translate(18, 50) scale(-1, -1) translate(-18, -50) " points="4 4 32 4 32 96 4 68"></polygon>
<polygon id="CORNERS-l2-o2" stroke="#000000" style="fill: #26f" transform="translate(50, 18) scale(1, -1) rotate(90) translate(-50, -18) " points="36 -28 64 -28 64 64 36 36"></polygon>
<rect id="CORNERS-l3-o0" stroke="#000000" style="fill: white" x="32" y="160" width="64" height="64"></rect>
<polygon id="CORNERS-l3-o1" stroke="#000000" style="fill: limegreen" transform="translate(50, 238) rotate(90) translate(-50, -238) " points="36 192 64 192 64 284 36 256"></polygon>
<polygon id="CORNERS-l3-o2" stroke="#000000" style="fill: orange" transform="translate(18, 206) scale(-1, 1) translate(-18, -206) " points="4 160 32 160 32 252 4 224"></polygon>
<rect id="EDGES-l0-o0" stroke="#000000" style="fill: white" x="96" y="160" width="64" height="64"></rect>
<rect id="EDGES-l0-o1" stroke="#000000" style="fill: limegreen" transform="translate(128, 238) scale(1, -1) rotate(90) translate(-128, -238) " x="114" y="206" width="28" height="64"></rect>
<rect id="EDGES-l1-o0" stroke="#000000" style="fill: white" x="160" y="96" width="64" height="64"></rect>
<rect id="EDGES-l1-o1" stroke="#000000" style="fill: red" x="224" y="96" width="28" height="64"></rect>
<rect id="EDGES-l2-o0" stroke="#000000" style="fill: white" x="96" y="32" width="64" height="64"></rect>
<rect id="EDGES-l2-o1" stroke="#000000" style="fill: #26f" transform="translate(128, 18) scale(1, -1) rotate(90) translate(-128, -18) " x="114" y="-14" width="28" height="64"></rect>
<rect id="EDGES-l3-o0" stroke="#000000" style="fill: white" x="32" y="96" width="64" height="64"></rect>
<rect id="EDGES-l3-o1" stroke="#000000" style="fill: orange" x="4" y="96" width="28" height="64"></rect>
</g>
<g style="opacity: 0">
Expand Down
56 changes: 28 additions & 28 deletions src/cubing/puzzles/implementations/3x3x3/src/3x3x3-ll.kpuzzle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/cubing/puzzles/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ import { skewb } from "./implementations/skewb";
import { square1 } from "./implementations/square1";
import { PuzzleManager } from "./PuzzleManager";

module.exports["222"] = cube2x2x2;
module.exports["cube333"] = cube3x3x3;

export const koob333 = cube3x3x3;

export { cube2x2x2 as ads };

export const puzzles: Record<string, PuzzleManager> = {
/******** Start of WCA Puzzles *******/
"3x3x3": cube3x3x3,
Expand Down
Loading

0 comments on commit cb7e56b

Please sign in to comment.