Hugging Face's logo

Spaces:
launch-calcium
/
Js
Running

App Files Community
Js
File size: 4,884 Bytes
989b382
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
// Import necessary packages
import { Scene, WebGLRenderer, PerspectiveCamera } from 'three';
import { OrbitControls } from 'three/examples/webgl2/controls';

// Initialize the scene
const scene = new Scene();
scene.setSize(600, 600);

// Create a camera
const camera = new PerspectiveCamera(45, 1, 0.1, 1000);
camera.position.z = 3;

// Add a light source
const light = new PointLight(0xffffff, 1, 1000, 0.5);
light.position.set(-20, 20, -20);
scene.add(light);

// Create a renderer
const renderer = new WebGLRenderer({
  canvas: document.getElementById('canvas'),
  antialias: true,
  preserveDrawingBuffer: false,
});
renderer.setSize(600, 600);

// Add controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan();
controls.enableZoom();

// Create a group to hold the slot machine elements
const slotMachineGroup = new Group();

// Create four stacked windows with different backgrounds and text
const window1 = new Group().addChild(new Cylinder(5, 5, 20, 0.5)).setMatrixAutoScale();
window1.material.color = new Color('#0000ff');
window1.material.opacity = 0.7;
window1.material.transparent = true;
window1.material.wireframe = false;

const window2 = new Cylinder(5, 5, 20, 0.5).setMatrixAutoScale();
window2.material.color = new Color('#ff0000');
window2.material.opacity = 0.7;
window2.material.transparent = true;
window2.material.wireframe = false;

const window3 = new Cylinder(5, 5, 20, 0.5).setMatrixAutoScale();
window3.material.color = new Color('#00ff00');
window3.material.opacity = 0.7;
window3.material.transparent = true;
window3.material.wireframe = false;

const window4 = new Cylinder(5, 5, 20, 0.5).setMatrixAutoScale();
window4.material.color = new Color('#ff00ff');
window4.material.opacity = 0.7;
window4.material.transparent = true;
window4.material.wireframe = false;

// Add the windows to the slot machine group
slotMachineGroup.addChild(window1);
slotMachineGroup.addChild(window2);
slotMachineGroup.addChild(window3);
slotMachineGroup.addChild(window4);

// Add buttons for copy, result, and restart
const copyButton = new Cylinder(5, 5, 10, 0.5).setMatrixAutoScale();
copyButton.material.color = new Color('#ff0000');
copyButton.material.opacity = 0.7;
copyButton.material.transparent = true;
copyButton.material.wireframe = false;
copyButton.position.set(10, 25, 0);

const resultButton = new Cylinder(5, 5, 10, 0.5).setMatrixAutoScale();
resultButton.material.color = new Color('#ff0000');
resultButton.material.opacity = 0.7;
resultButton.material.transparent = true;
resultButton.material.wireframe = false;
resultButton.position.set(10, 50, 0);

const restartButton = new Cylinder(5, 5, 10, 0.5).setMatrixAutoScale();
restartButton.material.color = new Color('#ff0000');
restartButton.material.opacity = 0.7;
restartButton.material.transparent = true;
restartButton.material.wireframe = false;
restartButton.position.set(10, 85, 0);

// Add the buttons to the slot machine group
slotMachineGroup.addChild(copyButton);
slotMachineGroup.addChild(resultButton);
slotMachineGroup.addChild(restartButton);

// Add the slot machine group to the scene
scene.add(slotMachineGroup);

// Add controls to the scene
controls.update();

// Add event listeners for button clicks
window1.addEventListener('click', function() {
  console.log('Copy button clicked');
});

window2.addEventListener('click', function() {
  console.log('Result button clicked');
});

window3.addEventListener('click', function() {
  console.log('Restart button clicked');
});

// Add the scene to the document
document.body.appendChild(renderer.domElement);

// Start the animation loop
const frameRate = 10; // update every frame
requestAnimationFrame(animate);

function animate() {
  // Update the slot machine elements
  window1.material.color.setHex(Math.floor(Math.random() * 256));
  window2.material.color.setHex(Math.floor(Math.random() * 256));
  window3.material.color.setHex(Math.floor(Math.random() * 256));
  window4.material.color.setHex(Math.floor(Math.random() * 256));

  // Update the buttons' text based on the current state of the slot machine
  copyButton.material.color.setHex(Math.floor(Math.random() * 256));
  resultButton.material.color.setHex(Math.floor(Math.random() * 256));
  restartButton.material.color.setHex(Math.floor(Math.random() * 256));

  // Update the buttons' position based on the current state of the slot machine
  copyButton.position.x = Math.random() * 100 - 50;
  resultButton.position.x = Math.random() * 100 - 50;
  restartButton.position.x = Math.random() * 100 - 50;

  // Update the slot machine group's position based on the current state of the slot machine
  slotMachineGroup.position.set(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50);

  // Update the scene
  renderer.render(scene, camera);

  // Request another frame
  requestAnimationFrame(animate);
}