CubeIcons

Biblioteca de icones SVG para cubos magicos e outros puzzles. Funciona da seguinte forma: você adiciona classes CSS em tags <i> e o ícone é renderizado automaticamente.

Documentação

Sem dependências em runtime. JavaScript puro + CSS.

Puzzles suportados

| Puzzle | Vistas | Scramble | OLL | |--------|--------|----------|-----| | 2x2 a 7x7 | front, iso, top, net | sim | sim | | Skewb | front, iso, top, net, 3D (data-ci-rotate) | sim | sim | | Pyraminx | front, iso, net, 3D (data-ci-rotate) | sim | — | | Megaminx | front, top, net | sim | sim | | FTO | front, top, dual | sim | sim | | Square-1 | front, net | sim | — | | Clock | front, back, dual | sim | — |

Instalação

npm

npm install cube-icons

require("cube-icons");
// ou
import "cube-icons";

Manual

Inclua cube-icons.css e cube-icons.js na pagina:

<link rel="stylesheet" href="cube-icons.css">
<script src="cube-icons.js"></script>

Build e minificacao

O projeto já possui scripts prontos no package.json.

Gerar tudo

npm run build

Gera:

• cube-icons.min.js
• cube-icons.min.css

Gerar so JavaScript minificado

npm run build:js

Gerar so CSS minificado

npm run build:css

Ferramentas usadas

• terser para minificar cube-icons.js
• clean-css-cli para minificar cube-icons.css

Se ainda não tiver instalado as dependencias de desenvolvimento:

npm install

Uso básico

<!-- 3x3 simples -->
<i class="ci ci-3x3 ci-5x"></i>

<!-- Vista isometrica -->
<i class="ci ci-3x3 ci-iso ci-5x"></i>

<!-- Embaralhado -->
<i class="ci ci-3x3 ci-iso ci-scrambled ci-5x"></i>

<!-- Com algoritmo -->
<i class="ci ci-3x3 ci-iso ci-5x" data-ci-alg="R U R' U'"></i>

<!-- Algoritmo inverso -->
<i class="ci ci-3x3 ci-iso ci-5x ci-inverse" data-ci-alg="R U"></i>

<!-- Modo OLL -->
<i class="ci ci-3x3 ci-oll ci-5x" data-ci-alg="F R U R' U' F'"></i>

<!-- FTO em OLL (face U em amarelo) -->
<i class="ci ci-fto ci-oll ci-5x"></i>

<!-- Vista planificada -->
<i class="ci ci-3x3 ci-net ci-5x"></i>

<!-- Skewb em net -->
<i class="ci ci-skewb ci-net ci-5x"></i>

<!-- Skewb em OLL -->
<i class="ci ci-skewb ci-oll ci-5x" data-ci-alg="R U R' U'"></i>

<!-- Rotacao 3D livre -->
<i class="ci ci-skewb ci-5x" data-ci-rotate="20,40"></i>

<!-- Interativo -->
<i class="ci ci-skewb ci-5x ci-interactive" data-ci-alg="R U R'"></i>

<!-- Mono -->
<i class="ci ci-3x3 ci-iso ci-mono ci-5x"></i>

<!-- Outlined -->
<i class="ci ci-3x3 ci-iso ci-outlined ci-5x"></i>

<!-- Cor personalizada -->
<i class="ci ci-3x3 ci-iso ci-mono ci-5x" data-ci-color="#e06c75"></i>

Classes CSS

Tipo de puzzle

| Classe | Puzzle | |--------|--------| | ci-2x2 | Cubo 2x2x2 | | ci-3x3 | Cubo 3x3x3 | | ci-4x4 | Cubo 4x4x4 | | ci-5x5 | Cubo 5x5x5 | | ci-6x6 | Cubo 6x6x6 | | ci-7x7 | Cubo 7x7x7 | | ci-skewb | Skewb | | ci-pyraminx | Pyraminx | | ci-megaminx | Megaminx | | ci-fto | FTO | | ci-square1 | Square-1 | | ci-clock | Clock |

Vistas

| Classe | Descricao | |--------|-----------| | ci-front | Vista frontal padrao | | ci-iso | Vista isometrica com U, F e R | | ci-top | Vista superior (nao se aplica ao Clock; use ci-dual) | | ci-net | Vista planificada | | ci-dual | Vista dupla quando suportada | | ci-back | Face traseira do Clock |

Modos de cor

| Classe | Descricao | |--------|-----------| | ci-colorful | Cores WCA padrao | | ci-mono | Escala de cinza / cor única | | ci-outlined | Apenas contornos |

Estado, visual e interacao

| Classe | Descricao | |--------|-----------| | ci-scrambled | Gera scramble aleatório ao carregar | | ci-oll | Ativa modo OLL (vista top; NxN, FTO e Skewb destacam adesivos amarelos, demais em cinza; Megaminx destaca face U) | | ci-inverse | Aplica o inverso de data-ci-alg (menos Clock) | | ci-labels | Mostra letras das faces | | ci-interactive | Permite arrastar para girar em 3D | | ci-animate | Player passo a passo para data-ci-alg |

Tamanhos

Suporta ci-1x ate ci-10x, e também:

ci-15x, ci-20x, ci-30x, ci-40x, ci-50x

Atributos data-*

