Eskimon/minimap.html

## minimap.html
<!-- Connect to the SOS directly without using the relay -->

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <style>
#app {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
#map {
  background-color: rgba(255, 255, 255, 0.1);
  position: relative;
  border: solid 1px black;
  width: 510px;
  height: 400px;
  border-radius: 80px;
  /* 1.26 ratio */
  /* border: 400 / 5 */
  transition: 100ms;
}

.goal {
  position: absolute;
  width: 10px;
  height: 96px;
}

.orange {
  top: calc(50% - 48px);
  right: -10px;
  background-color: #c57440;
}

.blue {
  top: calc(50% - 48px);
  left: -10px;
  background-color: #476cc8;
}

.ball {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: #cccccc;
  border: solid 1px black;
  border-radius: 50%;
}

.player {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: black;
  /* border: solid 1px black; */
  border-radius: 50%;
}

.boost {
  position: absolute;
  left: -5px;
  top: -5px;
  height: 2px;
}

.target {
  animation: 1s linear infinite blink;
}

@keyframes blink {
  0% { opacity: 1; }
  50%   { opacity: 0.3; }
  100%   { opacity: 1; }
}
  </style>
</head>

<body>

  <div id="app">
    <div id="map" v-if="payload">
      <div class="blue goal"></div>
      <div class="orange goal"></div>
      <div v-for="(player, idx) in payload.players" :idx="idx" :style="getPosition(idx)" :class="`player ${ idx === payload.game.target ? 'target' : ''}`">
        <div class="boost" :style="getBoost(idx)"></div>
      </div>
      <div class="ball" :style="getBallPosition()"></div>
    </div>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        ws: undefined,
        map: {
          width: 510,
          height: 400,
        },
        field: {
          width: 5100,
          height: 4000,
        },
        payload: undefined,
      },
      created() {
        this.ws = new WebSocket("ws://127.0.0.1:49122");
        this.ws.onmessage = (event) => {
          // console.log("message", event);
          let data = JSON.parse(event.data);
          if(data.event === 'game:update_state') {
            this.payload = data.data;
            for(let item in this.payload.players) {
              // console.log(this.payload.players[item].x, this.payload.players[item].y, this.payload.players[item].z);
            }
          }
        }

        this.ws.onopen = () => {
          console.log("ws open");
        }
        this.ws.onerror = () => {
          console.log("ws error");
        }
        this.ws.onclose = () => {
          console.log("ws close");
        }
      },
      methods: {
        getPosition(idx) {
          let pos_x = (this.payload.players[idx].y + this.field.width) * this.map.width / this.field.width / 2;
          let pos_y = (this.payload.players[idx].x + this.field.height) * this.map.height / this.field.height / 2;
          return {
            left: `${pos_x}px`,
            top: `${pos_y}px`,
            'background-color': this.payload.players[idx].team ? '#c57440' : '#476cc8',
          }
        },

        getBoost(idx) {
          let size = this.payload.players[idx].boost * 20 / 100;
          return {
            width: size,
            'background-color': this.payload.players[idx].team ? '#c57440' : '#476cc8',
          }
        },

        getBallPosition() {
          let pos_x = (this.payload.game.ballY + this.field.width) * this.map.width / this.field.width / 2;
          let pos_y = (this.payload.game.ballX + this.field.height) * this.map.height / this.field.height / 2;
          return {
            left: `${pos_x}px`,
            top: `${pos_y}px`,
          }
        }
      }
    });

  </script>
</body>

</html>
	<!-- Connect to the SOS directly without using the relay -->

	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<style>
	#app {
	display: flex;
	height: 100vh;
	justify-content: center;
	align-items: center;
	}
	#map {
	background-color: rgba(255, 255, 255, 0.1);
	position: relative;
	border: solid 1px black;
	width: 510px;
	height: 400px;
	border-radius: 80px;
	/* 1.26 ratio */
	/* border: 400 / 5 */
	transition: 100ms;
	}

	.goal {
	position: absolute;
	width: 10px;
	height: 96px;
	}

	.orange {
	top: calc(50% - 48px);
	right: -10px;
	background-color: #c57440;
	}

	.blue {
	top: calc(50% - 48px);
	left: -10px;
	background-color: #476cc8;
	}

	.ball {
	position: absolute;
	width: 14px;
	height: 14px;
	background-color: #cccccc;
	border: solid 1px black;
	border-radius: 50%;
	}

	.player {
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: black;
	/* border: solid 1px black; */
	border-radius: 50%;
	}

	.boost {
	position: absolute;
	left: -5px;
	top: -5px;
	height: 2px;
	}

	.target {
	animation: 1s linear infinite blink;
	}

	@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0.3; }
	100% { opacity: 1; }
	}
	</style>
	</head>

	<body>

	<div id="app">
	<div id="map" v-if="payload">
	<div class="blue goal"></div>
	<div class="orange goal"></div>
	<div v-for="(player, idx) in payload.players" :idx="idx" :style="getPosition(idx)" :class="`player ${ idx === payload.game.target ? 'target' : ''}`">
	<div class="boost" :style="getBoost(idx)"></div>
	</div>
	<div class="ball" :style="getBallPosition()"></div>
	</div>
	</div>

	<script>
	var app = new Vue({
	el: '#app',
	data: {
	ws: undefined,
	map: {
	width: 510,
	height: 400,
	},
	field: {
	width: 5100,
	height: 4000,
	},
	payload: undefined,
	},
	created() {
	this.ws = new WebSocket("ws://127.0.0.1:49122");
	this.ws.onmessage = (event) => {
	// console.log("message", event);
	let data = JSON.parse(event.data);
	if(data.event === 'game:update_state') {
	this.payload = data.data;
	for(let item in this.payload.players) {
	// console.log(this.payload.players[item].x, this.payload.players[item].y, this.payload.players[item].z);
	}
	}
	}

	this.ws.onopen = () => {
	console.log("ws open");
	}
	this.ws.onerror = () => {
	console.log("ws error");
	}
	this.ws.onclose = () => {
	console.log("ws close");
	}
	},
	methods: {
	getPosition(idx) {
	let pos_x = (this.payload.players[idx].y + this.field.width) * this.map.width / this.field.width / 2;
	let pos_y = (this.payload.players[idx].x + this.field.height) * this.map.height / this.field.height / 2;
	return {
	left: `${pos_x}px`,
	top: `${pos_y}px`,
	'background-color': this.payload.players[idx].team ? '#c57440' : '#476cc8',
	}
	},

	getBoost(idx) {
	let size = this.payload.players[idx].boost * 20 / 100;
	return {
	width: size,
	'background-color': this.payload.players[idx].team ? '#c57440' : '#476cc8',
	}
	},

	getBallPosition() {
	let pos_x = (this.payload.game.ballY + this.field.width) * this.map.width / this.field.width / 2;
	let pos_y = (this.payload.game.ballX + this.field.height) * this.map.height / this.field.height / 2;
	return {
	left: `${pos_x}px`,
	top: `${pos_y}px`,
	}
	}
	}
	});

	</script>
	</body>

	</html>