feat: Add 2048-Game Mathematical Tile Slider (#4441)

projects/2048-Game/css/animations.css

@@ -0,0 +1,25 @@
+.overlay {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: rgba(0,0,0,0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    transition: opacity 0.3s;
+}
+.overlay.hidden { opacity: 0; pointer-events: none; }
+
+.modal {
+    background: var(--modal-bg);
+    color: #111;
+    padding: 40px;
+    border-radius: 12px;
+    text-align: center;
+    animation: popUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes popUp {
+    from { transform: scale(0.8); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}

projects/2048-Game/css/components.css

@@ -0,0 +1,36 @@
+.tile {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+    cursor: grab;
+    transition: transform 0.2s, box-shadow 0.2s;
+    position: relative;
+}
+
+.tile.fixed {
+    cursor: default;
+    z-index: 2;
+}
+.tile.fixed::after {
+    content: '•';
+    color: rgba(0,0,0,0.5);
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 20px;
+}
+
+.tile.dragging {
+    opacity: 0.5;
+    transform: scale(0.9);
+}
+
+.btn {
+    padding: 8px 16px;
+    background: #333;
+    color: #fff;
+    border: 1px solid #555;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.btn.primary { background: var(--accent); border: none; }

projects/2048-Game/css/design.css

@@ -0,0 +1,164 @@
+#controls-panel {
+    pointer-events: auto;
+    background: var(--panel-bg);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 20px;
+    margin: 0 auto;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    max-width: 800px;
+}
+
+.material-palette {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-bottom: 15px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.material-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    position: relative;
+    overflow: hidden;
+}
+
+.material-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
+}
+
+.material-btn.active {
+    transform: scale(1.15);
+    border-color: #fff;
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
+}
+
+.material-btn::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+    height: 50%;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.brush-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 30px;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.control-group label {
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-secondary);
+}
+
+input[type=range] {
+    -webkit-appearance: none;
+    width: 200px;
+    background: transparent;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: var(--accent-color);
+    cursor: pointer;
+    margin-top: -6px;
+    box-shadow: 0 0 10px var(--accent-color);
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    cursor: pointer;
+    background: var(--border-color);
+    border-radius: 2px;
+}
+
+.system-controls {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    padding-top: 15px;
+    border-top: 1px solid var(--border-color);
+}
+
+.btn {
+    padding: 8px 16px;
+    border-radius: 6px;
+    border: none;
+    background: #333;
+    color: #fff;
+    font-family: var(--font-main);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    letter-spacing: 0.5px;
+}
+
+.btn:hover {
+    background: #444;
+}
+
+.btn.primary {
+    background: var(--accent-color);
+    color: #000;
+}
+
+.btn.warning {
+    background: #3a1c1c;
+    color: var(--danger-color);
+    border: 1px solid #522;
+}
+
+.btn.warning:hover {
+    background: var(--danger-color);
+    color: white;
+}
+
+.tooltip {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    pointer-events: none;
+    transform: translate(-50%, -150%);
+    transition: opacity 0.1s;
+    border: 1px solid var(--border-color);
+}
+
+.tooltip.hidden {
+    opacity: 0;
+}

projects/2048-Game/css/layout.css

@@ -0,0 +1,26 @@
+.app-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    padding: 20px;
+}
+
+header {
+    width: 100%;
+    max-width: 600px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+main.grid-container {
+    display: grid;
+    gap: var(--tile-gap);
+    background: #000;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    /* Grid template columns set by JS */
+}

projects/2048-Game/css/main-style.css

@@ -0,0 +1,103 @@
+/* Palette Colors match the engine constants */
+
+.mat-empty {
+    background: #000000;
+    border: 1px solid #333;
+}
+
+.mat-sand {
+    background: #f4a460;
+}
+
+.mat-water {
+    background: #4169e1;
+}
+
+.mat-stone {
+    background: #808080;
+}
+
+.mat-fire {
+    background: #ff4500;
+}
+
+.mat-smoke {
+    background: #696969;
+}
+
+.mat-wood {
+    background: #8b4513;
+}
+
+.mat-plant {
+    background: #228b22;
+}
+
+.mat-acid {
+    background: #7fff00;
+}
+
+.mat-oil {
+    background: #332211;
+}
+
+.mat-ice {
+    background: #a5f2f3;
+}
+
+.mat-steam {
+    background: #dcdcdc;
+}
+
+.mat-lava {
+    background: #cf1020;
+}
+
+.mat-gunpowder {
+    background: #444444;
+}
+
+.mat-seed {
+    background: #2e8b57;
+}
+
+.mat-c4 {
+    background: #2f2f2f;
+    border: 1px solid #555;
+}
+
+.mat-virus {
+    background: #880088;
+}
+
+.mat-mithril {
+    background: #e0e0e0;
+}
+
+.mat-disco {
+    background: linear-gradient(45deg, red, yellow, green, blue);
+}
+
+.mat-void {
+    background: #000;
+    border: 1px solid #111;
+    box-shadow: inset 0 0 5px #fff;
+}
+
+.mat-life {
+    background: #00ff00;
+}
+
+.mat-crystal {
+    background: #ffffcc;
+}
+
+.mat-spout-water {
+    background: #a0a0ff;
+}
+
+.mat-oil {
+    background: #806000;
+}
+
+/* Custom tooltips for materials can be added here if needed via JS */

projects/2048-Game/css/main.css

@@ -0,0 +1,6 @@
+/* Main Entry Point for CSS */
+@import 'variables.css';
+@import 'reset.css';
+@import 'layout.css';
+@import 'components.css';
+@import 'animations.css';   

projects/2048-Game/css/reset.css

@@ -0,0 +1,9 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-light);
+    font-family: var(--font-main);
+    height: 100vh;
+    overflow: hidden;
+    user-select: none;
+}