[Improvement] Compass Font Icons

[DakinQuelia]

Instead using font symbols I suggest to use the icon from Fonteawesome (or other font) :

In file "lib/_io.js" :

Replace :

document.write(settings.symbolsForCompass ? lang.exit_list[n].symbol : lang.exit_list[n].abbrev);

By :

document.write(settings.symbolsForCompass ? '<i class="fas ' + lang.exit_list[n].symbol + '"></i>' : lang.exit_list[n].abbrev);

In file "*page-.html**" :

Add in Head :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

Replace :

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    style-src 'unsafe-inline' 'self' https://fonts.googleapis.com https://ajax.googleapis.com;
    font-src 'self' https://fonts.gstatic.com;
    script-src 'unsafe-inline' 'self' https://ajax.googleapis.com https://html5shiv.googlecode.com;
    img-src 'self' https://ajax.googleapis.com;"
  >

By :

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    style-src 'unsafe-inline' 'self' https://fonts.googleapis.com https://ajax.googleapis.com https://cdnjs.cloudflare.com;
    font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com;
    script-src 'unsafe-inline' 'self' https://ajax.googleapis.com https://html5shiv.googlecode.com;
    img-src 'self' https://ajax.googleapis.com;"
  >

In file "game/style.css" :

Replace :

span.compass-button {
    cursor: pointer;
    text-align: center;
    width: 18px;
    display: block;
}

By :

span.compass-button {
    cursor: pointer;
    text-align: center;
    margin: auto;
    width: 18px;
    display: block;
}

In "lang/lang-en.js" (or other language) :

Replace :

exit_list:[
    {name:'northwest', abbrev:'NW', niceDir:"the northwest", type:'compass', key:103, x:-1 ,y:1, z:0, opp:'southeast', symbol:'🡬'}, 
    {name:'north', abbrev:'N', niceDir:"the north", type:'compass', key:104, x:0 ,y:1, z:0, opp:'south', symbol:'🡩'}, 
    {name:'northeast', abbrev:'NE', niceDir:"the northeast", type:'compass', key:105, x:1 ,y:1, z:0, opp:'southwest', symbol:'🡭'}, 
    {name:'in', abbrev:'In', alt:'enter|i', niceDir:"inside", type:'inout', key:111, opp:'out', symbol:'↴'}, 
    {name:'up', abbrev:'U', niceDir:"above", type:'vertical', key:109, x:0 ,y:0, z:1, opp:'down', symbol:'↥'},

    {name:'west', abbrev:'W', niceDir:"the west", type:'compass', key:100, x:-1 ,y:0, z:0, opp:'east', symbol:'🡨'}, 
    {name:'Look', abbrev:'Lk', type:'nocmd', key:101, symbol:'👁'}, 
    {name:'east', abbrev:'E', niceDir:"the east", type:'compass', key:102, x:1 ,y:0, z:0, opp:'west', symbol:'🡪'}, 
    {name:'out', abbrev:'Out', alt:'exit|o', niceDir:"outside", type:'inout', key:106,opp:'in', symbol:'↱'}, 
    {name:'down', abbrev:'Dn', alt:'d', niceDir:"below", type:'vertical', key:107, x:0 ,y:0, z:-1, opp:'up', symbol:'↧'}, 

    {name:'southwest', abbrev:'SW', niceDir:"the southwest", type:'compass', key:97, x:-1 ,y:-1, z:0, opp:'northeast', symbol:'🡯'}, 
    {name:'south', abbrev:'S', niceDir:"the south", type:'compass', key:98, x:0 ,y:-1, z:0, opp:'north', symbol:'🡫'}, 
    {name:'southeast', abbrev:'SE', niceDir:"the southeast", type:'compass', key:99, x:1 ,y:-1, z:0, opp:'northwest', symbol:'🡮'}, 
    {name:'Wait', abbrev:'Z', type:'nocmd', key:110, symbol:'⏸'}, 
    {name:'Help', abbrev:'?', type:'nocmd', symbol:'🛈'}, 
  ],

By :

exit_list:[
    {name:'northwest', abbrev:'NW', niceDir:"the northwest", type:'compass', key:103, x:-1 ,y:1, z:0, opp:'southeast', symbol:'🡬'}, 
    {name:'north', abbrev:'N', niceDir:"the north", type:'compass', key:104, x:0 ,y:1, z:0, opp:'south', symbol:'fa-arrow-up'}, 
    {name:'northeast', abbrev:'NE', niceDir:"the northeast", type:'compass', key:105, x:1 ,y:1, z:0, opp:'southwest', symbol:'🡭'}, 
    {name:'in', abbrev:'In', alt:'enter|i', niceDir:"inside", type:'inout', key:111, opp:'out', symbol:'fa-sign-in-alt'}, 
    {name:'up', abbrev:'U', niceDir:"above", type:'vertical', key:109, x:0 ,y:0, z:1, opp:'down', symbol:'fa-arrow-up'},

    {name:'west', abbrev:'W', niceDir:"the west", type:'compass', key:100, x:-1 ,y:0, z:0, opp:'east', symbol:'fa-arrow-left'}, 
    {name:'Look', abbrev:'L', type:'nocmd', key:101, symbol:'fa-eye'}, 
    {name:'east', abbrev:'E', niceDir:"the east", type:'compass', key:102, x:1 ,y:0, z:0, opp:'west', symbol:'fa-arrow-right'}, 
    {name:'out', abbrev:'Out', alt:'exit|o', niceDir:"outside", type:'inout', key:106,opp:'in', symbol:'fa-sign-out-alt'}, 
    {name:'down', abbrev:'Dn', alt:'d', niceDir:"below", type:'vertical', key:107, x:0 ,y:0, z:-1, opp:'up', symbol:'fa-arrow-down'}, 

    {name:'southwest', abbrev:'SW', niceDir:"the southwest", type:'compass', key:97, x:-1 ,y:-1, z:0, opp:'northeast', symbol:'🡯'}, 
    {name:'south', abbrev:'S', niceDir:"the south", type:'compass', key:98, x:0 ,y:-1, z:0, opp:'north', symbol:'fa-arrow-down'}, 
    {name:'southeast', abbrev:'SE', niceDir:"the southeast", type:'compass', key:99, x:1 ,y:-1, z:0, opp:'northwest', symbol:'🡮'}, 
    {name:'Wait', abbrev:'Z', type:'nocmd', key:110, symbol:'fa-pause'}, 
    {name:'Help', abbrev:'?', type:'nocmd', symbol:'fa-info'}, 
  ],

