Refactor: Remove unused components (Main, CubeCSS, etc.), utils (DeepCube, Matrix4), dependencies (matrix-js, utils), and untrack dist folder
All checks were successful
Deploy to Production / deploy (push) Successful in 9s
All checks were successful
Deploy to Production / deploy (push) Successful in 9s
This commit is contained in:
1
dist/assets/Cube.worker-BFklK0dH.js
vendored
1
dist/assets/Cube.worker-BFklK0dH.js
vendored
File diff suppressed because one or more lines are too long
72
dist/assets/index-D2BDE6sW.js
vendored
72
dist/assets/index-D2BDE6sW.js
vendored
File diff suppressed because one or more lines are too long
1
dist/assets/index-GD5U86y_.css
vendored
1
dist/assets/index-GD5U86y_.css
vendored
@@ -1 +0,0 @@
|
|||||||
:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-gradient: radial-gradient(circle at center, #2b2b2b 0%, #000000 100%);--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--text-color: #ffffff;--text-strong: #ffffff;--text-secondary: rgba(255, 255, 255, .85);--text-muted: rgba(255, 255, 255, .7);--accent-cyan: #00f2fe;--accent-purple: #4facfe;--primary-accent: #00f2fe;--title-glow: rgba(0, 255, 255, .2);--toggle-btn-border: rgba(255, 255, 255, .2);--panel-bg: rgba(255, 255, 255, .05);--panel-border: rgba(255, 255, 255, .1);--panel-shadow: 0 4px 15px rgba(0, 0, 0, .2)}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;height:100vh;flex-direction:column;background:var(--bg-gradient);background-attachment:fixed;color:var(--text-color);overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.smart-cube-container[data-v-dec8c361]{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;background:transparent;perspective:1000px}.scene[data-v-dec8c361]{position:relative;width:0;height:0;transform-style:preserve-3d}.cube[data-v-dec8c361]{position:relative;transform-style:preserve-3d}.cubie[data-v-dec8c361]{position:absolute;width:100px;height:100px;margin-left:-50px;margin-top:-50px;transform-style:preserve-3d}.sticker[data-v-dec8c361]{position:absolute;width:98px;height:98px;top:1px;left:1px;border-radius:8px;box-shadow:inset 0 0 10px #00000080;border:1px solid rgba(0,0,0,.2);backface-visibility:hidden}.sticker.up[data-v-dec8c361]{transform:rotateX(90deg) translateZ(50px)}.sticker.down[data-v-dec8c361]{transform:rotateX(-90deg) translateZ(50px)}.sticker.front[data-v-dec8c361]{transform:translateZ(50px)}.sticker.back[data-v-dec8c361]{transform:rotateY(180deg) translateZ(50px)}.sticker.left[data-v-dec8c361]{transform:rotateY(-90deg) translateZ(50px)}.sticker.right[data-v-dec8c361]{transform:rotateY(90deg) translateZ(50px)}.white[data-v-dec8c361]{background:#e0e0e0}.yellow[data-v-dec8c361]{background:#ffd500}.green[data-v-dec8c361]{background:#009e60}.blue[data-v-dec8c361]{background:#0051ba}.orange[data-v-dec8c361]{background:#ff5800}.red[data-v-dec8c361]{background:#c41e3a}.black[data-v-dec8c361]{background:#111;display:none}.navbar[data-v-bc85c255]{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:50px;width:100%;box-sizing:border-box;position:absolute;top:0;left:0;z-index:100;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none}.logo-container[data-v-bc85c255]{display:flex;align-items:center;gap:10px}.logo-text[data-v-bc85c255]{font-size:1.2rem;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(0,242,254,.5)}.nav-container[data-v-bc85c255]{display:flex;gap:15px;align-items:center}.nav-btn[data-v-bc85c255]{background:transparent;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;padding:8px;border-radius:50%;transition:all .3s ease}.nav-btn[data-v-bc85c255]:hover{background:#fff3}.app-footer[data-v-651f6ae4]{width:100%;padding:0 20px;height:40px;display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;left:0;z-index:10;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:none;box-shadow:none;color:var(--text-muted);box-sizing:border-box}.footer-content[data-v-651f6ae4]{display:flex;align-items:center;gap:10px}p[data-v-651f6ae4]{font-size:.8rem;letter-spacing:.5px;margin:0}.app-content[data-v-c7d7a511]{flex:1;display:flex;justify-content:center;align-items:center;width:100%;padding:0;position:relative;z-index:1;user-select:none;-webkit-user-select:none}
|
|
||||||
55
dist/assets/rubic-cube-6wQ3YEkf.svg
vendored
55
dist/assets/rubic-cube-6wQ3YEkf.svg
vendored
@@ -1,55 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
||||||
<defs>
|
|
||||||
<style>
|
|
||||||
.face { stroke: #000; stroke-width: 6; stroke-linejoin: round; }
|
|
||||||
.top { fill: #ffffff; }
|
|
||||||
.left { fill: #009e60; }
|
|
||||||
.right { fill: #c41e3a; }
|
|
||||||
</style>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- Top Face -->
|
|
||||||
<g class="face top">
|
|
||||||
<path d="M256 80 L309.33 106.67 L256 133.33 L202.67 106.67 Z" />
|
|
||||||
<path d="M309.33 106.67 L362.67 133.33 L309.33 160 L256 133.33 Z" />
|
|
||||||
<path d="M362.67 133.33 L416 160 L362.67 186.67 L309.33 160 Z" />
|
|
||||||
|
|
||||||
<path d="M202.67 106.67 L256 133.33 L202.67 160 L149.33 133.33 Z" />
|
|
||||||
<path d="M256 133.33 L309.33 160 L256 186.67 L202.67 160 Z" />
|
|
||||||
<path d="M309.33 160 L362.67 186.67 L309.33 213.33 L256 186.67 Z" />
|
|
||||||
|
|
||||||
<path d="M149.33 133.33 L202.67 160 L149.33 186.67 L96 160 Z" />
|
|
||||||
<path d="M202.67 160 L256 186.67 L202.67 213.33 L149.33 186.67 Z" />
|
|
||||||
<path d="M256 186.67 L309.33 213.33 L256 240 L202.67 213.33 Z" />
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Left Face -->
|
|
||||||
<g class="face left">
|
|
||||||
<path d="M96 160 L149.33 186.67 L149.33 248 L96 221.33 Z" />
|
|
||||||
<path d="M149.33 186.67 L202.67 213.33 L202.67 274.67 L149.33 248 Z" />
|
|
||||||
<path d="M202.67 213.33 L256 240 L256 301.33 L202.67 274.67 Z" />
|
|
||||||
|
|
||||||
<path d="M96 221.33 L149.33 248 L149.33 309.33 L96 282.67 Z" />
|
|
||||||
<path d="M149.33 248 L202.67 274.67 L202.67 336 L149.33 309.33 Z" />
|
|
||||||
<path d="M202.67 274.67 L256 301.33 L256 362.67 L202.67 336 Z" />
|
|
||||||
|
|
||||||
<path d="M96 282.67 L149.33 309.33 L149.33 370.67 L96 344 Z" />
|
|
||||||
<path d="M149.33 309.33 L202.67 336 L202.67 397.33 L149.33 370.67 Z" />
|
|
||||||
<path d="M202.67 336 L256 362.67 L256 424 L202.67 397.33 Z" />
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Right Face -->
|
|
||||||
<g class="face right">
|
|
||||||
<path d="M256 240 L309.33 213.33 L309.33 274.67 L256 301.33 Z" />
|
|
||||||
<path d="M309.33 213.33 L362.67 186.67 L362.67 248 L309.33 274.67 Z" />
|
|
||||||
<path d="M362.67 186.67 L416 160 L416 221.33 L362.67 248 Z" />
|
|
||||||
|
|
||||||
<path d="M256 301.33 L309.33 274.67 L309.33 336 L256 362.67 Z" />
|
|
||||||
<path d="M309.33 274.67 L362.67 248 L362.67 309.33 L309.33 336 Z" />
|
|
||||||
<path d="M362.67 248 L416 221.33 L416 282.67 L362.67 309.33 Z" />
|
|
||||||
|
|
||||||
<path d="M256 362.67 L309.33 336 L309.33 397.33 L256 424 Z" />
|
|
||||||
<path d="M309.33 336 L362.67 309.33 L362.67 370.67 L309.33 397.33 Z" />
|
|
||||||
<path d="M362.67 309.33 L416 282.67 L416 344 L362.67 370.67 Z" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.3 KiB |
14
dist/index.html
vendored
14
dist/index.html
vendored
@@ -1,14 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/assets/rubic-cube-6wQ3YEkf.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Rubic Cube</title>
|
|
||||||
<script type="module" crossorigin src="/assets/index-D2BDE6sW.js"></script>
|
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-GD5U86y_.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
13
package-lock.json
generated
13
package-lock.json
generated
@@ -8,9 +8,7 @@
|
|||||||
"name": "rubic-cube",
|
"name": "rubic-cube",
|
||||||
"version": "0.0.27",
|
"version": "0.0.27",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@gkucmierz/utils": "^1.28.3",
|
|
||||||
"lucide-vue-next": "^0.564.0",
|
"lucide-vue-next": "^0.564.0",
|
||||||
"matrix-js": "^1.8.0",
|
|
||||||
"rubiks-js": "^1.0.0",
|
"rubiks-js": "^1.0.0",
|
||||||
"vue": "^3.5.13"
|
"vue": "^3.5.13"
|
||||||
},
|
},
|
||||||
@@ -490,12 +488,6 @@
|
|||||||
"node": ">=18"
|
"node": ">=18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@gkucmierz/utils": {
|
|
||||||
"version": "1.28.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/@gkucmierz/utils/-/utils-1.28.3.tgz",
|
|
||||||
"integrity": "sha512-4qbEGTrHnj0pdeY72MHbuOzM9hugZiyhTMfy7ZijkBQN+fMGVc7OJ7CM02t1KBQDFl2bQNb7AF9KZCm3wn09YQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@jridgewell/sourcemap-codec": {
|
"node_modules/@jridgewell/sourcemap-codec": {
|
||||||
"version": "1.5.0",
|
"version": "1.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
|
||||||
@@ -987,11 +979,6 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.5.0"
|
"@jridgewell/sourcemap-codec": "^1.5.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/matrix-js": {
|
|
||||||
"version": "1.8.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/matrix-js/-/matrix-js-1.8.0.tgz",
|
|
||||||
"integrity": "sha512-2PHn6veiSf7aS/VBhdgrUVYCjVBkaAwFtIuXUnrHduKbSNpFHYzkdPYPgKI95idqFMKKEieYoMglimo2YGIapQ=="
|
|
||||||
},
|
|
||||||
"node_modules/nanoid": {
|
"node_modules/nanoid": {
|
||||||
"version": "3.3.11",
|
"version": "3.3.11",
|
||||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
||||||
|
|||||||
@@ -9,9 +9,7 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@gkucmierz/utils": "^1.28.3",
|
|
||||||
"lucide-vue-next": "^0.564.0",
|
"lucide-vue-next": "^0.564.0",
|
||||||
"matrix-js": "^1.8.0",
|
|
||||||
"rubiks-js": "^1.0.0",
|
"rubiks-js": "^1.0.0",
|
||||||
"vue": "^3.5.13"
|
"vue": "^3.5.13"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,39 +0,0 @@
|
|||||||
import { DeepCube } from '../src/utils/DeepCube.js';
|
|
||||||
|
|
||||||
console.log('🔥 Starting DeepCube Integrity Verification (1,000,000 Moves) 🔥');
|
|
||||||
|
|
||||||
const cube = new DeepCube();
|
|
||||||
const MOVES = ["U", "D", "L", "R", "F", "B", "U'", "D'", "L'", "R'", "F'", "B'", "U2", "D2", "L2", "R2", "F2", "B2"];
|
|
||||||
const ITERATIONS = 1000000;
|
|
||||||
const CHECK_INTERVAL = 100000;
|
|
||||||
|
|
||||||
const startTime = performance.now();
|
|
||||||
|
|
||||||
for (let i = 0; i < ITERATIONS; i++) {
|
|
||||||
const move = MOVES[Math.floor(Math.random() * MOVES.length)];
|
|
||||||
cube.move(move);
|
|
||||||
|
|
||||||
// Check integrity
|
|
||||||
const result = cube.validate();
|
|
||||||
if (!result.valid) {
|
|
||||||
console.error(`❌ CRITICAL FAILURE at iteration ${i} after move ${move}`);
|
|
||||||
console.error(result.errors);
|
|
||||||
console.error('State Dump:', {
|
|
||||||
cp: cube.cp,
|
|
||||||
co: cube.co,
|
|
||||||
ep: cube.ep,
|
|
||||||
eo: cube.eo
|
|
||||||
});
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((i + 1) % CHECK_INTERVAL === 0) {
|
|
||||||
const elapsed = ((performance.now() - startTime) / 1000).toFixed(2);
|
|
||||||
console.log(`✅ ${i + 1} moves verified... (Time: ${elapsed}s)`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const totalTime = ((performance.now() - startTime) / 1000).toFixed(2);
|
|
||||||
console.log(`\n🎉 SUCCESS! Verified 1,000,000 moves without logical corruption.`);
|
|
||||||
console.log(`Total Time: ${totalTime}s`);
|
|
||||||
console.log(`Moves per second: ${Math.round(ITERATIONS / totalTime)}`);
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
|
|
||||||
<script setup>
|
|
||||||
import { useDebug } from '../composables/useDebug'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const { settings } = useDebug()
|
|
||||||
const isOpen = ref(true)
|
|
||||||
|
|
||||||
const toggle = () => isOpen.value = !isOpen.value
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="debug-panel" :class="{ open: isOpen }">
|
|
||||||
<div class="header" @click="toggle">
|
|
||||||
<span>🛠️ Debug Config</span>
|
|
||||||
<span>{{ isOpen ? '▼' : '▲' }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="isOpen" class="content">
|
|
||||||
<div class="section">
|
|
||||||
<h3>View Rotation</h3>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model="settings.viewRotation.invertX"> Invert X (Up/Down)
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model="settings.viewRotation.invertY"> Invert Y (Left/Right)
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Speed: <input type="number" step="0.1" v-model="settings.viewRotation.speed">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h3>Drag Mappings (Sign)</h3>
|
|
||||||
<p class="hint">Adjust signs (-1 or 1) to correct drag direction</p>
|
|
||||||
|
|
||||||
<div class="face-group" v-for="(val, face) in settings.dragMapping" :key="face">
|
|
||||||
<strong>{{ face.toUpperCase() }}</strong>
|
|
||||||
<div class="controls">
|
|
||||||
<label>X: <input type="number" :step="2" :min="-1" :max="1" v-model="settings.dragMapping[face].x"></label>
|
|
||||||
<label>Y: <input type="number" :step="2" :min="-1" :max="1" v-model="settings.dragMapping[face].y"></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h3>Physics</h3>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model="settings.physics.enabled"> Inertia & Snap
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.debug-panel {
|
|
||||||
position: fixed;
|
|
||||||
top: 70px;
|
|
||||||
right: 20px;
|
|
||||||
width: 250px;
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
z-index: 9999;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
|
||||||
max-height: 90vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
padding: 10px;
|
|
||||||
background: #333;
|
|
||||||
border-radius: 8px 8px 0 0;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-weight: bold;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 10px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border-bottom: 1px solid #444;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
color: #aaa;
|
|
||||||
font-size: 11px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"] {
|
|
||||||
width: 40px;
|
|
||||||
background: #222;
|
|
||||||
border: 1px solid #444;
|
|
||||||
color: #fff;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.face-group {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
background: #222;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hint {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #888;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -7,9 +7,6 @@ const version = __APP_VERSION__;
|
|||||||
<footer class="app-footer glass-panel">
|
<footer class="app-footer glass-panel">
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<p>© {{ currentYear }} Rubic Cube. Wersja {{ version }}</p>
|
<p>© {{ currentYear }} Rubic Cube. Wersja {{ version }}</p>
|
||||||
<div class="social-links">
|
|
||||||
<!-- Placeholder for social links if needed -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,188 +0,0 @@
|
|||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { useInteractionLogger } from '../composables/useInteractionLogger'
|
|
||||||
|
|
||||||
const { logs, isRecording, clearLogs, getRecentLogsForAnalysis } = useInteractionLogger()
|
|
||||||
const isOpen = ref(true)
|
|
||||||
const copied = ref(false)
|
|
||||||
|
|
||||||
const toggle = () => isOpen.value = !isOpen.value
|
|
||||||
|
|
||||||
const copyReport = async () => {
|
|
||||||
const report = getRecentLogsForAnalysis(50)
|
|
||||||
const context = `
|
|
||||||
### User Interaction Report
|
|
||||||
Please analyze the following interaction logs to identify the issue.
|
|
||||||
Focus on: Drag direction, Active Layer, Rotation Mapping, and State changes.
|
|
||||||
|
|
||||||
\`\`\`json
|
|
||||||
${report}
|
|
||||||
\`\`\`
|
|
||||||
`
|
|
||||||
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(context)
|
|
||||||
copied.value = true
|
|
||||||
setTimeout(() => copied.value = false, 2000)
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to copy logs', err)
|
|
||||||
alert('Failed to copy to clipboard. Check console.')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="interaction-replay">
|
|
||||||
<div class="header" @click="toggle" :class="{ recording: isRecording }">
|
|
||||||
<span class="indicator">●</span>
|
|
||||||
<span>Logger ({{ logs.length }})</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="isOpen" class="panel">
|
|
||||||
<div class="actions">
|
|
||||||
<button @click="copyReport" :class="{ success: copied }">
|
|
||||||
{{ copied ? 'Copied!' : '📋 Copy Report for AI' }}
|
|
||||||
</button>
|
|
||||||
<button @click="clearLogs" class="secondary">Clear</button>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" v-model="isRecording"> Rec
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="log-list">
|
|
||||||
<div v-for="log in logs.slice().reverse()" :key="log.id" class="log-item">
|
|
||||||
<span class="time">{{ new Date(log.timestamp).toISOString().substr(14, 9) }}</span>
|
|
||||||
<span class="type" :class="log.type">{{ log.type }}</span>
|
|
||||||
<pre class="data">{{ log.data }}</pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.interaction-replay {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 50px;
|
|
||||||
right: 10px;
|
|
||||||
z-index: 10000;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
background: #222;
|
|
||||||
color: #fff;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
||||||
border: 1px solid #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header.recording .indicator {
|
|
||||||
color: #ff4444;
|
|
||||||
animation: pulse 1.5s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indicator {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0% { opacity: 1; }
|
|
||||||
50% { opacity: 0.5; }
|
|
||||||
100% { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 40px;
|
|
||||||
right: 0;
|
|
||||||
width: 350px;
|
|
||||||
height: 400px;
|
|
||||||
background: rgba(0, 0, 0, 0.9);
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #444;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
padding: 10px;
|
|
||||||
border-bottom: 1px solid #444;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
background: #1a1a1a;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
flex: 1;
|
|
||||||
padding: 6px;
|
|
||||||
background: #007acc;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.success {
|
|
||||||
background: #28a745;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.secondary {
|
|
||||||
background: #444;
|
|
||||||
flex: 0 0 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-list {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-item {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
border-bottom: 1px solid #333;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time {
|
|
||||||
color: #666;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type {
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 2px 4px;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type.drag-start { color: #4fc3f7; }
|
|
||||||
.type.drag-update { color: #ffd54f; }
|
|
||||||
.type.drag-end { color: #81c784; }
|
|
||||||
.type.rotation { color: #ba68c8; }
|
|
||||||
|
|
||||||
.data {
|
|
||||||
margin: 4px 0 0 0;
|
|
||||||
color: #aaa;
|
|
||||||
font-size: 10px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { useRenderer } from '../composables/useRenderer'
|
|
||||||
import { useCube } from '../composables/useCube'
|
|
||||||
import CubeCSS from './renderers/CubeCSS.vue'
|
|
||||||
import CubeSVG from './renderers/CubeSVG.vue'
|
|
||||||
import CubeCanvas from './renderers/CubeCanvas.vue'
|
|
||||||
import CubeRubiksJS from './renderers/CubeRubiksJS.vue'
|
|
||||||
|
|
||||||
const { activeRenderer, RENDERERS } = useRenderer()
|
|
||||||
const { cubeState } = useCube()
|
|
||||||
|
|
||||||
const currentRendererComponent = computed(() => {
|
|
||||||
switch (activeRenderer.value) {
|
|
||||||
case RENDERERS.CSS:
|
|
||||||
return CubeCSS
|
|
||||||
case RENDERERS.SVG:
|
|
||||||
return CubeSVG
|
|
||||||
case RENDERERS.CANVAS:
|
|
||||||
return CubeCanvas
|
|
||||||
case RENDERERS.RUBIKS_JS:
|
|
||||||
return CubeRubiksJS
|
|
||||||
default:
|
|
||||||
return CubeCSS
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const formattedState = computed(() => {
|
|
||||||
if (!cubeState.value) return '{}'
|
|
||||||
|
|
||||||
// Custom formatter to keep faces compact
|
|
||||||
const s = cubeState.value
|
|
||||||
const faces = Object.keys(s)
|
|
||||||
|
|
||||||
// Helper to shorten colors
|
|
||||||
const shortColor = (c) => c && typeof c === 'string' ? c[0].toUpperCase() : '-'
|
|
||||||
|
|
||||||
let out = '{\n'
|
|
||||||
faces.forEach((face, i) => {
|
|
||||||
const matrix = s[face]
|
|
||||||
// Format as ["WWW", "WWW", "WWW"]
|
|
||||||
const rows = matrix.map(row => `"${row.map(shortColor).join('')}"`).join(', ')
|
|
||||||
out += ` "${face}": [ ${rows} ]`
|
|
||||||
if (i < faces.length - 1) out += ','
|
|
||||||
out += '\n'
|
|
||||||
})
|
|
||||||
out += '}'
|
|
||||||
return out
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="renderer-container">
|
|
||||||
<component :is="currentRendererComponent" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="state-panel">
|
|
||||||
<h3>Cube State</h3>
|
|
||||||
<pre>{{ formattedState }}</pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 2rem;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 2rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.renderer-container {
|
|
||||||
flex: 2;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state-panel {
|
|
||||||
flex: 1;
|
|
||||||
max-width: 400px;
|
|
||||||
background: rgba(0, 0, 0, 0.05);
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin: 0;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,561 +0,0 @@
|
|||||||
/**
|
|
||||||
* Deep Mechanical Rubik's Cube Model (Group Theory Approach)
|
|
||||||
*
|
|
||||||
* State Representation:
|
|
||||||
* - Corners (0-7): Permutation (p) and Orientation (o: 0..2)
|
|
||||||
* - Edges (0-11): Permutation (p) and Orientation (o: 0..1)
|
|
||||||
*
|
|
||||||
* Indexes:
|
|
||||||
* Corners:
|
|
||||||
* 0: URF, 1: UFL, 2: ULB, 3: UBR
|
|
||||||
* 4: DFR, 5: DLF, 6: DBL, 7: DRB
|
|
||||||
*
|
|
||||||
* Edges:
|
|
||||||
* 0: UR, 1: UF, 2: UL, 3: UB
|
|
||||||
* 4: DR, 5: DF, 6: DL, 7: DB
|
|
||||||
* 8: FR, 9: FL, 10: BL, 11: BR
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const MOVES = {
|
|
||||||
// Definitions of basic moves: { corners: [indices], edges: [indices], co: [deltas], eo: [deltas] }
|
|
||||||
// Only defining Permutation Cycles and Orientation Changes.
|
|
||||||
// Permutation: p[i] moves to p[move[i]]? Or position i takes piece from move[i]?
|
|
||||||
// Let's use: "Piece at position i moves to position move[i]". (Isomorphism to S_n)
|
|
||||||
|
|
||||||
// Actually, standard array rep: state.p[i] is "which piece is at position i".
|
|
||||||
// Move M maps position i to M[i].
|
|
||||||
// So new_state.p[M[i]] = old_state.p[i].
|
|
||||||
// Or new_state.p[i] = old_state.p[M_inv[i]].
|
|
||||||
|
|
||||||
// Let's stick to: "Move U moves pieces currently at indices ... to indices ..."
|
|
||||||
// Corners: URF(0) -> UBR(3) -> ULB(2) -> UFL(1) -> URF(0) ?
|
|
||||||
// Move U (Clockwise):
|
|
||||||
// 0 (URF) -> 3 (UBR) ? No. U move pushes URF to position UFL?
|
|
||||||
// Let's visualize Top Face (U):
|
|
||||||
// B
|
|
||||||
// 2 3
|
|
||||||
// L 1 0 R
|
|
||||||
// F
|
|
||||||
// U (CW) turns: 0->1, 1->2, 2->3, 3->0? No.
|
|
||||||
// U (CW) turns: Right to Front.
|
|
||||||
// URF(0) is Front-Right. UFL(1) is Front-Left.
|
|
||||||
// U moves Right face stuff to Front face? NO.
|
|
||||||
// U moves Front face stuff to Left face.
|
|
||||||
// So 0 (URF) -> 1 (UFL)? No.
|
|
||||||
// URF is at corner of U, R, F faces.
|
|
||||||
// After U CW, it goes to corner of U, F, L faces. (UFL).
|
|
||||||
// So 0 -> 1.
|
|
||||||
// 1 (UFL) -> 2 (ULB).
|
|
||||||
// 2 (ULB) -> 3 (UBR).
|
|
||||||
// 3 (UBR) -> 0 (URF).
|
|
||||||
// So cycle is (0 1 2 3).
|
|
||||||
// Permutation Table P: P[0]=1, P[1]=2, P[2]=3, P[3]=0.
|
|
||||||
// Applied to state: "Piece at 0 goes to 1".
|
|
||||||
|
|
||||||
// Orientations CO:
|
|
||||||
// U moves do not change Corner Orientation (relative to U/D).
|
|
||||||
// So co delta is 0 for all.
|
|
||||||
|
|
||||||
// Edges U:
|
|
||||||
// 0(UR), 1(UF), 2(UL), 3(UB).
|
|
||||||
// U moves UR to UF? No.
|
|
||||||
// UR is Right. UF is Front.
|
|
||||||
// U CW moves Right to Front? No.
|
|
||||||
// U CW moves Front to Left.
|
|
||||||
// So UF(1) -> UL(2).
|
|
||||||
// UL(2) -> UB(3).
|
|
||||||
// UB(3) -> UR(0).
|
|
||||||
// UR(0) -> UF(1).
|
|
||||||
// Cycle: (0 1 2 3).
|
|
||||||
// P[0]=1, etc.
|
|
||||||
|
|
||||||
// Moves Definitions (Target Positions)
|
|
||||||
U: {
|
|
||||||
cp: [1, 2, 3, 0, 4, 5, 6, 7],
|
|
||||||
co: [0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
ep: [1, 2, 3, 0, 4, 5, 6, 7, 8, 9, 10, 11],
|
|
||||||
eo: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
},
|
|
||||||
D: {
|
|
||||||
// D (CW) looking from bottom.
|
|
||||||
// DFR(4), DLF(5), DBL(6), DRB(7).
|
|
||||||
// D CW moves Front to Right.
|
|
||||||
// DFR(4) -> DRB(7).
|
|
||||||
// DRB(7) -> DBL(6).
|
|
||||||
// DBL(6) -> DLF(5).
|
|
||||||
// DLF(5) -> DFR(4).
|
|
||||||
// Cycle: (4 7 6 5). (Wait: 4->7, 7->6, 6->5, 5->4).
|
|
||||||
// Indices: [0,1,2,3, 7,4,5,6] (Wait. 4->7 means P[4]=7? No.
|
|
||||||
// P array usually means: P[i] is the location where piece i goes? OR where piece at i comes from?
|
|
||||||
// Standard multiplication: (A * B)[i] = A[B[i]].
|
|
||||||
// Let's define Move P as "Content of slot i comes from slot P[i]".
|
|
||||||
// If 0 goes to 1. Then New[1] = Old[0].
|
|
||||||
// So P[1] = 0.
|
|
||||||
// In our U example: 0->1. So P[1]=0.
|
|
||||||
// Let's verify U array [1,2,3,0...]
|
|
||||||
// P[0]=1 (Content of 0 comes from 1?). No.
|
|
||||||
// The previous array was [1, 2, 3, 0].
|
|
||||||
// If it meant "0 goes to 1", then New[1] = Old[0].
|
|
||||||
// Let's stick to: "Piece i goes to Position Move[i]".
|
|
||||||
// Implementation: newP[Move[i]] = oldP[i].
|
|
||||||
// U: 0->1, 1->2, 2->3, 3->0.
|
|
||||||
// Array: [1, 2, 3, 0].
|
|
||||||
// This matches "i goes to Move[i]".
|
|
||||||
|
|
||||||
// D: 4->7, 7->6, 6->5, 5->4.
|
|
||||||
// P[4]=7, P[5]=4, P[6]=5, P[7]=6.
|
|
||||||
cp: [0, 1, 2, 3, 7, 4, 5, 6],
|
|
||||||
co: [0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
// Edges: DR(4), DF(5), DL(6), DB(7).
|
|
||||||
// D moves Front to Right.
|
|
||||||
// DF(5) -> DR(4).
|
|
||||||
// DR(4) -> DB(7).
|
|
||||||
// DB(7) -> DL(6).
|
|
||||||
// DL(6) -> DF(5).
|
|
||||||
// Cycle: 5->4, 4->7, 7->6, 6->5.
|
|
||||||
// P[4]=7, P[5]=4, P[6]=5, P[7]=6.
|
|
||||||
ep: [0, 1, 2, 3, 7, 4, 5, 6, 8, 9, 10, 11],
|
|
||||||
eo: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
},
|
|
||||||
L: {
|
|
||||||
// L (CW)
|
|
||||||
// Corners: UFL(1), DLF(5), DBL(6), ULB(2).
|
|
||||||
// L moves Up to Front.
|
|
||||||
// UFL(1) -> DLF(5).
|
|
||||||
// DLF(5) -> DBL(6).
|
|
||||||
// DBL(6) -> ULB(2).
|
|
||||||
// ULB(2) -> UFL(1).
|
|
||||||
// Cycle: 1->5, 5->6, 6->2, 2->1.
|
|
||||||
// P[1]=5, P[2]=1, P[5]=6, P[6]=2.
|
|
||||||
cp: [0, 5, 1, 3, 4, 6, 2, 7],
|
|
||||||
// Twist: L/R moves twist corners.
|
|
||||||
// UFL(1) moves to DLF. (+1: CW). WHITE U face moves to F face (CW rotation relative to corner axis?).
|
|
||||||
// DLF(5) moves to DBL. (-1: CCW).
|
|
||||||
// DBL(6) moves to ULB. (+1).
|
|
||||||
// ULB(2) moves to UFL. (-1).
|
|
||||||
// Values: 1 -> +1, 5 -> -1, 6 -> +1, 2 -> -1.
|
|
||||||
co: [0, 1, 2, 0, 0, 2, 1, 0], // 2 is -1 mod 3.
|
|
||||||
|
|
||||||
// Edges: UL(2), FL(9), DL(6), BL(10).
|
|
||||||
// U->F.
|
|
||||||
// UL(2) -> FL(9).
|
|
||||||
// FL(9) -> DL(6).
|
|
||||||
// DL(6) -> BL(10).
|
|
||||||
// BL(10) -> UL(2).
|
|
||||||
// P[2]=9, P[6]=10, P[9]=6, P[10]=2.
|
|
||||||
ep: [0, 1, 9, 3, 4, 5, 10, 7, 8, 6, 2, 11],
|
|
||||||
// Orientation: L/R do NOT flip edges in standard U/D rep.
|
|
||||||
eo: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
},
|
|
||||||
R: {
|
|
||||||
// R (CW)
|
|
||||||
// Corners: URF(0), UBR(3), DRB(7), DFR(4).
|
|
||||||
// R moves Up to Back.
|
|
||||||
// URF(0) -> UBR(3).
|
|
||||||
// UBR(3) -> DRB(7).
|
|
||||||
// DRB(7) -> DFR(4).
|
|
||||||
// DFR(4) -> URF(0).
|
|
||||||
// Cycle: 0->3, 3->7, 7->4, 4->0.
|
|
||||||
// P[0]=3, P[3]=7, P[4]=0, P[7]=4.
|
|
||||||
cp: [3, 1, 2, 7, 0, 5, 6, 4],
|
|
||||||
// Twist:
|
|
||||||
// URF(0) -> UBR. (-1).
|
|
||||||
// UBR(3) -> DRB. (+1).
|
|
||||||
// DRB(7) -> DFR. (-1).
|
|
||||||
// DFR(4) -> URF. (+1).
|
|
||||||
// 0:2, 3:1, 7:2, 4:1.
|
|
||||||
co: [2, 0, 0, 1, 1, 0, 0, 2],
|
|
||||||
|
|
||||||
// Edges: UR(0), BR(11), DR(4), FR(8).
|
|
||||||
// U->B.
|
|
||||||
// UR(0) -> BR(11).
|
|
||||||
// BR(11) -> DR(4).
|
|
||||||
// DR(4) -> FR(8).
|
|
||||||
// FR(8) -> UR(0).
|
|
||||||
// P[0]=11, P[4]=8, P[8]=0, P[11]=4.
|
|
||||||
ep: [11, 1, 2, 3, 8, 5, 6, 7, 0, 9, 10, 4],
|
|
||||||
eo: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
},
|
|
||||||
F: {
|
|
||||||
// F (CW)
|
|
||||||
// Corners: URF(0), UFL(1), DLF(5), DFR(4).
|
|
||||||
// F moves U to R.
|
|
||||||
// URF(0) -> DFR(4). (Wait. URF is Top-Right. F turns Top to Right. So URF -> DFR (Bottom-Right)).
|
|
||||||
// UFL(1) -> URF(0).
|
|
||||||
// DLF(5) -> UFL(1).
|
|
||||||
// DFR(4) -> DLF(5).
|
|
||||||
// Cycle: 0->4, 4->5, 5->1, 1->0.
|
|
||||||
// P[0]=4, P[1]=0, P[4]=5, P[5]=1.
|
|
||||||
cp: [4, 0, 2, 3, 5, 1, 6, 7],
|
|
||||||
// Twist:
|
|
||||||
// UFL(1) -> URF. (+1).
|
|
||||||
// URF(0) -> DFR. (-1).
|
|
||||||
// DFR(4) -> DLF. (+1).
|
|
||||||
// DLF(5) -> UFL. (-1).
|
|
||||||
// 0:2, 1:1, 4:1, 5:2.
|
|
||||||
co: [2, 1, 0, 0, 1, 2, 0, 0],
|
|
||||||
|
|
||||||
// Edges: UF(1), FR(8), DF(5), FL(9).
|
|
||||||
// U->R.
|
|
||||||
// UF(1) -> FR(8).
|
|
||||||
// FR(8) -> DF(5).
|
|
||||||
// DF(5) -> FL(9).
|
|
||||||
// FL(9) -> UF(1).
|
|
||||||
// P[1]=8, P[5]=9, P[8]=5, P[9]=1.
|
|
||||||
ep: [0, 8, 2, 3, 4, 9, 6, 7, 5, 1, 10, 11],
|
|
||||||
// FLIP: F and B moves flip edges.
|
|
||||||
// 1 -> 1, 5 -> 1, 8 -> 1, 9 -> 1.
|
|
||||||
eo: [0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0]
|
|
||||||
},
|
|
||||||
B: {
|
|
||||||
// B (CW)
|
|
||||||
// Corners: UBR(3), ULB(2), DBL(6), DRB(7).
|
|
||||||
// B moves U to L.
|
|
||||||
// UBR(3) -> ULB(2).
|
|
||||||
// ULB(2) -> DBL(6).
|
|
||||||
// DBL(6) -> DRB(7).
|
|
||||||
// DRB(7) -> UBR(3).
|
|
||||||
// Cycle: 3->2, 2->6, 6->7, 7->3.
|
|
||||||
// P[2]=6, P[3]=2, P[6]=7, P[7]=3.
|
|
||||||
cp: [0, 1, 6, 2, 4, 5, 7, 3],
|
|
||||||
// Twist:
|
|
||||||
// UBR(3) -> ULB. (-1).
|
|
||||||
// ULB(2) -> DBL. (+1).
|
|
||||||
// DBL(6) -> DRB. (-1).
|
|
||||||
// DRB(7) -> UBR. (+1).
|
|
||||||
// 2:1, 3:2, 6:2, 7:1.
|
|
||||||
co: [0, 0, 1, 2, 0, 0, 2, 1],
|
|
||||||
|
|
||||||
// Edges: UB(3), BL(10), DB(7), BR(11).
|
|
||||||
// U->L.
|
|
||||||
// UB(3) -> BL(10).
|
|
||||||
// BL(10) -> DB(7).
|
|
||||||
// DB(7) -> BR(11).
|
|
||||||
// BR(11) -> UB(3).
|
|
||||||
// P[3]=10, P[7]=11, P[10]=7, P[11]=3.
|
|
||||||
ep: [0, 1, 2, 10, 4, 5, 6, 11, 8, 9, 7, 3],
|
|
||||||
// FLIP
|
|
||||||
eo: [0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class DeepCube {
|
|
||||||
constructor() {
|
|
||||||
this.reset()
|
|
||||||
}
|
|
||||||
|
|
||||||
reset() {
|
|
||||||
// Identity State
|
|
||||||
this.cp = [0, 1, 2, 3, 4, 5, 6, 7]
|
|
||||||
this.co = [0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
this.ep = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
|
||||||
this.eo = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
|
||||||
}
|
|
||||||
|
|
||||||
move(moveStr) {
|
|
||||||
const base = moveStr[0]
|
|
||||||
const def = MOVES[base]
|
|
||||||
if (!def) return
|
|
||||||
|
|
||||||
let count = 1
|
|
||||||
if (moveStr.endsWith('2')) count = 2
|
|
||||||
if (moveStr.endsWith("'")) count = 3 // 3 CW = 1 CCW
|
|
||||||
|
|
||||||
for (let k = 0; k < count; k++) {
|
|
||||||
this.applyPrimitive(def)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
applyPrimitive(def) {
|
|
||||||
// Permutation: p[i] moves to def.p[i].
|
|
||||||
// New[def.p[i]] = Old[p[i]].
|
|
||||||
// We want to track where the pieces ARE.
|
|
||||||
|
|
||||||
// Correct application:
|
|
||||||
// next_cp[i] = cp[def.cp[i]] ?
|
|
||||||
// No. def.cp[i] says "Position i comes from position P[i]" ? No.
|
|
||||||
// I defined def.cp[i] as "Piece at i goes to def.cp[i]".
|
|
||||||
|
|
||||||
// Let's verify:
|
|
||||||
// U: 0->1.
|
|
||||||
// Standard Math: (P * S)[x] = P[S[x]]. (S applied first??)
|
|
||||||
// Here we are applying Move P to State S.
|
|
||||||
// New State S' = P * S.
|
|
||||||
// This usually implies: Piece at pos i in new state is...
|
|
||||||
// Let's trace one piece.
|
|
||||||
// Piece X is at pos 0.
|
|
||||||
// Move U: 0->1.
|
|
||||||
// New state: Piece X should be at pos 1.
|
|
||||||
// So new_cp[1] = Piece X.
|
|
||||||
// new_cp[def.cp[i]] = cp[i].
|
|
||||||
|
|
||||||
const new_cp = [...this.cp]
|
|
||||||
const new_co = [...this.co]
|
|
||||||
const new_ep = [...this.ep]
|
|
||||||
const new_eo = [...this.eo]
|
|
||||||
|
|
||||||
// Update Corners
|
|
||||||
for (let i = 0; i < 8; i++) {
|
|
||||||
const dest = def.cp[i]
|
|
||||||
new_cp[dest] = this.cp[i]
|
|
||||||
// Orientation follows the piece
|
|
||||||
// Twist adds to existing twist
|
|
||||||
new_co[dest] = (this.co[i] + def.co[i]) % 3
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update Edges
|
|
||||||
for (let i = 0; i < 12; i++) {
|
|
||||||
const dest = def.ep[i]
|
|
||||||
new_ep[dest] = this.ep[i]
|
|
||||||
// Orientation
|
|
||||||
new_eo[dest] = (this.eo[i] + def.eo[i]) % 2
|
|
||||||
}
|
|
||||||
|
|
||||||
this.cp = new_cp
|
|
||||||
this.co = new_co
|
|
||||||
this.ep = new_ep
|
|
||||||
this.eo = new_eo
|
|
||||||
}
|
|
||||||
|
|
||||||
validate() {
|
|
||||||
const errors = [];
|
|
||||||
|
|
||||||
// Check exact set of pieces (Permutation Validity)
|
|
||||||
const cSet = new Set(this.cp);
|
|
||||||
if (cSet.size !== 8) errors.push('Invalid Corner Permutation (duplicates/missing)');
|
|
||||||
const eSet = new Set(this.ep);
|
|
||||||
if (eSet.size !== 12) errors.push('Invalid Edge Permutation (duplicates/missing)');
|
|
||||||
|
|
||||||
// Sum of Twists (Corners) % 3 == 0
|
|
||||||
const twistSum = this.co.reduce((a, b) => a + b, 0);
|
|
||||||
if (twistSum % 3 !== 0) errors.push(`Twist Sum Error: ${twistSum}`);
|
|
||||||
|
|
||||||
// Sum of Flips (Edges) % 2 == 0
|
|
||||||
const flipSum = this.eo.reduce((a, b) => a + b, 0);
|
|
||||||
if (flipSum % 2 !== 0) errors.push(`Flip Sum Error: ${flipSum}`);
|
|
||||||
|
|
||||||
// Parity Check (Corner Parity must equal Edge Parity)
|
|
||||||
const cParity = this.getPermutationParity(this.cp);
|
|
||||||
const eParity = this.getPermutationParity(this.ep);
|
|
||||||
if (cParity !== eParity) errors.push(`Parity Mismatch: Corner=${cParity}, Edge=${eParity}`);
|
|
||||||
|
|
||||||
return { valid: errors.length === 0, errors };
|
|
||||||
}
|
|
||||||
|
|
||||||
getPermutationParity(p) {
|
|
||||||
const n = p.length;
|
|
||||||
const visited = new Array(n).fill(false);
|
|
||||||
let swaps = 0;
|
|
||||||
for (let i = 0; i < n; i++) {
|
|
||||||
if (!visited[i]) {
|
|
||||||
let curr = i;
|
|
||||||
let cycleLen = 0;
|
|
||||||
while (!visited[curr]) {
|
|
||||||
visited[curr] = true;
|
|
||||||
curr = p[curr];
|
|
||||||
cycleLen++;
|
|
||||||
}
|
|
||||||
swaps += (cycleLen - 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return swaps % 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Converts abstract state to physical cubies for rendering.
|
|
||||||
* Maps Slot Positions (Where it is) -> Piece Colors (What it is) with Orientation.
|
|
||||||
*/
|
|
||||||
toCubies() {
|
|
||||||
// Definitions must align with indexes
|
|
||||||
// Corners: 0:URF, 1:UFL, 2:ULB, 3:UBR, 4:DFR, 5:DLF, 6:DBL, 7:DRB
|
|
||||||
const cornerSlots = [
|
|
||||||
{ x: 1, y: 1, z: 1 }, // 0 URF
|
|
||||||
{ x: -1, y: 1, z: 1 }, // 1 UFL
|
|
||||||
{ x: -1, y: 1, z: -1 }, // 2 ULB
|
|
||||||
{ x: 1, y: 1, z: -1 }, // 3 UBR
|
|
||||||
{ x: 1, y: -1, z: 1 }, // 4 DFR
|
|
||||||
{ x: -1, y: -1, z: 1 }, // 5 DLF
|
|
||||||
{ x: -1, y: -1, z: -1 },// 6 DBL
|
|
||||||
{ x: 1, y: -1, z: -1 } // 7 DRB
|
|
||||||
];
|
|
||||||
|
|
||||||
// Edges: 0:UR, 1:UF, 2:UL, 3:UB, 4:DR, 5:DF, 6:DL, 7:DB, 8:FR, 9:FL, 10:BL, 11:BR
|
|
||||||
const edgeSlots = [
|
|
||||||
{ x: 1, y: 1, z: 0 }, // 0 UR
|
|
||||||
{ x: 0, y: 1, z: 1 }, // 1 UF
|
|
||||||
{ x: -1, y: 1, z: 0 }, // 2 UL
|
|
||||||
{ x: 0, y: 1, z: -1 }, // 3 UB
|
|
||||||
{ x: 1, y: -1, z: 0 }, // 4 DR
|
|
||||||
{ x: 0, y: -1, z: 1 }, // 5 DF
|
|
||||||
{ x: -1, y: -1, z: 0 }, // 6 DL
|
|
||||||
{ x: 0, y: -1, z: -1 }, // 7 DB
|
|
||||||
{ x: 1, y: 0, z: 1 }, // 8 FR
|
|
||||||
{ x: -1, y: 0, z: 1 }, // 9 FL
|
|
||||||
{ x: -1, y: 0, z: -1 }, // 10 BL
|
|
||||||
{ x: 1, y: 0, z: -1 } // 11 BR
|
|
||||||
];
|
|
||||||
|
|
||||||
// Centers (Fixed)
|
|
||||||
const centers = [
|
|
||||||
{ id: 'c0', x: 0, y: 1, z: 0, faces: { up: 'white' } },
|
|
||||||
{ id: 'c1', x: 0, y: -1, z: 0, faces: { down: 'yellow' } },
|
|
||||||
{ id: 'c2', x: 0, y: 0, z: 1, faces: { front: 'green' } },
|
|
||||||
{ id: 'c3', x: 0, y: 0, z: -1, faces: { back: 'blue' } },
|
|
||||||
{ id: 'c4', x: -1, y: 0, z: 0, faces: { left: 'orange' } },
|
|
||||||
{ id: 'c5', x: 1, y: 0, z: 0, faces: { right: 'red' } },
|
|
||||||
{ id: 'core', x: 0, y: 0, z: 0, faces: {} }
|
|
||||||
];
|
|
||||||
|
|
||||||
const cubies = [...centers];
|
|
||||||
|
|
||||||
// Piece Definition (Solved State Colors)
|
|
||||||
const getCornerColors = (id) => {
|
|
||||||
const map = [
|
|
||||||
{ up: 'white', right: 'red', front: 'green' }, // 0
|
|
||||||
{ up: 'white', front: 'green', left: 'orange' }, // 1
|
|
||||||
{ up: 'white', left: 'orange', back: 'blue' }, // 2
|
|
||||||
{ up: 'white', back: 'blue', right: 'red' }, // 3
|
|
||||||
{ down: 'yellow', right: 'red', front: 'green' }, // 4
|
|
||||||
{ down: 'yellow', front: 'green', left: 'orange' }, // 5
|
|
||||||
{ down: 'yellow', left: 'orange', back: 'blue' }, // 6
|
|
||||||
{ down: 'yellow', back: 'blue', right: 'red' } // 7
|
|
||||||
];
|
|
||||||
return map[id];
|
|
||||||
};
|
|
||||||
|
|
||||||
const getEdgeColors = (id) => {
|
|
||||||
const map = [
|
|
||||||
{ up: 'white', right: 'red' }, // 0
|
|
||||||
{ up: 'white', front: 'green' }, // 1
|
|
||||||
{ up: 'white', left: 'orange' }, // 2
|
|
||||||
{ up: 'white', back: 'blue' }, // 3
|
|
||||||
{ down: 'yellow', right: 'red' }, // 4
|
|
||||||
{ down: 'yellow', front: 'green' }, // 5
|
|
||||||
{ down: 'yellow', left: 'orange' }, // 6
|
|
||||||
{ down: 'yellow', back: 'blue' }, // 7
|
|
||||||
{ front: 'green', right: 'red' }, // 8
|
|
||||||
{ front: 'green', left: 'orange' }, // 9
|
|
||||||
{ back: 'blue', left: 'orange' }, // 10
|
|
||||||
{ back: 'blue', right: 'red' } // 11
|
|
||||||
];
|
|
||||||
return map[id];
|
|
||||||
};
|
|
||||||
|
|
||||||
// CORNERS
|
|
||||||
const pKeys = [
|
|
||||||
['up', 'right', 'front'], // 0
|
|
||||||
['up', 'front', 'left'], // 1
|
|
||||||
['up', 'left', 'back'], // 2
|
|
||||||
['up', 'back', 'right'], // 3
|
|
||||||
['down', 'right', 'front'], // 4
|
|
||||||
['down', 'front', 'left'], // 5
|
|
||||||
['down', 'left', 'back'], // 6
|
|
||||||
['down', 'back', 'right'] // 7
|
|
||||||
];
|
|
||||||
|
|
||||||
for (let i = 0; i < 8; i++) {
|
|
||||||
const pieceId = this.cp[i]; // Which physical piece is here
|
|
||||||
const orientation = this.co[i]; // Twist: 0, 1 (CW), 2 (CCW)
|
|
||||||
const slot = cornerSlots[i];
|
|
||||||
|
|
||||||
const baseColors = getCornerColors(pieceId);
|
|
||||||
const slotKeys = pKeys[i]; // Keys of the SLOT
|
|
||||||
// Primary colors of the PIECE
|
|
||||||
const pieceKeys = pKeys[pieceId]; // Keys of the PIECE
|
|
||||||
const colors = [baseColors[pieceKeys[0]], baseColors[pieceKeys[1]], baseColors[pieceKeys[2]]];
|
|
||||||
|
|
||||||
const faces = {};
|
|
||||||
// Apply twist
|
|
||||||
// Shift 0: S[0]=C[0], S[1]=C[1], S[2]=C[2]
|
|
||||||
// Shift 1: S[0]=C[2], S[1]=C[0], S[2]=C[1] (CW Twist: Colors rotate CW relative to keys)
|
|
||||||
// Shift 2: S[0]=C[1], S[1]=C[2], S[2]=C[0]
|
|
||||||
|
|
||||||
// Formula: index k gets color (k - o + 3) % 3
|
|
||||||
faces[slotKeys[0]] = colors[(0 - orientation + 3) % 3];
|
|
||||||
faces[slotKeys[1]] = colors[(1 - orientation + 3) % 3];
|
|
||||||
faces[slotKeys[2]] = colors[(2 - orientation + 3) % 3];
|
|
||||||
|
|
||||||
cubies.push({ id: `corn${pieceId}`, x: slot.x, y: slot.y, z: slot.z, faces });
|
|
||||||
}
|
|
||||||
|
|
||||||
// EDGES
|
|
||||||
const eKeys = [
|
|
||||||
['up', 'right'], // 0 UR
|
|
||||||
['up', 'front'], // 1 UF
|
|
||||||
['up', 'left'], // 2 UL
|
|
||||||
['up', 'back'], // 3 UB
|
|
||||||
['down', 'right'], // 4 DR
|
|
||||||
['down', 'front'], // 5 DF
|
|
||||||
['down', 'left'], // 6 DL
|
|
||||||
['down', 'back'], // 7 DB
|
|
||||||
['front', 'right'], // 8 FR
|
|
||||||
['front', 'left'], // 9 FL
|
|
||||||
['back', 'left'], // 10 BL
|
|
||||||
['back', 'right'] // 11 BR
|
|
||||||
];
|
|
||||||
|
|
||||||
for (let i = 0; i < 12; i++) {
|
|
||||||
const pieceId = this.ep[i];
|
|
||||||
const flip = this.eo[i];
|
|
||||||
const slot = edgeSlots[i];
|
|
||||||
const baseColors = getEdgeColors(pieceId);
|
|
||||||
|
|
||||||
const pieceKeys = eKeys[pieceId];
|
|
||||||
const colors = [baseColors[pieceKeys[0]], baseColors[pieceKeys[1]]];
|
|
||||||
|
|
||||||
const slotKeys = eKeys[i];
|
|
||||||
|
|
||||||
const faces = {};
|
|
||||||
if (flip === 0) {
|
|
||||||
faces[slotKeys[0]] = colors[0];
|
|
||||||
faces[slotKeys[1]] = colors[1];
|
|
||||||
} else {
|
|
||||||
faces[slotKeys[0]] = colors[1];
|
|
||||||
faces[slotKeys[1]] = colors[0];
|
|
||||||
}
|
|
||||||
cubies.push({ id: `edge${pieceId}`, x: slot.x, y: slot.y, z: slot.z, faces });
|
|
||||||
}
|
|
||||||
|
|
||||||
return cubies;
|
|
||||||
}
|
|
||||||
|
|
||||||
rotateLayer(axis, index, dir) {
|
|
||||||
// axis: 'x', 'y', 'z'
|
|
||||||
// index: -1, 0, 1
|
|
||||||
// dir: 1 (Visual CCW / Logic U'), -1 (Visual CW / Logic U)
|
|
||||||
|
|
||||||
let move = '';
|
|
||||||
|
|
||||||
if (axis === 'y') {
|
|
||||||
if (index === 1) { // Up Layer
|
|
||||||
move = dir === 1 ? "U'" : "U";
|
|
||||||
} else if (index === -1) { // Down Layer
|
|
||||||
// D move is Bottom CW (+Y rotation) -> Visual CCW (dir=1).
|
|
||||||
move = dir === 1 ? "D" : "D'";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (axis === 'x') {
|
|
||||||
if (index === 1) { // Right Layer
|
|
||||||
// R is -X rotation -> Visual CW (dir=-1).
|
|
||||||
move = dir === 1 ? "R'" : "R";
|
|
||||||
} else if (index === -1) { // Left Layer
|
|
||||||
// L is +X rotation -> Visual CCW (dir=1).
|
|
||||||
move = dir === 1 ? "L" : "L'";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (axis === 'z') {
|
|
||||||
if (index === 1) { // Front Layer
|
|
||||||
// F is -Z rotation -> Visual CW (dir=-1).
|
|
||||||
move = dir === 1 ? "F'" : "F";
|
|
||||||
} else if (index === -1) { // Back Layer
|
|
||||||
// B is +Z rotation -> Visual CCW (dir=1).
|
|
||||||
move = dir === 1 ? "B" : "B'";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (move) {
|
|
||||||
this.move(move);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
export class Matrix4 {
|
|
||||||
constructor() {
|
|
||||||
this.elements = [
|
|
||||||
1, 0, 0, 0,
|
|
||||||
0, 1, 0, 0,
|
|
||||||
0, 0, 1, 0,
|
|
||||||
0, 0, 0, 1
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
static identity() {
|
|
||||||
return new Matrix4();
|
|
||||||
}
|
|
||||||
|
|
||||||
multiply(other) {
|
|
||||||
const a = this.elements;
|
|
||||||
const b = other.elements;
|
|
||||||
const result = new Matrix4();
|
|
||||||
const r = result.elements;
|
|
||||||
|
|
||||||
// a is row-major? No, CSS matrix3d is column-major.
|
|
||||||
// Let's stick to column-major as per WebGL/CSS standard.
|
|
||||||
// r[0] = a[0]*b[0] + a[4]*b[1] + a[8]*b[2] + a[12]*b[3] ...
|
|
||||||
|
|
||||||
for (let i = 0; i < 4; i++) { // Column of B
|
|
||||||
for (let j = 0; j < 4; j++) { // Row of A
|
|
||||||
let sum = 0;
|
|
||||||
for (let k = 0; k < 4; k++) {
|
|
||||||
sum += a[j + k * 4] * b[i * 4 + k]; // Correct for column-major storage
|
|
||||||
}
|
|
||||||
r[j + i * 4] = sum;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Multiply this * other
|
|
||||||
multiplySelf(other) {
|
|
||||||
this.elements = this.multiply(other).elements;
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Multiply other * this (pre-multiply)
|
|
||||||
premultiply(other) {
|
|
||||||
this.elements = other.multiply(this).elements;
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
static translation(x, y, z) {
|
|
||||||
const m = new Matrix4();
|
|
||||||
m.elements[12] = x;
|
|
||||||
m.elements[13] = y;
|
|
||||||
m.elements[14] = z;
|
|
||||||
return m;
|
|
||||||
}
|
|
||||||
|
|
||||||
static rotationX(angleRad) {
|
|
||||||
const m = new Matrix4();
|
|
||||||
const c = Math.cos(angleRad);
|
|
||||||
const s = Math.sin(angleRad);
|
|
||||||
m.elements[5] = c;
|
|
||||||
m.elements[6] = s;
|
|
||||||
m.elements[9] = -s;
|
|
||||||
m.elements[10] = c;
|
|
||||||
return m;
|
|
||||||
}
|
|
||||||
|
|
||||||
static rotationY(angleRad) {
|
|
||||||
const m = new Matrix4();
|
|
||||||
const c = Math.cos(angleRad);
|
|
||||||
const s = Math.sin(angleRad);
|
|
||||||
m.elements[0] = c;
|
|
||||||
m.elements[2] = -s;
|
|
||||||
m.elements[8] = s;
|
|
||||||
m.elements[10] = c;
|
|
||||||
return m;
|
|
||||||
}
|
|
||||||
|
|
||||||
static rotationZ(angleRad) {
|
|
||||||
const m = new Matrix4();
|
|
||||||
const c = Math.cos(angleRad);
|
|
||||||
const s = Math.sin(angleRad);
|
|
||||||
m.elements[0] = c;
|
|
||||||
m.elements[1] = s;
|
|
||||||
m.elements[4] = -s;
|
|
||||||
m.elements[5] = c;
|
|
||||||
return m;
|
|
||||||
}
|
|
||||||
|
|
||||||
translate(x, y, z) {
|
|
||||||
return this.multiplySelf(Matrix4.translation(x, y, z));
|
|
||||||
}
|
|
||||||
|
|
||||||
rotateX(deg) {
|
|
||||||
return this.multiplySelf(Matrix4.rotationX(deg * Math.PI / 180));
|
|
||||||
}
|
|
||||||
|
|
||||||
rotateY(deg) {
|
|
||||||
return this.multiplySelf(Matrix4.rotationY(deg * Math.PI / 180));
|
|
||||||
}
|
|
||||||
|
|
||||||
rotateZ(deg) {
|
|
||||||
return this.multiplySelf(Matrix4.rotationZ(deg * Math.PI / 180));
|
|
||||||
}
|
|
||||||
|
|
||||||
toCSS() {
|
|
||||||
// CSS matrix3d takes comma-separated values
|
|
||||||
// Round to avoid scientific notation like 1e-15 which CSS hates
|
|
||||||
const rounded = this.elements.map(v => Math.abs(v) < 1e-10 ? 0 : v);
|
|
||||||
return `matrix3d(${rounded.join(',')})`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user