Skip to content

Commit

Permalink
Improved mobile support
Browse files Browse the repository at this point in the history
  • Loading branch information
louve committed Dec 2, 2020
1 parent 212b71a commit 9b4da5c
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 24 deletions.
32 changes: 18 additions & 14 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@ function stringify_biome($biome, $contents){
<script type="text/javascript" src="res/scripts/hourglass.js?version=<?php echo rand();?>"></script>
<script type="text/javascript" src="res/scripts/communication.js?version=<?php echo rand();?>"></script>

<meta property="og:title" content="ADVNTURE">
<meta property="og:title" content="ADVNTURE [2]">
<meta property="og:description" content="Take part in the greatest of adventures: <br>Yours.">
<meta name="Description" content="Take part in the greatest of adventures: <br>Yours.<br>ADVNTURE is a game of free exploration and creation.<br>It has no restriction and is only made of what you, and other players, decide to pour into it.">
<meta property="og:image" content="/res/img/metapreview.jpg">
<meta name="google-site-verification" content="gT6MZWxw3_4XOJVslimPR2nWE8U3hLy-WDvtpW8sPTI" />

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@Rackover" />
<meta name="twitter:title" content="ADVNTURE" />
<meta name="twitter:title" content="ADVNTURE [2]" />
<meta name="twitter:description" content="Take part in the greatest of adventures: <br>Yours." />
<meta name="twitter:image" content="https://advnture.louve.systems/res/img/metapreview.jpg" />
<meta name="twitter:image:alt" content="Wilderness. Adventure." />
Expand All @@ -54,7 +54,7 @@ function stringify_biome($biome, $contents){
<div id="mainContainer">
<div id="title">
<h1>
<span style='color:grey;'>LOUVESYSTEMS'</span> <b>ADVNTURE</b> <span style='color:grey;'>V2.0.0<span style="float:right;" id="dimensionInfo"></span>
<span style='color:grey;'><a style="color:inherit; text-decoration:inherit;" href='https://louve.systems/'>LOUVESYSTEMS</a>'</span> <b>ADVNTURE</b> <span style='color:grey;'>V2.0.0<span style="float:right;" id="dimensionInfo"></span>
</h1>
</div>
<div class="terminal">
Expand Down Expand Up @@ -89,7 +89,6 @@ function stringify_biome($biome, $contents){
<li>- Insert two line breaks when you're <b>done</b> telling</li>
<li>- The first line you write will be the <b>title</b></li>
<li>- If you write only one line, this shall not be a place, but a dead end.</li>
<li>- You can also name your place exactly like another existing location to create a <b>shortcut</b>.</li>
</ul>
</p>
</div>
Expand All @@ -99,31 +98,36 @@ function stringify_biome($biome, $contents){
<ul style="list-style: none">
<li>- Add props by saying "<span class="notice"><b>There is </b>1 something</span>" or "<span class="notice"><b>There are</b> X somethings</span>"</li>
<li>- Inflict damage or heal the player by saying "<span class="notice"><b>You gain X healthpoints</b></span>" or "<span class="notice"><b>You lose X healthpoints</b></span>"</li>
<li>- Don't forget to supply an environment by adding <span class="notice"><b>(Environment)</b></span> after your title, for example: "<b>My place (Forest)</b>". Available environments are:<br><?php echo "(".implode("), (", $biome_help_list).")"; ?></li>
<li id="biomeTip">- Don't forget to supply an environment by adding <span class="notice"><b>(Environment)</b></span> after your title, for example: "<b>My place (Forest)</b>". Available environments are:<br><?php echo "(".implode("), (", $biome_help_list).")"; ?></li>
</ul>
</div>

<div id="objectActionTips" style="display:none">
Since this place will be accessed by using an object, you can either<br>
<ul style="list-style: none">
<li>Give this place a <b>new name</b> (and it will become an entirely new place that the user will be teleported to)</li>
<li>Or name it <u>exactly</u> like the <b>place you used the object in</b>, and the user will not be moved - they will remain at the same location, but the place will be in a different <i>state</i>
</ul>
<div id="objectActionLongTip">
Since this place will be accessed by using an object, you can either<br>
<ul style="list-style: none">
<li>Give this place a <b>new name</b> (and it will become an entirely new place that the user will be teleported to)</li>
<li>Or name it <u>exactly</u> like the <b>place you used the object in</b>, and the user will not be moved - they will remain at the same location, but the place will be in a different <i>state</i>
</ul>
</div>
<div id="objectActionShortTip">
(You can also name this new place like the previous one to create it a different <b>state</b> of the same place)
</div>
</div>

<div id="help" style="display:none;">
List of commands for ADVNTURE:<br>
<ul style="list-style: none">
<li>- <b>BRIEF</b>: Describes your current location.</li>
<li style="color:cyan">- <b>SOUTH, NORTH, EAST, WEST</b>: Moves you to another location from where you currently are.</li>
<li style="color:white">- <b>SOUTH, NORTH, EAST, WEST</b>: Moves you around<span class="extendedHelp"> to another location from where you currently are</span>.</li>
<li style="color:yellow">- <b>TAKE &lt;object&gt;</b>: Takes an object and adds it to your inventory.</li>
<li>- <b>LOSE &lt;object&gt;</b>: Removes an object from your inventory and puts it back where you took it.</li>
<li style="color:yellow">- <b>USE &lt;object&gt;</b>: Uses an object at your current location.</li>
<li>- <b>INVENTORY</b>: Tells you what objects you currently have.</li>
<li>- <b>STATUS</b>: Tells you how you currently feel.</li>
<li>- <b>MAP</b>: Draw a map of your surroundings, as you've explored them</li>
<li class="extendedHelp">- <b>STATUS</b>: Tells you how you currently feel.</li>
<li class="extendedHelp">- <b>MAP</b>: Draw a map of your surroundings, as you've explored them</li>
</ul>
<ul style="list-style: none; color:grey;">
<ul style="list-style: none; color:grey;" class="extendedHelp">
<li>- <b>REGIONS</b>: List the available regions to explore</li>
<li>- <b>WARP &lt;region&gt;</b>: Teleport you to another region</li>
<li>- <b>CLEAR</b>: Clears the console.</li>
Expand Down
2 changes: 1 addition & 1 deletion map.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function get_html_characters_map($db, $player, $radius=3){
$statement = $db->prepare($query);
$final_str = "";

for ($y = $arr_position[1] - $radius; $y <= $arr_position[1] + $radius; $y++){
for ($y = $arr_position[1] + $radius; $y >= $arr_position[1] - $radius; $y--){

for ($x = $arr_position[0] - $radius; $x <= $arr_position[0] + $radius; $x++){

Expand Down
3 changes: 2 additions & 1 deletion res/scripts/communication.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -701,7 +701,7 @@ function parsePage(page){
function updateDimensionText(name, count, explored){
dimensionName = name;
pageCount = count;
document.getElementById("dimensionInfo").textContent = "Currently exploring region "+name+" ("+count+" places - "+Math.ceil(explored*100)+"% explored)";
document.getElementById("dimensionInfo").textContent = "Currently exploring region "+name+" ("+count+" places - "+(isNaN(explored) ? 0 : Math.ceil(explored*100))+"% explored)";
}

function formatHPEventLine(value){
Expand All @@ -721,6 +721,7 @@ function isVowel(c) {
function showEditor(action, place){
isInEditor = true;
isObjectAction = action.split(" ")[0].toUpperCase() == "USE";

return document.getElementById("editorNotice").innerHTML.replace("%action", action);
}

Expand Down
19 changes: 11 additions & 8 deletions res/scripts/hourglass.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const BASE_CHARACTER = " ";
const ITEM_COLOR = "#ffff00";
const UNK_COLOR = "#d9d9d9";
const ITEM_CHARACTER = "♦";
const BORDER_ELEMENTS = "┌─┐│┘└";

function getUpdatedHourglass(places){
const borders = makeBorders();
Expand All @@ -59,7 +60,7 @@ function getEditorHourglass(){
const mid = Math.floor(borders.length/2);

borders[mid-2] = offset+"│▒▒▒▒▒▒▒▒▒│";
borders[mid] = offset+"│EDIT MODE│";
borders[mid] = offset + "│EDIT MODE│";
borders[mid+2] = offset+"│▒▒▒▒▒▒▒▒▒│";

return "\n\n\n"+borders.join("\n");
Expand All @@ -77,7 +78,8 @@ function makeBorders(){

function makeMap(borders, places){

let splitted = borders;
let splitted = borders;

const northHasWest = places.north?.name?.length > places.north?.name?.length;
const southHasWest = places.south?.name?.length > places.west?.name?.length;
const northHasEast = places.north?.name?.length > places.east?.name?.length;
Expand Down Expand Up @@ -184,8 +186,9 @@ function drawEntities(map, places){
map[yMidPoint][xMidPoint] = "<span style='color:white;'>☺</span>";

for(let i = 0; i < places.here.items; i++){
const y = yMidPoint + (randomBool(hashCode(places.here.name)+i) ? -1 : 1);
const x = xMidPoint + (randomBool((hashCode(places.here.name)+i)^2) ? -1 : 1);
const y = yMidPoint + (randomBool(hashCode(places.here.name) + i*4231) ? -1 : 1);
const x = xMidPoint + (randomBool(hashCode(places.here.name) + i*1234) ? -1 : 1);
console.log("Item at "+y+" "+x);
map[y][x] = "<span style='color:"+ITEM_COLOR+";'>"+ITEM_CHARACTER+"</span>";
}

Expand Down Expand Up @@ -217,13 +220,13 @@ function addLabels(map, places){
if (i > mapHeight/2-1){
const midPoint = Math.floor(mapHeight/2);
if (i === midPoint){
newMap.push(" ".repeat(MAX_NAME_WIDTH - elipsedLeftLines[0].length) + elipsedLeftLines[0] + " ◄- W " + splitMap[i].join("") + " E -► " + elipsedRightLines[0]);
newMap.push(" ".repeat(MAX_NAME_WIDTH - elipsedLeftLines[0].trim("\n").length) + elipsedLeftLines[0].trim("\n") + " ◄- W " + splitMap[i].join("") + " E -► " + elipsedRightLines[0].trim("\n"));
}
else{
const rightLine = elipsedRightLines[i-midPoint] == undefined ? "" : elipsedRightLines[i-midPoint];
const rightLine = elipsedRightLines[i-midPoint] == undefined ? "" : elipsedRightLines[i-midPoint].trim("\n");

if (elipsedLeftLines[i-midPoint] != undefined){
newMap.push(" ".repeat(MAX_NAME_WIDTH - elipsedLeftLines[i-midPoint].length) + elipsedLeftLines[i-midPoint] + " ".repeat(6) + splitMap[i].join("") + " ".repeat(6) + rightLine);
newMap.push(" ".repeat(MAX_NAME_WIDTH - elipsedLeftLines[i-midPoint].trim("\n").length) + elipsedLeftLines[i-midPoint].trim("\n") + " ".repeat(6) + splitMap[i].join("") + " ".repeat(6) + rightLine);
}
else{
newMap.push(" ".repeat(leftOffset) + splitMap[i].join(""));
Expand All @@ -249,7 +252,7 @@ function ellipsis (input, lngth) {
function getPlaceString(biomeChar, placeName){
let str = "";
for (let i = 0; i < 50; i++){
str += randomBool(hashCode(placeName)^(i+1) * (i+1)) ? BASE_CHARACTER : biomeChar[(hashCode(placeName[0])+i^2)%biomeChar.length];
str += randomBool(hashCode(placeName)**(i+1) * (i+1)) ? BASE_CHARACTER : biomeChar[(hashCode(placeName[0])+i^2)%biomeChar.length];
//str += biomeChar;
}
return str;
Expand Down
22 changes: 22 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,35 @@ pre#minimap{
padding:20px;
}

#objectActionShortTip{
display:none;
}
#objectActionLongTip{
display:block;
}

@media screen and (orientation:portrait) {
body{
font-size:2em;
}
pre#minimap{
display:none;
}
#input, .history{
max-width:100%;
}
#biomeTip{
display:none;
}
#objectActionShortTip{
display:block;
}
#objectActionLongTip{
display:none;
}
.extendedHelp{
display:none;
}
}

@media (max-aspect-ratio: 16/10) or (max-width: 600px) {
Expand Down

0 comments on commit 9b4da5c

Please sign in to comment.