[DakinQuelia]

There are missing : 4 icons to north east / north west / south east / south west

[ThePix]

I saw the icons you used on the last issue, and was going to ask about. They do look cool.

But I cannot get it to work. I had to modify the CSP, which stops the error message, but I see no icons.

It does look like they can be rotated for the diagonals though. https://stackoverflow.com/questions/22747193/statically-rotate-font-awesome-icons

[DakinQuelia]

To works, it need : settings.symbolsForCompass to true.

It works like a charme in my project.

I look it. Thanks for link. :)

[DakinQuelia]

IMPORTANT : To display the font icons : it needs ADD the URL CDN in Meta Tag : Content-Security-Policy

In file "lib/_io.js" :

Replace :

document.write(settings.symbolsForCompass ? lang.exit_list[n].symbol : lang.exit_list[n].abbrev);

By :

document.write(settings.symbolsForCompass ? displayIconsCompass(lang.exit_list[n].name, lang.exit_list[n].symbol) : lang.exit_list[n].abbrev);

After "createPaneBox", ADD :

// Display Icons for compas
function displayIconsCompass(name, icon)
{
    let datatransform = "";

    switch(name)
    {
        case 'northeast' :
          datatransform = ' style="transform: rotate(40deg)"';
        break;

        case 'northwest':
          datatransform = ' style="transform: rotate(-40deg)"';
        break;

        case 'southeast':
          datatransform = ' style="transform: rotate(320deg)"';
        break;

        case 'southwest':
          datatransform = ' style="transform: rotate(-320deg)"';
        break;
    }

    return '<i class="fas ' + icon + '"' + datatransform + '></i>';
}

And new Exist List :

exit_list:[
    {name:'northwest', abbrev:'NW', niceDir:"the northwest", type:'compass', key:103, x:-1 ,y:1, z:0, opp:'southeast', symbol:'fa-arrow-up'}, 
    {name:'north', abbrev:'N', niceDir:"the north", type:'compass', key:104, x:0 ,y:1, z:0, opp:'south', symbol:'fa-arrow-up'}, 
    {name:'northeast', abbrev:'NE', niceDir:"the northeast", type:'compass', key:105, x:1 ,y:1, z:0, opp:'southwest', symbol:'fa-arrow-up'}, 
    {name:'in', abbrev:'In', alt:'enter|i', niceDir:"inside", type:'inout', key:111, opp:'out', symbol:'fa-sign-in-alt'}, 
    {name:'up', abbrev:'U', niceDir:"above", type:'vertical', key:109, x:0 ,y:0, z:1, opp:'down', symbol:'fa-arrow-up'},

    {name:'west', abbrev:'W', niceDir:"the west", type:'compass', key:100, x:-1 ,y:0, z:0, opp:'east', symbol:'fa-arrow-left'}, 
    {name:'Look', abbrev:'L', type:'nocmd', key:101, symbol:'fa-eye'}, 
    {name:'east', abbrev:'E', niceDir:"the east", type:'compass', key:102, x:1 ,y:0, z:0, opp:'west', symbol:'fa-arrow-right'}, 
    {name:'out', abbrev:'Out', alt:'exit|o', niceDir:"outside", type:'inout', key:106,opp:'in', symbol:'fa-sign-out-alt'}, 
    {name:'down', abbrev:'Dn', alt:'d', niceDir:"below", type:'vertical', key:107, x:0 ,y:0, z:-1, opp:'up', symbol:'fa-arrow-down'}, 

    {name:'southwest', abbrev:'SW', niceDir:"the southwest", type:'compass', key:97, x:-1 ,y:-1, z:0, opp:'northeast', symbol:'fa-arrow-down'}, 
    {name:'south', abbrev:'S', niceDir:"the south", type:'compass', key:98, x:0 ,y:-1, z:0, opp:'north', symbol:'fa-arrow-down'}, 
    {name:'southeast', abbrev:'SE', niceDir:"the southeast", type:'compass', key:99, x:1 ,y:-1, z:0, opp:'northwest', symbol:'fa-arrow-down'}, 
    {name:'Wait', abbrev:'Z', type:'nocmd', key:110, symbol:'fa-pause'}, 
    {name:'Help', abbrev:'?', type:'nocmd', symbol:'fa-info'}, 
  ],

[DakinQuelia]

[DakinQuelia]

I suggest add a "field" identifier (not editable) in language file. Example :

{ identifier: "help", name:'Help', abbrev:'?', type:'nocmd', symbol:'fa-info'}, 

It will work with any language because the displayIconsCompass will work with "Identifier field".

[ThePix]

I got the icons to work, and uploaded an update, thanks for that.

I tweaked it a little, so the rotate is in the exit data, so should be language-neutral.