Custom Background & Warming message

__resource.lua

@@ -40,6 +40,10 @@ files {
 	'html/static/img/16.jpg',
 	'html/static/img/17.jpg',
 	'html/static/img/18.jpg',
+	'html/static/img/19.jpg',
+	'html/static/img/20.jpg',
+	'html/static/img/21.jpg',
+
 
 	'html/static/img/call.png',
 	'html/static/img/contacts.png',
@@ -51,6 +55,7 @@ files {
 }
 
 client_script {
+	"animation.lua",
 	"client.lua"
 }
 

animation.lua

@@ -0,0 +1,119 @@
+-- @author https://github.com/EmmanuelVlad/ephone
+
+local inAnim = "cellphone_text_in"
+local outAnim = "cellphone_text_out"
+local outInCallAnim = "cellphone_call_out"
+local callAnim = "cellphone_call_listen_base"
+local idleAnim = "cellphone_text_read_base"
+
+local phoneProp = 0
+local phoneModel = "prop_npc_phone_02"
+
+--------------------------------------------------------------------------------
+--
+--								FUNCTIONS
+--
+--------------------------------------------------------------------------------
+function newPhoneProp()
+	local x,y,z = table.unpack(GetEntityCoords(GetPlayerPed(-1), true))
+	RequestModel(phoneModel)
+	while not HasModelLoaded(phoneModel) do
+		Citizen.Wait(100)
+	end
+	return CreateObject(phoneModel, 1.0, 1.0, 1.0, 1, 1, 0)
+end
+
+function ePhoneInAnim()
+	if IsPlayerDead(PlayerId()) then
+		return
+	end
+	local bone = GetPedBoneIndex(GetPlayerPed(-1), 28422)
+	local dict = "cellphone@"
+	if IsPedInAnyVehicle(GetPlayerPed(-1), false) then
+		dict = dict .. "in_car@ds"
+	end
+
+	RequestAnimDict(dict)
+	while not HasAnimDictLoaded(dict) do
+		Citizen.Wait(100)
+	end
+
+	TaskPlayAnim(GetPlayerPed(-1), dict, inAnim, 4.0, -1, -1, 50, 0, false, false, false)
+	Citizen.Wait(157)
+	phoneProp = newPhoneProp()
+	AttachEntityToEntity(phoneProp, GetPlayerPed(-1), bone, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1, 0, 0, 2, 1)
+end
+
+-- function ePhoneIdleAnim()
+-- 	if IsPlayerDead(PlayerId()) then
+-- 		return
+-- 	end
+-- 	local dict = "cellphone@"
+-- 	if IsPedInAnyVehicle(GetPlayerPed(-1), false) then
+-- 		dict = dict .. "in_car@ds"
+-- 	end
+-- 	RequestAnimDict(dict)
+-- 	while not HasAnimDictLoaded(dict) do
+-- 		Citizen.Wait(100)
+-- 	end
+-- 	TaskPlayAnim(GetPlayerPed(-1), dict, idleAnim, 1.0, -1, -1, 50, 0, false, false, false)
+-- end
+
+function ePhoneOutAnim()
+	if IsPlayerDead(PlayerId()) then
+		return
+	end
+	local dict = "cellphone@"
+	if IsPedInAnyVehicle(GetPlayerPed(-1), false) then
+		dict = dict .. "in_car@ds"
+	end
+
+	RequestAnimDict(dict)
+	while not HasAnimDictLoaded(dict) do
+		Citizen.Wait(1)
+	end
+	if GetCurrentPedWeapon == 1 then
+		ClearPedSecondaryTask(GetPlayerPed(-1))
+		return
+	end
+	if inCall then
+		StopAnimTask(GetPlayerPed(-1), dict, callAnim, 1.0)
+		TaskPlayAnim(GetPlayerPed(-1), dict, outAnim, 5.0, -1, -1, 50, 0, false, false, false)
+		inCall = false
+	elseif not inCall then
+		StopAnimTask(GetPlayerPed(-1), dict, inAnim, 1.0)
+		TaskPlayAnim(GetPlayerPed(-1), dict, outAnim, 5.0, -1, -1, 50, 0, false, false, false)
+	end
+	Citizen.Wait(700)
+	DeleteEntity(phoneProp)
+	Citizen.Wait(500)
+	StopAnimTask(GetPlayerPed(-1), dict, outAnim, 1.0)
+end
+
+-- function ePhoneCallAnim()
+-- 	if IsPlayerDead(PlayerId()) then
+-- 		return
+-- 	end
+-- 	local dict = "cellphone@"
+
+-- 	RequestAnimDict(dict)
+-- 	while not HasAnimDictLoaded(dict) do
+-- 		Citizen.Wait(1)
+-- 	end
+-- 	StopAnimTask(GetPlayerPed(-1), "cellphone@", inAnim, 1.0)
+-- 	TaskPlayAnim(GetPlayerPed(-1), dict, callAnim, 3.0, -1, -1, 50, 0, false, false, false)
+-- end
+
+-- function ePhoneSelfieAnim()
+-- 	if IsPlayerDead(PlayerId()) then
+-- 		return
+-- 	end
+-- 	local dict = "cellphone@self"
+-- 	local anim = "selfie"
+
+-- 	RequestAnimDict(dict)
+-- 	while not HasAnimDictLoaded(dict) do
+-- 		Citizen.Wait(1)
+-- 	end
+-- 	TaskPlayAnim(GetPlayerPed(-1), dict, outAnim, 1.0, -1, -1, 49, 0, false, false, false)
+-- end

client.lua

@@ -74,6 +74,7 @@ RegisterNetEvent("gcPhone:receiveMessage")
 AddEventHandler("gcPhone:receiveMessage", function(message)
   table.insert(messages, message)
   SendNUIMessage({event = 'updateMessages', messages = messages})
+  Citizen.Trace('sendMessage: ' .. json.encode(messages))
   if message.owner == 0 then 
     SetNotificationTextEntry("STRING")
     AddTextComponentString('~o~Nouveau message')
@@ -244,12 +245,19 @@ end)
 function TooglePhone() 
   menuIsOpen = not menuIsOpen
   SendNUIMessage({show = menuIsOpen})
+  if menuIsOpen == true then 
+    Citizen.Trace('open')
+    ePhoneInAnim()
+  else
+    ePhoneOutAnim()
+  end
 end
 
+
 RegisterNUICallback('closePhone', function(data, cb)
-  Citizen.Trace('closePhone')
   menuIsOpen = false
   SendNUIMessage({show = false})
+  ePhoneOutAnim()
   cb()
 end)
 

src_htmlPhone/build/dev-server.js

@@ -60,8 +60,9 @@ app.use(hotMiddleware)
 
 // serve pure static assets
 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
 
+app.use(staticPath, express.static('./static'))
+app.use('/html/static/', express.static('./../html/static'))
 var uri = 'http://localhost:' + port
 
 var _resolve

src_htmlPhone/src/components/Home.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="home" v-bind:style="{background: 'url(' + backgroundImg +')'}">
+    <span class="warningMess" v-if="this.$root.messages.length >= 220">Saturation mémoires !<br>{{this.$root.messages.length}} / 250</span>
     <span class="time"><current-time></current-time></span>
     <div class='home_buttons'>
       <button v-for="(but, key) of buttons" 
@@ -40,10 +41,18 @@ export default {
         img: '/html/static/img/settings.png',
         urlPath: 'paramtre'
       }],
