Skip to content

Feature/boilerplate-structure #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alien1976 merged 3 commits into from
Nov 12, 2024
Merged

Feature/boilerplate-structure #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e76b35
Created boilerplate template structure and BaseComponent
alien1976 Nov 7, 2024
7eb6e1a
Added readme files for the template and the project
alien1976 Nov 8, 2024
9bc1b70
Fixed review issues and added root project package.json and tsconfig …
alien1976 Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
dist
32 changes: 32 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# Gameface UI

## Getting started

To begin using the Gameface UI, we recommend utilizing the components in the `gf-ui-components` folder and are built with [SolidJS](https://www.solidjs.com/), and setting up your project with the template located in the `template` folder.

The template provides a boilerplate project structure with [SolidJS](https://www.solidjs.com/), [Vite](https://vite.dev/) and [TypeScript](https://www.typescriptlang.org/). It includes two sample views - `hud` and `menu` - which you can preview as examples before starting your project.

### Installing the template or components

We suggest using `degit` for cloning repositories, specific folders, branches, or tags.

The next steps are showing how to get started building the project using Gameface UI:

1. Install `degit` globally with: `npm i -g degit`. Or you can simply use `npx` without installing globally the `degit` module - `npx degit`.
2. With `degit` installed, clone the template into your folder by running `degit CoherentLabs/Gameface-UI/template#master`. This will download the latest template version. To clone a specific version, replace `#master` with the desired tag, e.g., `#1.2.3`.
3. If you'd like to use `gf-ui-components` for quick prototyping and UI development:
1. Create a folder within your project, such as `gf-ui-components`.
2. Run `degit CoherentLabs/Gameface-UI/gf-ui-components#master` inside this folder to get the latest components. For a specific version, replace `#master` with the desired tag.

### Running the project

Once the template project is set up, install the required npm modules by running `npm i`.

Refer to the README.md in the `template` folder for more information on commands for building in production or dev environments, and start developing your UI.

### Updating the components

To update the `gf-ui-components` folder with the latest or a specific version:

1. Delete the contents of the `gf-ui-components` folder.
2. Run `degit CoherentLabs/Gameface-UI/gf-ui-components#master` to get the latest components or `degit CoherentLabs/Gameface-UI/gf-ui-components#1.2.3` for a specific version.
14 changes: 14 additions & 0 deletions gf-ui-components/BaseComponent/BaseComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
type BaseComponentType<P = {}> = (props?: P) => {
GFUI: {}
log: typeof console.log
}

const BaseComponent: BaseComponentType = (props) => {
const GFUI = {}
const log = console.log;

return { GFUI, log };
}


export default BaseComponent;
66 changes: 66 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 12 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"name": "gameface-ui",
"version": "0.0.0",
"description": "",
"license": "MIT",
"devDependencies": {
"typescript": "^5.6.3"
},
"dependencies": {
"solid-js": "^1.9.3"
}
}
21 changes: 21 additions & 0 deletions template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# Gameface UI project template

## Creating a view

To create a new view, follow the structure of `src/views/hud` or `src/views/menu`. Start by making a new folder `src/views/${viewName}`, and within it, include `index.html`, `index.tsx`, `index.css`, and `${viewName}.tsx` files.

## Build & run the project in production

To create a production build, run `npm run build` from this folder. This will generate a production build within the `dist` directory.

Each view located in `src/views` will be built into `dist/${viewName}`. For instance, `src/views/hud` will be built in `dist/hud`.

To run the project, open the specific view by loading the `index.html` in the corresponding `dist/${viewName}` directory. For example, to load the hud view, open `dist/hud/index.html`.

## Run in development

To start the project in development mode, run `npm run dev` from this folder. This will start a server on `localhost:${port}`, typically on port `3000`.

To view a specific page during development, navigate to the following URL, for example: `http://localhost:3000/hud/` to load the hud view.

With the development server running, HOT module replacement will be enabled, so any changes you make will immediately be reflected.
Loading