Grzegorz Kucmierz
a75c148a5b
All checks were successful
Deploy to Production / deploy (push) Successful in 9s
701 lines
19 KiB
Vue
701 lines
19 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import { useCube } from '../../composables/useCube'
|
|
import { useSettings } from '../../composables/useSettings'
|
|
import Line3D from '../common/Line3D.vue'
|
|
|
|
const { cubies, initCube, rotateLayer, turn, FACES } = useCube()
|
|
const { showProjections } = useSettings()
|
|
|
|
// --- Visual State ---
|
|
const rx = ref(-25) // Initial View Rotation X
|
|
const ry = ref(45) // Initial View Rotation Y
|
|
const rz = ref(0)
|
|
const SCALE = 100 // Size of one cubie in px
|
|
const GAP = 0 // Gap between cubies
|
|
|
|
// --- Interaction State ---
|
|
const isDragging = ref(false)
|
|
const dragMode = ref('view') // 'view' or 'layer'
|
|
const startX = ref(0)
|
|
const startY = ref(0)
|
|
const lastX = ref(0)
|
|
const lastY = ref(0)
|
|
const velocity = ref(0)
|
|
|
|
// Layer Interaction
|
|
const selectedCubie = ref(null) // { id, x, y, z } static snapshot at start of drag
|
|
const selectedFace = ref(null) // 'front', 'up', etc.
|
|
const activeLayer = ref(null) // { axis, index, tangent, direction }
|
|
const currentLayerRotation = ref(0) // Visual rotation in degrees
|
|
const isAnimating = ref(false)
|
|
|
|
// --- Constants & Helpers ---
|
|
|
|
const getFaceNormal = (face) => {
|
|
const map = {
|
|
[FACES.FRONT]: { x: 0, y: 0, z: 1 },
|
|
[FACES.BACK]: { x: 0, y: 0, z: -1 },
|
|
[FACES.RIGHT]: { x: 1, y: 0, z: 0 },
|
|
[FACES.LEFT]: { x: -1, y: 0, z: 0 },
|
|
[FACES.UP]: { x: 0, y: 1, z: 0 },
|
|
[FACES.DOWN]: { x: 0, y: -1, z: 0 },
|
|
}
|
|
return map[face] || { x: 0, y: 0, z: 1 }
|
|
}
|
|
|
|
const getAllowedAxes = (face) => {
|
|
// Logic: Which axes can this face physically move along?
|
|
switch(face) {
|
|
case FACES.FRONT: case FACES.BACK: return ['x', 'y']
|
|
case FACES.RIGHT: case FACES.LEFT: return ['z', 'y']
|
|
case FACES.UP: case FACES.DOWN: return ['x', 'z']
|
|
}
|
|
return []
|
|
}
|
|
|
|
const getAxisVector = (axis) => {
|
|
if (axis === 'x') return { x: 1, y: 0, z: 0 }
|
|
if (axis === 'y') return { x: 0, y: 1, z: 0 }
|
|
if (axis === 'z') return { x: 0, y: 0, z: 1 }
|
|
return { x: 0, y: 0, z: 0 }
|
|
}
|
|
|
|
// Cross Product: a x b
|
|
const cross = (a, b) => ({
|
|
x: a.y * b.z - a.z * b.y,
|
|
y: a.z * b.x - a.x * b.z,
|
|
z: a.x * b.y - a.y * b.x
|
|
})
|
|
|
|
// Project 3D vector to 2D screen space based on current view (rx, ry, rz)
|
|
const project = (v) => {
|
|
const radX = rx.value * Math.PI / 180
|
|
const radY = ry.value * Math.PI / 180
|
|
const radZ = rz.value * Math.PI / 180
|
|
|
|
// 1. Rotate Z
|
|
let x1 = v.x * Math.cos(radZ) - v.y * Math.sin(radZ)
|
|
let y1 = v.x * Math.sin(radZ) + v.y * Math.cos(radZ)
|
|
let z1 = v.z
|
|
|
|
// 2. Rotate Y
|
|
let x2 = x1 * Math.cos(radY) + z1 * Math.sin(radY)
|
|
let y2 = y1
|
|
let z2 = -x1 * Math.sin(radY) + z1 * Math.cos(radY)
|
|
|
|
// 3. Rotate X
|
|
let x3 = x2
|
|
let y3 = y2 * Math.cos(radX) - z2 * Math.sin(radX)
|
|
// let z3 = ... (depth not needed for projection vector direction)
|
|
|
|
return { x: x3, y: y3 }
|
|
}
|
|
|
|
const projectedCubies = computed(() => {
|
|
// Filter cubies for each face based on logical coordinates
|
|
// x: -1 (Left), 1 (Right)
|
|
// y: -1 (Down/Bottom), 1 (Up/Top)
|
|
// z: -1 (Back), 1 (Front)
|
|
|
|
const left = cubies.value.filter(c => Math.round(c.x) === -1)
|
|
const back = cubies.value.filter(c => Math.round(c.z) === -1)
|
|
const down = cubies.value.filter(c => Math.round(c.y) === -1)
|
|
|
|
return { left, back, down }
|
|
})
|
|
|
|
const projectionTransforms = {
|
|
left: { tx: -350, ty: 0, tz: 0, ry: -90 },
|
|
back: { tx: 0, ty: -200, tz: -350, ry: 0 },
|
|
down: { tx: 0, ty: 350, tz: 0, rx: 90 }
|
|
}
|
|
|
|
const projectionLines = computed(() => {
|
|
const lines = []
|
|
|
|
// Helper to transform point
|
|
const transformPoint = (p, transform) => {
|
|
let x = p.x, y = p.y, z = p.z
|
|
|
|
// Rotate
|
|
if (transform.ry) {
|
|
const rad = transform.ry * Math.PI / 180
|
|
const x0 = x, z0 = z
|
|
x = x0 * Math.cos(rad) + z0 * Math.sin(rad)
|
|
z = -x0 * Math.sin(rad) + z0 * Math.cos(rad)
|
|
}
|
|
if (transform.rx) {
|
|
const rad = transform.rx * Math.PI / 180
|
|
const y0 = y, z0 = z
|
|
y = y0 * Math.cos(rad) - z0 * Math.sin(rad)
|
|
z = y0 * Math.sin(rad) + z0 * Math.cos(rad)
|
|
}
|
|
|
|
// Translate
|
|
x += transform.tx || 0
|
|
y += transform.ty || 0
|
|
z += transform.tz || 0
|
|
|
|
return { x, y, z }
|
|
}
|
|
|
|
const S = 150 // Half size
|
|
|
|
// 1. Left Projection
|
|
{
|
|
const t = projectionTransforms.left
|
|
// Start: Left Face corners (x = -S)
|
|
const start = [
|
|
{ x: -S, y: -S, z: -S }, { x: -S, y: -S, z: S },
|
|
{ x: -S, y: S, z: -S }, { x: -S, y: S, z: S }
|
|
]
|
|
const end = start.map(p => transformPoint(p, t))
|
|
start.forEach((p, i) => lines.push({ start: p, end: end[i] }))
|
|
}
|
|
|
|
// 2. Back Projection
|
|
{
|
|
const t = projectionTransforms.back
|
|
// Start: Back Face corners (z = -S)
|
|
const start = [
|
|
{ x: -S, y: -S, z: -S }, { x: S, y: -S, z: -S },
|
|
{ x: -S, y: S, z: -S }, { x: S, y: S, z: -S }
|
|
]
|
|
const end = start.map(p => transformPoint(p, t))
|
|
start.forEach((p, i) => lines.push({ start: p, end: end[i] }))
|
|
}
|
|
|
|
// 3. Down Projection (Down Face)
|
|
{
|
|
const t = projectionTransforms.down
|
|
// Start: Down Face corners (y = -S)
|
|
const start = [
|
|
{ x: -S, y: -S, z: -S }, { x: S, y: -S, z: -S },
|
|
{ x: -S, y: -S, z: S }, { x: S, y: -S, z: S }
|
|
]
|
|
const end = start.map(p => transformPoint(p, t))
|
|
start.forEach((p, i) => lines.push({ start: p, end: end[i] }))
|
|
}
|
|
|
|
return lines
|
|
})
|
|
|
|
// --- Interaction Logic ---
|
|
|
|
const onMouseDown = (e) => {
|
|
if (isAnimating.value) return
|
|
|
|
isDragging.value = true
|
|
startX.value = e.clientX
|
|
startY.value = e.clientY
|
|
lastX.value = e.clientX
|
|
lastY.value = e.clientY
|
|
velocity.value = 0
|
|
|
|
const target = e.target.closest('.sticker')
|
|
if (target) {
|
|
const id = parseInt(target.dataset.id)
|
|
const face = target.dataset.face
|
|
const cubie = cubies.value.find(c => c.id === id)
|
|
|
|
selectedCubie.value = { ...cubie } // Snapshot position
|
|
selectedFace.value = face
|
|
|
|
// Check if center piece (has 2 zero coordinates)
|
|
// Centers have sum of absolute coords = 1
|
|
// Core (0,0,0) has sum = 0
|
|
const absSum = Math.abs(cubie.x) + Math.abs(cubie.y) + Math.abs(cubie.z)
|
|
const isCenterOrCore = absSum <= 1
|
|
|
|
// Mechanical Realism:
|
|
// Centers are "Stiff" (part of the core frame). Dragging them rotates the View.
|
|
// Corners/Edges are "Moving Parts". Dragging them rotates the Layer.
|
|
dragMode.value = isCenterOrCore ? 'view' : 'layer'
|
|
} else {
|
|
dragMode.value = 'view'
|
|
selectedCubie.value = null
|
|
}
|
|
}
|
|
|
|
const onMouseMove = (e) => {
|
|
if (!isDragging.value) return
|
|
|
|
const dx = e.clientX - lastX.value
|
|
const dy = e.clientY - lastY.value
|
|
|
|
if (dragMode.value === 'view') {
|
|
ry.value += dx * 0.5
|
|
rx.value += dy * 0.5
|
|
} else if (dragMode.value === 'layer' && selectedCubie.value) {
|
|
const totalDx = e.clientX - startX.value
|
|
const totalDy = e.clientY - startY.value
|
|
|
|
handleLayerDrag(totalDx, totalDy, dx, dy)
|
|
}
|
|
|
|
lastX.value = e.clientX
|
|
lastY.value = e.clientY
|
|
}
|
|
|
|
const handleLayerDrag = (totalDx, totalDy, dx, dy) => {
|
|
// If we haven't locked an axis yet
|
|
if (!activeLayer.value) {
|
|
if (Math.sqrt(totalDx**2 + totalDy**2) < 5) return // Threshold
|
|
|
|
const faceNormal = getFaceNormal(selectedFace.value)
|
|
const axes = getAllowedAxes(selectedFace.value)
|
|
|
|
let best = null
|
|
let maxDot = 0
|
|
|
|
// Analyze candidates
|
|
axes.forEach(axis => {
|
|
// Tangent = Axis x Normal
|
|
// This is the 3D direction of motion for Positive Rotation around this Axis
|
|
const t3D = cross(getAxisVector(axis), faceNormal)
|
|
const t2D = project(t3D)
|
|
const len = Math.sqrt(t2D.x**2 + t2D.y**2)
|
|
|
|
if (len > 0.1) {
|
|
const nx = t2D.x / len
|
|
const ny = t2D.y / len
|
|
|
|
// Compare with mouse drag direction
|
|
const mouseLen = Math.sqrt(totalDx**2 + totalDy**2)
|
|
const mx = totalDx / mouseLen
|
|
const my = totalDy / mouseLen
|
|
|
|
const dot = Math.abs(mx * nx + my * ny)
|
|
|
|
if (dot > maxDot) {
|
|
maxDot = dot
|
|
best = { axis, tangent: { x: nx, y: ny } }
|
|
}
|
|
}
|
|
})
|
|
|
|
if (best && maxDot > 0.5) {
|
|
// Lock Axis
|
|
let index = 0
|
|
if (best.axis === 'x') index = selectedCubie.value.x
|
|
if (best.axis === 'y') index = selectedCubie.value.y
|
|
if (best.axis === 'z') index = selectedCubie.value.z
|
|
|
|
activeLayer.value = {
|
|
axis: best.axis,
|
|
index,
|
|
tangent: best.tangent
|
|
}
|
|
} else {
|
|
// Fallback: if drag doesn't match a layer axis, maybe user wants to rotate view?
|
|
// Only switch if drag is significant
|
|
if (Math.sqrt(totalDx**2 + totalDy**2) > 20) {
|
|
// Keep layer mode but maybe relax?
|
|
// No, sticky mode is better.
|
|
}
|
|
}
|
|
}
|
|
|
|
// If we have an active layer, update rotation
|
|
if (activeLayer.value) {
|
|
const { x, y } = activeLayer.value.tangent
|
|
// Project delta onto key
|
|
const val = dx * x + dy * y
|
|
// Scale factor
|
|
currentLayerRotation.value += val * 0.6
|
|
}
|
|
}
|
|
|
|
const onMouseUp = () => {
|
|
isDragging.value = false
|
|
|
|
if (activeLayer.value) {
|
|
snapRotation()
|
|
}
|
|
}
|
|
|
|
const snapRotation = () => {
|
|
isAnimating.value = true
|
|
|
|
// Determine nearest 90 deg
|
|
const target = Math.round(currentLayerRotation.value / 90) * 90
|
|
const steps = Math.round(currentLayerRotation.value / 90)
|
|
|
|
// Animation loop
|
|
const start = currentLayerRotation.value
|
|
const startTime = performance.now()
|
|
const duration = 200
|
|
|
|
const animate = (time) => {
|
|
const p = Math.min((time - startTime) / duration, 1)
|
|
// Ease out
|
|
const ease = 1 - Math.pow(1 - p, 3)
|
|
|
|
currentLayerRotation.value = start + (target - start) * ease
|
|
|
|
if (p < 1) {
|
|
requestAnimationFrame(animate)
|
|
} else {
|
|
// Animation done
|
|
finishMove(steps)
|
|
}
|
|
}
|
|
requestAnimationFrame(animate)
|
|
}
|
|
|
|
const finishMove = (steps) => {
|
|
if (steps !== 0 && activeLayer.value) {
|
|
const { axis, index } = activeLayer.value
|
|
// Logic Call
|
|
const count = Math.abs(steps)
|
|
const direction = steps > 0 ? 1 : -1
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
rotateLayer(axis, index, direction)
|
|
}
|
|
}
|
|
|
|
// Reset
|
|
activeLayer.value = null
|
|
currentLayerRotation.value = 0
|
|
isAnimating.value = false
|
|
selectedCubie.value = null
|
|
selectedFace.value = null
|
|
}
|
|
|
|
const getCubieStyle = (c) => {
|
|
// Base Position
|
|
const x = c.x * (SCALE + GAP)
|
|
const y = c.y * -(SCALE + GAP) // Y is up in logic, down in CSS
|
|
const z = c.z * (SCALE + GAP)
|
|
|
|
let transform = `translate3d(${x}px, ${y}px, ${z}px)`
|
|
|
|
// Apply Active Layer Rotation
|
|
if (activeLayer.value) {
|
|
const { axis, index } = activeLayer.value
|
|
let match = false
|
|
// Match based on CURRENT LOGICAL POSITION
|
|
if (axis === 'x' && c.x === index) match = true
|
|
if (axis === 'y' && c.y === index) match = true
|
|
if (axis === 'z' && c.z === index) match = true
|
|
|
|
if (match) {
|
|
// Rotation Group around Center (0,0,0)
|
|
let rot = currentLayerRotation.value
|
|
|
|
// Axis mapping for CSS
|
|
// If we rotate a group around center, we want standard rotation.
|
|
// Logic Z=1 (Front). CSS +Z is Front.
|
|
// Logic Y=1 (Up). CSS -Y is Up.
|
|
// Logic X=1 (Right). CSS +X is Right.
|
|
|
|
// Rotations:
|
|
// CSS rotateX: + is Top->Back.
|
|
// CSS rotateY: + is Right->Back (Spin Right).
|
|
// CSS rotateZ: + is Top->Right (Clockwise).
|
|
|
|
if (axis === 'x') transform = `rotateX(${-rot}deg) ` + transform
|
|
if (axis === 'y') transform = `rotateY(${-rot}deg) ` + transform
|
|
if (axis === 'z') transform = `rotateZ(${rot}deg) ` + transform
|
|
}
|
|
}
|
|
|
|
return { transform }
|
|
}
|
|
|
|
const getProjectionStyle = (c, face) => {
|
|
let col = 0
|
|
let row = 0
|
|
|
|
if (face === FACES.LEFT) {
|
|
col = 1 - c.z
|
|
row = 1 - c.y
|
|
} else if (face === FACES.BACK) {
|
|
col = 1 - c.x
|
|
row = 1 - c.y
|
|
} else if (face === FACES.DOWN) {
|
|
col = c.x + 1
|
|
row = 1 - c.z
|
|
}
|
|
|
|
const x = (col - 1) * SCALE
|
|
const y = (row - 1) * SCALE
|
|
|
|
return { transform: `translate3d(${x}px, ${y}px, 0px)` }
|
|
}
|
|
|
|
const applyMove = (move) => {
|
|
let base = move
|
|
let isPrime = false
|
|
let turns = 1
|
|
|
|
if (move.endsWith('2')) {
|
|
turns = 2
|
|
base = move[0]
|
|
} else if (move.endsWith('-prime')) {
|
|
isPrime = true
|
|
base = move[0]
|
|
}
|
|
|
|
const notation = isPrime ? `${base}'` : base
|
|
|
|
for (let i = 0; i < turns; i += 1) {
|
|
turn(notation)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
initCube()
|
|
window.addEventListener('mousemove', onMouseMove)
|
|
window.addEventListener('mouseup', onMouseUp)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('mousemove', onMouseMove)
|
|
window.removeEventListener('mouseup', onMouseUp)
|
|
// Clean up any potential animation frames? rafId is local to snapRotation, but harmless.
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="smart-cube-container">
|
|
<div class="scene" :style="{ transform: `rotateX(${rx}deg) rotateY(${ry}deg)` }">
|
|
<div class="cube">
|
|
<div v-for="c in cubies" :key="c.id"
|
|
class="cubie"
|
|
:style="getCubieStyle(c)"
|
|
:data-cubie-id="c.id">
|
|
|
|
<div v-for="(color, face) in c.faces" :key="face"
|
|
class="sticker"
|
|
:class="[face, color]"
|
|
:data-id="c.id"
|
|
:data-face="face">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- Projections of Hidden Faces -->
|
|
<div v-if="showProjections" class="projections">
|
|
<!-- Guide Lines -->
|
|
<Line3D v-for="(line, i) in projectionLines" :key="'line-'+i"
|
|
:start="line.start" :end="line.end"
|
|
:color="'var(--text-strong)'"
|
|
:thickness="1" />
|
|
|
|
<!-- Left Face Projection -->
|
|
<div class="projection-group left-projection">
|
|
<div v-for="c in projectedCubies.left" :key="c.id"
|
|
class="cubie-placeholder"
|
|
:style="getProjectionStyle(c, FACES.LEFT)">
|
|
<div class="sticker" :class="c.faces.left"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back Face Projection -->
|
|
<div class="projection-group back-projection">
|
|
<div v-for="c in projectedCubies.back" :key="c.id"
|
|
class="cubie-placeholder"
|
|
:style="getProjectionStyle(c, FACES.BACK)">
|
|
<div class="sticker" :class="c.faces.back"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Down Face Projection (Exploded View) -->
|
|
<div class="projection-group down-projection">
|
|
<div v-for="c in projectedCubies.down" :key="c.id"
|
|
class="cubie-placeholder"
|
|
:style="getProjectionStyle(c, FACES.DOWN)">
|
|
<div class="sticker" :class="c.faces.down"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<div class="controls-row">
|
|
<button class="btn-neon move-btn" @click="applyMove('U')">U</button>
|
|
<button class="btn-neon move-btn" @click="applyMove('U-prime')">U'</button>
|
|
<button class="btn-neon move-btn" @click="applyMove('U2')">U2</button>
|
|
</div>
|
|
<div class="controls-row">
|
|
<button class="btn-neon move-btn" @click="applyMove('L')">L</button>
|
|
<button class="btn-neon move-btn" @click="applyMove('L-prime')">L'</button>
|
|
<button class="btn-neon move-btn" @click="applyMove('L2')">L2</button>
|
|
</div>
|
|
<div class="controls-row">
|
|
<button class="btn-neon move-btn" @click="applyMove('F')">F</button>
|
|
<button class="btn-neon move-btn" @click="applyMove('F-prime')">F'</button>
|
|
<button class="btn-neon move-btn" @click="applyMove('F2')">F2</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.smart-cube-container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
background: transparent; /* Use global background */
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.scene {
|
|
position: relative;
|
|
width: 0;
|
|
height: 0;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.cube {
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.cubie {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-left: -50px;
|
|
margin-top: -50px;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.controls {
|
|
position: absolute;
|
|
top: 96px;
|
|
right: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
z-index: 50;
|
|
}
|
|
|
|
.controls-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.move-btn {
|
|
min-width: 44px;
|
|
height: 36px;
|
|
font-size: 0.9rem;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/* Projection Styles */
|
|
.projections {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 0; height: 0;
|
|
pointer-events: none; /* Let clicks pass through to the cube */
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/*
|
|
Positioning relative to center (0,0,0).
|
|
Cube size is approx 300px (3 * 100px).
|
|
Projections are "exploded" views floating around the cube.
|
|
*/
|
|
|
|
/* Projection Groups - Exploded View Containers */
|
|
.projection-group {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
transform-style: preserve-3d;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cubie-placeholder {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
top: 0;
|
|
left: 0;
|
|
margin-top: -50px;
|
|
margin-left: -50px;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.left-projection {
|
|
transform: translateX(-350px) translateY(0) translateZ(0) rotateY(-90deg);
|
|
}
|
|
|
|
.back-projection {
|
|
transform: translateX(0) translateY(-200px) translateZ(-350px) rotateY(0deg);
|
|
}
|
|
|
|
.down-projection {
|
|
transform: translateX(0) translateY(350px) translateZ(0) rotateX(90deg);
|
|
}
|
|
|
|
|
|
.sticker {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
top: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
background-color: #000; /* Black plastic base */
|
|
border: 1px solid #000; /* Ensure edge is solid */
|
|
box-shadow: 0 0 0 1px #000; /* External bleed to cover sub-pixel gaps */
|
|
border-radius: 2px; /* Minimal rounding for plastic edges, practically square */
|
|
backface-visibility: hidden; /* Hide inside faces */
|
|
}
|
|
|
|
/* Pseudo-element for the colored sticker part */
|
|
.sticker::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
right: 4px;
|
|
bottom: 4px;
|
|
border-radius: 8px; /* Rounded sticker */
|
|
box-shadow: inset 0 0 5px rgba(0,0,0,0.3); /* Inner depth */
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Sticker Positions relative to Cubie Center */
|
|
.sticker.up { transform: rotateX(90deg) translateZ(50px); }
|
|
.sticker.down { transform: rotateX(-90deg) translateZ(50px); }
|
|
.sticker.front { transform: translateZ(50px); }
|
|
.sticker.back { transform: rotateY(180deg) translateZ(50px); }
|
|
.sticker.left { transform: rotateY(-90deg) translateZ(50px); }
|
|
.sticker.right { transform: rotateY(90deg) translateZ(50px); }
|
|
|
|
/* Colors - apply to the pseudo-element */
|
|
.white::after { background: #E0E0E0; }
|
|
.yellow::after { background: #FFD500; }
|
|
.green::after { background: #009E60; }
|
|
.blue::after { background: #0051BA; }
|
|
.orange::after { background: #FF5800; }
|
|
.red::after { background: #C41E3A; }
|
|
|
|
/* Black internal faces - no sticker needed */
|
|
.black {
|
|
background: #050505;
|
|
border: 1px solid #000;
|
|
border-radius: 0;
|
|
display: block;
|
|
box-shadow: 0 0 0 1px #000; /* Fill gaps between internal faces */
|
|
}
|
|
.black::after {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|