Negotiation Simulation Game

A browser-based game created with Phaser.js to simulate salary negotiations, teaching developers negotiation tactics.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Negotiation Simulation Game</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>
<style>
  body { margin: 0; }
  #game-container { width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="game-container"></div>
<script src="game.js"></script>
</body>
</html>

This is the HTML structure for the Negotiation Simulation Game. It includes the Phaser.js library and sets up a container for the game.

// game.js
var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: 'game-container',
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

var game = new Phaser.Game(config);

function preload() {
  this.load.image('background', 'assets/background.png');
}

function create() {
  this.add.image(400, 300, 'background');

  // Add additional game elements here
}

function update() {
  // Game logic updates here
}

This is the primary game JavaScript file that sets up the game configuration and Phaser game instance. It includes preload, create, and update functions.

// Inside the create function
let negotiationScene = this;
let salaryText = negotiationScene.add.text(400, 550, 'Salary: $50000', { font: '16px Arial', fill: '#ffffff' });
salaryText.setOrigin(0.5);

let negotiateButton = negotiationScene.add.text(400, 300, 'Negotiate', { font: '24px Arial', fill: '#ff0000' })
.setInteractive()
.on('pointerdown', () => {
  openNegotiationDialog(negotiationScene);
});

function openNegotiationDialog(scene) {
  // Logic to open negotiation dialog and handle user input
}

In the Phaser create function, this code adds interactive text to simulate a button for starting a negotiation and a text element to display the salary offer. It binds a click event to the negotiate button that triggers a negotiation dialog.

// CSS in <style> tag or external .css file
#negotiation-dialog {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  padding: 20px;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

This CSS sets the styles for the negotiation dialog box which will be displayed in front of the game when the negotiation interaction is triggered.