Skip to content

Commit 841d064

Browse files
mario-delunamario-deluna
committed
Some docs
1 parent 10d90e7 commit 841d064

10 files changed

Lines changed: 468 additions & 5 deletions

File tree

‎.github/workflows/docs.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@ jobs:
1111
- uses: actions/setup-python@v2
1212
with:
1313
python-version: 3.x
14+
- uses: shivammathur/setup-php@v2
15+
with:
16+
php-version: '8.1'
1417
- run: cd docs && git clone https://github.com/phpgl/docs-assets && ls && ls docs-assets
18+
- run: chmod +x ./bin/build-api-docs.sh
19+
- run: ./bin/build-api-docs.sh
1520
- run: pip install git+https://${{ secrets.GH_TOKEN }}@github.com/mario-deluna/mkdocs-material-insiders.git
1621
- run: pip install mkdocs-include-dir-to-nav
1722
- run: mkdocs gh-deploy --force

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@ composer.lock
44
/coverage/
55
/var/
66
docs/docs-assets/
7+
.phpdoc/
8+
docs/api
9+
bin/phpDocumentor.phar

‎bin/build-api-docs.sh‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#/bin/bash
2+
3+
# get dir of the current file
4+
DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
5+
6+
# download phpdoc to the current directory
7+
# only wget if the file does not exist
8+
if [ ! -f $DIR/phpDocumentor.phar ]; then
9+
wget https://phpdoc.org/phpDocumentor.phar -O $DIR/phpDocumentor.phar
10+
fi
11+
12+
13+
# run phpdoc using config file
14+
php $DIR/phpDocumentor.phar run -c $DIR/../phpdoc.xml

‎docs/api-reference.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# API Reference
2+
3+
<div class="api-docs-container">
4+
<iframe src="api/index.html" class="api-docs-iframe"></iframe>
5+
</div>
6+
7+
<style>
8+
/* hide the title on this page */
9+
.api-docs-iframe {
10+
height: calc(100vh - (105px + 160px));
11+
width: 100%;
12+
border: none;
13+
padding: 0;
14+
margin: 0;
15+
position: absolute;
16+
top: 105px;
17+
bottom: 200px;
18+
left: 0;
19+
z-index: 1;
20+
}
21+
</style>

‎docs/getting-started/project-setup.md‎

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,76 @@ Setting up a new VISU PHP Game Project.
1313

1414
## Creating a new VISU project
1515

