Hugging Face's logo

Spaces:
kemsa51
/
sf-9a1
Running

App Files Community
kemsa51 commited on
Commit
7dc9c15
·
verified ·
1 Parent(s): fbf462e

Add 4 files

Browse files
Files changed (4) hide show
  1. app.js +41 -0
  2. game.php +43 -0
  3. generate.php +20 -0
  4. index.html +61 -19
app.js ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ function generate() {
2
+ const title = document.querySelector("[name='title']");
3
+ const author = document.querySelector("[name='author']");
4
+ const story = document.querySelector("[name='story']");
5
+
6
+ if (!title.value || !author.value || !story.value) {
7
+ alert("Please enter all required fields");
8
+ return;
9
+ }
10
+
11
+ const json = {
12
+ title: title.value,
13
+ author: author.value,
14
+ story: story.value,
15
+ };
16
+
17
+ const xhttp = new XMLHttpRequest();
18
+ xhttp.open("POST", "generate.php", true);
19
+ xhttp.setRequestHeader("Content-type", "application/json;charset=UTF-8");
20
+ xhttp.send(JSON.stringify(json));
21
+ xhttp.onload = () => {
22
+ if (xhttp.status === 200) {
23
+ console.log(xhttp.responseText);
24
+ const response = JSON.parse(xhttp.responseText);
25
+ const { status, data } = response;
26
+ if (status === "ok") {
27
+ const { id, title, author, story } = data;
28
+ const message = `Generated story with id ${id} and title ${title} by ${author}.`;
29
+ console.log(message);
30
+ } else {
31
+ console.log("Error generating story");
32
+ }
33
+ } else {
34
+ console.log("Request failed");
35
+ }
36
+ };
37
+ }
38
+
39
+ function startGame() {
40
+ window.location.href = `game.php?id=${id}`;
41
+ }
game.php ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ $id = $_GET['id'];
3
+
4
+ // Load the story data
5
+ $story = json_decode(file_get_contents("stories/".$id .".json"), true);
6
+
7
+ // Create a new Three.js scene
8
+ const scene = new THREE.Scene();
9
+ // Create a new Three.js camera and set its position
10
+ const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
11
+ camera.position.set(0, 0, 50);
12
+
13
+ // Add a Three.js directional light to the scene
14
+ const light = new THREE.DirectionalLight(0xffffff, 1);
15
+ light.position.set(1, 1, 1);
16
+ scene.add(light);
17
+
18
+ // Add a Three.js wireframe geometry to the scene
19
+ const geometry = new THREE.BoxGeometry(10, 10, 10);
20
+ const material = new THREE.MeshBasicMaterial({ color: 0xCFCFCF });
21
+ const cube = new THREE.Mesh(geometry, material);
22
+ scene.add(cube);
23
+
24
+ // Set the renderer and add it to the HTML body
25
+ const renderer = new THREE.WebGLRenderer({
26
+ canvas: document.querySelector('#c'),
27
+ antialias: true
28
+ });
29
+ renderer.setSize(window.innerWidth, window.innerHeight);
30
+ document.body.appendChild(renderer.domElement);
31
+
32
+ // Game loop
33
+ function animate() {
34
+ requestAnimationFrame(animate);
35
+
36
+ // Update the Three.js camera position
37
+ camera.position.x += 0.05;
38
+ camera.position.y += 0.05;
39
+
40
+ // Render the scene
41
+ renderer.render(scene, camera);
42
+ }
43
+ animate();
generate.php ADDED
@@ -0,0 +1,20 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ $data = json_decode(file_get_contents('php://input'), true);
3
+ $title = $data['title'];
4
+ $author = $data['author'];
5
+ $story = $data['story'];
6
+ $id = uniqid();
7
+
8
+ // Create the story file
9
+ file_put_contents("stories/". $id .".json", $story);
10
+
11
+ // Return the story id
12
+ echo json_encode(array(
13
+ "status" => "ok",
14
+ "data" => array(
15
+ "id" => $id,
16
+ "title" => $title,
17
+ "author" => $author,
18
+ "story" => $story,
19
+ )
20
+ ));
index.html CHANGED
@@ -1,19 +1,61 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Children's Story</title></head><body><div class="space-y-8">
2
+
3
+ <div class="font-bold text-3xl text-center">Introduction</div>
4
+
5
+ <p class="text-xl font-medium text-gray-700">Welcome to the children's story website. Here, you can create your own personalized story and interactive game. Please follow along the instructions and let's make some magic happen!</p>
6
+
7
+ <div class="font-bold text-3xl text-center">Start the Story</div>
8
+
9
+ <div class="space-y-4">
10
+ <div class="flex justify-center">
11
+ <input type="text" name="title" x-model="title" placeholder="Title" class="w-full rounded-md mb-2 text-gray-600 font-bold">
12
+ <label class="mr-4">Title</label>
13
+ </div>
14
+
15
+ <div class="flex justify-center">
16
+ <input type="text" name="author" x-model="author" placeholder="Author" class="w-full rounded-md mb-2 text-gray-600 font-bold">
17
+ <label>Author</label>
18
+ </div>
19
+
20
+ <div class="flex justify-center">
21
+ <div class="w-full mb-8">
22
+ <div class="p-4 border-t-2 border-gray-200">
23
+ <p>
24
+ <textarea name="story" x-model="story" placeholder="Describe the story" cols="50" rows="10" class="w-full rounded-md mb-2 text-gray-600 font-bold"></textarea>
25
+ </p>
26
+ </div>
27
+ <p>
28
+ <span class="text-sm font-medium text-gray-700">Imagine you are a child in 500 words.</span>
29
+ </p>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="flex justify-center">
34
+ <button type="button" class="btn btn-primary" x-on:click="generate">Generate Story</button>
35
+ </div>
36
+ </div>
37
+
38
+ <div class="font-bold text-3xl text-center"> Interactive Game</div>
39
+
40
+ <div class="space-y-8">
41
+ <div class="w-full"></div>
42
+
43
+ <div class="flex justify-center">
44
+ <div class="w-full mb-8">
45
+ <div class="p-4 border-t-2 border-gray-200">
46
+ <p>
47
+ <span class="text-sm font-medium text-gray-700"> intitulé</span>
48
+ </p>
49
+ <p>
50
+ <span class="text-sm font-medium text-gray-700"> game code</span>
51
+ </p>
52
+ </div>
53
+ </div>
54
+ </div>
55
+
56
+ <div class="flex justify-center">
57
+ <button type="button" class="btn btn-primary" x-on:click="startGame">Start the Game</button>
58
+ </div>
59
+ </div>
60
+
61
+ </div></body></html>