-      backgroundImg: '/html/static/img/' + (localStorage['background_img'] || 'back001.jpg'),
       currentSelect: 0
     }
   },
+  computed: {
+    backgroundImg: function () {
+      let backImg = localStorage['background_img'] || 'back001.jpg'
+      if (backImg.startsWith('http') === true) {
+        return backImg
+      }
+      return '/html/static/img/' + backImg
+    }
+  },
   watch: {
     '$root.messages': function () {
       this.buttons[1].puce = this.getNbNoReadMessage()
@@ -105,7 +114,20 @@ export default {
   align-content: center;
   justify-content: center;
 }
-
+.warningMess{
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  color: red;
+  text-align: center;
+  top: 150px;
+  font-size: 1.4em;
+  text-shadow: -1px 0 0 rgba(0,0,0, 0.8), 
+            1px 0 0 rgba(0,0,0, 0.8),
+            0 -1px 0 rgba(0,0,0, 0.8),
+            0 1px 0 rgba(0,0,0, 0.8);
+}
 .time{
   font-size: 48px;
   margin-top: 100px;

src_htmlPhone/src/components/parametre/Parametre.vue

@@ -33,7 +33,6 @@ export default {
         {icons: 'fa-picture-o', title: 'Font d\'écran', value: localStorage['background_display'] || 'Calvin & Hobbes', onValid: 'onChangeBackground', values: {
           'Calvin & Hobbes': 'back001.jpg',
           'Destiny': 'back002.jpg',
-          'Assassins\'s Creed': '18.jpg',
           'Guitare': '01.jpg',
           'Los Santos': '02.jpg',
           'Poursuite': '03.jpg',
@@ -50,7 +49,12 @@ export default {
           'Rose': '14.jpg',
           'Bleu': '15.jpg',
           'Noir': '16.jpg',
-          'Chocolat': '17.jpg'
+          'Chocolat': '17.jpg',
+          'Assassins\'s Creed': '18.jpg',
+          'Stalactite': '19.jpg',
+          'Origin': '20.jpg',
+          'Pacman': '21.jpg',
+          'Custom URL': 'URL'
         }},
         // eslint-disable-next-line
         {icons: 'fa-mobile', title: 'Coque telephone', value: localStorage['coque_display'] || 'Bleu', onValid: 'onChangeCoque', values: {
@@ -122,9 +126,18 @@ export default {
       }
     },
     onChangeBackground: function (param, data) {
-      localStorage['background_display'] = data.title
-      localStorage['background_img'] = data.value
-      param.value = data.title
+      let val = data.value
+      if (val === 'URL') {
+        request.getReponseText().then(valueText => {
+          localStorage['background_display'] = data.title
+          localStorage['background_img'] = valueText.text
+          param.value = valueText.text
+        })
+      } else {
+        localStorage['background_display'] = data.title
+        localStorage['background_img'] = data.value
+        param.value = data.title
+      }
     },
     onChangeCoque: function (param, data) {
       localStorage['coque_display'] = data.title

src_htmlPhone/src/request.js

@@ -41,7 +41,7 @@ export default {
     } else {
       let time = new Date().getTime()
       return Promise.resolve([
-        {id: 1, transmitter: '01', time: time - 160, message: 'Salut sa va ?!!!', isRead: true, owner: false},
+        {id: 1, transmitter: '01', receiver: '06', time: time - 160, message: 'Salut sa va ?!!!', isRead: true, owner: false},
         {id: 2, transmitter: '01', time, message: 'Tu fait quoi?', isRead: false, owner: false},
         {id: 0, transmitter: '01', time, message: 'Oui est toi ?', isRead: true, owner: true},
         {id: 1, transmitter: '01', time, message: 'GPS : 244 - 123', isRead: true, owner: false},
@@ -76,7 +76,7 @@ export default {
     if (process.env.NODE_ENV === 'production') {
       return post('reponseText', data || {})
     } else {
-      return Promise.resolve({text: 'Salut'})
+      return Promise.resolve({text: 'http://i.imgur.com/8nr0gw1.jpg'})
     }
   },