16-
Once you have all the requirements installed, you can create a new VISU project using Composer's `create-project` command:
16+
### Pick your Setup
17+
18+
VISU can be setup in multiple different ways, for the sake of simplicity we are going to focus on two main methods:
19+
20+
1. **🚀 [VISU Quickstart](#visu-quickstart)** (Recommended for beginners)
21+
<br>
22+
The VISU Quickstart creates a **minimal** and **lightweight** VISU application for **rapid prototyping**.
23+
24+
25+
2. **⚡ [Full VISU Starter Project](#full-visu-starter-project)** (Advanced)
26+
<br>
27+
The VISU Starter Project creates a **fully featured** VISU application with **basic game structure**, asset management, and **example code**. _(Think like a framework with controllers, routing, views, etc.)_
28+
29+
Once you have all the requirements installed, you can create a new VISU project using Composer's `create-project`.
30+
31+
## VISU Quickstart
32+
33+
_You can find the [VISU Quickstart repository here](https://github.com/phpgl/visu-quickstart)._
34+
35+
<figure markdown style="max-width: 200px;">
36+
![VISU Quickstart](../docs-assets/visu/getting-started/visu_quickstart.svg)
37+
</figure>
38+
39+
To create a new VISU Quickstart project, run the following Composer command in your terminal:
40+
41+
```bash
42+
composer create-project phpgl/visu-quickstart -s dev --prefer-dist my-php-game
43+
```
44+
45+
This command will create a new VISU project in the `my-php-game` directory.
46+
47+
Then enter the newly created project in your terminal:
48+
49+
```
50+
cd my-php-game
51+
```
52+
53+
And you're ready to go!
54+
55+
```
56+
php bin/start.php
57+
```
58+
59+
<figure markdown style="max-width: 600px;">
60+
![VISU Quickstart Window](../docs-assets/visu/getting-started/quickstart_start.gif)
61+
</figure>
62+
63+
You should see a window open with a black background and red ball that you can move around with "WASD" keys.
64+
65+
66+
### Quickstart Structure
67+
68+
```
69+
my-php-game/
70+
├── app.ctn <- App Configuration / Dependency Container
71+
├── bootstrap.php <- Bootstrap / Initialization File
72+
├── composer.json
73+
├── app/ <- Additional configuration / dependencies
74+
├── bin/ <- Executable scripts
75+
├── src/ <- Your game code
76+
│ └── Application.php
77+
├── var/ <- Writable directory for logs, cache, etc.
78+
└── vendor/ <- Composer dependencies
79+
```
80+
81+
## Full VISU Starter Project
82+
83+
_You can find the [VISU Starter Project repository here](https://github.com/phpgl/visu-starter)._
84+
85+
To create a new VISU Starter project, run the following Composer command in your terminal:
1786

1887
```bash
1988
composer create-project phpgl/visu-starter -s dev --prefer-dist my-php-game
@@ -29,7 +98,7 @@ After the installation, open the newly created project in your terminal:
2998
cd my-php-game
3099
```
31100

32-
## Running the game
101+
### Running the game
33102

34103
Once all dependencies are installed, you can run the game by executing the `play` command:
35104

‎docs/stylesheets/extra.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/* .highlight {
2+
--md-code-bg-color:hsla(232,15%,15%,1);
3+
--md-code-fg-color: hsla(232,18%,86%,1);
4+
--md-code-hl-color: rgba(66,135,255,0.15);
5+
--md-code-hl-number-color: #e6695b;
6+
--md-code-hl-special-color: #f06090;
7+
--md-code-hl-function-color: #c973d9;
8+
--md-code-hl-constant-color: #9383e2;
9+
--md-code-hl-keyword-color: #6791e0;
10+
--md-code-hl-string-color: #2fb170;
11+
--md-code-hl-name-color:hsla(232,18%,86%,1);
12+
--md-code-hl-operator-color:hsla(232,75%,90%,0.62);
13+
--md-code-hl-punctuation-color:hsla(232,75%,90%,0.62);
14+
--md-code-hl-comment-color:hsla(232,75%,90%,0.62);
15+
--md-code-hl-generic-color: hsla(232,75%,90%,0.62);
16+
--md-code-hl-variable-color: hsla(232,75%,90%,0.62);
17+
} */
18+
19+
.highlight {
20+
--md-code-bg-color: #252A37; /* Dark background */
21+
--md-code-fg-color: #d4d4d4; /* Default foreground text */
22+
--md-code-hl-color: #264f78; /* Line highlight background */
23+
--md-code-hl-number-color: #b5cea8; /* Number color */
24+
--md-code-hl-special-color: #569cd6; /* Special character color */
25+
--md-code-hl-function-color: #dcdcaa; /* Function name color */
26+
--md-code-hl-constant-color: #4ec9b0; /* Constant color */
27+
--md-code-hl-keyword-color: #c586c0; /* Keyword color */
28+
--md-code-hl-string-color: #ce9178; /* String color */
29+
--md-code-hl-name-color: #9cdcfe; /* Variable and other names */
30+
--md-code-hl-operator-color: #d4d4d4; /* Operator color */
31+
--md-code-hl-punctuation-color: #d4d4d4; /* Punctuation color */
32+
--md-code-hl-comment-color: #6a9955; /* Comment color */
33+
--md-code-hl-generic-color: #d4d4d4; /* Generic text color */
34+
--md-code-hl-variable-color: #9CDCFE; /* Variable color */
35+
}
36+
37+
.highlight pre code {
38+
border-radius: 8px;
39+
padding: 16px;
40+
}
41+
42+
.highlight :is(.nx) {
43+
color: #4EC9B0;
44+
}
45+
46+
.highlight :is(.na) {
47+
color: #DCDCAA;
48+
}
49+
50+
.md-typeset h3 code, .md-typeset h2 code {
51+
background-color: rgb(62, 97, 230);
52+
color: #fff;
53+
padding: 4px 10px;
54+
}
55+
56+
.video-wrapper {
57+
position: relative;
58+
display: block;
59+
height: 0;
60+
padding: 0;
61+
overflow: hidden;
62+
padding-bottom: 56.25%;
63+
}
64+
.video-wrapper > iframe {
65+
position: absolute;
66+
top: 0;
67+
bottom: 0;
68+
left: 0;
69+
width: 100%;
70+
height: 100%;
71+
border: 0;
72+
}
73+
74+
constant {
75+
font-family: monospace;
76+
background-color: #d5e8ff;
77+
font-size: 0.7rem;
78+
color: 333;
79+
padding: 3px 5px;
80+
border-radius: 4px;
81+
}
82+
83+
.md-content a {
84+
font-weight: bold;
85+
}
86+
87+
/* Homepage stuff */
88+
89+
90+
.mdx-expect {
91+
margin:2.4rem 0
92+
}
93+
94+
.mdx-expect__list {
95+
display: flex;
96+
flex-flow: row wrap;
97+
gap: 1.6rem;
98+
padding:0
99+
}
100+
101+
.mdx-expect__item {
102+
display: flex;
103+
flex: 1 0 48%;
104+
gap: .6rem;
105+
margin: 0;
106+
transition:transform .75s cubic-bezier(.075, .85, .175, 1), opacity .75s
107+
}
108+
109+
.mdx-expect__item:first-child {
110+
transition-delay:.2s
111+
}
112+
113+
.mdx-expect__item:nth-child(2) {
114+
transition-delay:275ms
115+
}
116+
117+
.mdx-expect__item:nth-child(3) {
118+
transition-delay:.35s
119+
}
120+
121+
.mdx-expect__item:nth-child(4) {
122+
transition-delay:425ms
123+
}
124+
125+
.mdx-expect__item:nth-child(5) {
126+
transition-delay:.5s
127+
}
128+
129+
.mdx-expect__item:nth-child(6) {
130+
transition-delay:575ms
131+
}
132+
133+
134+
.mdx-expect__icon {
135+
fill: currentcolor;
136+
background-color: var(--md-default-fg-color--lightest);
137+
border-radius: 100%;
138+
flex-shrink: 0;
139+
height: 2.2rem;
140+
padding: .4rem;
141+
width:2.2rem
142+
}
143+
144+
.mdx-expect__description > :last-child {
145+
margin-bottom:0
146+
}
147+
148+
@media screen and (max-width: 76.234375em) {
149+
.mdx-expect__description > :last-child {
150+
margin-left:-2.8rem
151+
}
152+
}

0 commit comments

Comments
 (0)