| Atributo | Descricao | Exemplo | |----------|-----------|---------| | data-ci-rotate | Rotacao 3D em graus: x,y | "20,40" | | data-ci-alg | Algoritmo a ser aplicado | "R U R' U'", "(3,0) /" | | data-ci-state | Estado manual | ver formatos abaixo | | data-ci-rounded | Arredondamento do sticker (0 a 0.5) | "0.25" | | data-ci-color | Cor customizada para mono/outlined | "#e06c75" | | data-ci-scheme | Esquema de cores | "pastel" | | data-ci-theme | Forca tema light ou dark | "light" | | data-ci-clock-front | Cor do lado frontal do Clock | "#1a3a5c" | | data-ci-clock-back | Cor do lado traseiro do Clock | "#5c1a1a" | | data-ci-highlight | Destaca pecas ou stickers | "UFR,UF" | | data-ci-arrows | Setas entre stickers | "U0>U2" | | data-ci-label-size | Multiplicador do tamanho das labels | "1.5" | | data-ci-arrow-size | Multiplicador do tamanho das setas | "2" |

Algoritmos inversos

Use ci-inverse junto com data-ci-alg.

Exemplos:

• R vira R'
• R U vira U' R'
• U L' R vira R' L U'
• Square-1: (3,0) / (0,-3) / vira / (0,3) / (-3,0)

Nao se aplica ao clock.

Rotacoes de cubo (NxN e Skewb)

Em data-ci-alg, use x, y, z com opcional ' ou 2 para girar o puzzle inteiro antes/entre movimentos de face.

Exemplos:

• x2 R U R' U' no Skewb
• y R U R' F'
• z2 F R U R' U' F'

Funciona com ci-inverse, ci-animate e ci-steps.

Formatos de estado

Cubos NxN

"WWWWWWWWW,RRRRRRRRR,GGGGGGGGG,OOOOOOOOO,BBBBBBBBB,YYYYYYYYY"

Faces na ordem U,R,F,L,B,D.

Pyraminx

"GGGGGGGGG,BBBBBBBBB,RRRRRRRRR,YYYYYYYYY"

Faces na ordem F,R,L,D (4 faces triangulares). Formatos legados com 5 faces (U,F,R,L,D) ignoram a primeira face.

Tips: use letras minúsculas u, l, r, b (com ' opcional) para girar só a ponta de 120°. Letras maiúsculas U, L, R, B giram a camada inteira incluindo a ponta.

Clock

"front_hours/back_hours/pins"

Cada lado possui 9 valores de 0 a 11. pins usa 4 digitos binarios.

Square-1

"face_U_pieces/face_D_pieces"

• C = corner = 2 unidades
• E = edge = 1 unidade
• cada face soma 12
• total: 8C + 8E

Formato expandido:

• quina: cor:C:lado1:lado2
• aresta: cor:E:lado

Por padrao mostra so a face U. Use ci-net para a vista planificada (U + barra + D).

FTO

"FACE_U,FACE_R,FACE_F,FACE_L,FACE_D,FACE_B,FACE_BR,FACE_BL"

Cada face possui 9 stickers.

API JavaScript

// Renderizar programaticamente
var svg = CubeIcons.render({
  type: "3x3",
  angle: "iso",
  mono: false,
  scrambled: true
});

// Processar todos os elementos .ci
CubeIcons.processAll();

// Observar novos elementos no DOM
CubeIcons.watch();

// Criar estados
var state = CubeIcons.createState.nxn(3);
CubeIcons.applyAlgorithm(state, "R U R' U'", 3);

CubeIcons.createState.nxn(n);
CubeIcons.createState.skewb();
CubeIcons.createState.pyraminx();
CubeIcons.createState.megaminx();
CubeIcons.createState.fto();
CubeIcons.createState.square1();
CubeIcons.createState.clock();

CubeIcons.applySquare1Algorithm(state, "(3,0) /");
CubeIcons.getInvertedAlgorithm("3x3", "R U");

// Cores
CubeIcons.COLORS;
CubeIcons.setScheme("pastel");
CubeIcons.COLOR_SCHEMES;

// Tema
CubeIcons.setTheme("auto");
CubeIcons.setTheme("light");
CubeIcons.setTheme("dark");

Uso inline

<p>Eu resolvo o <i class="ci ci-3x3 ci-iso ci-2x"></i> em menos de 20 segundos.</p>

Cores WCA

| Letra | Cor | Face | |------|-----|------| | W | Branco (#ffffff) | U | | R | Vermelho (#b71234) | R | | G | Verde (#009b48) | F | | O | Laranja (#ff5800) | L | | B | Azul (#0046ad) | B | | Y | Amarelo (#ffd500) | D |

Compatibilidade

Funciona nos navegadores modernos: Chrome, Firefox, Safari e Edge.

Changelog

• 1.0 - Inicial

• 1.1 - Correção de bugs

  • Ajustes internos de código
  • Ajuste de cores monokai pra megaminx
  • Adicionado movimentos de tips do pyraminx
  • Adicionado visão top para skewb e OLL mode
  • Adicionado rotação XYZ para os cubos
  • Correção de erros de ângulo gerando imagens quebradas
  • Correção da visão planificada de 4x4
  • Correção de slices em cubos pares>3
  • Correção de wide moves de tamanho maior que o cubo
  • Correção do input de algoritmos quando recebia um valor inesperado
  • Correção de movimentos minúsculos e maiúsculos
  • Correção de movimentos D, DL, DR, DF, DBL e DBR no megaminx
  • Correção de labels no megaminx
  • Corrigir rounded nos demais puzzles
  • Correção da visualização do FTO
  • Correção dos algoritmos no builder do Square-1

• Expectativas para próxima versão:

  • Correção da visualização 3D do square-1
  • Uniformizar o tamanho dos ícones

Agradecimentos

• Felipe Rojas (2009GARC02) as Tester

English Notes

This README is now Portuguese-first. The project still exposes the same API, file names, class names, and attributes documented above.

Minified builds:

• npm run build
• npm run build:js
• npm run build:css

Licenca

MIT