diff --git a/story-player-raylib/app.js b/story-player-raylib/app.js deleted file mode 100644 index 206e2ab..0000000 --- a/story-player-raylib/app.js +++ /dev/null @@ -1,39 +0,0 @@ -import apiClient from './classes/api-client.js' -import eventBus from './classes/event-bus.js'; -import storage from './classes/storage.js'; - - -import { render } from 'preact'; -import { html } from 'htm/preact'; -import TopMenu from './components/TopMenu.js' -import ParametersDialog from './components/ParametersDialog.js'; - -export function App() { - - this.params = storage.getItem('server') || { - serverUrl: '127.0.0.1', - serverPort: 8081, - }; - - storage.setItem('server', this.params); - - // try to connect to the server - apiClient.setBaseUrl(`http://${this.params.serverUrl}:${this.params.serverPort}/api/v1`); - apiClient.get('/library/list') - .then(data => { - console.log('Server is up and running', data); - eventBus.publish('server-state-changed', {connected: true}); - }) - .catch(error => { - console.error('Server is down', error); - eventBus.publish('server-state-changed', {connected: false}); - }); - - - return html` - <${TopMenu} /> - <${ParametersDialog} /> - `; -} - -render(html`<${App} />`, document.getElementById('app')); diff --git a/story-player-raylib/index.html b/story-player-raylib/index.html deleted file mode 100644 index 58a5064..0000000 --- a/story-player-raylib/index.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - - - - - OpenStoryTeller Web Player - - - - - - - - - - - - - -
-
- -
- -
-

- -

- - - - - - \ No newline at end of file diff --git a/story-player-web/app.js b/story-player-web/app.js new file mode 100644 index 0000000..698d9ec --- /dev/null +++ b/story-player-web/app.js @@ -0,0 +1,55 @@ +import apiClient from './classes/api-client.js' +import eventBus from './classes/event-bus.js'; +import storage from './classes/storage.js'; + + +import { render } from 'preact'; +import { createContext } from "preact"; +import { html } from 'htm/preact'; +import TopMenu from './components/TopMenu.js' +import ParametersDialog from './components/ParametersDialog.js'; +import StoryPlayer from './components/StoryPlayer.js'; +import StoriesList from './components/StoriesList.js'; + +export const AppContext = createContext("appContext"); + +export function App() { + + const DefaultContext = { + stories: [] + }; + + this.params = storage.getItem('server') || { + serverUrl: '127.0.0.1', + serverPort: 8081, + }; + + storage.setItem('server', this.params); + + // try to connect to the server + apiClient.setBaseUrl(`http://${this.params.serverUrl}:${this.params.serverPort}/api/v1`); + apiClient.get('/library/list') + .then(data => { + console.log('Server is up and running', data); + eventBus.publish('server-state-changed', {connected: true}); + }) + .catch(error => { + console.log('Server is down'); + eventBus.publish('server-state-changed', {connected: false}); + }); + + + return html` + + <${TopMenu} /> + <${ParametersDialog} /> + +
+ <${StoryPlayer} /> + <${StoriesList} /> +
+ + `; +} + +render(html`<${App} />`, document.getElementById('app')); diff --git a/story-player-web/assets/Inter-Regular.ttf b/story-player-web/assets/Inter-Regular.ttf new file mode 100644 index 0000000..2c164bb Binary files /dev/null and b/story-player-web/assets/Inter-Regular.ttf differ diff --git a/story-player-web/assets/logo-color.png b/story-player-web/assets/logo-color.png new file mode 100644 index 0000000..5427504 Binary files /dev/null and b/story-player-web/assets/logo-color.png differ diff --git a/story-player-raylib/classes/api-client.js b/story-player-web/classes/api-client.js similarity index 69% rename from story-player-raylib/classes/api-client.js rename to story-player-web/classes/api-client.js index c0fc121..af9fc28 100644 --- a/story-player-raylib/classes/api-client.js +++ b/story-player-web/classes/api-client.js @@ -8,6 +8,9 @@ class ApiClient { } async request(endpoint, method = 'GET', data = null, headers = {}) { + const controller = new AbortController(); + const timeout = setTimeout(() => controller.abort(), 5000); + const config = { method, headers: { @@ -20,17 +23,18 @@ class ApiClient { config.body = JSON.stringify(data); } - try { - const response = await fetch(`${this.baseURL}${endpoint}`, config); - if (!response.ok) { - const errorData = await response.json(); - throw new Error(errorData.message || 'Something went wrong'); + + const promise = fetch(`${this.baseURL}${endpoint}`, config).then(async (response) => { + + const data = await response.json(); + if (response.ok) { + return data; + } else { + return Promise.reject(data); } - return await response.json(); - } catch (error) { - console.error('API request error:', error); - throw error; - } + }); + return promise.finally(() => clearTimeout(timeout)); + } get(endpoint, headers = {}) { diff --git a/story-player-raylib/classes/event-bus.js b/story-player-web/classes/event-bus.js similarity index 100% rename from story-player-raylib/classes/event-bus.js rename to story-player-web/classes/event-bus.js diff --git a/story-player-raylib/classes/storage.js b/story-player-web/classes/storage.js similarity index 100% rename from story-player-raylib/classes/storage.js rename to story-player-web/classes/storage.js diff --git a/story-player-raylib/components/ParametersDialog.js b/story-player-web/components/ParametersDialog.js similarity index 100% rename from story-player-raylib/components/ParametersDialog.js rename to story-player-web/components/ParametersDialog.js diff --git a/story-player-web/components/StoriesList.js b/story-player-web/components/StoriesList.js new file mode 100644 index 0000000..27dc05e --- /dev/null +++ b/story-player-web/components/StoriesList.js @@ -0,0 +1,59 @@ +import { html } from 'htm/preact'; +import eventBus from '../classes/event-bus.js'; +import { useState } from 'preact/hooks'; + + +function StoriesList() { + + return html` + +
+
+
+
+

Titre de la Carte 1

+

Description de la carte 1. Voici une brève description pour cette carte.

+
+ Image de la carte 1 +
+
+
+ + `; +} +export default StoriesList; diff --git a/story-player-web/components/StoryPlayer.js b/story-player-web/components/StoryPlayer.js new file mode 100644 index 0000000..25c1260 --- /dev/null +++ b/story-player-web/components/StoryPlayer.js @@ -0,0 +1,26 @@ +import { html } from 'htm/preact'; +import eventBus from '../classes/event-bus.js'; +import { useState } from 'preact/hooks'; + + +function StoryPlayer() { + + return html` + +
+
+ +
+
+
⇦
+
✓
+
⇨
+
⏎
+ +
+
+ `; +} +export default StoryPlayer; diff --git a/story-player-raylib/components/TopMenu.js b/story-player-web/components/TopMenu.js similarity index 92% rename from story-player-raylib/components/TopMenu.js rename to story-player-web/components/TopMenu.js index e5ff7d4..dff2433 100644 --- a/story-player-raylib/components/TopMenu.js +++ b/story-player-web/components/TopMenu.js @@ -56,9 +56,7 @@ function TopMenu() {
<${MessageComponent} show=${error} message=${message} /> -
- Paramètres -
+
Paramètres
`; } diff --git a/story-player-web/index.html b/story-player-web/index.html new file mode 100644 index 0000000..cad2e28 --- /dev/null +++ b/story-player-web/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + OpenStoryTeller Web Player + + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/story-player-raylib/main.css b/story-player-web/main.css similarity index 100% rename from story-player-raylib/main.css rename to story-player-web/main.css diff --git a/story-player-raylib/style.css b/story-player-web/style.css similarity index 99% rename from story-player-raylib/style.css rename to story-player-web/style.css index 61c8762..3f1ab25 100644 --- a/story-player-raylib/style.css +++ b/story-player-web/style.css @@ -199,7 +199,6 @@ body { border-radius: 3px; padding: 4px 8px; background: var(--block-background-color); - font-weight: bold; cursor: pointer; box-sizing: border-box; @@ -283,6 +282,10 @@ body { cursor: initial !important; } +.block.btn { + font-weight: bold; +} + /* FIXED STYLES */ .block.fixed:hover, .block.fixed:hover::before,