A simple but over-engineered StrikePractice web leaderboards written in Java using Vaadin Flow.
Warning: I'm not an expert
- Clone the repository with
git clone https://github.com/toppev/strike-web-leaderboards.git
- Type
mvn jetty:run
and head to http://localhost:8080 - Use
mvn clean package -Pproduction
for a production build
- Install apache tomcat
- Download the .war file from releases (or compile it)
- Create a
setenv.sh
(Windowssetenv.bat
) script inCATALINA_HOME/bin
orCATALINA_BASE/bin
and make it executable. This is where you can configure the variables. - Set the variables
- Set the environment variables directly in the script. For example,
- Linux:
export STRIKE_WEB_PASSWORD=mypass
- Windows
set STRIKE_WEB_PASSWORD=mypass
- Linux:
- Alternatively, you can add the Java properties in
CATALINA_OPTS
environment variable. For example,- Linux
export CATALINA_OPTS="$CATALINA_OPTS -Ddatabase.password=mysecretpassword69"
- Windows
set CATALINA_OPTS="%CATALINA_OPTS% -Ddatabase.password=mysecretpassword69"
- Linux
- Set the environment variables directly in the script. For example,
- Deploy the .war file
There are a few variables you can set as environment variables or as Java properties specified with a -D
. If both are set environment variables are preferred.
These variables are used to connect to the MySQL database.
Environment Variable | Java Property | Description |
---|---|---|
STRIKE_WEB_HOST |
-Ddatabase.host=localhost |
the host, by default localhost |
STRIKE_WEB_PORT |
-Ddatabase.port=3306 |
the port, by default 3306 |
STRIKE_WEB_DATABASE |
-Ddatabase.name=strikepractice |
the database name, by default 'strikepractice' |
STRIKE_WEB_USER |
-Ddatabase.user=someuser |
the user, 'root' by default, recommended to change it |
STRIKE_WEB_PASSWORD |
-Ddatabase.password=mypass |
the password, 'password123' by default, change it |
Unfortunately, there doesn't seem to be any very good way to embed a Vaadin Flow application on a website (correct if I'm wrong).
However, we can use iframes:
- Add this html but change the
src
to a proper url.
<div class="lb-container">
<iframe class="lb-iframe" src="http://localhost:8080/leaderboards"></iframe>
</div>
- Add this custom CSS to make it responsive.
.lb-container {
/* Position relative to the wrapping element */
position: relative;
overflow: hidden;
/* Handles the aspect ratio, you can try changing this */
padding-top: 200%;
}
.lb-iframe {
/* Let's this be position over the padding of the wrapper */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}