Risk prototype

by Richard Hunter

HTML

<!DOCTYPE html>

<html lang="en">

  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <meta charset="UTF-8">
    <?xml version="1.0" encoding="utf-8"?>
    <title>Simple Risk</title>
    <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
    <link rel="manifest" href="./icons/site.webmanifest">
    <link rel="mask-icon" href="./icons/safari-pinned-tab.svg" color="#000000">
    <link rel="shortcut icon" href="./icons/favicon.ico">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="msapplication-config" content="./icons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
  </head>

  <body class="noselect">
    <div id="wrapper">
      <div id="zone">
        <!-- Rounded switch -->
        <label class="switch">
          <input onchange="showNames()" type="checkbox">
          <span class="slider round"></span>
        </label>
      </div>

    </div>

    <!--SVG MAP -->
    <div>

      <svg width="100%" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 701 300" style="enable-background:new 0 0 701 300;" xml:space="preserve">

        <g onclick="changeColor(event)">
          <path class="st1" d="M308.6,112.3l-0.1,0.2l-0.1,0.2l-0.1-0.1h-0.1l-0.1-0.1l0.1-0.1h0.1l0.1-0.1l0.1-0.1L308.6,112.3L308.6,112.3z
		M313.4,111.6v0.2l0.1,0.1l-0.1,0.2v0.1l-0.1,0.1l-0.2,0.1l-0.1,0.1l-0.2-0.1l-0.2-0.2l-0.1-0.1v-0.2l0.2-0.1v-0.2v-0.1h0.2h0.1h0.1
	   L313.4,111.6z M309.9,111.8L309.9,111.8l-0.2-0.1l-0.1-0.1v-0.1v-0.1h0.1h0.1l0.2,0.1v0.1L309.9,111.8L309.9,111.8z M312,110.6
	   L312,110.6l-0.2,0.2l-0.1,0.2l-0.1,0.1v0.1l-0.1,0.2v0.1l-0.2,0.2v0.1h-0.1l-0.2,0.1l0,0v-0.1l-0.1-0.1v-0.1l-0.1-0.1v-0.1l-0.1-0.2
	  ...

CSS

.noselect { 
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
svg {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#names {
  display: none;
}
body {
  background-color: #3997BF;
}

	.st1{fill:#FFFFFF;stroke:#000000;stroke-linejoin:round;}
	.st2{fill:#FFFFFF;stroke:#000000;stroke-width:3.7838;stroke-linejoin:round;}
	.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
	.st4{fill:none;}
  .st5{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
	.st6{font-family:'MyriadPro-Regular';}
	.st7{font-size:6px;}
	.st8{font-size:4.279px;}
	.st9{font-size:4.5514px;}
	.st10{font-size:6.3159px;}
	.st11{font-size:4.3605px;}
	.st12{font-size:3.8381px;}
	.st13{font-size:4.482px;}
	.st14{font-size:4.8855px;}
	.st15{font-size:5.1746px;}
	.st16{font-size:3.7318px;}
	.st17{font-size:4.1667px;}
	.st18{font-size:3.3378px;}
	.st19{font-size:3.0545px;}
  .st20{font-size:4.0173px;}
  #names


#zone{
  height: 34px;
  width: 60px;
  float:left;
}

/* When mouse hovers region, changes color 
.st1:hover {
    fill: #DA4567;
  }
*/

/* Positioning saves button on the left corner */
.box {
  position: relative;

}

.buttonSaves {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #000000; /* black */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: 2px solid #000000;
  transition-duration: 0.4s;
  border-radius: 8px;
  text-align: center;
  line-height: 0;
}

.save {
  position: relative;
  background-color: #000000; /* black */
  border: none;
  color: white;
 ...

JavaScript

var clicks = 0;
var countryNames = document.getElementById("names");

save1.addEventListener('click', () => {
  save(0, clicks);
});

load1.addEventListener('click', () => {
  clicks = restore(0);
});

save2.addEventListener('click', () => {
  save(1, clicks);
});

load2.addEventListener('click', () => {
  clicks = restore(1);
});

save3.addEventListener('click', () => {
  save(2, clicks);
});

load3.addEventListener('click', () => {
  clicks = restore(2);
});

save4.addEventListener('click', () => {
  save(3, clicks);
});

load4.addEventListener('click', () => {
  clicks = restore(3);
});

function save(slotIndex, clicks) {
  let slots;

  try {
    slots = JSON.parse(window.localStorage.getItem('slots'));
  } catch (e) {
    console.error(e);
  }

  if (!slots) {
    slots = [0, 0, 0, 0];
  }

  slots[slotIndex] = clicks;

  window.localStorage.setItem('slots', JSON.stringify(slots));
}

function restore(slotIndex) {
	let slots = [];
  try {
    slots = JSON.parse(window.localStorage.getItem('slots'));
  } catch (e) {
    alert('no slots found in local storage');
  }

  return slots[slotIndex] || 0;
}

//Shows and hides country names
function showNames() {

  if (countryNames.style.display === "block") {
    countryNames.style.display = "none";
  } else {
    countryNames.style.display = "block";
  }
}

//Changes to color on 1st click
function changeColor(event) {
  clicks++

  if (clicks == 1) {
    event.target.style.fill = "#DA4567";
  }
  if (clicks == 2) {
    event.target.style.fill = "#7aeb34";
  }
  if (clicks == 3) {
    event.target.style.fill = "#ffe70a";
  }
  if (clicks == 4) {
    event.target.style.fill = "#ba0afa";
  }
  if (clicks == 5) {
    event.target.style.fill = "#FFFFFF";
    clicks = 0;
  }
}

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span =...